Nicer item page

Add markdown support to item description Cart now gets loaded in the background, poorly implemented I presume
2025-06-03 00:43:14 +00:00 · 2024-05-08 17:53:21 +01:00 · 2024-05-08 17:53:21 +01:00 · a1dfcd3c35
commit a1dfcd3c35
parent a704082779
14 changed files with 365 additions and 140 deletions
--- a/front/src/App.svelte
+++ b/front/src/App.svelte
@ -1,12 +1,12 @@
 <script>
-    import Router from 'svelte-spa-router';
-    import { replace, link } from 'svelte-spa-router';
+    import Router, { replace, link } from 'svelte-spa-router';
    import active from 'svelte-spa-router/active'
    import { TwitterLogo, FacebookLogo, InstagramLogo, TiktokLogo } from 'phosphor-svelte';

-    import Cart from './lib/cart';
+    import Cart, { cartLoaded } from './lib/cart';
    import routes from './routes';
    import Logo from '/assets/LogoAlt.svg';
+    import Spinner from '/spinner.svg';

    const links = {
        home: {path: '/', className: 'active'},
@ -15,21 +15,19 @@
        cart: {path: '/cart', className: 'active'},
    }

+    let scrollY = 0;
+    let width = 0;
+    let oldLocation = undefined;
+    let fullWidth = false;
+    let showNavBar = false;
    let cartItemCount = 0;
+
    Cart.subscribe(() => {
        cartItemCount = Cart.getTotalLength();
    });

