src/routes/+layout.svelte

@@ -1,59 +1,4 @@
-<script lang="ts">
-    import MediaQuery from 'svelte-media-queries';
-
-    const footerCollapseThreshold : string = '1000px';
-    const headerCollapseThreshold : string = '1000px';
-    let footerCollapse : boolean;
-    let headerCollapse : boolean;
-
-    let navbarHidden : boolean = true;
-
-    function resetNavBar() {
-        navbarHidden = true;
-    }
-</script>
-
-<!-- Detect mobile -->
-<MediaQuery query='(max-width: {footerCollapseThreshold})' bind:matches={footerCollapse} />
-<MediaQuery query='(max-width: {headerCollapseThreshold})' bind:matches={headerCollapse} />
-
 <!-- Nav bar -->
-<header>
-    <div class="nav-bar">
-        {#if !headerCollapse}
-            <div class="desktop">
-                <a href="/" class="nav-head">
-                    <img id="logo-link" src="/images/logo.png" alt="The Deprived Devs Logo"/>
-                    <h3 id="logo-text">The Deprived Devs</h3>
-                </a>
-                <div class="nav-spacer" />
-                <a href="/">Home</a>
-                <a href="/games">Games</a>
-                <a href="/post">Blog</a>
-                <a href="/about">About</a>
-            </div>
-        {:else}
-            <div class="collapsed">
-                    <a on:click={resetNavBar} href="/" class="nav-head">
-                        <img id="logo-link" src="/images/logo.png" alt="The Deprived Devs Logo"/>
-                        <h3 id="logo-text">The Deprived Devs</h3>
-                    </a>
-                    <div class="nav-spacer" />
-                    <button id="toggle-nav" on:click={() => navbarHidden = !navbarHidden}>
-                        <img src="/images/icons/hamburger_menu.svg" alt="Toggle Navigation Bar" />
-                    </button>
-            </div>
-            {#if !navbarHidden}
-                <div class="nav-list">
-                    <a on:click={resetNavBar} href="/">Home</a>
-                    <a on:click={resetNavBar} href="/games">Games</a>
-                    <a on:click={resetNavBar} href="/post">Blog</a>
-                    <a on:click={resetNavBar} href="/about">About</a>
-                </div>
-            {/if}
-        {/if}
-    </div>
-</header>
 
 <!-- Page content -->
 <slot />
@@ -91,97 +36,11 @@
 
 
 <style>
-    /* Nav bar. */
-    header {
-        display: flex;
-        justify-content: center;
-    }
-
-    .nav-bar {
-        width: 100%;
-        max-width: 1400px;
-    }
-
-    .desktop {
-        width: 100%;
-        display: flex;
-        gap: 30px;
-    }
-
-    .collapsed {
-        width: 100%;
-        display: flex;
-        gap: 30px;
-    }
-
-    #toggle-nav {
-        background: transparent;
-        border: none;
-
-    }
-
-    #toggle-nav > img {
-        transition: filter 200ms;
-        filter: invert(0%);
-    }
-
-    #toggle-nav > img:hover {
-        transition: filter 200ms ease-out;
-        filter: invert(100%);
-    }
-
-    #toggle-nav > img:hover {
-        fill: var(--primary);
-    }
-
-    .nav-list {
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-
-        align-items: center;
-    }
-
-    .nav-head {
-        display: flex;
-        align-items: center;
-        gap: 20px;
-    }
-
-    #logo-link {
-        width: 64px;
-        aspect-ratio: 1 / 1;
-    }
-
-    #logo-text {
-        font-size: 24px;
-        color: var(--text2);
-        font-family: var(--title-font);
-        margin: 0;
-
-        min-width: 200px;
-    }
-
-    .nav-spacer {
-        width: 100%;
-    }
-
-    header a {
-        display: flex;
-        align-items: center;
-
-        font-size: 22px;
-        font-family: var(--title-font);
-        color: var(--text2);
-    }
-
-    /* Footer. */
     footer {
         margin-top: 50px;
-        padding: 25px 0;
+        padding: 25px 0 25px;
-        background-color: var(--background1);
-
         height: 100%;
+        background-color: var(--background1);
 
         display: flex;
         justify-content: center;
@@ -189,7 +48,6 @@
 
     .about-container {
         width: 80%;
-        height: 100%;
 
         color: var(--text2);
 
@@ -198,20 +56,10 @@
         justify-content: space-evenly;
     }
 
-    .about-container > div {
-        align-items: center;
-        text-align: center;
-    }
-
     .credits {
         line-height: 2;
     }
 
-    .contact {
-        display: flex;
-        flex-direction: column;
-    }
-
     .social {
         display: flex;
         align-content: center;
@@ -222,12 +70,12 @@
         width: 24px;
     }
 
-    footer h3 {
+    h3 {
         margin-top: 0px;
         color: var(--text2);
     }
 
-    footer a {
+    a {
         color: var(--text2);
         text-decoration-line: underline;
     }
@@ -235,20 +83,6 @@
     a:hover {
         filter: brightness(130%);
     }
+
+
 </style>
-
-{#if footerCollapse}
-    <style>
-        .about-container {
-            flex-direction: column;
-            justify-content: center !important;
-            gap: 25px;
-        }
-    </style>
-{/if}
-
-{#if headerCollapse}
-    <style>
-
-    </style>
-{/if}

src/routes/+page.svelte

@@ -10,8 +10,8 @@
     $: most_recent_post = data.summaries[0];
 
     const mobileThreshold : string = '1000px';
-    let mobile : boolean;
     const post_show_count : number = 3;
+    let mobile : boolean;
 </script>
 
 <!-- Detect mobile -->

src/routes/games/+page.svelte

@@ -1 +0,0 @@
-WIP

static/images/icons/hamburger_menu.svg

@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   height="20"
-   id="Layer_1"
-   version="1.1"
-   viewBox="0 0 28 20"
-   width="28"
-   xml:space="preserve"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"><defs
-     id="defs1" /><path
-     d="M 2,4 H 26 C 27.104,4 28,3.104 28,2 28,0.896 27.104,0 26,0 H 2 C 0.896,0 0,0.896 0,2 0,3.104 0.896,4 2,4 Z M 26,8 H 2 c -1.104,0 -2,0.896 -2,2 0,1.104 0.896,2 2,2 h 24 c 1.104,0 2,-0.896 2,-2 0,-1.104 -0.896,-2 -2,-2 z m 0,8 H 2 c -1.104,0 -2,0.896 -2,2 0,1.104 0.896,2 2,2 h 24 c 1.104,0 2,-0.896 2,-2 0,-1.104 -0.896,-2 -2,-2 z"
-     id="path1"
-     style="fill:#ffffff;fill-opacity:1" /></svg>

static/stylesheets/global.css

@@ -6,10 +6,6 @@
     url("/fonts/CozetteVector.ttf") format("truetype");
 }
 
-html {
-    background: var(--background1);
-}
-
 body {
     font-family: var(--main-font);
     color: var(--text1); /* Default to primary text color. */