diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index 5e0744cf9..584448f9d 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -13,5 +13,15 @@
       </option>
     </inspection_tool>
     <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="style:min-width" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
   </profile>
 </component>
\ No newline at end of file
diff --git a/mdsvex.config.js b/mdsvex.config.js
index d46083269..71cdaa7fb 100644
--- a/mdsvex.config.js
+++ b/mdsvex.config.js
@@ -1,4 +1,5 @@
 import { defineMDSveXConfig as defineConfig } from 'mdsvex';
+import examples from 'mdsvexamples'
 
 const config = defineConfig({
   extensions: ['.svelte.md', '.md', '.svx'],
@@ -7,7 +8,7 @@ const config = defineConfig({
     dashes: 'oldschool',
   },
 
-  remarkPlugins: [],
+  remarkPlugins: [[examples, { ExampleComponent: '$routes/_internal/components/Example.svelte' }]],
   rehypePlugins: [],
 
   layout: {
diff --git a/package.json b/package.json
index ea5bc9cfd..1530dd467 100644
--- a/package.json
+++ b/package.json
@@ -20,8 +20,9 @@
     "@iconify-json/heroicons-outline": "^1.1.1",
     "@iconify-json/lucide": "^1.1.7",
     "@poppanator/sveltekit-svg": "^0.3.1",
-    "@sveltejs/adapter-auto": "^1.0.0-next.33",
+    "@sveltejs/adapter-static": "^1.0.0-next.29",
     "@sveltejs/kit": "next",
+    "@types/prismjs": "^1.26.0",
     "@typescript-eslint/eslint-plugin": "^5.10.1",
     "@typescript-eslint/parser": "^5.10.1",
     "autoprefixer": "^10.4.2",
@@ -30,21 +31,22 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-svelte3": "^3.2.1",
     "mdsvex": "^0.10.5",
+    "mdsvexamples": "^0.0.8",
     "nodemon": "^2.0.15",
     "postcss": "^8.4.8",
     "postcss-extend-rule": "^4.0.0",
     "postcss-import": "^14.0.2",
+    "postcss-import-ext-glob": "^2.0.1",
     "postcss-load-config": "^3.1.1",
     "postcss-nested": "^5.0.6",
     "postcss-preset-env": "^7.4.2",
+    "postcss-pxtorem": "^6.0.0",
     "postcss-strip-inline-comments": "^0.1.5",
-    "prism-svelte": "^0.5.0",
-    "prismjs": "^1.27.0",
+    "sveld": "^0.13.4",
     "svelte": "^3.44.0",
     "svelte-check": "^2.2.6",
     "svelte-preprocess": "^4.10.1",
     "svelte2tsx": "^0.5.5",
-    "sveltedoc-parser": "^4.2.1",
     "tslib": "^2.3.1",
     "typescript": "~4.6.2",
     "unplugin-icons": "^0.13.3"
@@ -67,6 +69,8 @@
   },
   "homepage": "https://omorphia.modrinth.com",
   "dependencies": {
-    "sanitize.css": "^13.0.0"
+    "sanitize.css": "^13.0.0",
+    "svelte-use-click-outside": "^1.0.0",
+    "throttle-debounce": "^3.0.1"
   }
 }
diff --git a/plugins/sveld.js b/plugins/sveld.js
new file mode 100644
index 000000000..2a048322d
--- /dev/null
+++ b/plugins/sveld.js
@@ -0,0 +1,30 @@
+import { ComponentParser } from 'sveld'
+import sveltePreprocess from 'svelte-preprocess'
+import * as svelte from 'svelte/compiler'
+
+export default function sveld() {
+    return {
+        name: 'vite-plugin-sveld',
+        async transform(src, id) {
+            if (id.endsWith('?raw&sveld')) {
+                const raw = JSON.parse(src.split('export default ')[1])
+
+                let { code } = await svelte.preprocess(raw, sveltePreprocess({ postcss: true }), {
+                    filename: id
+                })
+                const data = new ComponentParser({
+                    verbose: false
+                }).parseSvelteComponent(code, {
+                    filePath: id,
+                    moduleName: id
+                })
+
+
+                return {
+                    code: `export default ${JSON.stringify(data)}`,
+                    map: null
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a4c29d038..7876c8e41 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,8 +5,9 @@ specifiers:
   '@iconify-json/heroicons-outline': ^1.1.1
   '@iconify-json/lucide': ^1.1.7
   '@poppanator/sveltekit-svg': ^0.3.1
-  '@sveltejs/adapter-auto': ^1.0.0-next.33
+  '@sveltejs/adapter-static': ^1.0.0-next.29
   '@sveltejs/kit': next
+  '@types/prismjs': ^1.26.0
   '@typescript-eslint/eslint-plugin': ^5.10.1
   '@typescript-eslint/parser': ^5.10.1
   autoprefixer: ^10.4.2
@@ -15,36 +16,42 @@ specifiers:
   eslint-config-prettier: ^8.3.0
   eslint-plugin-svelte3: ^3.2.1
   mdsvex: ^0.10.5
+  mdsvexamples: ^0.0.8
   nodemon: ^2.0.15
   postcss: ^8.4.8
   postcss-extend-rule: ^4.0.0
   postcss-import: ^14.0.2
+  postcss-import-ext-glob: ^2.0.1
   postcss-load-config: ^3.1.1
   postcss-nested: ^5.0.6
   postcss-preset-env: ^7.4.2
+  postcss-pxtorem: ^6.0.0
   postcss-strip-inline-comments: ^0.1.5
-  prism-svelte: ^0.5.0
-  prismjs: ^1.27.0
   sanitize.css: ^13.0.0
+  sveld: ^0.13.4
   svelte: ^3.44.0
   svelte-check: ^2.2.6
   svelte-preprocess: ^4.10.1
+  svelte-use-click-outside: ^1.0.0
   svelte2tsx: ^0.5.5
-  sveltedoc-parser: ^4.2.1
+  throttle-debounce: ^3.0.1
   tslib: ^2.3.1
   typescript: ~4.6.2
   unplugin-icons: ^0.13.3
 
 dependencies:
   sanitize.css: 13.0.0
+  svelte-use-click-outside: 1.0.0
+  throttle-debounce: 3.0.1
 
 devDependencies:
   '@iconify-json/carbon': 1.1.1
   '@iconify-json/heroicons-outline': 1.1.1
   '@iconify-json/lucide': 1.1.7
   '@poppanator/sveltekit-svg': 0.3.1_svelte@3.46.4
-  '@sveltejs/adapter-auto': 1.0.0-next.33
-  '@sveltejs/kit': 1.0.0-next.301_svelte@3.46.4
+  '@sveltejs/adapter-static': 1.0.0-next.29
+  '@sveltejs/kit': 1.0.0-next.303_svelte@3.46.4
+  '@types/prismjs': 1.26.0
   '@typescript-eslint/eslint-plugin': 5.14.0_e3f5f4efe2bd492e36eb6c1c619dfc98
   '@typescript-eslint/parser': 5.14.0_eslint@7.32.0+typescript@4.6.2
   autoprefixer: 10.4.2_postcss@8.4.8
@@ -53,21 +60,22 @@ devDependencies:
   eslint-config-prettier: 8.5.0_eslint@7.32.0
   eslint-plugin-svelte3: 3.4.1_eslint@7.32.0+svelte@3.46.4
   mdsvex: 0.10.5_svelte@3.46.4
+  mdsvexamples: 0.0.8
   nodemon: 2.0.15
   postcss: 8.4.8
   postcss-extend-rule: 4.0.0_postcss@8.4.8
   postcss-import: 14.0.2_postcss@8.4.8
+  postcss-import-ext-glob: 2.0.1_postcss@8.4.8
   postcss-load-config: 3.1.3
   postcss-nested: 5.0.6_postcss@8.4.8
   postcss-preset-env: 7.4.2_postcss@8.4.8
+  postcss-pxtorem: 6.0.0_postcss@8.4.8
   postcss-strip-inline-comments: 0.1.5
-  prism-svelte: 0.5.0
-  prismjs: 1.27.0
+  sveld: 0.13.4_c518e768a841b289340ac9217a6c6fc9
   svelte: 3.46.4
   svelte-check: 2.4.5_33233005e4be8b4492b63cc9de0a2fd4
   svelte-preprocess: 4.10.4_8c88c4f1b7a55bcfafd385f58ef1abcd
   svelte2tsx: 0.5.5_svelte@3.46.4+typescript@4.6.2
-  sveltedoc-parser: 4.2.1
   tslib: 2.3.1
   typescript: 4.6.2
   unplugin-icons: 0.13.3
@@ -211,23 +219,6 @@ packages:
       - supports-color
     dev: true
 
-  /@eslint/eslintrc/1.2.1:
-    resolution: {integrity: sha512-bxvbYnBPN1Gibwyp6NrpnFzA3YtRL3BBAyEAFVIpNTm2Rn4Vy87GA5M4aSn3InRrlsbX5N0GW7XIx+U4SAEKdQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      ajv: 6.12.6
-      debug: 4.3.3
-      espree: 9.3.1
-      globals: 13.12.1
-      ignore: 5.2.0
-      import-fresh: 3.3.0
-      js-yaml: 4.1.0
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@humanwhocodes/config-array/0.5.0:
     resolution: {integrity: sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==}
     engines: {node: '>=10.10.0'}
@@ -239,25 +230,10 @@ packages:
       - supports-color
     dev: true
 
-  /@humanwhocodes/config-array/0.9.5:
-    resolution: {integrity: sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==}
-    engines: {node: '>=10.10.0'}
-    dependencies:
-      '@humanwhocodes/object-schema': 1.2.1
-      debug: 4.3.3
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@humanwhocodes/object-schema/1.2.1:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
-  /@iarna/toml/2.2.5:
-    resolution: {integrity: sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==}
-    dev: true
-
   /@iconify-json/carbon/1.1.1:
     resolution: {integrity: sha512-ClOYc+82CKlDAKH1tfDTJTzNz4oHhYD04ALA5uemw9PdWXg05yIJb9bxWjSz4UgdUbH5N/yd8s9hNPI3h6jnlg==}
     dependencies:
@@ -323,6 +299,33 @@ packages:
       svgo: 2.8.0
     dev: true
 
+  /@rollup/plugin-node-resolve/11.2.1_rollup@2.70.0:
+    resolution: {integrity: sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==}
+    engines: {node: '>= 10.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0
+    dependencies:
+      '@rollup/pluginutils': 3.1.0_rollup@2.70.0
+      '@types/resolve': 1.17.1
+      builtin-modules: 3.2.0
+      deepmerge: 4.2.2
+      is-module: 1.0.0
+      resolve: 1.22.0
+      rollup: 2.70.0
+    dev: true
+
+  /@rollup/pluginutils/3.1.0_rollup@2.70.0:
+    resolution: {integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==}
+    engines: {node: '>= 8.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0
+    dependencies:
+      '@types/estree': 0.0.39
+      estree-walker: 1.0.1
+      picomatch: 2.3.1
+      rollup: 2.70.0
+    dev: true
+
   /@rollup/pluginutils/4.2.0:
     resolution: {integrity: sha512-2WUyJNRkyH5p487pGnn4tWAsxhEFKN/pT8CMgHshd5H+IXkOnKvKZwsz5ZWz+YCXkleZRAU5kwbfgF8CPfDRqA==}
     engines: {node: '>= 8.0.0'}
@@ -336,36 +339,14 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /@sveltejs/adapter-auto/1.0.0-next.33:
-    resolution: {integrity: sha512-FVEBSw5XIYCrqMPY2VGmaGyT4ZvbahcdQJ613O4lgAoafRdUy7ZaE8GoeDmCJxtTUsqhAQUFu7jx9IIhz+QrsQ==}
+  /@sveltejs/adapter-static/1.0.0-next.29:
+    resolution: {integrity: sha512-0hjGnfT3BRyoHnzJ2w0/xL+xICRpKneDTm45ZzggiRrc0r71WJfF6toGeg8N4QUQnj8EJ3Itm453gsS1kt7VUQ==}
     dependencies:
-      '@sveltejs/adapter-cloudflare': 1.0.0-next.16
-      '@sveltejs/adapter-netlify': 1.0.0-next.51
-      '@sveltejs/adapter-vercel': 1.0.0-next.47
-    dev: true
-
-  /@sveltejs/adapter-cloudflare/1.0.0-next.16:
-    resolution: {integrity: sha512-ripTRtOasAtxDJEIF3kwwji/9WHfX069i5LuRwGUzOi4/cbcGfgV1RFBVfo/8G6hr3ehqLeKCdloet1yTsp34A==}
-    dependencies:
-      esbuild: 0.14.25
-    dev: true
-
-  /@sveltejs/adapter-netlify/1.0.0-next.51:
-    resolution: {integrity: sha512-P7/cW/0z8zd8J6DOI2yxKZG0+HRMMuzfOf0yzFXX0vRwBePhKlZ/H4qhTOo2NrCmj3Len545o+ugj5gyMXl1+g==}
-    dependencies:
-      '@iarna/toml': 2.2.5
-      esbuild: 0.14.25
       tiny-glob: 0.2.9
     dev: true
 
-  /@sveltejs/adapter-vercel/1.0.0-next.47:
-    resolution: {integrity: sha512-VV3vP8KqL9XOc7xfQLVhXTM5jrTme+r1qJy98u5/dhAhkdjqrGDwAKo/s7MoB3rTYxLb2b8I4QxAaoz2Y2aIBg==}
-    dependencies:
-      esbuild: 0.14.25
-    dev: true
-
-  /@sveltejs/kit/1.0.0-next.301_svelte@3.46.4:
-    resolution: {integrity: sha512-F/XP1VEu+fpvgY04JekNxAFupccNMKOyXtbox0LwNJvBulL15/Tzy6tf4g+9t2Jy7mprwI3h0ZC9G/nVujRFnQ==}
+  /@sveltejs/kit/1.0.0-next.303_svelte@3.46.4:
+    resolution: {integrity: sha512-WdxDc8OiF1WEd/bEza7CBdzA+3qIcCi1GKBj/gieKX9I3N8iDJt/Cg2POrLo9wQoJ47nZcAd1eOhfr7XEX1aIQ==}
     engines: {node: '>=14.13'}
     hasBin: true
     peerDependencies:
@@ -417,6 +398,10 @@ packages:
     engines: {node: '>=10.13.0'}
     dev: true
 
+  /@types/estree/0.0.39:
+    resolution: {integrity: sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==}
+    dev: true
+
   /@types/json-schema/7.0.9:
     resolution: {integrity: sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==}
     dev: true
@@ -425,10 +410,20 @@ packages:
     resolution: {integrity: sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ==}
     dev: true
 
+  /@types/prismjs/1.26.0:
+    resolution: {integrity: sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==}
+    dev: true
+
   /@types/pug/2.0.6:
     resolution: {integrity: sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==}
     dev: true
 
+  /@types/resolve/1.17.1:
+    resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
+    dependencies:
+      '@types/node': 17.0.21
+    dev: true
+
   /@types/sass/1.43.1:
     resolution: {integrity: sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==}
     dependencies:
@@ -573,6 +568,18 @@ packages:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
     dev: true
 
+  /abstract-syntax-tree/2.20.5:
+    resolution: {integrity: sha512-xxmZemmrsmzXHxdEzy9mSM3c22hCjMcLWMUbg1LQeK1FMDLHurxnMmOAN46B0NkFgembXR17D6lDctyFhVjotQ==}
+    engines: {node: '>=14.0.0'}
+    dependencies:
+      ast-types: 0.14.2
+      astring: 1.8.1
+      esquery: 1.4.0
+      estraverse: 5.3.0
+      meriyah: 4.2.0
+      source-map: 0.7.3
+    dev: true
+
   /acorn-jsx/5.3.2_acorn@7.4.1:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -581,14 +588,6 @@ packages:
       acorn: 7.4.1
     dev: true
 
-  /acorn-jsx/5.3.2_acorn@8.7.0:
-    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
-    peerDependencies:
-      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
-    dependencies:
-      acorn: 8.7.0
-    dev: true
-
   /acorn/7.4.1:
     resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
     engines: {node: '>=0.4.0'}
@@ -673,20 +672,33 @@ packages:
       sprintf-js: 1.0.3
     dev: true
 
-  /argparse/2.0.1:
-    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
-    dev: true
-
   /array-union/2.1.0:
     resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
     engines: {node: '>=8'}
     dev: true
 
+  /ast-types/0.14.2:
+    resolution: {integrity: sha512-O0yuUDnZeQDL+ncNGlJ78BiO4jnYI3bvMsD5prT0/nsgijG/LpNBIr63gTjVTNsiGkgQhiyCShTgxt8oXOrklA==}
+    engines: {node: '>=4'}
+    dependencies:
+      tslib: 2.3.1
+    dev: true
+
   /astral-regex/2.0.0:
     resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
     engines: {node: '>=8'}
     dev: true
 
+  /astring/1.8.1:
+    resolution: {integrity: sha512-Aj3mbwVzj7Vve4I/v2JYOPFkCGM2YS7OqQTNSxmUR+LECRpokuPgAYghePgr6SALDo5bD5DlfbSaYjOzGJZOLQ==}
+    hasBin: true
+    dev: true
+
+  /at-least-node/1.0.0:
+    resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==}
+    engines: {node: '>= 4.0.0'}
+    dev: true
+
   /autoprefixer/10.4.2_postcss@8.4.8:
     resolution: {integrity: sha512-9fOPpHKuDW1w/0EKfRmVnxTDt8166MAnLI3mgZ1JCnhNtYWxcJ6Ud5CO/AVOZi/AvFa8DY9RTy3h3+tFBlrrdQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -760,6 +772,11 @@ packages:
     resolution: {integrity: sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=}
     dev: true
 
+  /builtin-modules/3.2.0:
+    resolution: {integrity: sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA==}
+    engines: {node: '>=6'}
+    dev: true
+
   /cacheable-request/6.1.0:
     resolution: {integrity: sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==}
     engines: {node: '>=8'}
@@ -884,6 +901,11 @@ packages:
     engines: {node: '>= 10'}
     dev: true
 
+  /comment-parser/0.7.6:
+    resolution: {integrity: sha512-GKNxVA7/iuTnAqGADlTWX4tkhzxZKXp5fLJqKTlQLHkE65XDUKutZ3BHaJC5IGcper2tT3QRD1xr4o3jNpgXXg==}
+    engines: {node: '>= 6.0.0'}
+    dev: true
+
   /concat-map/0.0.1:
     resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
     dev: true
@@ -1093,6 +1115,11 @@ packages:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
     dev: true
 
+  /deepmerge/4.2.2:
+    resolution: {integrity: sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /defer-to-connect/1.1.3:
     resolution: {integrity: sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==}
     dev: true
@@ -1128,13 +1155,6 @@ packages:
     resolution: {integrity: sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==}
     dev: true
 
-  /domhandler/3.3.0:
-    resolution: {integrity: sha512-J1C5rIANUbuYK+FuFL98650rihynUOEzRLxW+90bKZRWB6A1X1Tf82GxR1qAWLyfNPRvjqfip3Q5tdYlmAa9lA==}
-    engines: {node: '>= 4'}
-    dependencies:
-      domelementtype: 2.2.0
-    dev: true
-
   /domhandler/4.3.0:
     resolution: {integrity: sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==}
     engines: {node: '>= 4'}
@@ -1446,14 +1466,6 @@ packages:
       estraverse: 4.3.0
     dev: true
 
-  /eslint-scope/7.1.1:
-    resolution: {integrity: sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      esrecurse: 4.3.0
-      estraverse: 5.3.0
-    dev: true
-
   /eslint-utils/2.1.0:
     resolution: {integrity: sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==}
     engines: {node: '>=6'}
@@ -1471,16 +1483,6 @@ packages:
       eslint-visitor-keys: 2.1.0
     dev: true
 
-  /eslint-utils/3.0.0_eslint@8.4.1:
-    resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
-    engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
-    peerDependencies:
-      eslint: '>=5'
-    dependencies:
-      eslint: 8.4.1
-      eslint-visitor-keys: 2.1.0
-    dev: true
-
   /eslint-visitor-keys/1.3.0:
     resolution: {integrity: sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==}
     engines: {node: '>=4'}
@@ -1545,53 +1547,6 @@ packages:
       - supports-color
     dev: true
 
-  /eslint/8.4.1:
-    resolution: {integrity: sha512-TxU/p7LB1KxQ6+7aztTnO7K0i+h0tDi81YRY9VzB6Id71kNz+fFYnf5HD5UOQmxkzcoa0TlVZf9dpMtUv0GpWg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    hasBin: true
-    dependencies:
-      '@eslint/eslintrc': 1.2.1
-      '@humanwhocodes/config-array': 0.9.5
-      ajv: 6.12.6
-      chalk: 4.1.2
-      cross-spawn: 7.0.3
-      debug: 4.3.3
-      doctrine: 3.0.0
-      enquirer: 2.3.6
-      escape-string-regexp: 4.0.0
-      eslint-scope: 7.1.1
-      eslint-utils: 3.0.0_eslint@8.4.1
-      eslint-visitor-keys: 3.3.0
-      espree: 9.2.0
-      esquery: 1.4.0
-      esutils: 2.0.3
-      fast-deep-equal: 3.1.3
-      file-entry-cache: 6.0.1
-      functional-red-black-tree: 1.0.1
-      glob-parent: 6.0.2
-      globals: 13.12.1
-      ignore: 4.0.6
-      import-fresh: 3.3.0
-      imurmurhash: 0.1.4
-      is-glob: 4.0.3
-      js-yaml: 4.1.0
-      json-stable-stringify-without-jsonify: 1.0.1
-      levn: 0.4.1
-      lodash.merge: 4.6.2
-      minimatch: 3.1.2
-      natural-compare: 1.4.0
-      optionator: 0.9.1
-      progress: 2.0.3
-      regexpp: 3.2.0
-      semver: 7.3.5
-      strip-ansi: 6.0.1
-      strip-json-comments: 3.1.1
-      text-table: 0.2.0
-      v8-compile-cache: 2.3.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /espree/7.3.1:
     resolution: {integrity: sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -1601,24 +1556,6 @@ packages:
       eslint-visitor-keys: 1.3.0
     dev: true
 
-  /espree/9.2.0:
-    resolution: {integrity: sha512-oP3utRkynpZWF/F2x/HZJ+AGtnIclaR7z1pYPxy7NYM2fSO6LgK/Rkny8anRSPK/VwEA1eqm2squui0T7ZMOBg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      acorn: 8.7.0
-      acorn-jsx: 5.3.2_acorn@8.7.0
-      eslint-visitor-keys: 3.3.0
-    dev: true
-
-  /espree/9.3.1:
-    resolution: {integrity: sha512-bvdyLmJMfwkV3NCRl5ZhJf22zBFo1y8bYh3VYb+bfzqNB4Je68P2sSuXyuFquzWLebHpNd2/d5uv7yoP9ISnGQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      acorn: 8.7.0
-      acorn-jsx: 5.3.2_acorn@8.7.0
-      eslint-visitor-keys: 3.3.0
-    dev: true
-
   /esprima/4.0.1:
     resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
     engines: {node: '>=4'}
@@ -1649,6 +1586,14 @@ packages:
     engines: {node: '>=4.0'}
     dev: true
 
+  /estree-walker/0.6.1:
+    resolution: {integrity: sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==}
+    dev: true
+
+  /estree-walker/1.0.1:
+    resolution: {integrity: sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==}
+    dev: true
+
   /estree-walker/2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
     dev: true
@@ -1696,6 +1641,10 @@ packages:
     resolution: {integrity: sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=}
     dev: true
 
+  /fast-sort/2.2.0:
+    resolution: {integrity: sha512-W7zqnn2zsYoQA87FKmYtgOsbJohOrh7XrtZrCVHN5XZKqTBTv5UG+rSS3+iWbg/nepRQUOu+wnas8BwtK8kiCg==}
+    dev: true
+
   /fastq/1.13.0:
     resolution: {integrity: sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==}
     dependencies:
@@ -1740,6 +1689,16 @@ packages:
     resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
     dev: true
 
+  /fs-extra/9.1.0:
+    resolution: {integrity: sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      at-least-node: 1.0.0
+      graceful-fs: 4.2.9
+      jsonfile: 6.1.0
+      universalify: 2.0.0
+    dev: true
+
   /fs.realpath/1.0.0:
     resolution: {integrity: sha1-FQStJSMVjKpA20onh8sBQRmU6k8=}
     dev: true
@@ -1786,13 +1745,6 @@ packages:
       is-glob: 4.0.3
     dev: true
 
-  /glob-parent/6.0.2:
-    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
-    engines: {node: '>=10.13.0'}
-    dependencies:
-      is-glob: 4.0.3
-    dev: true
-
   /glob/7.2.0:
     resolution: {integrity: sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==}
     dependencies:
@@ -1893,15 +1845,6 @@ packages:
       function-bind: 1.1.1
     dev: true
 
-  /htmlparser2-svelte/4.1.0:
-    resolution: {integrity: sha512-+4f4RBFz7Rj2Hp0ZbFbXC+Kzbd6S9PgjiuFtdT76VMNgKogrEZy0pG2UrPycPbrZzVEIM5lAT3lAdkSTCHLPjg==}
-    dependencies:
-      domelementtype: 2.2.0
-      domhandler: 3.3.0
-      domutils: 2.8.0
-      entities: 2.2.0
-    dev: true
-
   /http-cache-semantics/4.1.0:
     resolution: {integrity: sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==}
     dev: true
@@ -2008,6 +1951,10 @@ packages:
       is-path-inside: 3.0.3
     dev: true
 
+  /is-module/1.0.0:
+    resolution: {integrity: sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=}
+    dev: true
+
   /is-npm/5.0.0:
     resolution: {integrity: sha512-WW/rQLOazUq+ST/bCAVBp/2oMERWLsR7OrKyt052dNDk4DHcDE0/7QSXITlmi+VBcV13DfIbysG3tZJm5RfdBA==}
     engines: {node: '>=10'}
@@ -2061,13 +2008,6 @@ packages:
       esprima: 4.0.1
     dev: true
 
-  /js-yaml/4.1.0:
-    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
-    hasBin: true
-    dependencies:
-      argparse: 2.0.1
-    dev: true
-
   /json-buffer/3.0.0:
     resolution: {integrity: sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=}
     dev: true
@@ -2084,6 +2024,14 @@ packages:
     resolution: {integrity: sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=}
     dev: true
 
+  /jsonfile/6.1.0:
+    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
+    dependencies:
+      universalify: 2.0.0
+    optionalDependencies:
+      graceful-fs: 4.2.9
+    dev: true
+
   /keyv/3.1.0:
     resolution: {integrity: sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==}
     dependencies:
@@ -2199,6 +2147,22 @@ packages:
       vfile-message: 2.0.4
     dev: true
 
+  /mdsvexamples/0.0.8:
+    resolution: {integrity: sha512-BFyJeke4r/PbWWk4+jXVXjuR0/YNMJK10rXjRGarmr7+bqg3kIlfTFjew/uMx9KBYchWLaJlnVQPrh5nQN5/lg==}
+    dependencies:
+      abstract-syntax-tree: 2.20.5
+      prism-svelte: 0.5.0
+      prismjs: 1.27.0
+      unist-util-visit: 4.1.0
+      unplugin: 0.5.2
+      upath: 2.0.1
+    transitivePeerDependencies:
+      - esbuild
+      - rollup
+      - vite
+      - webpack
+    dev: true
+
   /merge-stream/2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
     dev: true
@@ -2208,6 +2172,11 @@ packages:
     engines: {node: '>= 8'}
     dev: true
 
+  /meriyah/4.2.0:
+    resolution: {integrity: sha512-fCVh5GB9YT53Bq14l00HLYE3i9DywrY0JVZxbk0clXWDuMsUKKwluvC5sY0bMBqHbnIbpIjfSSIsnrzbauA8Yw==}
+    engines: {node: '>=10.4.0'}
+    dev: true
+
   /micromatch/4.0.4:
     resolution: {integrity: sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==}
     engines: {node: '>=8.6'}
@@ -2667,6 +2636,17 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
+  /postcss-import-ext-glob/2.0.1_postcss@8.4.8:
+    resolution: {integrity: sha512-cCvzsZBPuhLCOAfkPeBnJ31uz5azlAjNb5Aug1f2nlomgZK+WD7Uwfrk+epFU9PI20rsMAineDUK4Ty+jEQHcg==}
+    peerDependencies:
+      postcss: ^8.2.0
+    dependencies:
+      fast-glob: 3.2.11
+      fast-sort: 2.2.0
+      postcss: 8.4.8
+      postcss-value-parser: 4.2.0
+    dev: true
+
   /postcss-import/14.0.2_postcss@8.4.8:
     resolution: {integrity: sha512-BJ2pVK4KhUyMcqjuKs9RijV5tatNzNa73e/32aBVE/ejYPe37iH+6vAu9WvqUkB5OAYgLHzbSvzHnorybJCm9g==}
     engines: {node: '>=10.0.0'}
@@ -3012,6 +2992,14 @@ packages:
       postcss-selector-parser: 6.0.9
     dev: true
 
+  /postcss-pxtorem/6.0.0_postcss@8.4.8:
+    resolution: {integrity: sha512-ZRXrD7MLLjLk2RNGV6UA4f5Y7gy+a/j1EqjAfp9NdcNYVjUMvg5HTYduTjSkKBkRkfqbg/iKrjMO70V4g1LZeg==}
+    peerDependencies:
+      postcss: ^8.0.0
+    dependencies:
+      postcss: 8.4.8
+    dev: true
+
   /postcss-reduce-initial/5.1.0_postcss@8.4.8:
     resolution: {integrity: sha512-5OgTUviz0aeH6MtBjHfbr57tml13PuedK/Ecg8szzd4XRMbYxH4572JFG067z+FqBIf6Zp/d+0581glkvvWMFw==}
     engines: {node: ^10 || ^12 || >=14.0}
@@ -3118,6 +3106,12 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /prettier/2.6.1:
+    resolution: {integrity: sha512-8UVbTBYGwN37Bs9LERmxCPjdvPxlEowx2urIL6urHzdb3SDq4B/Z6xLFCblrSnE4iKWcS6ziJ3aOYrc1kz/E2A==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    dev: true
+
   /prism-svelte/0.4.7:
     resolution: {integrity: sha512-yABh19CYbM24V7aS7TuPYRNMqthxwbvx6FF/Rw920YbyBWO3tnyPIqRMgHuSVsLmuHkkBS1Akyof463FVdkeDQ==}
     dev: true
@@ -3210,6 +3204,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /require-relative/0.8.7:
+    resolution: {integrity: sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=}
+    dev: true
+
   /resolve-from/4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -3249,6 +3247,25 @@ packages:
       glob: 7.2.0
     dev: true
 
+  /rollup-plugin-svelte/7.1.0_rollup@2.70.0+svelte@3.46.4:
+    resolution: {integrity: sha512-vopCUq3G+25sKjwF5VilIbiY6KCuMNHP1PFvx2Vr3REBNMDllKHFZN2B9jwwC+MqNc3UPKkjXnceLPEjTjXGXg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      rollup: '>=2.0.0'
+      svelte: '>=3.5.0'
+    dependencies:
+      require-relative: 0.8.7
+      rollup: 2.70.0
+      rollup-pluginutils: 2.8.2
+      svelte: 3.46.4
+    dev: true
+
+  /rollup-pluginutils/2.8.2:
+    resolution: {integrity: sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==}
+    dependencies:
+      estree-walker: 0.6.1
+    dev: true
+
   /rollup/2.70.0:
     resolution: {integrity: sha512-iEzYw+syFxQ0X9RefVwhr8BA2TNJsTaX8L8dhyeyMECDbmiba+8UQzcu+xZdji0+JQ+s7kouQnw+9Oz5M19XKA==}
     engines: {node: '>=10.0.0'}
@@ -3467,6 +3484,34 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
+  /sveld/0.13.4_c518e768a841b289340ac9217a6c6fc9:
+    resolution: {integrity: sha512-LY9G/4aNv+WYnybqHfRFVHN3JZzDcnJEYX5/LYpD+/Jgr+Iby5bBSwm/YMtM7D4tvV7tPchv1Z0T7P3RiJIiJA==}
+    hasBin: true
+    dependencies:
+      '@rollup/plugin-node-resolve': 11.2.1_rollup@2.70.0
+      acorn: 8.7.0
+      comment-parser: 0.7.6
+      fast-glob: 3.2.11
+      fs-extra: 9.1.0
+      prettier: 2.6.1
+      rollup: 2.70.0
+      rollup-plugin-svelte: 7.1.0_rollup@2.70.0+svelte@3.46.4
+      svelte: 3.46.4
+      svelte-preprocess: 4.10.4_8c88c4f1b7a55bcfafd385f58ef1abcd
+      typescript: 4.6.2
+    transitivePeerDependencies:
+      - '@babel/core'
+      - coffeescript
+      - less
+      - node-sass
+      - postcss
+      - postcss-load-config
+      - pug
+      - sass
+      - stylus
+      - sugarss
+    dev: true
+
   /svelte-check/2.4.5_33233005e4be8b4492b63cc9de0a2fd4:
     resolution: {integrity: sha512-nRft8BbG2wcxyCdHDZ7X43xLcvDzua3xLwq6wzHGcAF3ka3Jyhv2rvgq0+SF9NwHLMefp9C2XkM6etzsxK/cMQ==}
     hasBin: true
@@ -3558,6 +3603,10 @@ packages:
       typescript: 4.6.2
     dev: true
 
+  /svelte-use-click-outside/1.0.0:
+    resolution: {integrity: sha512-tOWeMPxeIoW9RshS0WbogRhdYdbxcJV0ebkzSh1lwR7Ihl0hSZMmB4YyCHHoXJK4xcbxCCFh0AnQ1vkzGZfLVQ==}
+    dev: false
+
   /svelte/3.46.4:
     resolution: {integrity: sha512-qKJzw6DpA33CIa+C/rGp4AUdSfii0DOTCzj/2YpSKKayw5WGSS624Et9L1nU1k2OVRS9vaENQXp2CVZNU+xvIg==}
     engines: {node: '>= 8'}
@@ -3575,17 +3624,6 @@ packages:
       typescript: 4.6.2
     dev: true
 
-  /sveltedoc-parser/4.2.1:
-    resolution: {integrity: sha512-sWJRa4qOfRdSORSVw9GhfDEwsbsYsegnDzBevUCF6k/Eis/QqCu9lJ6I0+d/E2wOWCjOhlcJ3+jl/Iur+5mmCw==}
-    engines: {node: '>=10.0.0'}
-    dependencies:
-      eslint: 8.4.1
-      espree: 9.2.0
-      htmlparser2-svelte: 4.1.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /svgo/2.8.0:
     resolution: {integrity: sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==}
     engines: {node: '>=10.13.0'}
@@ -3615,6 +3653,11 @@ packages:
     resolution: {integrity: sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=}
     dev: true
 
+  /throttle-debounce/3.0.1:
+    resolution: {integrity: sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==}
+    engines: {node: '>=10'}
+    dev: false
+
   /timsort/0.3.0:
     resolution: {integrity: sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=}
     dev: true
@@ -3698,12 +3741,36 @@ packages:
       crypto-random-string: 2.0.0
     dev: true
 
+  /unist-util-is/5.1.1:
+    resolution: {integrity: sha512-F5CZ68eYzuSvJjGhCLPL3cYx45IxkqXSetCcRgUXtbcm50X2L9oOWQlfUfDdAf+6Pd27YDblBfdtmsThXmwpbQ==}
+    dev: true
+
   /unist-util-stringify-position/2.0.3:
     resolution: {integrity: sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==}
     dependencies:
       '@types/unist': 2.0.6
     dev: true
 
+  /unist-util-visit-parents/5.1.0:
+    resolution: {integrity: sha512-y+QVLcY5eR/YVpqDsLf/xh9R3Q2Y4HxkZTp7ViLDU6WtJCEcPmRzW1gpdWDCDIqIlhuPDXOgttqPlykrHYDekg==}
+    dependencies:
+      '@types/unist': 2.0.6
+      unist-util-is: 5.1.1
+    dev: true
+
+  /unist-util-visit/4.1.0:
+    resolution: {integrity: sha512-n7lyhFKJfVZ9MnKtqbsqkQEk5P1KShj0+//V7mAcoI6bpbUjh3C/OG8HVD+pBihfh6Ovl01m8dkcv9HNqYajmQ==}
+    dependencies:
+      '@types/unist': 2.0.6
+      unist-util-is: 5.1.1
+      unist-util-visit-parents: 5.1.0
+    dev: true
+
+  /universalify/2.0.0:
+    resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==}
+    engines: {node: '>= 10.0.0'}
+    dev: true
+
   /unplugin-icons/0.13.3:
     resolution: {integrity: sha512-HkNCexbEYNkvZkCH+ytUUXgxvLsd/cTCzNQCsBjpJrZ9bhNVxosf9sYGxJdc2BbdEhnaKYNNrwaP11EzmiW6gQ==}
     peerDependencies:
@@ -3756,6 +3823,33 @@ packages:
       webpack-virtual-modules: 0.4.3
     dev: true
 
+  /unplugin/0.5.2:
+    resolution: {integrity: sha512-3SPYtus/56cxyD4jfjrnqCvb6jPxvdqJNaRXnEaG2BhNEMaoygu/39AG+LwKmiIUzj4XHyitcfZ7scGlWfEigA==}
+    peerDependencies:
+      esbuild: '>=0.13'
+      rollup: ^2.50.0
+      vite: ^2.3.0
+      webpack: 4 || 5
+    peerDependenciesMeta:
+      esbuild:
+        optional: true
+      rollup:
+        optional: true
+      vite:
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      chokidar: 3.5.3
+      webpack-sources: 3.2.3
+      webpack-virtual-modules: 0.4.3
+    dev: true
+
+  /upath/2.0.1:
+    resolution: {integrity: sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==}
+    engines: {node: '>=4'}
+    dev: true
+
   /update-notifier/5.1.0:
     resolution: {integrity: sha512-ItnICHbeMh9GqUy31hFPrD1kcuZ3rpxDZbf4KUDavXwS0bW5m7SLbDQpGX3UYr072cbrF5hFUs3r5tUsPwjfHw==}
     engines: {node: '>=10'}
@@ -3828,6 +3922,11 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /webpack-sources/3.2.3:
+    resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
+    engines: {node: '>=10.13.0'}
+    dev: true
+
   /webpack-virtual-modules/0.4.3:
     resolution: {integrity: sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==}
     dev: true
diff --git a/postcss.config.cjs b/postcss.config.cjs
index 2690b963f..69b265672 100644
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -1,10 +1,12 @@
 const config = {
   plugins: [
+    require('postcss-import-ext-glob'),
     require('postcss-import'),
     require('postcss-strip-inline-comments'),
     require('postcss-extend-rule'),
     require('postcss-nested'),
     require('postcss-preset-env'),
+    require('postcss-pxtorem'),
     require('autoprefixer'),
     process.env.NODE_ENV === 'development' && require('cssnano')({
       preset: 'default',
diff --git a/src/lib/components/Avatar.svelte b/src/lib/components/Avatar.svelte
index ba726340d..0a29f4a20 100644
--- a/src/lib/components/Avatar.svelte
+++ b/src/lib/components/Avatar.svelte
@@ -2,7 +2,8 @@
     import { onMount } from 'svelte'
     import { classCombine } from '$lib/utils/classCombine'
 
-    export let src: string | null
+    /** Optional, as a default icon will be substituted if no image was specified */
+    export let src: string | undefined
     export let size: 'xs' | 'sm' | 'md' | 'lg'
     export let circle = false
     export let floatUp = false
@@ -85,6 +86,7 @@
 
         &--float-up {
             margin-top: calc(var(--size) * (-2 / 3));
+            z-index: 1;
         }
 
         &--circle {
diff --git a/src/lib/components/Badge.svelte b/src/lib/components/Badge.svelte
index 9f85757f0..f85ee182b 100644
--- a/src/lib/components/Badge.svelte
+++ b/src/lib/components/Badge.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     export let label = ''
-    // Supports `green`, `yellow`, `red`, & `gray`
+    /** Supports `green`, `yellow`, `red`, & `gray` */
     export let color = 'gray'
 </script>
 
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index e5e17f737..abc6c2fa5 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
     import { classCombine } from '$lib/utils/classCombine'
 
-    // The element to be styled as a button
+    /** The element to be styled as a button */
     export let as: 'button' | 'a' | 'summary' | 'input' = 'button'
-    export let href: string
+    export let href = ''
     if (href) as = 'a'
 
-    // Use `value` if the button is an `<input`>
-    export let value: string
+    /** Use `value` if the button is an `<input`> */
+    export let value = ''
 
     export let size: 'sm' | 'md' | 'lg' = 'md'
     export let color: 'raised' | 'primary' | 'primary-light' | 'danger'| 'danger-light' | 'transparent'
 
-    // Show notification badge in the upper right of button
+    /** Show notification badge in the upper right of button */
     export let badge = false
 
     export let disabled = false
diff --git a/src/lib/components/Chips.svelte b/src/lib/components/Chips.svelte
index 4e8c1c2ab..cb646399e 100644
--- a/src/lib/components/Chips.svelte
+++ b/src/lib/components/Chips.svelte
@@ -27,7 +27,6 @@
     <Button
       color={isSelected ? 'primary-light' : undefined}
       on:click={() => {
-        console.log(option)
         isSelected && !neverEmpty
           ? selected = null
           : selected = option
diff --git a/src/lib/components/Link.svelte b/src/lib/components/Link.svelte
deleted file mode 100644
index c8f51631f..000000000
--- a/src/lib/components/Link.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script lang="ts">
-    export let href: string;
-</script>
-
-<a {href}><slot /></a>
-
-<style lang="postcss">
-    a {
-        color: var(--color-link);
-
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-</style>
\ No newline at end of file
diff --git a/src/lib/components/Select.svelte b/src/lib/components/Select.svelte
new file mode 100644
index 000000000..8707ff389
--- /dev/null
+++ b/src/lib/components/Select.svelte
@@ -0,0 +1,204 @@
+<script lang="ts">
+    import IconChevronDown from 'virtual:icons/lucide/chevron-down'
+    import { debounce } from 'throttle-debounce'
+    import { clickOutside } from 'svelte-use-click-outside'
+    import { onMount } from 'svelte'
+
+    interface Option {
+        label: string;
+        value: string | number;
+    }
+
+    export let options: Option[] = []
+    export let value: string | number
+    export let selected: Option = options.find((option) => option.value === (value || ''))
+    export let color = ''
+    export let label = ''
+    export let icon = null
+
+    let open = false
+
+    $: if (selected) {
+        value = selected.value
+    }
+
+    const minWidth = options
+			.map(it => it.label || it.value)
+			.reduce((it, acc) => String(it).length > acc ? it : acc, '')
+			.length * 9
+
+    let shouldOpenUp = false
+    let element: HTMLElement
+
+    const checkShouldOpenUp = debounce(100, false, () => {
+        if (element) {
+            const bounding = element.getBoundingClientRect()
+
+            shouldOpenUp =
+                bounding.bottom + 32 * options.length + 16 >
+                (window.innerHeight || document.documentElement.clientHeight)
+        }
+    })
+
+    onMount(() => {
+        checkShouldOpenUp()
+        window.addEventListener('resize', checkShouldOpenUp)
+    })
+
+    function keydown(event: KeyboardEvent) {
+        if ((event.key === ' ' || event.key === 'Enter') && !open) {
+            open = true
+        } else if (event.key === 'ArrowUp') {
+            if (selected) {
+                const index = options.findIndex((option) => option.value === selected.value)
+                if (index > 0) {
+                    selected = options[index - 1]
+                }
+            }
+        } else if (event.key === 'ArrowDown') {
+            if (selected) {
+                const index = options.findIndex((option) => option.value === selected.value)
+                if (index < options.length - 1) {
+                    selected = options[index + 1]
+                }
+            }
+        } else if ((event.key === 'Escape' || event.key === 'Enter') && open) {
+            open = false
+        }
+    }
+</script>
+
+<div
+        class="select select--color-{color}"
+        class:is-open={open}
+        class:select--opens-up={shouldOpenUp}
+        use:clickOutside={() => {
+		open = false;
+	}}
+        bind:this={element}
+        tabindex="0"
+        on:keydown={keydown}
+>
+    <div
+            class="select__input"
+            on:click={() => {
+			open = !open;
+		}}
+    >
+        {#if icon}
+            <svelte:component this={icon}/>
+        {/if}
+        <span class="select__input__value" style:min-width="{minWidth}px">{label || selected?.label || value || 'Choose...'}</span>
+        {#if !icon}
+            <div class="select__input__arrow">
+                <slot name="expandIcon">
+                    <IconChevronDown/>
+                </slot>
+            </div>
+        {/if}
+    </div>
+    {#if open}
+        <ul class="select__options">
+            {#each options as option (option.value)}
+                <li
+                        on:click={() => {
+						selected = option;
+						open = false;
+					}}
+                        class:is-selected={selected?.value === option.value}
+                >
+                    {option.label || option.value}
+                </li>
+            {/each}
+        </ul>
+    {/if}
+</div>
+
+<style lang="postcss">
+    .select {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        color: var(--color-button-text);
+        cursor: pointer;
+        border-radius: var(--rounded);
+        align-self: flex-start;
+
+        &__input {
+            display: flex;
+            width: 100%;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0.25rem 0.9rem;
+            grid-gap: 0.4rem;
+            background-color: var(--color-button-bg);
+            box-shadow: var(--shadow-inset-sm);
+            border-radius: var(--rounded);
+        }
+
+        &__options {
+            list-style-type: none;
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            padding: 0;
+            margin: 0;
+            position: absolute;
+            top: 100%;
+            background-color: var(--color-button-bg);
+            border-radius: var(--rounded-bottom);
+            box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
+            overflow: hidden;
+            border-top: 0.1rem solid var(--color-divider);
+            z-index: 5;
+
+            li {
+                padding: 0.25rem 1rem;
+
+                &:hover {
+                    background-color: var(--color-button-bg-hover);
+                }
+
+                &.is-selected {
+                    background-color: var(--color-brand-dark);
+                    color: var(--color-brand-contrast);
+                    cursor: default;
+                }
+            }
+        }
+
+        &.is-open {
+            z-index: 10;
+
+            .select__input {
+                border-radius: var(--rounded-top);
+                box-shadow: none;
+
+                &__arrow {
+                    transform: rotate(180deg);
+                }
+            }
+        }
+
+        &--color-raised {
+            > * {
+                background-color: var(--color-raised-bg);
+            }
+        }
+
+        &--opens-up {
+            .select__options {
+                bottom: 100%;
+                top: auto;
+                border-radius: var(--rounded-top);
+                box-shadow: none;
+                border-top: none;
+                border-bottom: 0.1rem solid var(--color-divider);
+            }
+
+            &.is-open .select__input {
+                border-radius: var(--rounded-bottom);
+            }
+        }
+    }
+</style>
diff --git a/src/lib/styles.postcss b/src/lib/styles.postcss
index 0645e9b86..962420f45 100644
--- a/src/lib/styles.postcss
+++ b/src/lib/styles.postcss
@@ -1,3 +1,4 @@
-@import "./styles/normalize.postcss";
-@import "./styles/themes.postcss";
-@import "./styles/variables.postcss";
+@import-glob "./styles/normalize.postcss"; /* Doesn't need to glob but fixes warning */
+@import-glob "./styles/themes/**.postcss";
+@import-glob "./styles/variables/**.postcss";
+@import-glob "./styles/classes/**.postcss";
\ No newline at end of file
diff --git a/src/lib/styles/classes/base.postcss b/src/lib/styles/classes/base.postcss
new file mode 100644
index 000000000..50b0b5d6e
--- /dev/null
+++ b/src/lib/styles/classes/base.postcss
@@ -0,0 +1,26 @@
+.base {
+    display: flex;
+    justify-content: center;
+    background-color: var(--color-bg);
+    color: var(--color-text);
+    font-family: var(--font-standard);
+    font-size: var(--font-size-nm);
+    font-weight: var(--font-weight-regular);
+    padding: 1rem;
+
+    scrollbar-color: var(--color-scrollbar) var(--color-bg);
+
+    &::-webkit-scrollbar {
+        width: 14px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background-color: var(--color-bg);
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: var(--color-scrollbar);
+        border-radius: 999px;
+        border: 3px solid var(--color-bg);
+    }
+}
diff --git a/src/lib/styles/classes/card.postcss b/src/lib/styles/classes/card.postcss
new file mode 100644
index 000000000..4c3f75e10
--- /dev/null
+++ b/src/lib/styles/classes/card.postcss
@@ -0,0 +1,97 @@
+.card {
+    --padding: 1rem;
+
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    background-color: var(--color-raised-bg);
+    border-radius: var(--rounded);
+    overflow: hidden;
+    box-shadow: var(--shadow-raised), var(--shadow-inset);
+
+    padding: var(--padding);
+    grid-gap: 1rem;
+    max-width: 100%;
+
+    .profile-picture {
+        z-index: 1;
+    }
+
+    &--gap {
+        &-compressed {
+            grid-gap: 0.6rem;
+        }
+
+        &-none {
+            grid-gap: 0;
+        }
+    }
+
+    &--pad {
+        &-top {
+            padding-top: 2.5rem;
+        }
+    }
+
+    &--overflow-visible {
+        overflow: visible;
+    }
+
+    &__banner {
+        --inverse-padding: calc(var(--padding) * -1);
+        margin: var(--inverse-padding) var(--inverse-padding) 0 var(--inverse-padding);
+        z-index: 0;
+        background-color: var(--color-divider);
+
+        &:-moz-loading {
+            visibility: hidden;
+        }
+
+        &--short {
+            height: 6.5rem;
+            object-fit: cover;
+            object-position: center;
+        }
+
+        &--dark {
+            filter: brightness(0.7);
+        }
+    }
+
+    &__overlay {
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        grid-gap: 0.5rem;
+
+        z-index: 1;
+
+        &--row {
+            flex-direction: row;
+        }
+    }
+
+    &--row {
+        flex-direction: row;
+        align-items: center;
+    }
+
+    &--strip {
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    &--pad-x {
+        --padding: 1rem 1.3rem;
+    }
+
+    &.text {
+        --padding: 1.5rem;
+    }
+}
\ No newline at end of file
diff --git a/src/lib/styles/classes/link.postcss b/src/lib/styles/classes/link.postcss
new file mode 100644
index 000000000..81c003f11
--- /dev/null
+++ b/src/lib/styles/classes/link.postcss
@@ -0,0 +1,7 @@
+.link {
+    color: var(--color-link);
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
\ No newline at end of file
diff --git a/src/lib/styles/classes/title.postcss b/src/lib/styles/classes/title.postcss
new file mode 100644
index 000000000..26681d598
--- /dev/null
+++ b/src/lib/styles/classes/title.postcss
@@ -0,0 +1,8 @@
+.title {
+    font-size: 1.5rem;
+    font-weight: var(--font-weight-bold);
+}
+
+.title-secondary {
+    font-size: 1.25rem;
+}
\ No newline at end of file
diff --git a/src/lib/styles/themes.postcss b/src/lib/styles/themes.postcss
deleted file mode 100644
index 7c6e826e1..000000000
--- a/src/lib/styles/themes.postcss
+++ /dev/null
@@ -1,4 +0,0 @@
-@import "themes/base.postcss";
-@import "themes/light.postcss";
-@import "themes/dark.postcss";
-@import "themes/oled.postcss";
diff --git a/src/lib/styles/variables.postcss b/src/lib/styles/variables.postcss
deleted file mode 100644
index 9c5988746..000000000
--- a/src/lib/styles/variables.postcss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import "variables/borders.postcss";
-@import "variables/typography.postcss";
-@import "variables/spacing.postcss";
\ No newline at end of file
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 8d824bed6..21f5069ca 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,34 +1,39 @@
 <script lang="ts">
-    import "$lib/styles.postcss"
-    import "./_internal/styles/prism-one-dark.css"
-    import "./_internal/styles/gh-markdown.css"
-    import Sidebar from "./_internal/components/Sidebar.svelte"
+    import '$lib/styles.postcss'
+    import './_internal/styles/prism-one-dark.css'
+    import './_internal/styles/gh-markdown.postcss'
+    import Sidebar from './_internal/components/Sidebar.svelte'
     import Header from './_internal/components/Header.svelte'
 </script>
 
 <div class="app">
-    <Header />
-    <Sidebar />
+    <Header/>
+    <Sidebar/>
     <main class="app__content">
-        <slot />
+        <slot/>
     </main>
 </div>
 
 <style lang="postcss">
-    :global(body) {
-        margin: 0;
-        font-size: var(--body-font-size);
-        font-family: var(--body-font);
-        overflow-y: scroll;
-        --accent-color: hsl(331, 80%, 45%);
-        --accent-color-transparent: hsla(331, 80%, 45%, 0.15);
+    :global {
+        html {
+            overflow-y: scroll;
+        }
+
+        body {
+            margin: 0;
+            font-size: var(--body-font-size);
+            font-family: var(--body-font);
+            --accent-color: hsl(331, 80%, 45%);
+            --accent-color-transparent: hsla(331, 80%, 45%, 0.15);
+        }
     }
 
     .app {
         display: grid;
         min-height: 100vh;
         overflow: hidden;
-        --sidebar-width: 250px;
+        --sidebar-width: 325px;
         --header-height: 56px;
         @media (width <= 500px) {
             display: flex;
@@ -41,21 +46,21 @@
             overflow-y: auto;
             background-color: hsl(220, 13%, 91%);
 
-            :global(h1) {
-                font-size: 54px;
-            }
+            :global {
+                a:not(.example__preview *) {
+                    color: var(--accent-color);
 
-            :global(p) {
-                line-height: 1.5;
-            }
-        }
+                    &:hover {
+                        text-decoration: underline;
+                    }
+                }
 
-        @layer base {
-            :global(a) {
-                color: var(--accent-color);
+                h1:not(.example__preview *) {
+                    font-size: 54px;
+                }
 
-                &:hover {
-                    text-decoration: underline;
+                p:not(.example__preview *) {
+                    line-height: 1.5;
                 }
             }
         }
diff --git a/src/routes/_internal/components/Example.svelte b/src/routes/_internal/components/Example.svelte
index 1303fe1f4..0f080141f 100644
--- a/src/routes/_internal/components/Example.svelte
+++ b/src/routes/_internal/components/Example.svelte
@@ -1,18 +1,26 @@
 <script lang="ts">
-    import Prism from 'prismjs';
-    import 'prism-svelte';
+    import Button from '$lib/components/Button.svelte'
+    import IconMoon from 'virtual:icons/heroicons-outline/moon'
+    import IconSun from 'virtual:icons/heroicons-outline/sun'
 
-    export let background: 'var(--color-raised-bg)' | 'transparent' = 'var(--color-raised-bg)'
-
-    export let code = ''
-    const highlighted = Prism.highlight(code.trim(), Prism.languages.svelte, 'svelte');
+    let theme = 'light'
+    let background: 'var(--color-raised-bg)' | 'var(--color-bg)' = 'var(--color-bg)'
 </script>
 
-<div class="example theme-light">
-    <div class="example__preview" style:background={background}>
-        <slot />
+<div class="example">
+    <div class="example__preview theme-{theme} base" style:background={background}>
+        <div class="example__preview__options">
+            <Button color="primary-light" on:click={() => theme === 'light' ? theme = 'dark' : theme = 'light'}>
+                {#if theme === 'light'}
+                    <IconMoon/>
+                {:else}
+                    <IconSun/>
+                {/if}
+            </Button>
+        </div>
+        <slot name="example"/>
     </div>
-    <pre class="example__code language-">{@html highlighted}</pre>
+    <pre class="example__code language-svelte"><slot name="code"/></pre>
 </div>
 
 <style lang="postcss">
@@ -20,13 +28,24 @@
         margin-bottom: 32px;
 
         &__preview {
-            padding: 16px;
             border-radius: var(--rounded-sm-top);
             border: solid 2px hsl(0, 0%, 20%);
             border-bottom: none;
             display: flex;
             grid-gap: 16px;
             flex-wrap: wrap;
+            position: relative;
+            justify-content: flex-start;
+
+            &__options {
+                position: absolute;
+                top: 0;
+                right: 0;
+                padding: 8px;
+                display: flex;
+                justify-content: flex-end;
+                z-index: 100;
+            }
         }
 
         &__code {
diff --git a/src/routes/_internal/components/Header.svelte b/src/routes/_internal/components/Header.svelte
index ddc9bacb0..6fbf270a5 100644
--- a/src/routes/_internal/components/Header.svelte
+++ b/src/routes/_internal/components/Header.svelte
@@ -8,7 +8,7 @@
 
     onMount(() => {
         let lastScrollTop: number
-        window.addEventListener('scroll', function () {
+        window.addEventListener('scroll', () => {
             let scrollTop = window.pageYOffset || document.documentElement.scrollTop
             if (scrollTop > lastScrollTop && headerElement) {
                 headerElement.style.top = 'calc(var(--header-height) * -1)'
diff --git a/src/routes/_internal/components/Sidebar.svelte b/src/routes/_internal/components/Sidebar.svelte
index 35e99299f..34baae634 100644
--- a/src/routes/_internal/components/Sidebar.svelte
+++ b/src/routes/_internal/components/Sidebar.svelte
@@ -1,5 +1,11 @@
 <script lang="ts">
-    const components = ['Button', 'Pagination', 'Link', 'NavRow', 'Badge', 'Avatar', 'Chips'].sort()
+    const components = Object.keys(import.meta.glob('../../components/**'))
+        .map(it => it.replace('../../components/', '').replace('.md', ''))
+        .sort();
+
+    const classes = Object.keys(import.meta.glob('../../classes/**'))
+        .map(it => it.replace('../../classes/', '').replace('.md', ''))
+        .sort();
 </script>
 
 <nav class="sidebar">
@@ -7,7 +13,8 @@
         <span class="section__title">Getting started</span>
         <a href="/" class="section__link">Introduction</a>
         <a href="/getting-started/icons" class="section__link">Using Icons</a>
-        <a href="/getting-started/css" class="section__link">CSS configuration</a>
+        <a href="/getting-started/postcss" class="section__link">PostCSS config</a>
+        <a href="/getting-started/css" class="section__link">Writing CSS</a>
     </div>
 
     <div class="section">
@@ -16,6 +23,13 @@
             <a href="/components/{component}" class="section__link">{component}</a>
         {/each}
     </div>
+
+    <div class="section">
+        <span class="section__title">Classes</span>
+        {#each classes as page}
+            <a href="/classes/{page}" class="section__link">{page}</a>
+        {/each}
+    </div>
 </nav>
 
 <style lang="postcss">
@@ -25,7 +39,7 @@
         grid-gap: 2rem;
         background-color: hsl(220, 15%, 40%);
         color: hsl(216, 10%, 80%);
-        padding: 5.5rem 1.5rem 1.5rem;
+        padding: 5.5rem 2rem 2rem;
         height: 100vh;
         width: calc(var(--sidebar-width) - 3rem);
         position: fixed;
diff --git a/src/routes/_internal/layout/page.svelte b/src/routes/_internal/layout/page.svelte
index f996f3401..279a83b5b 100644
--- a/src/routes/_internal/layout/page.svelte
+++ b/src/routes/_internal/layout/page.svelte
@@ -1,22 +1,18 @@
 <script lang="ts">
     import IconPencil from 'virtual:icons/heroicons-outline/pencil'
     import { page } from '$app/stores'
-    import { onMount } from 'svelte'
 
-    export let componentName = $page.url.pathname.includes('components') ? $page.url.pathname.replace('/components/', '') : undefined
+    export let fileName = $page.url.pathname.substring($page.url.pathname.lastIndexOf('/') + 1)
 
     export let title = ''
-    if (!title && componentName) title = componentName
+    if (!title) title = fileName
 
-    let pageUrl = `https://github.com/modrinth/omorphia/edit/main/src/routes/${$page.url.pathname.replace('/', '') || 'index'}.md`
+    let editUrl = `https://github.com/modrinth/omorphia/edit/main/src/routes/${$page.url.pathname.replace('/', '') || 'index'}.md`
 
     let api
-
-    onMount(async () => {
-        if (componentName) {
-            api = (await import(`../../../lib/components/${componentName}.svelte?raw&api`)).default
-        }
-    })
+    if ($page.url.pathname.includes('components')) {
+        import(`../../../lib/components/${title}.svelte?raw&sveld`).then(output => api = output.default)
+    }
 </script>
 
 <svelte:head>
@@ -25,14 +21,14 @@
 
 <article>
     {#if title}<h1>{title}</h1>{/if}
-    <a class="edit-link" href={pageUrl}>
+    <a class="edit-link" href={editUrl}>
         <IconPencil/>
         Edit this page on GitHub</a>
     <slot/>
 
-    {#if componentName && api}
+    {#if api}
         <div class="extra-info">
-            {#if api.data.length > 0}
+            {#if api.props.length > 0}
                 <h2>Properties</h2>
                 <table class="api-table">
                     <thead>
@@ -44,12 +40,12 @@
                     </tr>
                     </thead>
                     <tbody>
-                    {#each api.data as prop}
+                    {#each api.props as prop}
                         <tr>
                             <td>{prop.name}</td>
-                            <td>{prop.type.type}</td>
-                            <td>{prop.defaultValue ?? ''}</td>
-                            <td>{prop.readonly ? '[Read only] ' : ''}{prop.description?.replace('null', '') || ''}</td>
+                            <td><code>{prop.type ?? ''}</code></td>
+                            <td>{prop.value ?? ''}</td>
+                            <td>{prop.constant ? '[Read only] ' : ''}{prop.description?.replace('null', '') || ''}</td>
                         </tr>
                     {/each}
                     </tbody>
@@ -82,22 +78,19 @@
                     <thead>
                     <tr>
                         <th>Name</th>
-                        <th>Description</th>
+                        <th>Fallback</th>
                     </tr>
                     </thead>
                     <tbody>
                     {#each api.slots as slot}
                         <tr>
                             <td>{slot.name}</td>
-                            <td>{slot.description?.replace('null', '') || ''}</td>
+                            <td>{slot.fallback}</td>
                         </tr>
                     {/each}
                     </tbody>
                 </table>
             {/if}
-
-            <h2>Import</h2>
-            <pre class="language-js"><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">&#123;</span> {componentName} <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"omorphia"</span></code></pre>
         </div>
     {/if}
 </article>
diff --git a/src/routes/_internal/styles/gh-markdown.css b/src/routes/_internal/styles/gh-markdown.css
deleted file mode 100644
index 679d87307..000000000
--- a/src/routes/_internal/styles/gh-markdown.css
+++ /dev/null
@@ -1,373 +0,0 @@
-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;
-}
-
-pre {
-    background-color: #f8f8f8;
-    font-size: 13px;
-    line-height: 19px;
-    overflow: auto;
-    padding: 6px 10px;
-    border-radius: var(--rounded-sm) !important;
-}
-
-pre code, pre tt {
-    background-color: transparent;
-    border: none;
-}
-
-/* Custom styles */
-h1 {
-    font-weight: 600;
-}
-
-h2 {
-    font-weight: 500;
-}
-
-blockquote {
-    border-left: 4px solid var(--accent-color);
-    padding: 15px 15px;
-    color: unset;
-    background-color: var(--accent-color-transparent);
-}
diff --git a/src/routes/_internal/styles/gh-markdown.postcss b/src/routes/_internal/styles/gh-markdown.postcss
new file mode 100644
index 000000000..7b099efcd
--- /dev/null
+++ b/src/routes/_internal/styles/gh-markdown.postcss
@@ -0,0 +1,383 @@
+*:not(.example__preview *) {
+    :where(a) {
+        text-decoration: none;
+
+        &.absent {
+            color: #cc0000;
+        }
+
+        &.anchor {
+            display: block;
+            padding-left: 30px;
+            margin-left: -30px;
+            cursor: pointer;
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+        }
+    }
+
+    &:where(h1, h2, h3, h4, h5, h6) {
+        margin: 20px 0 10px;
+        padding: 0;
+        font-weight: bold;
+        -webkit-font-smoothing: antialiased;
+        cursor: text;
+        position: relative;
+    }
+
+    &:where(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;
+    }
+
+    &:where(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;
+    }
+
+    &:where(h1 tt, h1 code) {
+        font-size: inherit;
+    }
+
+    &:where(h2 tt, h2 code) {
+        font-size: inherit;
+    }
+
+    &:where(h3 tt, h3 code) {
+        font-size: inherit;
+    }
+
+    &:where(h4 tt, h4 code) {
+        font-size: inherit;
+    }
+
+    &:where(h5 tt, h5 code) {
+        font-size: inherit;
+    }
+
+    &:where(h6 tt, h6 code) {
+        font-size: inherit;
+    }
+
+    &:where(h1) {
+        font-size: 28px;
+        color: black;
+    }
+
+    &:where(h2) {
+        font-size: 24px;
+        /*border-bottom: 1px solid #cccccc;*/
+        color: black;
+    }
+
+    &:where(h3) {
+        font-size: 18px;
+    }
+
+    &:where(h4) {
+        font-size: 16px;
+    }
+
+    &:where(h5) {
+        font-size: 14px;
+    }
+
+    &:where(h6) {
+        color: #777777;
+        font-size: 14px;
+    }
+
+    &:where(p, blockquote, ul, ol, dl, li, table, pre) {
+        margin: 15px 0;
+    }
+
+    &:where(hr) {
+        border: 0 none;
+        color: #cccccc;
+        height: 4px;
+        padding: 0;
+    }
+
+    &:where(body > h2:first-child) {
+        margin-top: 0;
+        padding-top: 0;
+    }
+
+    &:where(body > h1:first-child) {
+        margin-top: 0;
+        padding-top: 0;
+    }
+
+    &:where(body > h1:first-child + h2) {
+        margin-top: 0;
+        padding-top: 0;
+    }
+
+    &:where(body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child) {
+        margin-top: 0;
+        padding-top: 0;
+    }
+
+    &:where(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;
+    }
+
+    &:where(h1 p, h2 p, h3 p, h4 p, h5 p, h6 p) {
+        margin-top: 0;
+    }
+
+    &:where(li p.first) {
+        display: inline-block;
+    }
+
+    &:where(ul, ol) {
+        padding-left: 30px;
+    }
+
+    &:where(ul :first-child, ol :first-child) {
+        margin-top: 0;
+    }
+
+    &:where(ul :last-child, ol :last-child) {
+        margin-bottom: 0;
+    }
+
+    &:where(dl) {
+        padding: 0;
+    }
+
+    &:where(dl dt) {
+        font-size: 14px;
+        font-weight: bold;
+        font-style: italic;
+        padding: 0;
+        margin: 15px 0 5px;
+    }
+
+    &:where(dl dt:first-child) {
+        padding: 0;
+    }
+
+    &:where(dl dt > :first-child) {
+        margin-top: 0;
+    }
+
+    &:where(dl dt > :last-child) {
+        margin-bottom: 0;
+    }
+
+    &:where(dl dd) {
+        margin: 0 0 15px;
+        padding: 0 15px;
+    }
+
+    &:where(dl dd > :first-child) {
+        margin-top: 0;
+    }
+
+    &:where(dl dd > :last-child) {
+        margin-bottom: 0;
+    }
+
+    &:where(blockquote) {
+        border-left: 4px solid #dddddd;
+        padding: 0 15px;
+        color: #777777;
+    }
+
+    &:where(blockquote > :first-child) {
+        margin-top: 0;
+    }
+
+    &:where(blockquote > :last-child) {
+        margin-bottom: 0;
+    }
+
+    &:where(table) {
+        padding: 0;
+    }
+
+    &:where(table tr) {
+        border-top: 1px solid #cccccc;
+        background-color: white;
+        margin: 0;
+        padding: 0;
+    }
+
+    &:where(table tr:nth-child(2n)) {
+        background-color: #f8f8f8;
+    }
+
+    &:where(table tr th) {
+        font-weight: bold;
+        border: 1px solid #cccccc;
+        text-align: left;
+        margin: 0;
+        padding: 6px 13px;
+    }
+
+    &:where(table tr td) {
+        border: 1px solid #cccccc;
+        text-align: left;
+        margin: 0;
+        padding: 6px 13px;
+    }
+
+    &:where(table tr th :first-child, table tr td :first-child) {
+        margin-top: 0;
+    }
+
+    &:where(table tr th :last-child, table tr td :last-child) {
+        margin-bottom: 0;
+    }
+
+    &:where(img) {
+        max-width: 100%;
+    }
+
+    &:where(span.frame) {
+        display: block;
+        overflow: hidden;
+    }
+
+    &:where(span.frame > span) {
+        border: 1px solid #dddddd;
+        display: block;
+        float: left;
+        overflow: hidden;
+        margin: 13px 0 0;
+        padding: 7px;
+        width: auto;
+    }
+
+    &:where(span.frame span img) {
+        display: block;
+        float: left;
+    }
+
+    &:where(span.frame span span) {
+        clear: both;
+        color: #333333;
+        display: block;
+        padding: 5px 0 0;
+    }
+
+    &:where(span.align-center) {
+        display: block;
+        overflow: hidden;
+        clear: both;
+    }
+
+    &:where(span.align-center > span) {
+        display: block;
+        overflow: hidden;
+        margin: 13px auto 0;
+        text-align: center;
+    }
+
+    &:where(span.align-center span img) {
+        margin: 0 auto;
+        text-align: center;
+    }
+
+    &:where(span.align-right) {
+        display: block;
+        overflow: hidden;
+        clear: both;
+    }
+
+    &:where(span.align-right > span) {
+        display: block;
+        overflow: hidden;
+        margin: 13px 0 0;
+        text-align: right;
+    }
+
+    &:where(span.align-right span img) {
+        margin: 0;
+        text-align: right;
+    }
+
+    &:where(span.float-left) {
+        display: block;
+        margin-right: 13px;
+        overflow: hidden;
+        float: left;
+    }
+
+    &:where(span.float-left span) {
+        margin: 13px 0 0;
+    }
+
+    &:where(span.float-right) {
+        display: block;
+        margin-left: 13px;
+        overflow: hidden;
+        float: right;
+    }
+
+    &:where(span.float-right > span) {
+        display: block;
+        overflow: hidden;
+        margin: 13px auto 0;
+        text-align: right;
+    }
+
+    &:where(code, tt) {
+        margin: 0 2px;
+        padding: 0 5px;
+        white-space: nowrap;
+        border: 1px solid #eaeaea;
+        background-color: #f8f8f8;
+        border-radius: 3px;
+    }
+
+    &:where(pre code) {
+        margin: 0;
+        padding: 0;
+        white-space: pre;
+        border: none;
+        background: transparent;
+    }
+
+    &:where(pre) {
+        background-color: #f8f8f8;
+        font-size: 13px;
+        line-height: 19px;
+        overflow: auto;
+        padding: 6px 10px;
+        border-radius: var(--rounded-sm) !important;
+    }
+
+    &:where(pre code, pre tt) {
+        background-color: transparent;
+        border: none;
+    }
+
+    &:where(/* Custom styles */
+
+    h1) {
+        font-weight: 600;
+    }
+
+    &:where(h2) {
+        font-weight: 500;
+    }
+
+    &:where(blockquote) {
+        border-left: 4px solid var(--accent-color);
+        padding: 15px 15px;
+        color: unset;
+        background-color: var(--accent-color-transparent);
+    }
+
+    &:where(a) {
+        color: var(--accent-color)
+    }
+
+    &:where(p) {
+        line-height: 150%;
+    }
+}
\ No newline at end of file
diff --git a/src/routes/classes/Card.md b/src/routes/classes/Card.md
new file mode 100644
index 000000000..85e16967a
--- /dev/null
+++ b/src/routes/classes/Card.md
@@ -0,0 +1,31 @@
+### A simple example
+
+```svelte example
+<div class="card">
+   <h3>Moon/Distance to Earth</h3>
+   <h2>238,900 mi</h2>
+   <p>
+       The moon's distance from Earth affects the strength of ocean tides and the appearance of solar eclipses in our skies. The average distance between the blue planet and its only natural satellite is about 238,855 miles (384,400 kilometers), according to NASA.
+   </p>
+</div>
+```
+
+### A more complex example
+
+```svelte example
+<script lang="ts">
+    import Button from "omorphia/components/Button.svelte";
+    import IconPencil from 'virtual:icons/heroicons-outline/pencil'
+    import Avatar from "omorphia/components/Avatar.svelte";
+</script>
+
+<div class="card">
+   <div class="card__overlay">
+       <Button color="raised"><IconPencil /> Edit</Button>
+   </div>
+   <div class="card__banner card__banner--short card__banner--dark" ></div>
+   <Avatar size="md" floatUp/>
+   <h1 class="title">Project</h1>
+   <p class="summary">A project that has a description right here.</p>
+</div>
+```
diff --git a/src/routes/classes/Link.md b/src/routes/classes/Link.md
new file mode 100644
index 000000000..6b658977b
--- /dev/null
+++ b/src/routes/classes/Link.md
@@ -0,0 +1,3 @@
+```svelte example
+<a class="link" href="#place"> Go somewhere! </a>
+```
\ No newline at end of file
diff --git a/src/routes/components/Avatar.md b/src/routes/components/Avatar.md
index 8fa9214ba..99ebbaffe 100644
--- a/src/routes/components/Avatar.md
+++ b/src/routes/components/Avatar.md
@@ -1,14 +1,13 @@
+Avatars are used for project icons and user profile pictures. Low resolution images are rendered pixelated to preserve pixel art.
+
+```svelte example
 <script lang="ts">
-    import Avatar from "$lib/components/Avatar.svelte";
-    import Example from "../_internal/components/Example.svelte"
+    import Avatar from "omorphia/components/Avatar.svelte";
 </script>
 
-<Example code={`<Avatar src="https://avatars3.githubusercontent.com/u/44736536?v=4" size="lg" circle />
-<Avatar src="https://cdn.modrinth.com/data/AANobbMI/icon.png" size="md" />
+<Avatar size="lg" circle src="https://avatars3.githubusercontent.com/u/44736536?v=4" />
+<Avatar size="md" src="https://cdn.modrinth.com/data/AANobbMI/icon.png" />
+<Avatar size="md" src="https://staging-cdn.modrinth.com/data/d1SqMrzw/9a39b0c80a49976b0c04053682708374e18105fe.png" />
 <Avatar size="sm" />
-<Avatar src="https://avatars1.githubusercontent.com/u/6166773?v=4" size="xs" circle />`}>
-<Avatar src="https://avatars3.githubusercontent.com/u/44736536?v=4" size="lg" circle />
-<Avatar src="https://cdn.modrinth.com/data/AANobbMI/icon.png" size="md" />
-<Avatar size="sm" />
-<Avatar src="https://avatars1.githubusercontent.com/u/6166773?v=4" size="xs" circle />
-</Example>
\ No newline at end of file
+<Avatar size="xs" circle src="https://avatars1.githubusercontent.com/u/6166773?v=4" />
+```
diff --git a/src/routes/components/Badge.md b/src/routes/components/Badge.md
index bdb8d1336..084252f7a 100644
--- a/src/routes/components/Badge.md
+++ b/src/routes/components/Badge.md
@@ -1,14 +1,10 @@
+```svelte example
 <script lang="ts">
-    import Badge from "$lib/components/Badge.svelte";
-    import Example from "../_internal/components/Example.svelte"
+    import Badge from "omorphia/components/Badge.svelte";
 </script>
 
-<Example code={`<Badge color="red" label="Tomato" />
-<Badge color="yellow" label="Squash" />
-<Badge color="green" label="Lettuce" />
-<Badge label="Onion" />`}>
 <Badge color="red" label="Tomato" />
 <Badge color="yellow" label="Squash" />
 <Badge color="green" label="Lettuce" />
 <Badge label="Onion" />
-</Example>
\ No newline at end of file
+```
\ No newline at end of file
diff --git a/src/routes/components/Button.md b/src/routes/components/Button.md
index 0e9bd2087..8d4c1812b 100644
--- a/src/routes/components/Button.md
+++ b/src/routes/components/Button.md
@@ -1,14 +1,10 @@
+```svelte example
 <script lang="ts">
-    import Button from "$lib/components/Button.svelte";
-    import Example from "../_internal/components/Example.svelte"
+    import Button from "omorphia/components/Button.svelte";
 </script>
 
-<Example code={`<Button>Eat cake</Button>
-<Button size="sm" color="primary">Small piece</Button>
-<Button size="lg" color="danger">Big part</Button>
-<Button disabled>Nice try</Button>`}>
 <Button>Eat cake</Button>
 <Button size="sm" color="primary">Small piece</Button>
 <Button size="lg" color="danger">Big part</Button>
 <Button disabled>Nice try</Button>
-</Example>
\ No newline at end of file
+```
\ No newline at end of file
diff --git a/src/routes/components/Chips.md b/src/routes/components/Chips.md
index c4fdf9286..bc5c0535d 100644
--- a/src/routes/components/Chips.md
+++ b/src/routes/components/Chips.md
@@ -1,13 +1,10 @@
-<script lang="ts">
-    import Chips from "$lib/components/Chips.svelte";
-    import Example from "../_internal/components/Example.svelte"
-
-    let foo = 'modpack'
-</script>
-
 ### Simple example
 
-<Example code={`
+```svelte example
+<script lang="ts">
+    import Chips from "omorphia/components/Chips.svelte";
+</script>
+
 <Chips options={[
     {
         label: 'One',
@@ -18,25 +15,16 @@
         value: 'two'
     }]}
 />
-`}>
-<Chips options={[
-{
-label: 'One',
-value: 'one'
-},
-{
-label: 'Two',
-value: 'two'
-}]}
-/>
-</Example>
+```
 
 
 ### Force an option to be selected with `neverEmpty`
 
-<Example code={`
-<script>
-    let foo = 'modpack';
+```svelte example
+<script lang="ts">
+    import Chips from "omorphia/components/Chips.svelte";
+
+    let foo = 'modpack'
 </script>
 
 <Chips neverEmpty bind:value={foo} options={[
@@ -53,19 +41,4 @@ value: 'two'
         value: 'world'
     }]}
 />
-`}>
-<Chips neverEmpty bind:value={foo} options={[
-{
-label: 'Mod',
-value: 'mod'
-},
-{
-label: 'Modpack',
-value: 'modpack'
-},
-{
-label: 'World',
-value: 'world'
-}]}
-/>
-</Example>
\ No newline at end of file
+```
diff --git a/src/routes/components/Link.md b/src/routes/components/Link.md
deleted file mode 100644
index d2ecdae1b..000000000
--- a/src/routes/components/Link.md
+++ /dev/null
@@ -1,8 +0,0 @@
-<script lang="ts">
-    import Link from "$lib/components/Link.svelte";
-    import Example from "../_internal/components/Example.svelte"
-</script>
-
-<Example code={`<Link href="#clicked">Click for fun</Link>`}>
-<Link href="#clicked">Click for fun</Link>
-</Example>
\ No newline at end of file
diff --git a/src/routes/components/NavRow.md b/src/routes/components/NavRow.md
index ae199a7a0..dd1d8855d 100644
--- a/src/routes/components/NavRow.md
+++ b/src/routes/components/NavRow.md
@@ -1,11 +1,10 @@
-<script lang="ts">
-    import NavRow from "$lib/components/NavRow.svelte";
-    import Example from "../_internal/components/Example.svelte"
-</script>
-
 `NavRow` works well for most horizontal navigation with less than 10 items. It can be used with paths & query params, and supports specific path level (depths).
 
-<Example code={`
+```svelte example
+<script lang="ts">
+    import NavRow from "omorphia/components/NavRow.svelte";
+</script>
+
 <NavRow
     level={1}
     links={[
@@ -24,23 +23,4 @@
     ]}>
     Click for fun
 </NavRow>
-`}>
-<NavRow
-level={1}
-links={[
-{
-href: '/Button',
-label: 'Button'
-},
-{
-href: '/Link',
-label: 'Link'
-},
-{
-href: '/NavRow',
-label: 'NavRow'
-}
-]}>
-Click for fun
-</NavRow>
-</Example>
\ No newline at end of file
+```
\ No newline at end of file
diff --git a/src/routes/components/Pagination.md b/src/routes/components/Pagination.md
index 9dee65229..62a9f4d47 100644
--- a/src/routes/components/Pagination.md
+++ b/src/routes/components/Pagination.md
@@ -1,10 +1,9 @@
-<script lang="ts">
-    import Pagination from "$lib/components/Pagination.svelte"
-    import Example from "../_internal/components/Example.svelte"
-</script>
-
 Use pagination to show a set of page numbers and navigation directions to move through paginated data.
 
-<Example code={`<Pagination page={20} count={50} />`} background="transparent">
-    <Pagination page={20} count={50} />
-</Example>
+```svelte example
+<script lang="ts">
+    import Pagination from "omorphia/components/Pagination.svelte"
+</script>
+
+<Pagination page={20} count={50} />
+```
\ No newline at end of file
diff --git a/src/routes/components/Select.md b/src/routes/components/Select.md
new file mode 100644
index 000000000..306168961
--- /dev/null
+++ b/src/routes/components/Select.md
@@ -0,0 +1,19 @@
+```svelte example
+<script lang="ts">
+    import Select from "omorphia/components/Select.svelte";
+    
+    let sortMethod = "downloads"
+</script>
+
+<Select
+    color="raised" 
+    options={[
+        { value: "", label: "Relevance" },
+        { value: "downloads", label: "Downloads" },
+        { value: "follows", label: "Followers" },
+        { value: "newest", label: "Recently created" },
+        { value: "updated", label: "Recently updated" },
+    ]} 
+    bind:value={sortMethod}
+/>
+```
diff --git a/src/routes/getting-started/css.md b/src/routes/getting-started/css.md
index 1331b7b7f..e53ac6f05 100644
--- a/src/routes/getting-started/css.md
+++ b/src/routes/getting-started/css.md
@@ -1,31 +1,7 @@
 ---
-title: CSS Configuration
+title: Writing CSS
 ---
 
-Use [PostCSS](https://postcss.org/) to process your css in components and `.postcss` files.
+TODO
 
-Install PostCSS with:
-
-```bash
-pnpx svelte-add@latest postcss
-```
-
-This is the recommended `postcss.config.cjs` setup:
-
-```js
-const config = {
-  plugins: [
-    require('postcss-import'),
-    require('postcss-strip-inline-comments'),
-    require('postcss-nested'),
-    require('postcss-preset-env'),
-    require('autoprefixer'),
-    require('postcss-extend-rule'),
-    process.env.NODE_ENV === 'development' && require('cssnano')({
-      preset: 'default',
-    })
-  ],
-};
-
-module.exports = config;
-```
\ No newline at end of file
+Use `px` measurements. Use `hsl` for colors.
\ No newline at end of file
diff --git a/src/routes/getting-started/postcss.md b/src/routes/getting-started/postcss.md
new file mode 100644
index 000000000..d91c459ed
--- /dev/null
+++ b/src/routes/getting-started/postcss.md
@@ -0,0 +1,31 @@
+---
+title: PostCSS Configuration
+---
+
+Use [PostCSS](https://postcss.org/) to process your css in components and `.postcss` files.
+
+Install PostCSS with:
+
+```bash
+pnpx svelte-add@latest postcss
+```
+
+This is the recommended `postcss.config.cjs` setup:
+
+```js
+const config = {
+  plugins: [
+    require('postcss-import'),
+    require('postcss-strip-inline-comments'),
+    require('postcss-nested'),
+    require('postcss-preset-env'),
+    require('autoprefixer'),
+    require('postcss-extend-rule'),
+    process.env.NODE_ENV === 'development' && require('cssnano')({
+      preset: 'default',
+    })
+  ],
+};
+
+module.exports = config;
+```
\ No newline at end of file
diff --git a/src/routes/index.md b/src/routes/index.md
index 7975a86d0..2132e6e70 100644
--- a/src/routes/index.md
+++ b/src/routes/index.md
@@ -22,15 +22,14 @@ pnpm add omorphia
 
 ### Components
 
-Import a component with:
-```js
-import { Button } from "omorphia"
-```
+Use a component by importing from `omorphia`. For example, use the [Button component](/components/Button) like so:
 
-Then, use it in your HTML:
+```svelte example
+<script lang="ts">
+    import Button from "omorphia/components/Button.svelte"
+</script>
 
-```html
-<Button color="primary">Click me!</Button>
+<Button color="primary">I'm a button!</Button>
 ```
 
 For more information on each component, check out the pages on the sidebar navigation.
diff --git a/svelte.config.js b/svelte.config.js
index 977c92832..585888775 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,12 +1,13 @@
 import {mdsvex} from 'mdsvex';
 import mdsvexConfig from './mdsvex.config.js';
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-static';
 import preprocess from 'svelte-preprocess';
 import sveltePreprocess from 'svelte-preprocess';
 import Icons from 'unplugin-icons/vite';
 import svelteSvg from '@poppanator/sveltekit-svg';
-import {parse} from 'sveltedoc-parser'
-import * as svelte from 'svelte/compiler'
+import examples from 'mdsvexamples/vite'
+import sveld from './plugins/sveld.js'
+import path from "path";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -28,35 +29,45 @@ const config = {
                     compiler: 'svelte',
                     defaultClass: 'icon',
                 }),
-                {
-                    name: "sveltedoc-parser",
-                    async transform(src, id) {
-                        const query = id.split('?')[1]
-
-                        if ((query || '').includes('raw&api')) {
-                            const raw = JSON.parse(src.split('export default ')[1])
-
-                            let {code} = await svelte.preprocess(raw, sveltePreprocess(), {
-                                filename: id
-                            })
-
-                            const data = await parse({
-                                fileContent: code,
-                                encoding: 'ascii',
-                                features: ['data', 'computed', 'events', 'slots'],
-                                ignoredVisibilities: ['private'],
-                                includeSourceLocations: true,
-                                version: 3
-                            })
-
-                            return {
-                                code: `export default ${JSON.stringify(data)}`,
-                                map: null
-                            }
-                        }
-                    }
-                },
+                examples,
+                sveld(),
+                // {
+                //     name: "sveltedoc-parser",
+                //     async transform(src, id) {
+                //         const query = id.split('?')[1]
+                //
+                //         if ((query || '').includes('raw&api')) {
+                //             const raw = JSON.parse(src.split('export default ')[1])
+                //
+                //             let {code} = await svelte.preprocess(raw, sveltePreprocess(), {
+                //                 filename: id
+                //             })
+                //
+                //             const data = await parse({
+                //                 fileContent: code,
+                //                 encoding: 'ascii',
+                //                 features: ['data', 'computed', 'events', 'slots'],
+                //                 ignoredVisibilities: ['private'],
+                //                 includeSourceLocations: true,
+                //                 version: 3
+                //             })
+                //
+                //             return {
+                //                 code: `export default ${JSON.stringify(data)}`,
+                //                 map: null
+                //             }
+                //         }
+                //     }
+                // },
             ],
+
+            resolve: {
+                alias: {
+                    $lib: path.resolve('./src/lib'),
+                    $routes: path.resolve('./src/routes'),
+                    omorphia: path.resolve('./src/lib'),
+                },
+            },
         },
     },
 };
diff --git a/tsconfig.json b/tsconfig.json
index 81ff9770c..c3cf225f9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,3 +1,14 @@
 {
+	"paths": {
+		"omorphia/*": [
+			"src/lib/*"
+		],
+		"omorphia": [
+			"src/lib"
+		],
+		"$routes/*": [
+			"src/routes/*"
+		]
+	},
 	"extends": "./.svelte-kit/tsconfig.json"
 }