feat: header and main elements for semantics

src/lib/Header.svelte

@@ -5,25 +5,32 @@
     let navShown = false;
 </script>
 
-<nav>
+<header>
-    <a class="brand" href="index.html">Cursed Creations</a>
+    <nav>
-    <md-outlined-icon-button
+        <a class="brand" href="index.html">Cursed Creations</a>
-        class="menu"
+        <md-outlined-icon-button
-        aria-expanded={navShown}
+            class="menu"
-        aria-label="Toggle navigation"
+            aria-expanded={navShown}
-        on:click={(_) => (navShown = !navShown)}
+            aria-label="Toggle navigation"
-    >
+            on:click={(_) => (navShown = !navShown)}
-        <md-icon>menu</md-icon>
+        >
-    </md-outlined-icon-button>
+            <md-icon>menu</md-icon>
-    <ul class="links" class:shown={navShown}>
+        </md-outlined-icon-button>
-        {#each [["/", "Home"], ["/downloads", "Mods"], ["/wiki", "Wiki"]] as [href, display]}
+        <ul class="links" class:shown={navShown}>
-            <li><a {href}>{display}</a></li>
+            {#each [["/", "Home"], ["/downloads", "Mods"], ["/wiki", "Wiki"]] as [href, display]}
-        {/each}
+                <li><a {href}>{display}</a></li>
-    </ul>
+            {/each}
-</nav>
+        </ul>
+    </nav>
+</header>
 
 <style lang="scss">
     $space: 4ch;
+
+    header {
+        display: contents;
+    }
+    
     nav {
         display: grid;
         align-items: center;

src/routes/+layout.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <Header />
-<slot />
+<main><slot /></main>
 
 <style>
     :global(body) {