refactor: Freshen up /book

3 files changed, 28 insertions, 13 deletions

diff --git a/apps/kit/src/routes/book/+layout.svelte b/apps/kit/src/routes/book/+layout.svelte
index 02d03b6..aeed0d4 100644
--- a/apps/kit/src/routes/book/+layout.svelte
+++ b/apps/kit/src/routes/book/+layout.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <div id="wrapper">
-    <nav class="flex flex-col">
+    <nav>
         <a
             href="/book/alerts"
             class="link"
@@ -23,23 +23,42 @@
             class:active={$page.url.pathname.startsWith("/book/toggles")}
             >Toggles</a
         >
+        <a
+            href="/book/inputs"
+            class="link"
+            class:active={$page.url.pathname.startsWith("/book/inputs")}
+            >Inputs</a
+        >
     </nav>
     <main>
         <slot />
     </main>
 </div>
 
-<style>
+<style global lang="postcss">
     #wrapper {
         display: flex;
         flex-direction: row;
     }
     nav {
-        min-width: 280px;
+        min-width: 120px;
         padding: 10px;
+        display: flex;
+        flex-direction: column;
+        position: sticky;
+        position: -webkit-sticky;
+        top: 0;
+        height: fit-content;
     }
     main {
         width: 100%;
-        padding: 5px;
+        padding: 10px;
+    }
+    section {
+        margin-bottom: 25px;
+
+        h2 {
+            margin-bottom: 5px;
+        }
     }
 </style>
diff --git a/apps/kit/src/routes/book/alerts/+page.svelte b/apps/kit/src/routes/book/alerts/+page.svelte
index 15084ca..d008d85 100644
--- a/apps/kit/src/routes/book/alerts/+page.svelte
+++ b/apps/kit/src/routes/book/alerts/+page.svelte
@@ -2,7 +2,6 @@
     import Alert from "$lib/components/alert.svelte";
 </script>
 
-<h1>Alerts</h1>
 <section>
     <h2>Info</h2>
     <Alert type="info" message="This is message" title="This is title" />
diff --git a/apps/kit/src/routes/book/buttons/+page.svelte b/apps/kit/src/routes/book/buttons/+page.svelte
index 0a54930..19ba163 100644
--- a/apps/kit/src/routes/book/buttons/+page.svelte
+++ b/apps/kit/src/routes/book/buttons/+page.svelte
@@ -2,15 +2,12 @@
     import Button from "$lib/components/button.svelte";
 </script>
 
-<h1>Buttons</h1>
 <section>
     <h2>Primary</h2>
-    <div class="">
-        <Button kind="primary" text="Medium/Default" />
-        <Button kind="primary" text="Large" size="lg" />
-        <Button kind="primary" text="Small" size="sm" />
-        <Button kind="primary" text="Extra large" size="xl" />
-    </div>
+    <Button kind="primary" text="Small" size="sm" />
+    <Button kind="primary" text="Medium/Default" />
+    <Button kind="primary" text="Large" size="lg" />
+    <Button kind="primary" text="Extra large" size="xl" />
 </section>
 <section>
     <h2>Secondary</h2>
@@ -22,5 +19,5 @@
 </section>
 <section>
     <h2>Loading</h2>
-    <Button kind="primary" loading={true} text="Wait" size="sm" />
+    <Button kind="primary" loading={true} text="Wait" />
 </section>