docs: add mobile support + seo

src/routes/_internal/components/Example.svelte

@@ -36,6 +36,7 @@
             flex-wrap: wrap;
             position: relative;
             justify-content: flex-start;
+            z-index: 1;
 
             &__options {
                 position: absolute;

src/routes/_internal/components/Header.svelte

@@ -21,15 +21,19 @@
 </script>
 
 <header class="header" bind:this={headerElement}>
-    <OmorphiaLogo height="32px" width="32px"/>
+    <OmorphiaLogo class="header__logo"/>
     <div class="header__title">Omorphia</div>
     <div class="header__links">
-        <a href="https://modrinth.com">Modrinth.com</a>
-        <span class="spacer-dot"></span>
+        <a class="hide-sm" href="https://modrinth.com">Modrinth.com</a>
+        <span class="spacer-dot hide-sm"></span>
         <a href="https://www.npmjs.com/package/omorphia">NPM</a>
         <span class="spacer-dot"></span>
-        <a href="https://rewrite.modrinth.com/discord"><IconChat /></a>
-        <a href="https://github.com/modrinth/omorphia"><IconLogoGithub /></a>
+        <a href="https://rewrite.modrinth.com/discord">
+            <IconChat/>
+        </a>
+        <a href="https://github.com/modrinth/omorphia">
+            <IconLogoGithub/>
+        </a>
     </div>
 </header>
 
@@ -39,7 +43,8 @@
         display: flex;
         grid-gap: 10px;
         align-items: center;
-        padding: 0 32px;
+        flex-wrap: wrap;
+        padding: 16px 24px;
         position: fixed;
         height: var(--header-height);
         left: 0;
@@ -50,6 +55,16 @@
         box-shadow: hsla(221, 39%, 11%, 0.2) 0 2px 4px 0, hsla(221, 39%, 11%, 0.05) 0 -2px 2px 0 inset;
         transition: top 0.3s ease-in-out;
 
+        @media (--sm) {
+            padding: 10px 32px;
+        }
+
+        :global(&__logo) {
+            max-width: 32px;
+            min-width: 32px;
+            aspect-ratio: 1 / 1;
+        }
+
         &__title {
             font-size: 20px;
             font-weight: 600;
@@ -57,17 +72,30 @@
 
         &__links {
             margin-left: auto;
-            display: flex;
             grid-gap: 16px;
             align-items: center;
+            justify-content: center;
+            display: flex;
 
             :global(svg) {
                 height: 22px;
                 width: auto;
             }
 
-            a:not(:hover) {
-                color: unset;
+            .hide-sm {
+                display: none;
+
+                @media (--sm) {
+                    display: flex;
+                }
+            }
+
+            a {
+                text-decoration: none;
+
+                &:not(:hover) {
+                    color: unset;
+                }
             }
         }
     }

src/routes/_internal/components/Sidebar.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import IconMenu from 'virtual:icons/lucide/menu'
+
     const components = Object.keys(import.meta.glob('../../components/**'))
         .map(it => it.replace('../../components/', '').replace('.md', ''))
         .sort();
@@ -6,9 +8,11 @@
     const classes = Object.keys(import.meta.glob('../../classes/**'))
         .map(it => it.replace('../../classes/', '').replace('.md', ''))
         .sort();
+
+    let slideIn = false
 </script>
 
-<nav class="sidebar">
+<nav class="sidebar" class:slideIn>
     <div class="section">
         <span class="section__title">Getting started</span>
         <a href="/" class="section__link">Introduction</a>
@@ -30,21 +34,38 @@
             <a href="/classes/{page}" class="section__link">{page}</a>
         {/each}
     </div>
+
+    <button class="sidebar__toggle" on:click={() => slideIn = !slideIn}><IconMenu /></button>
 </nav>
 
 <style lang="postcss">
+    :root {
+        --sidebar-color: hsl(220, 15%, 40%);
+    }
+
     .sidebar {
         display: flex;
         flex-direction: column;
         grid-gap: 2rem;
-        background-color: hsl(220, 15%, 40%);
+        background-color: var(--sidebar-color);
         color: hsl(216, 10%, 80%);
-        padding: 5.5rem 2rem 2rem;
         height: 100vh;
-        width: calc(var(--sidebar-width) - 3rem);
+        max-height: 100vh;
+        overflow-y: auto;
+        width: var(--sidebar-width);
+        max-width: 70vw;
         position: fixed;
-        left: 0;
+        left: -100%;
         top: 0;
+        z-index: 5;
+        padding: 88px 32px 32px;
+        transition: left 0.2s ease-in-out;
+        box-shadow: 2px 0px 4px hsla(221, 39%, 11%, 0.2);
+
+        @media (--md) {
+            left: 0;
+        }
+
 
         .section {
             display: flex;
@@ -66,5 +87,36 @@
                 }
             }
         }
+
+        &__toggle {
+            position: fixed;
+            left: 16px;
+            bottom: 16px;
+            padding: 8px;
+            aspect-ratio: 1 / 1;
+            background-color: var(--accent-color);
+            z-index: 20;
+            border-radius: var(--rounded);
+            color: white;
+            box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
+            transition: left 0.2s cubic-bezier(.38,.52,.37,1.27);
+
+            :global(.icon) {
+                width: 32px;
+                height: auto;
+            }
+
+            @media (--md) {
+                visibility: hidden;
+            }
+        }
+
+        &.slideIn {
+            left: 0;
+
+            .sidebar__toggle {
+                left: calc(32px + min(70vw, var(--sidebar-width)))
+            }
+        }
     }
 </style>