Small design improvements

src/components/Footer.astro

@@ -1,5 +1,6 @@
 ---
 import '../styles/global.css'
+import Icon from '../components/Icon.astro'
 
 import { SITE_NAME } from '../config.js'
 
@@ -12,20 +13,39 @@ const yearString =
 ---
 
 <footer>
-    <span>{SITE_NAME} &copy; {yearString}</span>
-    <span>Licensed under the MIT License</span>
+    <div>
+        <span>{SITE_NAME} &copy; {yearString}</span>
+        <span>Licensed under the MIT License</span>
+    </div>
+    <ul>
+        <li><a href="about.html" title="About"><Icon icon="info" /></a></li>
+        <li>
+            <a href="contact.html" title="Contact us">
+                <Icon icon="mail" />
+            </a>
+        </li>
+    </ul>
 </footer>
 
 <style>
     footer {
-        align-self: center;
+        flex-direction: column;
+    }
+
+    footer > div {
         display: flex;
         gap: var(--spacing-small);
         text-align: center;
     }
 
+    footer > ul {
+        display: flex;
+        gap: var(--spacing-medium);
+        justify-content: center;
+    }
+
     @media screen and (width<=850px) {
-        footer {
+        footer > div {
             flex-direction: column;
             font-size: 1rem;
             gap: 0;

src/components/Header.astro

@@ -5,7 +5,7 @@ import Icon from '../components/Icon.astro'
 const { title } = Astro.props
 ---
 
-<header>
+<header class="show">
     <a href="index.html" title="Home">
         <Icon icon="home" />
         <h1>{title}</h1>
@@ -17,13 +17,7 @@ const { title } = Astro.props
                     <Icon icon="admin" />
                 </a>
             </li>
-            <li><a href="about.html" title="About"><Icon icon="info" /></a></li>
-            <li>
-                <a href="contact.html" title="Contact us">
-                    <Icon icon="mail" />
-                </a>
-            </li>
-            <li>
+            <li id="header-cart">
                 <a href="cart.html" title="Your cart">
                     <Icon icon="shopping-cart" />
                     <span id="item-count"></span>
@@ -47,8 +41,20 @@ const { title } = Astro.props
         );
         display: flex;
         justify-content: space-between;
+        position: fixed;
+        transition: transform 0.5s ease-in-out;
         white-space: nowrap;
         width: 100%;
+        z-index: 1;
+    }
+
+    header.hide {
+        transform: translateY(-100%);
+    }
+
+    header.show {
+        transform: translateY(0);
+        background-color: var(--color-primary);
     }
 
     header > a {
@@ -88,7 +94,9 @@ const { title } = Astro.props
 </style>
 
 <script type="module" is:inline>
-    function showAdminLink() {
+    const header = document.querySelector('header')
+
+    const showAdminLink = () => {
         if (
             document.cookie.includes('loggedIn=true') &&
             document.cookie.includes('isAdmin=true')
@@ -97,9 +105,19 @@ const { title } = Astro.props
         }
     }
 
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', showAdminLink)
-    } else {
-        showAdminLink()
-    }
+    document.readyState === 'loading'
+        ? document.addEventListener('DOMContentLoaded', showAdminLink)
+        : showAdminLink()
+
+    let lastScroll = 0
+
+    window.addEventListener('scroll', () => {
+        const current = window.scrollY
+        const scrollingDown = current > lastScroll
+
+        header.classList.toggle('hide', scrollingDown && current > 0)
+        header.classList.toggle('show', !scrollingDown || current <= 0)
+
+        lastScroll = Math.max(current, 0)
+    })
 </script>

src/components/ProductCard.astro

@@ -114,6 +114,8 @@ const { product_name } = Astro.props
 </style>
 
 <script type="module" is:inline>
+    const header = document.querySelector('header')
+
     if (!window.cartButtonScriptLoaded) {
         window.cartButtonScriptLoaded = true
 
@@ -123,15 +125,20 @@ const { product_name } = Astro.props
             document.addEventListener('click', (event) => {
                 const cartButton = event.target.closest('.add-to-cart-button')
                 if (!cartButton) return
+                header.classList.toggle('show')
 
                 itemCount.textContent = Number(itemCount.textContent) + 1
-                animateCartButton(cartButton)
+                animateProductCardCart(cartButton)
+
+                setTimeout(() => {
+                    animateHeaderCart()
+                }, 1000)
             })
         })
     }
 
     // Function to handle the cart button animation
-    function animateCartButton(cartButton) {
+    function animateProductCardCart(cartButton) {
         const cartIcon = cartButton.querySelector('span:first-child')
         const checkIcon = cartButton.querySelector('span:last-child')
 
@@ -150,4 +157,14 @@ const { product_name } = Astro.props
             cartIcon.style.display = 'flex'
         }, timeout + 500)
     }
+
+    // Function to handle the cart animation
+    function animateHeaderCart() {
+        const headerCartButton = document.getElementById('header-cart')
+        headerCartButton.classList.add('tada')
+
+        setTimeout(() => {
+            headerCartButton.classList.remove('tada')
+        }, 1500)
+    }
 </script>

src/layouts/Main.astro

@@ -28,8 +28,8 @@ const { title } = Astro.props
 </html>
 
 <style>
-    html,
-    body {
+    body,
+    html {
         height: 100svh;
         margin: 0;
         width: 100%;

src/pages/index.astro

@@ -32,6 +32,7 @@ import { SITE_NAME } from '../config.js'
     #search-product {
         display: flex;
         justify-content: center;
+        margin-top: calc(1.5 * var(--spacing-large));
         width: clamp(320px, var(--card-size), 100svw);
     }
 
@@ -48,15 +49,8 @@ import { SITE_NAME } from '../config.js'
         #product-list {
             gap: var(--spacing-small);
             height: 100%;
-            overflow-y: scroll;
-            scroll-behavior: smooth;
-            scroll-snap-type: y mandatory;
             width: 100%;
         }
-
-        #product-list > * {
-            scroll-snap-align: start;
-        }
     }
 </style>
 

src/styles/global.css

@@ -118,3 +118,35 @@ input:user-invalid {
     background-color: var(--color-error);
     border-color: var(--color-error);
 }
+
+/* Animations */
+
+.tada {
+    animation: tada 1.5s ease-in-out infinite;
+}
+
+@keyframes tada {
+    0% {
+        transform: scale(1);
+    }
+
+    10%,
+    20% {
+        transform: scale(0.9) rotate(-8deg);
+    }
+
+    30%,
+    50%,
+    70% {
+        transform: scale(1.3) rotate(8deg);
+    }
+
+    40%,
+    60% {
+        transform: scale(1.3) rotate(-8deg);
+    }
+
+    80% {
+        transform: scale(1) rotate(0deg);
+    }
+}