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

2023-06-10 12:24:16 +02:00 · 2023-06-10 12:24:16 +02:00 · fe29563024
parent 3d81ecb6cc
commit fe29563024
5 changed files with 254 additions and 62 deletions
--- a/src/components/Greeting.astro
+++ b/src/components/Greeting.astro
@ -1,6 +1,11 @@
 ---
-const messages = ['Hi', 'Hello', 'Howdy', 'Hey there']
-const randomMessage = messages[Math.floor(Math.random() * messages.length)]
+const messages = ['Hi', 'Hello', 'Hey', 'Welcome', 'Ciao'];
+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>
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@ -1,23 +1,33 @@
 ---
-import HeaderLink from './HeaderLink.astro'
-import ThemeIcon from './ThemeIcon.astro'
-import Logo from './Logo.astro'
+import HeaderLink from './HeaderLink.astro';
+import ThemeIcon from './ThemeIcon.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://github.com/withastro/astro" target="_blank">GitHub</HeaderLink>
+      <HeaderLink href="https://twitter.com/astrodotbuild" target="_blank" rel="noopener noreferrer">Twitter</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 {
+    align-items: center;
+  }

-  @media (max-width: 767px) {
-    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-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>
--- a/src/components/HeaderLink.astro
+++ b/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 isActive = href === pathname || href === pathname.replace(/\/$/, '')
+const { pathname } = Astro.url;
+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>
--- a/src/components/IconsTech.astro
+++ b/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;
--- a/src/styles/global.css
+++ b/src/styles/global.css
@ -46,6 +46,16 @@

 body {
    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,
@ -70,3 +80,17 @@ samp {
 a:focus {
    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;
+}