-    let scrollY = 0;
-    let width = 0;
-
-    let oldLocation = undefined;
-    let fullWidth = false;
-    let showNavBar = false;
-
    function routeLoading(event) {
        if (event.detail.location === oldLocation) {
-            console.log("Fake!");
            return; // not an actual change
        }

@ -72,14 +70,36 @@
            <span class="nav-logo"><img src={Logo} alt="TastyBites"></span>
            <ul style="justify-content: flex-start">
                <li use:active={links.contact}><a href="/contact" use:link>Contact&nbsp;Us</a></li>
-                <li use:active={links.cart}><a href="/cart" use:link>Cart&nbsp;&nbsp;<span class="nav-basket">{cartItemCount}</span></a></li>
+                <li use:active={links.cart}>
+                    <a href="/cart" use:link>
+                        Cart&nbsp;&nbsp;
+                        <span class="nav-basket">
+                            {#await cartLoaded}
+                                <img src={Spinner} alt="Cart Loading">
+                            {:then _}
+                                {cartItemCount}
+                            {/await}
+                        </span>
+                    </a>
+                </li>
            </ul>
        {:else}
            <ul>
                <li use:active={links.home}><a href="/" use:link>Home</a></li>
                <li use:active={links.menu}><a href="/menu" use:link>Menu</a></li>
                <li use:active={links.contact}><a href="/contact" use:link>Contact&nbsp;Us</a></li>
-                <li use:active={links.cart}><a href="/cart" use:link>Cart&nbsp;&nbsp;<span class="nav-basket">{cartItemCount}</span></a></li>
+                <li use:active={links.cart}>
+                    <a href="/cart" use:link>
+                        Cart&nbsp;&nbsp;
+                        <span class="nav-basket">
+                            {#await cartLoaded}
+                                <img src={Spinner} alt="Cart Loading">
+                            {:then _}
+                                {cartItemCount}
+                            {/await}
+                        </span>
+                    </a>
+                </li>
            </ul>
        {/if}
    </nav>
--- a/front/src/components/BasketItem.svelte
+++ b/front/src/components/BasketItem.svelte
@ -4,6 +4,7 @@

    import { type CartItem, Labels } from "../lib/types";
    import Cart from "../lib/cart";
+    import ImageLoading from '/assets/MenuItemLoading.svg';

    export let item: CartItem;

@ -23,10 +24,10 @@
 </script>

 <div class="container">
-    {#if item.data.images}
+    {#if item.data.images && item.data.images[0]}
        <img src="{item.data.images[0]}" alt="Item" class="basket-item-image">
    {:else}
-        <img src="/assets/MenuItemLoading.svg" alt="Item" class="basket-item-image">
+        <img src={ImageLoading} alt="Item" class="basket-item-image">
    {/if}

    <ul class="basket-item-data">
--- a/front/src/lib/cart.ts
+++ b/front/src/lib/cart.ts
@ -3,26 +3,34 @@ import { type Writable, get, writable } from "svelte/store";
 import { type CartItem, type Item } from "./types";
 import { getItemByUUID, postVerifyCart } from "./test-api";

-function getLocal(): Record<string, CartItem> {
-    let localData: Record<string, CartItem> =
-        JSON.parse(localStorage.getItem("basket")) || {};
-
-    postVerifyCart(localData)
-        .then((data: Record<string, CartItem>) => {
-            localData = data;
-        })
-        .catch((error) => {
-            console.error("Could not load basket:", error);
-            return <Record<string, CartItem>>{};
-        });
-
-    return localData;
-}
-
 function createCartStore() {
-    const cart: Writable<Record<string, CartItem>> = writable(getLocal());
+    let loaded = false;
+
+    const cart: Writable<Record<string, CartItem>> = writable({});
+
+    async function init() {
+        let localData: Record<string, CartItem> = {};
+        try {
+            localData = JSON.parse(localStorage.getItem("basket")) || {};
+        } catch {
+            console.error("Local Cart data fucked");
+        }
+
+        try {
+            const newData: Record<string, CartItem> = await postVerifyCart(localData);
+            cart.set(newData);
+        } catch (error) {
+            console.error("Could not load basket:", error);
+        }
+
+        loaded = true;
+    }

    async function addToCart(uuid: string, amount: number) {
+        if (!loaded) {
+            return
+        }
+
        if (get(cart)[uuid] !== undefined) {
            cart.update((cart: Record<string, CartItem>) => {
                cart[uuid].amount += amount;
@ -74,6 +82,10 @@ function createCartStore() {
    }

    function removeByUUID(uuid: string) {
+        if (!loaded) {
+            return
+        }
+
        cart.update((cart) => {
            delete cart[uuid]; // skipcq: JS-0320
            return cart;
@ -82,6 +94,7 @@ function createCartStore() {

    return {
        ...cart,
+        init,
        addToCart,
        getEntries,
        getUniqueLength,
@ -93,15 +106,11 @@ function createCartStore() {

 // Create store
 const Cart = createCartStore();
+export let cartLoaded = Cart.init()

 // Make sure to update localstorage on any changes
 Cart.subscribe((value) => {
    localStorage.setItem("basket", JSON.stringify(value));
 });

-// Debug
-// Cart.subscribe((value) => {
-//     console.log(value);
-// });
-
 export default Cart;
--- a/front/src/lib/test-api.ts
+++ b/front/src/lib/test-api.ts
@ -138,5 +138,6 @@ export async function postVerifyCart(
        });
    });

-    return newCartData;
+    await fakeDelay(1);
+    return newCartData
 }
--- a/front/src/lib/test-data.ts
+++ b/front/src/lib/test-data.ts
@ -1,48 +1,59 @@
-import type { Item } from "./types";
-import { Labels } from "./types";
+import { type Item, Labels } from "./types";

 const TestData: Item[] = [
    {
        uuid: "soap",
        name: "Bar of Soap",
        price: 69.99,
+        description: `
+Example
+        `,
        labels: [Labels.vegan, Labels.spicy],
-        description: "Example",
    },
    {
        uuid: "sock",
        name: "Sock",
        price: 21,
+        description: `
+Example
+        `,
        labels: [Labels.vegan, Labels.fish, Labels.nut, Labels.spicy],
-        description: "Example",
    },
    {
        uuid: "brick",
        name: "Brick",
        price: 0,
+        description: `
+Example
+        `,
        labels: [Labels.spicy],
-        description: "Example",
    },
    {
        uuid: "toast",
        name: "Toast",
        price: 4382749832743,
+        description: `
+Example
+        `,
        labels: [Labels.gluten],
-        description: "Example",
    },
    {
        uuid: "water",
        name: "water",
        price: 1,
+        description: `
+Example
+        `,
        labels: [Labels.fish],
-        description: "Example",
    },
    {
        uuid: "mouldy_bread",
        name: "half eaten mouldy bread",
        price: -99,
+        description: `
+Example
+        `,
        labels: [Labels.nut],
-        description: "Example",
    },
    {
        uuid: "gwagwa",
@ -55,17 +66,27 @@ const TestData: Item[] = [
        uuid: "hogmelon",
        name: "Hogermellon",
        price: 1111,
-        labels: [Labels.fish],
-        images: ["/item_images/wathog.jpg"],
-        description: "Example",
+        description: `
+This is a sample description. Gay Balls.
+
+Contains the following:
+- hog
+- melon
+        `,
+        labels: [Labels.nut, Labels.gluten, Labels.spicy, Labels.fish],
+        images: ["/item_images/wathog.jpg","/item_images/sonichog.jpg"],
    },
    {
        uuid: "bluhog",
        name: "Blue HOGGGGG",
        price: 0,
+        description: `
+This is a sample description.
+
+Gay Balls
+        `,
        labels: [Labels.nut, Labels.gluten, Labels.spicy],
        images: ["/item_images/sonichog.jpg"],
-        description: "Example",
    },
 ];

--- a/front/src/pages/PageAbout.svelte
+++ b/front/src/pages/PageAbout.svelte
@ -1,10 +1,13 @@
 <script lang="ts">
    import ImageWithText from "../components/ImageWithText.svelte";
+    import Hog from "/item_images/wathog.jpg";
+    import Dab from "/item_images/dab.jpg";
+    import Beetle from "/beetle.jpg";
 </script>

 <h1>Our story</h1>

-<ImageWithText image="/wathog.jpg">
+<ImageWithText image={Hog}>
    <div class="padding">
        <h2>How it all started</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At deserunt est quos dicta ipsa! Soluta laudantium dolore temporibus nisi aspernatur expedita vel, unde natus a nulla rerum officiis optio neque.</p>
@ -15,7 +18,7 @@

 <div class="spacer" />

-<ImageWithText image="/dab.jpg" toRight={true}>
+<ImageWithText image={Dab} toRight={true}>
    <div class="padding">
        <h2>The hard times</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At deserunt est quos dicta ipsa! Soluta laudantium dolore temporibus nisi aspernatur expedita vel, unde natus a nulla rerum officiis optio neque.</p>
@ -25,7 +28,7 @@

 <div class="spacer" />

-<ImageWithText image="/MenuItemLoading.svg">
+<ImageWithText image={Hog}>
    <div class="padding">
        <h2>Whats next</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At deserunt est quos dicta ipsa! Soluta laudantium dolore temporibus nisi aspernatur expedita vel, unde natus a nulla rerum officiis optio neque.</p>
@ -33,6 +36,16 @@
    </div>
 </ImageWithText>

+<div class="spacer" />
+
+<ImageWithText image={Beetle} toRight={true}>
+    <div class="padding">
+        <h2>Our Chef</h2>
+        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At deserunt est quos dicta ipsa! Soluta laudantium dolore temporibus nisi aspernatur expedita vel, unde natus a nulla rerum officiis optio neque.</p>
+        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At deserunt est quos dicta ipsa! Soluta laudantium dolore temporibus nisi aspernatur expedita vel, unde natus a nulla rerum officiis optio neque.</p>
+    </div>
+</ImageWithText>
+

 <style lang="scss">
    @import "../styles/vars";
--- a/front/src/pages/PageCart.svelte
+++ b/front/src/pages/PageCart.svelte
@ -4,7 +4,7 @@

    import { type CartItem } from "../lib/types";
    import { getPopularToday } from "../lib/test-api";
-    import Cart from "../lib/cart";
+    import Cart, { cartLoaded } from "../lib/cart";
    import MenuList from "../components/MenuList.svelte";
    import BasketItem from "../components/BasketItem.svelte";
    import DropDown from "../components/DropDown.svelte";
@ -22,24 +22,32 @@
    });
 </script>

+<!--<button on:click={() => { localStorage['basket'] = "balls" }}>Fuck up the cart</button>-->

-{#if totalItems}
-    <h1>Cart</h1>
-
-    <button id="checkout-button">Checkout</button>
-    <h2>Order total: £{totalPrice}</h2>
-
-    {#each items as [key, item]}
-        <div class="basket-item">
-            <BasketItem item={item}/>
-        </div>
-    {/each}
-{:else}
+{#await cartLoaded}
    <div id="emptyCart">
-        <h1>Empty Cart&nbsp;<Basket weight="fill" /></h1>
-        <p>Why not go and checkout <a href="/menu" use:link>our menu</a>?</p>
+        <h1>Cart Loading&nbsp;<Basket weight="fill" /></h1>
+        <p>This shouldn't take long</p>
    </div>
-{/if}
+{:then _}
+    {#if totalItems}
+        <h1>Cart</h1>
+
+        <button id="checkout-button">Checkout</button>
+        <h2>Order total: £{totalPrice}</h2>
+
+        {#each items as [key, item]}
+            <div class="basket-item">
+                <BasketItem item={item}/>
+            </div>
+        {/each}
+    {:else}
+        <div id="emptyCart">
+            <h1>Empty Cart&nbsp;<Basket weight="fill" /></h1>
+            <p>Why not go and checkout <a href="/menu" use:link>our menu</a>?</p>
+        </div>
+    {/if}
+{/await}

 <div class="spacer" />

--- a/front/src/pages/PageItem.svelte
+++ b/front/src/pages/PageItem.svelte
@ -1,19 +1,24 @@
 <script lang="ts">
-    import { Minus, Plus, SmileySad } from "phosphor-svelte";
+    import { link } from 'svelte-spa-router';
+    import { Acorn, Fish, GrainsSlash, Leaf, Minus, Pepper, Plus, SmileySad, ShoppingCart } from "phosphor-svelte";
+    import SvelteMarkdown from 'svelte-markdown'

+    import { Labels } from "../lib/types";
    import { getPopularToday, getItemByUUID } from "../lib/test-api";
-    import Cart from "../lib/cart";
+    import Cart, { cartLoaded } from "../lib/cart";
    import MenuList from "../components/MenuList.svelte";
    import LoadingBar from "../components/LoadingBar.svelte";
-    import LoadingImage from "/MenuItemLoading.svg";
+    import LoadingImage from "/assets/MenuItemLoading.svg";

    export let params: {
        uuid?: string;
    };

    let basketAmount = 1;
+    let selectedImage = 0;

    $: item = getItemByUUID(params.uuid);
+    $: item.finally(() => { selectedImage = 0 });
    $: popularToday = getPopularToday();

    function reduce() {
@ -21,11 +26,13 @@
            basketAmount -= 1;
        }
    }
+
    function increase() {
        if (basketAmount < 99) {
            basketAmount += 1;
        }
    }
+
    function add() {
        Cart.addToCart(params.uuid, basketAmount);
    }
@ -34,39 +41,42 @@
 <div class="main">
    {#await item}
        <div id="images">
-            <div>
-                <img src={LoadingImage} alt="">
+            <div class="img-main">
+                <div class="loading image" />
            </div>
-            <ul>
-                <li><img src={LoadingImage} alt=""></li>
-                <li><img src={LoadingImage} alt=""></li>
-                <li><img src={LoadingImage} alt=""></li>
-                <li><img src={LoadingImage} alt=""></li>
-                <li><img src={LoadingImage} alt=""></li>
+            <ul class="img-alts">
+                <li><div class="loading image-small" /></li>
+                <li><div class="loading image-small" /></li>
+                <li><div class="loading image-small" /></li>
+                <li><div class="loading image-small" /></li>
+                <li><div class="loading image-small" /></li>
            </ul>
        </div>

        <div id="info">
            <div class="loading title" />
            <div class="loading price" />
-
            <div class="loading description" />
        </div>
    {:then item}
        <div id="images">
-            <div>
-                {#if item.images}
-                    <img src="{item.images[0]}" alt="Item">
+            <div class="img-main">
+                {#if item.images && item.images[selectedImage]}
+                    <img src="{item.images[selectedImage]}" alt="Item">
                {:else}
-                    <img src="/assets/MenuItemLoading.svg" alt="Item">
+                    <img src={LoadingImage} alt="Item">
                {/if}
            </div>
-            <ul>
-                <li><img src={LoadingImage} alt=""></li>
-                <li><img src={LoadingImage} alt=""></li>
-                <li><img src={LoadingImage} alt=""></li>
-                <li><img src={LoadingImage} alt=""></li>
-                <li><img src={LoadingImage} alt=""></li>
+            <ul class="img-alts">
+                {#if item.images && item.images.length > 1}
+                    {#each item.images as image, i}
+                        <li class:selected={selectedImage === i}>
+                            <button on:click={() => { selectedImage = i }}>
+                                <img src={image} alt="">
+                            </button>
+                        </li>
+                    {/each}
+                {/if}
            </ul>
        </div>

@ -75,18 +85,46 @@
            <p>£{item.price}</p>

            <div class="container">
-                <p>{item.description}</p>
+                <div id="description">
+                    {#if item.description}
+                        <SvelteMarkdown source={item.description} />
+                    {:else}
+                        <p>Item is missing information</p>
+                    {/if}
+                </div>
+                <hr>
+                <div id="small-text">
+                    <p>If you require any specific informtaion on a meal, <a href="/contact" use:link>please contact us</a>.</p>
+                </div>
            </div>

+            <ul id="allergy-labels">
+                {#each item.labels as label}
+                    {#if label === Labels.vegan}
+                        <li class="vegan"><Leaf weight="fill" />&nbsp;&nbsp;Vegan</li>
+                    {:else if label === Labels.fish}
+                        <li class="fish"><Fish weight="fill" />&nbsp;&nbsp;Sea</li>
+                    {:else if label === Labels.nut}
+                        <li class="nut"><Acorn weight="fill" />&nbsp;&nbsp;Nut</li>
+                    {:else if label === Labels.gluten}
+                        <li class="gluten"><GrainsSlash weight="fill" />&nbsp;&nbsp;Gluten Free</li>
+                    {:else if label === Labels.spicy}
+                        <li class="spicy"><Pepper weight="fill" />&nbsp;&nbsp;Spicy</li>
+                    {/if}
+                {/each}
+            </ul>
+
            <div id="basket-controls">
                <button class="button" class:disabled={basketAmount <= 1} on:click={reduce}><Minus /></button>
                <p>{basketAmount}</p>
                <button class="button" class:disabled={basketAmount >= 99} on:click={increase}><Plus /></button>
                <hr>
-                <button class="button add" on:click={add} id="add-to-cart">Add to Cart</button>
+                {#await cartLoaded}
+                    <button class="button add disabled" id="add-to-cart">Add&nbsp;to&nbsp;Cart&nbsp;&nbsp;<ShoppingCart weight="fill" /></button>
+                {:then _}
+                    <button class="button add" on:click={add} id="add-to-cart">Add&nbsp;to&nbsp;Cart&nbsp;&nbsp;<ShoppingCart weight="fill" /></button>
+                {/await}
            </div>
-
-
        </div>
    {:catch error}
        <div id="error">
@ -122,25 +160,27 @@
    }

    #images {
+        margin-right: $spacing-normal;
        display: flex;
        flex-direction: column;

-        > div {
+        .img-main {
            margin-bottom: $spacing-small;
-            padding: $spacing-small;

-            width: 650px;
-            height: 500px;
+            width: 600px;
+            height: 450px;

            display: flex;
            justify-content: center;
            align-items: center;

-            border-radius: $border-radius-normal;
-            background-color: $color-background;
-
            overflow: hidden;

+            > .loading.image {
+                width: 100%;
+                height: 100%;
+            }
+
            > img {
                max-width: 100%;
                max-height: 100%;
@ -149,7 +189,7 @@
            }
        }

-        > ul {
+        .img-alts {
            margin: 0;
            padding: 0;

@ -159,10 +199,39 @@
            > li {
                list-style: none;

-                > img {
+                > .loading.image-small {
                    margin-right: $spacing-small;
                    width: 100px;
+                    height: 100px;
+                }
+
+                > button {
+                    margin-right: $spacing-small;
+                    padding: 0;
+
+                    width: 100px;
+                    height: 100px;
+
                    border-radius: $border-radius-normal;
+                    border: 1px solid transparent;
+                    background: transparent;
+
+                    overflow: hidden;
+
+                    > img {
+                        width: 100%;
+                        height: 100%;
+                        display: block;
+                        object-fit: cover;
+                    }
+
+                    &:hover, &:focus-visible {
+                        border: 1px solid $color-dark;
+                    }
+                }
+
+                &.selected > button {
+                    border: 1px solid $color-primary !important;
                }
            }
        }
@ -176,16 +245,31 @@
        align-items: flex-end;

        > h2 {
+            margin-bottom: $spacing-small;
+            padding: 0;
            font-size: $font-size-h1;
-            padding-bottom: $spacing-small;
        }
        > p {
+            margin-bottom: $spacing-normal;
+            padding: 0;
            font-size: $font-size-h2;
-            padding-bottom: $spacing-normal;
        }
+
        .container {
-            padding: $spacing-normal;
+            margin-bottom: $spacing-small;
            width: 100%;
+
+            #description {
+                padding: $spacing-normal;
+            }
+
+            #small-text {
+                padding: $spacing-small $spacing-normal;
+
+                p {
+                    font-size: $font-size-xsmall;
+                }
+            }
        }
    }

@ -232,7 +316,7 @@

            &.disabled {
                border: 1px solid rgba($color-dark, 0.1);
-                color: rgba($color-on-light, 0.6);
+                color: rgba($color-on-light, 0.6) !important;

                &:hover,
                &:focus-visible {
@ -240,6 +324,11 @@
                    background-color: $color-light;
                    color: rgba($color-on-light, 0.6);
                }
+
+                &.add {
+                    background-color: $color-dark !important;
+                    color: rgba($color-on-dark, 0.6) !important;
+                }
            }
        }

@ -302,12 +391,60 @@
        }
    }

+    #allergy-labels {
+        padding: 0;
+
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        flex-wrap: wrap;
+
+        > li {
+            margin: 0 0 $spacing-small $spacing-xsmall;
+            padding: 0 $spacing-small;
+
+            min-width: 30px;
+            height: 30px;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            border-radius: $border-radius-circle;
+            background-color: $color-dark;
+            color: $color-on-dark;
+
+            list-style: none;
+
+            &.vegan {
+                background-color: $color-vegan;
+            }
+            &.fish {
+                background-color: $color-fish;
+            }
+            &.nut {
+                background-color: $color-nut;
+            }
+            &.gluten {
+                background-color: $color-gluten;
+            }
+            &.spicy {
+                background-color: $color-spicy;
+            }
+        }
+    }
+
    .loading {
        position: relative;

        border-radius: $border-radius-large;

-        background: linear-gradient(to right, $color-background 8%, rgba($color-dark, 0.3) 38%, $color-background 54%);
+        background: linear-gradient(
+                        to right,
+                        rgba($color-dark, 0) 8%,
+                        rgba($color-dark, 0.3) 38%,
+                        rgba($color-dark, 0) 54%
+                    ) no-repeat;
        background-size: 1000px 100%;
        animation: loading 1s infinite linear;

@ -323,7 +460,10 @@
            left: $padding;

            border-radius: calc($border-radius-large - $padding);
-            background-color: rgba($color-background, 0.9);
+            background-color: darken($color-background, 10%);
+            background-image: url("/assets/Noise.png");
+
+            opacity: 0.9;
        }

        &.title {
@ -337,17 +477,17 @@
            width: 60px;
        }
        &.description {
-            height: 400px;
+            height: 300px;
            width: 100%;
        }
    }

    @keyframes loading{
        0%{
-            background-position: -500px 0
+            background-position: -600px 0
        }
        100%{
-            background-position: 500px 0
+            background-position: 600px 0
        }
    }
 </style>
--- a/front/src/styles/_navigation_bar.scss
+++ b/front/src/styles/_navigation_bar.scss
@ -61,6 +61,10 @@ nav {
                    border-radius: $border-radius-circle;
                    background-color: $color-light;
                    color: $color-on-light;
+
+                    img {
+                        width: 10px;
+                    }
                }
            }

@ -86,7 +90,6 @@ nav {

        > img {
            height: calc($sizing-navigation-height - calc(2 * $spacing-small));
-
            display: block;
        }
    }
--- a/front/src/styles/_reset.scss
+++ b/front/src/styles/_reset.scss
@ -21,7 +21,6 @@ body,

 body {
    background-color: darken($color-background, 10%);
-    //background-color: $color-background;
    background-image: url("/assets/Noise.png");
    color: $color-on-background;
 }