docs: Improve theming + introduction

src/routes/__layout.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
     import "$lib/styles/variables.postcss"
     import "$lib/styles/themes.postcss"
-    import "./_docs/prism-one-dark.css"
+    import "./_docs/styles/prism-one-dark.css"
+    import "./_docs/styles/gh-markdown.css"
     import Sidebar from "./_docs/Sidebar.svelte"
 </script>
 
@@ -31,7 +32,7 @@
         overflow: hidden;
 
         &__content {
-            padding: 1rem max(8vw, 1rem);
+            padding: 5rem max(8vw, 1rem);
             max-width: 100%;
             overflow-x: hidden;
             overflow-y: auto;
@@ -39,6 +40,14 @@
             :global(a) {
                 color: hsl(216, 50%, 50%);
             }
+
+            :global(h1) {
+                font-size: 54px;
+            }
+
+            :global(p) {
+                line-height: 1.5;
+            }
         }
     }
 </style>

src/routes/_docs/Sidebar.svelte

@@ -2,8 +2,8 @@
     <div class="section">
         <span class="section__title">Getting started</span>
         <a href="/" class="section__link">Introduction</a>
-        <a href="/general/icons" class="section__link">Using Icons</a>
+        <a href="/getting-started/icons" class="section__link">Using Icons</a>
-        <a href="/general/css" class="section__link">CSS configuration</a>
+        <a href="/getting-started/css" class="section__link">CSS configuration</a>
     </div>
 
     <div class="section">

src/routes/_docs/styles/gh-markdown.css

@@ -0,0 +1,367 @@
+a {
+    color: #4183C4;
+    text-decoration: none;
+}
+
+a.absent {
+    color: #cc0000;
+}
+
+a.anchor {
+    display: block;
+    padding-left: 30px;
+    margin-left: -30px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    margin: 20px 0 10px;
+    padding: 0;
+    font-weight: bold;
+    -webkit-font-smoothing: antialiased;
+    cursor: text;
+    position: relative;
+}
+
+h2:first-child, h1:first-child, h1:first-child + h2, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
+    margin-top: 0;
+    padding-top: 0;
+}
+
+h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor {
+    text-decoration: none;
+}
+
+h1 tt, h1 code {
+    font-size: inherit;
+}
+
+h2 tt, h2 code {
+    font-size: inherit;
+}
+
+h3 tt, h3 code {
+    font-size: inherit;
+}
+
+h4 tt, h4 code {
+    font-size: inherit;
+}
+
+h5 tt, h5 code {
+    font-size: inherit;
+}
+
+h6 tt, h6 code {
+    font-size: inherit;
+}
+
+h1 {
+    font-size: 28px;
+    color: black;
+}
+
+h2 {
+    font-size: 24px;
+    border-bottom: 1px solid #cccccc;
+    color: black;
+}
+
+h3 {
+    font-size: 18px;
+}
+
+h4 {
+    font-size: 16px;
+}
+
+h5 {
+    font-size: 14px;
+}
+
+h6 {
+    color: #777777;
+    font-size: 14px;
+}
+
+p, blockquote, ul, ol, dl, li, table, pre {
+    margin: 15px 0;
+}
+
+hr {
+    border: 0 none;
+    color: #cccccc;
+    height: 4px;
+    padding: 0;
+}
+
+body > h2:first-child {
+    margin-top: 0;
+    padding-top: 0;
+}
+
+body > h1:first-child {
+    margin-top: 0;
+    padding-top: 0;
+}
+
+body > h1:first-child + h2 {
+    margin-top: 0;
+    padding-top: 0;
+}
+
+body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child {
+    margin-top: 0;
+    padding-top: 0;
+}
+
+a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
+    margin-top: 0;
+    padding-top: 0;
+}
+
+h1 p, h2 p, h3 p, h4 p, h5 p, h6 p {
+    margin-top: 0;
+}
+
+li p.first {
+    display: inline-block;
+}
+
+ul, ol {
+    padding-left: 30px;
+}
+
+ul :first-child, ol :first-child {
+    margin-top: 0;
+}
+
+ul :last-child, ol :last-child {
+    margin-bottom: 0;
+}
+
+dl {
+    padding: 0;
+}
+
+dl dt {
+    font-size: 14px;
+    font-weight: bold;
+    font-style: italic;
+    padding: 0;
+    margin: 15px 0 5px;
+}
+
+dl dt:first-child {
+    padding: 0;
+}
+
+dl dt > :first-child {
+    margin-top: 0;
+}
+
+dl dt > :last-child {
+    margin-bottom: 0;
+}
+
+dl dd {
+    margin: 0 0 15px;
+    padding: 0 15px;
+}
+
+dl dd > :first-child {
+    margin-top: 0;
+}
+
+dl dd > :last-child {
+    margin-bottom: 0;
+}
+
+blockquote {
+    border-left: 4px solid #dddddd;
+    padding: 0 15px;
+    color: #777777;
+}
+
+blockquote > :first-child {
+    margin-top: 0;
+}
+
+blockquote > :last-child {
+    margin-bottom: 0;
+}
+
+table {
+    padding: 0;
+}
+table tr {
+    border-top: 1px solid #cccccc;
+    background-color: white;
+    margin: 0;
+    padding: 0;
+}
+
+table tr:nth-child(2n) {
+    background-color: #f8f8f8;
+}
+
+table tr th {
+    font-weight: bold;
+    border: 1px solid #cccccc;
+    text-align: left;
+    margin: 0;
+    padding: 6px 13px;
+}
+
+table tr td {
+    border: 1px solid #cccccc;
+    text-align: left;
+    margin: 0;
+    padding: 6px 13px;
+}
+
+table tr th :first-child, table tr td :first-child {
+    margin-top: 0;
+}
+
+table tr th :last-child, table tr td :last-child {
+    margin-bottom: 0;
+}
+
+img {
+    max-width: 100%;
+}
+
+span.frame {
+    display: block;
+    overflow: hidden;
+}
+
+span.frame > span {
+    border: 1px solid #dddddd;
+    display: block;
+    float: left;
+    overflow: hidden;
+    margin: 13px 0 0;
+    padding: 7px;
+    width: auto;
+}
+
+span.frame span img {
+    display: block;
+    float: left;
+}
+
+span.frame span span {
+    clear: both;
+    color: #333333;
+    display: block;
+    padding: 5px 0 0;
+}
+
+span.align-center {
+    display: block;
+    overflow: hidden;
+    clear: both;
+}
+
+span.align-center > span {
+    display: block;
+    overflow: hidden;
+    margin: 13px auto 0;
+    text-align: center;
+}
+
+span.align-center span img {
+    margin: 0 auto;
+    text-align: center;
+}
+
+span.align-right {
+    display: block;
+    overflow: hidden;
+    clear: both;
+}
+
+span.align-right > span {
+    display: block;
+    overflow: hidden;
+    margin: 13px 0 0;
+    text-align: right;
+}
+
+span.align-right span img {
+    margin: 0;
+    text-align: right;
+}
+
+span.float-left {
+    display: block;
+    margin-right: 13px;
+    overflow: hidden;
+    float: left;
+}
+
+span.float-left span {
+    margin: 13px 0 0;
+}
+
+span.float-right {
+    display: block;
+    margin-left: 13px;
+    overflow: hidden;
+    float: right;
+}
+
+span.float-right > span {
+    display: block;
+    overflow: hidden;
+    margin: 13px auto 0;
+    text-align: right;
+}
+
+code, tt {
+    margin: 0 2px;
+    padding: 0 5px;
+    white-space: nowrap;
+    border: 1px solid #eaeaea;
+    background-color: #f8f8f8;
+    border-radius: 3px;
+}
+
+pre code {
+    margin: 0;
+    padding: 0;
+    white-space: pre;
+    border: none;
+    background: transparent;
+}
+
+.highlight pre {
+    background-color: #f8f8f8;
+    border: 1px solid #cccccc;
+    font-size: 13px;
+    line-height: 19px;
+    overflow: auto;
+    padding: 6px 10px;
+    border-radius: 3px;
+}
+
+pre {
+    background-color: #f8f8f8;
+    border: 1px solid #cccccc;
+    font-size: 13px;
+    line-height: 19px;
+    overflow: auto;
+    padding: 6px 10px;
+    border-radius: 3px;
+}
+
+pre code, pre tt {
+    background-color: transparent;
+    border: none;
+}

