feat: add header nav mobile, header styles, greetings with emoji

src/components/Greeting.astro

@@ -1,6 +1,11 @@
 ---
-const messages = ['Hi', 'Hello', 'Howdy', 'Hey there']
+const messages = ['Hi', 'Hello', 'Hey', 'Welcome', 'Ciao'];
-const randomMessage = messages[Math.floor(Math.random() * messages.length)]
+const emojis = ['🍻', '🧑‍💻', '👋', '🤪', '😎'];
+const randomMessage = messages[Math.floor(Math.random() * messages.length)];
+const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
 ---
 
-<h1>{randomMessage}!</h1>
+<h1>
+  {randomMessage}!
+  <span role="presentation">{randomEmoji}</span>
+</h1>

src/components/Header.astro

@@ -1,23 +1,33 @@
 ---
-import HeaderLink from './HeaderLink.astro'
+import HeaderLink from './HeaderLink.astro';
-import ThemeIcon from './ThemeIcon.astro'
+import ThemeIcon from './ThemeIcon.astro';
-import Logo from './Logo.astro'
+import Logo from './Logo.astro';
 ---
 
 <header class="container">
   <nav id="navigation">
-    <ul>
+    <ul class="logo-container">
       <HeaderLink href="/" title="Home">
         <Logo />
       </HeaderLink>
     </ul>
+    <button class="mobile-icon-button hamburger" title="Open navigation">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+    </button>
+    <button class="mobile-icon-button close" title="Close navigation">
+      <span class="line line-ltr"></span>
+      <span class="line line-rtl"></span>
+    </button>
+    <div class="menu-backdrop"></div>
     <ul class="menu">
       <HeaderLink href="/blog">Blog</HeaderLink>
       <HeaderLink href="/about">About</HeaderLink>
-      <HeaderLink href="https://twitter.com/astrodotbuild" target="_blank">Twitter</HeaderLink>
+      <HeaderLink href="https://twitter.com/astrodotbuild" target="_blank" rel="noopener noreferrer">Twitter</HeaderLink>
-      <HeaderLink href="https://github.com/withastro/astro" target="_blank">GitHub</HeaderLink>
+      <HeaderLink href="https://github.com/nzambello" target="_blank" rel="noopener noreferrer">GitHub</HeaderLink>
     </ul>
-    <ul>
+    <ul class="theme-button-container">
       <li>
         <ThemeIcon />
       </li>
@@ -31,15 +41,154 @@ import Logo from './Logo.astro'
     margin-bottom: 2rem;
     margin-top: 1rem;
   }
