From 0694d31f77c81d3e68a9174fd9fdd74f2214b185 Mon Sep 17 00:00:00 2001
From: MrMelon54 <github@mrmelon54.com>
Date: Mon, 31 Oct 2022 22:14:12 +0000
Subject: [PATCH] Change header style

---
 src/App.svelte | 68 +++++++++++++++++++++++++++++++++-----------------
 1 file changed, 45 insertions(+), 23 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index e122e90..59ed07a 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -24,17 +24,19 @@
 <div id="app-router">
   <Router primary={false}>
     <header>
-      <a href="/" use:link>
-        <h1>{import.meta.env.VITE_TITLE}</h1>
-      </a>
+      <div class="central-header">
+        <a href="/" use:link>
+          <h1>{import.meta.env.VITE_TITLE}</h1>
+        </a>
 
-      <nav>
-        {#if isLoggedIn}
-          <a href="/logout" on:click|preventDefault={logoutAction}>Logout</a>
-        {:else}
-          <a href="/login" use:link>Login</a>
-        {/if}
-      </nav>
+        <nav>
+          {#if isLoggedIn}
+            <a href="/logout" on:click|preventDefault={logoutAction}>Logout</a>
+          {:else}
+            <a href="/login" use:link>Login</a>
+          {/if}
+        </nav>
+      </div>
     </header>
 
     <main>
@@ -68,30 +70,50 @@
 <style lang="scss">
   #app-router {
     max-width: 1000px;
-    margin: auto;
+    margin: 50px auto 0 auto;
 
     > header {
-      padding: 0 32px;
-      box-sizing: border-box;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      height: 80px;
-      min-height: 80px;
-      max-height: 80px;
+      height: 50px;
+      min-height: 50px;
+      max-height: 50px;
       background-color: var(--primary-main);
       border-radius: 0 0 var(--large-curve) var(--large-curve);
 
-      a {
-        color: #eeeeee;
+      > .central-header {
+        padding: 0 32px;
+        height: 50px;
+        min-height: 50px;
+        max-height: 50px;
+        align-items: center;
+        justify-content: space-between;
+        display: flex;
+        width: 1000px;
+        max-width: 1000px;
+        margin: auto;
 
-        &:hover {
-          color: #ffffff;
+        a {
+          color: #eeeeee;
+
+          &:hover {
+            color: #ffffff;
+          }
+
+          > h1 {
+            font-size: 26px;
+            line-height: 50px;
+          }
         }
-      }
 
-      > nav > :global(a) {
-        padding: 8px;
+        > nav > :global(a) {
+          padding: 8px;
+        }
       }
     }