src/routes/getting-started/icons.md

@@ -1,3 +1,7 @@
+<script>
+      import IconHeart from 'virtual:icons/heroicons-outline/heart'
+</script>
+
 <svelte:head>
     <title>Icons - Kleos</title>
 </svelte:head>
@@ -54,6 +58,10 @@ Import an icon in the `<script>` tag of your component:
 
 Then use the icon as if it were a Svelte component:
 
+> The `height` and `width` props are optional, and take CSS compatible values
+
 ```html
-<IconHeart />
+That's lovely <IconHeart height="14px" />!
 ```
+
+That's lovely <IconHeart height="14px" />!

src/routes/index.md

@@ -4,4 +4,39 @@
 
 # Introduction
 
-This is `kleos`, Modrinth's style and component library. Go to [its repository](https://github.com/modrinth/kleos) for more information.
+> Kleos is in early development, and not ready for use in any application. Contribute to it on [GitHub](https://github.com/modrinth/kleos).
+
+### What is Kleos?
+
+Kleos is Modrinth's style and reusable component library for use in all of its frontend applications, including [knossos](https://github.com/modrinth/knossos) (modrinth.com), [theseus](https://github.com/modrinth/theseus) (launcher), and planned projects such as Modrinth's in-house auth and ad-server.
+
+It uses [Svelte](https://svelte.dev/) to deliver the best performance with the least boilerplate.
+
+### Getting started
+
+Adding Kleos to your project is as easy as:
+
+```bash
+pnpm add kleos
+```
+
+#### Components
+
+Import a component with:
+```js
+import { Button } from "kleos"
+```
+
+Then, use it in your HTML:
+
+```html
+<Button color="primary">Click me!</Button>
+```
+
+For more information on each component, check out the pages on the sidebar navigation.
+
+> To get Svelte language support in your code editor, [use this list.](https://sveltesociety.dev/tools#editor-support)
+
+#### Icons, Styles, and more
+
+Follow the guides on the sidebar to learn how to use [icons](/getting-started/icons) and general concepts.