Improve docs

src/lib/components/elements/buttons/Button.svelte

@@ -7,8 +7,10 @@
     export let value: string;
 
     export let size: 'sm' | 'md' | 'lg' = 'md'
+    export let color: 'outline' | 'primary' | 'danger';
 
     let className = `btn btn--${size}`;
+    className += color && (` btn--${color}`)
 </script>
 
 {#if as === 'button'}
@@ -313,11 +315,11 @@
     */
   }
 
-  .btn--large {
+  .btn--lg {
     /* padding: $em-spacer-6 1.5em; */
-    font-size: inherit;
     /* line-height: $lh-default; */
 
+    font-size: var(--font-2);
     border-radius: 0.5em;
   }
 

src/lib/styles/themes.postcss

@@ -0,0 +1,2 @@
+@import "themes/light.postcss";
+@import "themes/old.postcss";

src/routes/__layout.svelte

@@ -1,15 +1,35 @@
 <script lang="ts">
     import "$lib/styles/variables.postcss";
-    import "$lib/styles/themes/light.postcss";
+    import "../lib/styles/themes/old.postcss";
+    import Sidebar from "./_docs/Sidebar.svelte";
 </script>
 
-<main>
-    <slot></slot>
-</main>
+
+<div class="app">
+    <Sidebar />
+    <main class="app__content">
+        <slot />
+    </main>
+</div>
 
 <style lang="postcss">
-    main {
-      font-size: var(--body-font-size);
-      font-family: var(--body-font);
+    :global(body) {
+        margin: 0;
+        font-size: var(--body-font-size);
+        font-family: var(--body-font);
+    }
+
+    .app {
+        display: grid;
+        min-height: 100vh;
+        grid-template-columns: 250px 1fr;
+        @media(width <= 500px) {
+            display: flex;
+            flex-direction: column;
+        }
+
+        &__content {
+            padding: 1rem max(10vw, 1rem);
+        }
     }
 </style>

src/routes/_docs/Sidebar.svelte

@@ -0,0 +1,41 @@
+<nav class="sidebar">
+    <div class="section">
+        <span class="section__title">Introduction</span>
+        <a href="/" class="section__link">Welcome</a>
+    </div>
+
+    <div class="section">
+        <span class="section__title">Components</span>
+        {#each ['buttons'] as component}
+            <a href="/components/{component}" class="section__link">{component}</a>
+        {/each}
+    </div>
+</nav>
+
+<style lang="postcss">
+    .sidebar {
+        display: flex;
+        flex-direction: column;
+        grid-gap: 2rem;
+        background-color: hsl(216, 10%, 30%);
+        color: hsl(216, 10%, 80%);
+        padding: 1.5rem;
+
+        .section {
+            display: flex;
+            flex-direction: column;
+            grid-gap: 0.2rem;
+
+            &__title {
+                text-transform: uppercase;
+                font-size: 12px;
+            }
+
+            &__link {
+                text-transform: capitalize;
+                color: hsl(216, 10%, 90%);
+                text-decoration: none;
+            }
+        }
+    }
+</style>

src/routes/components/buttons.md

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import Button from "$lib/components/elements/buttons/Button.svelte"
+</script>
+
+# Buttons
+
+<Button>Eat cake</Button>
+
+<Button size="sm" color="primary">Small piece</Button>
+
+<Button size="lg" color="danger">Big part</Button>

src/routes/index.md

@@ -0,0 +1,3 @@
+# Introduction
+
+This is `kleos`, Modrinth's style and component library. Go to [its repository](https://github.com/modrinth/kleos) for more information.

src/routes/index.svelte

@@ -1,6 +0,0 @@
-<script lang="ts">
-    import Button from "$lib/components/elements/buttons/Button.svelte"
-</script>
-
-<h1>Docs...</h1>
-<Button>Button</Button>