-
+  nav {
-  @media (max-width: 767px) {
+    align-items: center;
-    nav ul.menu {
-      display: none;
-    }
   }
+
+  nav ul.logo-container {
+    flex: 1;
+    flex-shrink: 0;
+    order: 0;
+  }
+
   nav ul.menu {
     flex-grow: 1;
     flex-shrink: 0;
-    justify-content: flex-end;
+    justify-content: flex-start;
+    flex-direction: column;
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: 80vw;
+    height: 100vh;
+    order: 2;
+    z-index: 10;
+    background: var(--secondary);
+    max-width: 0;
+    overflow: hidden;
+    font-size: 1.3em;
+    transition: all 0.3s ease, padding 0.2s ease-out;
+  }
+
+  nav ul.menu li a {
+    color: var(--secondary-inverse);
+  }
+
+  nav ul.theme-button-container li {
+    padding: 0;
+    order: 1;
+  }
+
+  .mobile-icon-button {
+    padding: 10px;
+    cursor: pointer;
+    width: 60px;
+    margin: 0;
+    flex-grow: 0;
+    height: 49px;
+    background: none;
+    border-color: transparent;
+    order: 2;
+  }
+
+  .mobile-icon-button:focus,
+  .mobile-icon-button:focus-within {
+    border-color: var(--primary);
+  }
+
+  .mobile-icon-button.hamburger .line {
+    display: block;
+    width: 40px;
+    height: 3px;
+    margin-bottom: 10px;
+    background-color: var(--text-color);
+  }
+
+  ul.menu:focus,
+  ul.menu:focus-within,
+  .mobile-icon-button.hamburger:focus ~ ul.menu,
+  .mobile-icon-button.hamburger:focus-within ~ ul.menu {
+    display: flex;
+    max-width: 100vw;
+    padding: 3rem 1rem;
+  }
+
+  .menu-backdrop {
+    display: none;
+  }
+
+  .mobile-icon-button.hamburger:focus ~ .menu-backdrop,
+  .mobile-icon-button.hamburger:focus-within ~ .menu-backdrop {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    backdrop-filter: blur(10px);
+    z-index: 1;
+    background: rgba(0, 0, 0, 0.2);
+  }
+
+  .mobile-icon-button.close {
+    display: none;
+    position: fixed;
+    right: calc(80vw + 0.5rem);
+    top: 0.5rem;
+    z-index: 10;
+  }
+
+  .mobile-icon-button.hamburger:focus ~ .mobile-icon-button.close,
+  .mobile-icon-button.hamburger:focus-within ~ .mobile-icon-button.close {
+    display: inline-block;
+  }
+
+  .mobile-icon-button.close .line {
+    display: block;
+    width: 40px;
+    height: 5px;
+    background-color: var(--secondary-inverse);
+    position: relative;
+  }
+  .mobile-icon-button.close .line.line-ltr {
+    transform: rotate(45deg);
+    top: 2.5px;
+  }
+  .mobile-icon-button.close .line.line-rtl {
+    transform: rotate(-45deg);
+    top: -2.5px;
+  }
+
+  @media (min-width: 768px) {
+    .mobile-icon-button {
+      display: none;
+    }
+    nav ul.logo-container {
+      flex-grow: 0;
+      flex-shrink: initial;
+    }
+    nav ul.menu {
+      display: flex;
+      flex-grow: 1;
+      flex-shrink: 1;
+      order: 1;
+      flex-direction: row;
+      height: auto;
+      position: static;
+      justify-content: flex-end;
+      width: auto;
+      max-width: none;
+      background: none;
+      font-size: inherit;
+      padding: 0;
+    }
+    ul.menu:focus,
+    ul.menu:focus-within {
+      padding: 0;
+      max-width: none;
+    }
+    nav ul.theme-button-container {
+      order: 2;
+    }
   }
 </style>

src/components/HeaderLink.astro

@@ -1,12 +1,12 @@
 ---
-import type { HTMLAttributes } from 'astro/types'
+import type { HTMLAttributes } from 'astro/types';
 
-type Props = HTMLAttributes<'a'>
+type Props = HTMLAttributes<'a'>;
 
-const { href, class: className, ...props } = Astro.props
+const { href, class: className, ...props } = Astro.props;
 
-const { pathname } = Astro.url
+const { pathname } = Astro.url;
-const isActive = href === pathname || href === pathname.replace(/\/$/, '')
+const isActive = href === pathname || href === pathname.replace(/\/$/, '');
 ---
 
 <li>
@@ -15,12 +15,22 @@ const isActive = href === pathname || href === pathname.replace(/\/$/, '')
   </a>
 </li>
 <style>
-  a {
+  li a {
     display: inline-block;
     text-decoration: none;
+    --color: var(--secondary-inverse);
+    color: var(--color);
   }
-  a.active {
+
+  li a.active {
     font-weight: bolder;
     text-decoration: underline;
   }
+
+  @media (min-width: 768px) {
+    li a {
+      --color: var(--primary);
+      color: var(--color);
+    }
+  }
 </style>

src/components/IconsTech.astro

@@ -85,7 +85,11 @@
     width: 3.75rem;
     height: 3.75rem;
     color: var(--text-color);
-    opacity: 0.25;
+    opacity: 0.5;
+  }
+  .icons-tech svg:hover,
+  .icons-tech svg:focus {
+    opacity: 1;
   }
   .icons-tech figure {
     text-align: center;

src/styles/global.css

@@ -2,71 +2,95 @@
 /* Can be forced with data-theme="light" */
 [data-theme="light"],
 :root:not([data-theme="dark"]) {
-	--primary: #007db9;
+    --primary: #007db9;
-	--primary-hover: #026ea0;
+    --primary-hover: #026ea0;
-	--primary-focus: rgb(0, 125, 185, 0.25);
+    --primary-focus: rgb(0, 125, 185, 0.25);
-	--primary-inverse: #FFF;
+    --primary-inverse: #FFF;
-	--text-color: hsl(205, 20%, 32%);
+    --text-color: hsl(205, 20%, 32%);
 }
 
 /* Amber Dark scheme (Auto) */
 /* Automatically enabled if user has Dark mode enabled */
 @media only screen and (prefers-color-scheme: dark) {
-	:root:not([data-theme]) {
+    :root:not([data-theme]) {
-		--primary: #ffb300;
+        --primary: #ffb300;
-		--primary-hover: #ffc107;
+        --primary-hover: #ffc107;
-		--primary-focus: rgba(255, 179, 0, 0.25);
+        --primary-focus: rgba(255, 179, 0, 0.25);
-		--primary-inverse: rgba(0, 0, 0, 0.75);
+        --primary-inverse: rgba(0, 0, 0, 0.75);
-		--background-color: #212222;
+        --background-color: #212222;
-		--text-color: hsl(205, 16%, 77%);
+        --text-color: hsl(205, 16%, 77%);
-	}
+    }
 }
 
 /* Amber Dark scheme (Forced) */
 /* Enabled if forced with data-theme="dark" */
 [data-theme="dark"] {
-	--primary: #ffb300;
+    --primary: #ffb300;
-	--primary-hover: #ffc107;
+    --primary-hover: #ffc107;
-	--primary-focus: rgba(255, 179, 0, 0.25);
+    --primary-focus: rgba(255, 179, 0, 0.25);
-	--primary-inverse: rgba(0, 0, 0, 0.75);
+    --primary-inverse: rgba(0, 0, 0, 0.75);
-	--background-color: #212222;
+    --background-color: #212222;
-	--text-color: hsl(205, 16%, 77%);
+    --text-color: hsl(205, 16%, 77%);
 }
 
 /* Amber (Common styles) */
 :root {
-	--form-element-active-border-color: var(--primary);
+    --form-element-active-border-color: var(--primary);
-	--form-element-focus-color: var(--primary-focus);
+    --form-element-focus-color: var(--primary-focus);
-	--switch-color: var(--primary-inverse);
+    --switch-color: var(--primary-inverse);
-	--switch-checked-background-color: var(--primary);
+    --switch-checked-background-color: var(--primary);
-	--font-family: 'Ubuntu', system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
+    --font-family: 'Ubuntu', system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
-		"Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+        "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-		"Segoe UI Symbol", "Noto Color Emoji";
+        "Segoe UI Symbol", "Noto Color Emoji";
 }
 
 body {
-	font-family: 'Ubuntu', sans-serif;
+    font-family: 'Ubuntu', sans-serif;
+    font-display: swap;
+}
+
+::-moz-selection,
+::selection {
+    border-width: 20px;
+    border-style: solid;
+    background-color: var(--primary);
+    border-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgdmlld0JveD0iMCAwIDYwIDYwIj4KICA8ZyBmaWxsPSIjMUZCRUVGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii45NSI+CiAgICA8cGF0aCBkPSJNMTAgNjBDNC40NzcxNTI1IDYwIDAgNTUuNTI0MDYxOCAwIDUwIDMuNTUyNzEzNjhlLTE1IDQ0LjQ3NzE1MjUgNC40NzU5MzgxOCA0MCAxMCA0MEwyMCA0MCAyMCA1MEMyMCA1NS41MjI4NDc1IDE1LjUyNDA2MTggNjAgMTAgNjB6TTQwIDUwQzQwIDU1LjUyMjg0NzUgNDQuNDc1OTM4MiA2MCA1MCA2MEw1MCA2MEM1NS41MjI4NDc1IDYwIDYwIDU1LjUyNDA2MTggNjAgNTBMNjAgNTBDNjAgNDQuNDc3MTUyNSA1NS41MjQwNjE4IDQwIDUwIDQwTDQwIDQwIDQwIDUwIDQwIDUweiIvPgogIDwvZz4KPC9zdmc+Cg==') 20 fill repeat;
+    color: var(--primary-inverse);
 }
 
 pre,
 code,
 kbd,
 samp {
-	--font-family: 'Ubuntu Mono', "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace",
+    --font-family: 'Ubuntu Mono', "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace",
-		"Noto Mono", "Oxygen Mono", "Liberation Mono", monospace,
+        "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace,
-		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-	--code-color: var(--text-color);
+    --code-color: var(--text-color);
 }
 
 .skip-link {
-	padding: 5px 10px;
+    padding: 5px 10px;
-	position: absolute;
+    position: absolute;
-	top: 0;
+    top: 0;
-	left: 0;
+    left: 0;
-	transform: translateY(-100%);
+    transform: translateY(-100%);
-	transition: transform 0.3s;
+    transition: transform 0.3s;
 }
 
 a:focus {
-	transform: translateY(0%);
+    transform: translateY(0%);
+}
+
+.sr-only {
+    position: absolute !important;
+    overflow: hidden !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    border: 0 !important;
+    margin: -1px !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    -webkit-clip-path: inset(50%) !important;
+    clip-path: inset(50%) !important;
+    white-space: nowrap !important;
 }