diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a7b65a4..acd334f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,14 +1,59 @@
<script lang="ts">
import MediaQuery from 'svelte-media-queries';
- const mobileThreshold : string = '1000px';
- let mobile : boolean;
+ 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: {mobileThreshold})' bind:matches={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 />
@@ -46,18 +91,105 @@
<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 25px;
- height: 100%;
+ padding: 25px 0;
background-color: var(--background1);
+ height: 100%;
+
display: flex;
justify-content: center;
}
.about-container {
width: 80%;
+ height: 100%;
color: var(--text2);
@@ -90,12 +222,12 @@
width: 24px;
}
- h3 {
+ footer h3 {
margin-top: 0px;
color: var(--text2);
}
- a {
+ footer a {
color: var(--text2);
text-decoration-line: underline;
}
@@ -105,7 +237,7 @@
}
</style>
-{#if mobile}
+{#if footerCollapse}
<style>
.about-container {
flex-direction: column;
@@ -114,3 +246,9 @@
}
</style>
{/if}
+
+{#if headerCollapse}
+ <style>
+
+ </style>
+{/if}
diff --git a/src/routes/games/+page.svelte b/src/routes/games/+page.svelte
new file mode 100644
index 0000000..00d7bdd
--- /dev/null
+++ b/src/routes/games/+page.svelte
@@ -0,0 +1 @@
+WIP
diff --git a/static/images/icons/hamburger_menu.svg b/static/images/icons/hamburger_menu.svg
new file mode 100644
index 0000000..754961f
--- /dev/null
+++ b/static/images/icons/hamburger_menu.svg
@@ -0,0 +1,14 @@
+<?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>
diff --git a/static/images/logo.png b/static/images/logo.png
new file mode 100644
index 0000000..495e7e9
Binary files /dev/null and b/static/images/logo.png differ
diff --git a/static/stylesheets/global.css b/static/stylesheets/global.css
index 0d193ec..a9216b9 100644
--- a/static/stylesheets/global.css
+++ b/static/stylesheets/global.css
@@ -6,6 +6,10 @@
url("/fonts/CozetteVector.ttf") format("truetype");
}
+html {
+ background: var(--background1);
+}
+
body {
font-family: var(--main-font);
color: var(--text1); /* Default to primary text color. */