Update CSS guidelines + Prefer rem

2022-06-07 14:00:53 -07:00
parent c9ec9f14de
commit eb171ecb21
52 changed files with 768 additions and 606 deletions
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
 		"dev": "svelte-kit dev",
 		"build": "svelte-kit build",
 		"package": "svelte-kit package",
+		"package:watch": "svelte-kit package --watch",
 		"preview": "svelte-kit preview",
 		"prepare": "svelte-kit sync",
 		"check": "svelte-check --tsconfig ./tsconfig.json",
@@ -57,8 +58,8 @@
 		"@iconify-json/heroicons-outline": "^1.1.1",
 		"@iconify-json/heroicons-solid": "^1.1.1",
 		"@iconify-json/lucide": "^1.1.7",
+		"@iconify-json/simple-icons": "^1.1.14",
 		"@poppanator/sveltekit-svg": "^0.3.1",
-		"autoprefixer": "^10.4.2",
 		"cli-progress": "^3.11.1",
 		"cssnano": "^5.1.1",
 		"fast-average-color-node": "^2.2.0",
@@ -73,9 +74,8 @@
 		"postcss-import-ext-glob": "^2.0.1",
 		"postcss-load-config": "^3.1.4",
 		"postcss-nested": "^5.0.6",
-		"postcss-preset-env": "^7.4.2",
+		"postcss-preset-env": "^7.7.1",
 		"postcss-pxtorem": "^6.0.0",
-		"postcss-strip-inline-comments": "^0.1.5",
 		"sanitize.css": "^13.0.0",
 		"svelte-tiny-virtual-list": "^2.0.1",
 		"svelte-use-click-outside": "^1.0.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,12 +6,12 @@ specifiers:
  '@iconify-json/heroicons-outline': ^1.1.1
  '@iconify-json/heroicons-solid': ^1.1.1
  '@iconify-json/lucide': ^1.1.7
+  '@iconify-json/simple-icons': ^1.1.14
  '@poppanator/sveltekit-svg': ^0.3.1
  '@sveltejs/adapter-static': ^1.0.0-next.29
  '@sveltejs/kit': next
  '@typescript-eslint/eslint-plugin': ^5.10.1
  '@typescript-eslint/parser': ^5.10.1
-  autoprefixer: ^10.4.2
  cli-progress: ^3.11.1
  cssnano: ^5.1.1
  eslint: ^7.32.0
@@ -32,9 +32,8 @@ specifiers:
  postcss-import-ext-glob: ^2.0.1
  postcss-load-config: ^3.1.4
  postcss-nested: ^5.0.6
-  postcss-preset-env: ^7.4.2
+  postcss-preset-env: ^7.7.1
  postcss-pxtorem: ^6.0.0
-  postcss-strip-inline-comments: ^0.1.5
  prettier: ^2.6.2
  prettier-plugin-svelte: ^2.7.0
  sanitize.css: ^13.0.0
@@ -57,8 +56,8 @@ dependencies:
  '@iconify-json/heroicons-outline': 1.1.1
  '@iconify-json/heroicons-solid': 1.1.1
  '@iconify-json/lucide': 1.1.7
+  '@iconify-json/simple-icons': 1.1.14
  '@poppanator/sveltekit-svg': 0.3.1_svelte@3.48.0
-  autoprefixer: 10.4.2_postcss@8.4.8
  cli-progress: 3.11.1
  cssnano: 5.1.1_postcss@8.4.8
  fast-average-color-node: 2.2.0
@@ -73,9 +72,8 @@ dependencies:
  postcss-import-ext-glob: 2.0.1_postcss@8.4.8
  postcss-load-config: 3.1.4_postcss@8.4.8
  postcss-nested: 5.0.6_postcss@8.4.8
-  postcss-preset-env: 7.4.2_postcss@8.4.8
+  postcss-preset-env: 7.7.1_postcss@8.4.8
  postcss-pxtorem: 6.0.0_postcss@8.4.8
-  postcss-strip-inline-comments: 0.1.5
  sanitize.css: 13.0.0
  svelte-tiny-virtual-list: 2.0.1
  svelte-use-click-outside: 1.0.0
@@ -85,7 +83,7 @@ dependencies:

 devDependencies:
  '@sveltejs/adapter-static': 1.0.0-next.29
-  '@sveltejs/kit': 1.0.0-next.348_svelte@3.48.0
+  '@sveltejs/kit': 1.0.0-next.350_svelte@3.48.0
  '@typescript-eslint/eslint-plugin': 5.14.0_4p27j37cxves4nxlnqogdhp4ta
  '@typescript-eslint/parser': 5.14.0_e6rt7vlgxfprtuallp2t3cvyi4
  eslint: 7.32.0
@@ -150,8 +148,19 @@ packages:
      regenerator-runtime: 0.13.9
    dev: false

-  /@csstools/postcss-color-function/1.0.3_postcss@8.4.8:
-    resolution: {integrity: sha512-J26I69pT2B3MYiLY/uzCGKVJyMYVg9TCpXkWsRlt+Yfq+nELUEm72QXIMYXs4xA9cJA4Oqs2EylrfokKl3mJEQ==}
+  /@csstools/postcss-cascade-layers/1.0.3_postcss@8.4.8:
+    resolution: {integrity: sha512-fvXP0+dcllGtRKAjA5n5tBr57xWQalKky09hSiXAZ9qqjHn0sDuQV2Jz0Y5zHRQ6iGrAjJZOf2+xQj3yuXfLwA==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.3
+    dependencies:
+      '@csstools/selector-specificity': 2.0.0_bdyst2ohrq5amsk7v2dqmobd64
+      postcss: 8.4.8
+      postcss-selector-parser: 6.0.10
+    dev: false
+
+  /@csstools/postcss-color-function/1.1.0_postcss@8.4.8:
+    resolution: {integrity: sha512-5D5ND/mZWcQoSfYnSPsXtuiFxhzmhxt6pcjrFLJyldj+p0ZN2vvRpYNX+lahFTtMhAYOa2WmkdGINr0yP0CvGA==}
    engines: {node: ^12 || ^14 || >=16}
    peerDependencies:
      postcss: ^8.4
@@ -171,11 +180,11 @@ packages:
      postcss-value-parser: 4.2.0
    dev: false

-  /@csstools/postcss-hwb-function/1.0.0_postcss@8.4.8:
-    resolution: {integrity: sha512-VSTd7hGjmde4rTj1rR30sokY3ONJph1reCBTUXqeW1fKwETPy1x4t/XIeaaqbMbC5Xg4SM/lyXZ2S8NELT2TaA==}
+  /@csstools/postcss-hwb-function/1.0.1_postcss@8.4.8:
+    resolution: {integrity: sha512-AMZwWyHbbNLBsDADWmoXT9A5yl5dsGEBeJSJRUJt8Y9n8Ziu7Wstt4MC8jtPW7xjcLecyfJwtnUTNSmOzcnWeg==}
    engines: {node: ^12 || ^14 || >=16}
    peerDependencies:
-      postcss: ^8.3
+      postcss: ^8.4
    dependencies:
      postcss: 8.4.8
      postcss-value-parser: 4.2.0
@@ -192,14 +201,15 @@ packages:
      postcss-value-parser: 4.2.0
    dev: false

-  /@csstools/postcss-is-pseudo-class/2.0.1_postcss@8.4.8:
-    resolution: {integrity: sha512-Og5RrTzwFhrKoA79c3MLkfrIBYmwuf/X83s+JQtz/Dkk/MpsaKtqHV1OOzYkogQ+tj3oYp5Mq39XotBXNqVc3Q==}
+  /@csstools/postcss-is-pseudo-class/2.0.5_postcss@8.4.8:
+    resolution: {integrity: sha512-Ek+UFI4UP2hB9u0N1cJd6KgSF1rL0J3PT4is0oSStuus8+WzbGGPyJNMOKQ0w/tyPjxiCnOI4RdSMZt3nks64g==}
    engines: {node: ^12 || ^14 || >=16}
    peerDependencies:
      postcss: ^8.4
    dependencies:
+      '@csstools/selector-specificity': 2.0.0_bdyst2ohrq5amsk7v2dqmobd64
      postcss: 8.4.8
-      postcss-selector-parser: 6.0.9
+      postcss-selector-parser: 6.0.10
    dev: false

  /@csstools/postcss-normalize-display-values/1.0.0_postcss@8.4.8:
@@ -212,8 +222,8 @@ packages:
      postcss-value-parser: 4.2.0
    dev: false

-  /@csstools/postcss-oklab-function/1.0.2_postcss@8.4.8:
-    resolution: {integrity: sha512-QwhWesEkMlp4narAwUi6pgc6kcooh8cC7zfxa9LSQNYXqzcdNUtNBzbGc5nuyAVreb7uf5Ox4qH1vYT3GA1wOg==}
+  /@csstools/postcss-oklab-function/1.1.0_postcss@8.4.8:
+    resolution: {integrity: sha512-e/Q5HopQzmnQgqimG9v3w2IG4VRABsBq3itOcn4bnm+j4enTgQZ0nWsaH/m9GV2otWGQ0nwccYL5vmLKyvP1ww==}
    engines: {node: ^12 || ^14 || >=16}
    peerDependencies:
      postcss: ^8.4
@@ -233,6 +243,46 @@ packages:
      postcss-value-parser: 4.2.0
    dev: false

+  /@csstools/postcss-stepped-value-functions/1.0.0_postcss@8.4.8:
+    resolution: {integrity: sha512-q8c4bs1GumAiRenmFjASBcWSLKrbzHzWl6C2HcaAxAXIiL2rUlUWbqQZUjwVG5tied0rld19j/Mm90K3qI26vw==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.3
+    dependencies:
+      postcss: 8.4.8
+      postcss-value-parser: 4.2.0
+    dev: false
+
+  /@csstools/postcss-trigonometric-functions/1.0.1_postcss@8.4.8:
+    resolution: {integrity: sha512-G78CY/+GePc6dDCTUbwI6TTFQ5fs3N9POHhI6v0QzteGpf6ylARiJUNz9HrRKi4eVYBNXjae1W2766iUEFxHlw==}
+    engines: {node: ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      postcss: 8.4.8
+      postcss-value-parser: 4.2.0
+    dev: false
+
+  /@csstools/postcss-unset-value/1.0.1_postcss@8.4.8:
+    resolution: {integrity: sha512-f1G1WGDXEU/RN1TWAxBPQgQudtLnLQPyiWdtypkPC+mVYNKFKH/HYXSxH4MVNqwF8M0eDsoiU7HumJHCg/L/jg==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.3
+    dependencies:
+      postcss: 8.4.8
+    dev: false
+
+  /@csstools/selector-specificity/2.0.0_bdyst2ohrq5amsk7v2dqmobd64:
+    resolution: {integrity: sha512-rZ6vufeY/UjAgtyiJ4WvfF6XP6HizIyOfbZOg0RnecIwjrvH8Am3nN1BpKnnPZunYAkUcPPXDhwbxOtGop8cfQ==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.3
+      postcss-selector-parser: ^6.0.10
+    dependencies:
+      postcss: 8.4.8
+      postcss-selector-parser: 6.0.10
+    dev: false
+
  /@eslint/eslintrc/0.4.3:
    resolution: {integrity: sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==}
    engines: {node: ^10.12.0 || >=12.0.0}
@@ -295,16 +345,26 @@ packages:
      '@iconify/types': 1.0.12
    dev: false

+  /@iconify-json/simple-icons/1.1.14:
+    resolution: {integrity: sha512-M16V4YWqzCQICp5YIXQjIVdoLAzjEA/l9AParht4S4G/5tYQ1/1guDsRu6kzsUba5bDjeGFyhUIhX6LT79Fulg==}
+    dependencies:
+      '@iconify/types': 1.1.0
+    dev: false
+
  /@iconify/types/1.0.12:
    resolution: {integrity: sha512-6er6wSGF3hgc1JEZqiGpg21CTCjHBYOUwqLmb2Idzkjiw6ogalGP0ZMLVutCzah+0WB4yP+Zd2oVPN8jvJ+Ftg==}
    dev: false

+  /@iconify/types/1.1.0:
+    resolution: {integrity: sha512-Jh0llaK2LRXQoYsorIH8maClebsnzTcve+7U3rQUSnC11X4jtPnFuyatqFLvMxZ8MLG8dB4zfHsbPfuvxluONw==}
+    dev: false
+
  /@iconify/utils/1.0.23:
    resolution: {integrity: sha512-Ktdmpe4mkMXQAnnDUz3s6s5aY/BeVPwHC1d5IhG1bgrWVNWFQNUj8cQPMbHpNCSD9MRC5yGxm9/PGPpOWGJLAg==}
    dependencies:
      '@antfu/install-pkg': 0.1.0
      '@antfu/utils': 0.3.0
-      '@iconify/types': 1.0.12
+      '@iconify/types': 1.1.0
      debug: 4.3.4
      kolorist: 1.5.1
      local-pkg: 0.4.1
@@ -760,18 +820,18 @@ packages:
      tiny-glob: 0.2.9
    dev: true

-  /@sveltejs/kit/1.0.0-next.348_svelte@3.48.0:
-    resolution: {integrity: sha512-K9dfgzIbotWmbcdCsQ6ROGs9R+bsGWwmSdN6l6km1QV5esQehqg1UYHGD9q0VJsg4rJg/zmKVBYo0oBquSHPZw==}
+  /@sveltejs/kit/1.0.0-next.350_svelte@3.48.0:
+    resolution: {integrity: sha512-qkZNjp7yIj6t91+wMhmMtGJH0Lb89OaKdVXUDy92CS5/4OHRTKcQPdfOKs4no/upkS3RiFb+rEpOkYqTMcPUXg==}
    engines: {node: '>=16.7'}
    hasBin: true
    peerDependencies:
      svelte: ^3.44.0
    dependencies:
-      '@sveltejs/vite-plugin-svelte': 1.0.0-next.47_svelte@3.48.0+vite@2.9.9
+      '@sveltejs/vite-plugin-svelte': 1.0.0-next.47_svelte@3.48.0+vite@2.9.10
      chokidar: 3.5.3
      sade: 1.8.1
      svelte: 3.48.0
-      vite: 2.9.9
+      vite: 2.9.10
    transitivePeerDependencies:
      - diff-match-patch
      - less
@@ -780,7 +840,7 @@ packages:
      - supports-color
    dev: true

-  /@sveltejs/vite-plugin-svelte/1.0.0-next.47_svelte@3.48.0+vite@2.9.9:
+  /@sveltejs/vite-plugin-svelte/1.0.0-next.47_svelte@3.48.0+vite@2.9.10:
    resolution: {integrity: sha512-J6n8UN51aq/TEZGQ89/EtdXTtca3cRcTJGzi6fi+xK8LkgsHQLCZhRj+PJ+swktRSWTX9IOmQS55SqVg6bz5fA==}
    engines: {node: ^14.13.1 || >= 16}
    peerDependencies:
@@ -798,7 +858,7 @@ packages:
      magic-string: 0.26.2
      svelte: 3.48.0
      svelte-hmr: 0.14.12_svelte@3.48.0
-      vite: 2.9.9
+      vite: 2.9.10
    transitivePeerDependencies:
      - supports-color
    dev: true
@@ -1071,11 +1131,6 @@ packages:
    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
    engines: {node: '>=8'}

-  /ansi-styles/2.2.1:
-    resolution: {integrity: sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
  /ansi-styles/3.2.1:
    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
    engines: {node: '>=4'}
@@ -1162,15 +1217,15 @@ packages:
    engines: {node: '>= 4.0.0'}
    dev: true

-  /autoprefixer/10.4.2_postcss@8.4.8:
-    resolution: {integrity: sha512-9fOPpHKuDW1w/0EKfRmVnxTDt8166MAnLI3mgZ1JCnhNtYWxcJ6Ud5CO/AVOZi/AvFa8DY9RTy3h3+tFBlrrdQ==}
+  /autoprefixer/10.4.7_postcss@8.4.8:
+    resolution: {integrity: sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==}
    engines: {node: ^10 || ^12 || >=14}
    hasBin: true
    peerDependencies:
      postcss: ^8.1.0
    dependencies:
-      browserslist: 4.20.0
-      caniuse-lite: 1.0.30001314
+      browserslist: 4.20.4
+      caniuse-lite: 1.0.30001349
      fraction.js: 4.2.0
      normalize-range: 0.1.2
      picocolors: 1.0.0
@@ -1244,6 +1299,18 @@ packages:
      picocolors: 1.0.0
    dev: false

+  /browserslist/4.20.4:
+    resolution: {integrity: sha512-ok1d+1WpnU24XYN7oC3QWgTyMhY/avPJ/r9T00xxvUOIparA/gc+UPUMaod3i+G6s+nI2nUb9xZ5k794uIwShw==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+    dependencies:
+      caniuse-lite: 1.0.30001349
+      electron-to-chromium: 1.4.147
+      escalade: 3.1.1
+      node-releases: 2.0.5
+      picocolors: 1.0.0
+    dev: false
+
  /buffer-crc32/0.2.13:
    resolution: {integrity: sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=}
    dev: true
@@ -1301,15 +1368,8 @@ packages:
    resolution: {integrity: sha512-0zaSO+TnCHtHJIbpLroX7nsD+vYuOVjl3uzFbJO1wMVbuveJA0RK2WcQA9ZUIOiO0/ArMiMgHJLxfEZhQiC0kw==}
    dev: false

-  /chalk/1.1.3:
-    resolution: {integrity: sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      ansi-styles: 2.2.1
-      escape-string-regexp: 1.0.5
-      has-ansi: 2.0.0
-      strip-ansi: 3.0.1
-      supports-color: 2.0.0
+  /caniuse-lite/1.0.30001349:
+    resolution: {integrity: sha512-VFaWW3jeo6DLU5rwdiasosxhYSduJgSGil4cSyX3/85fbctlE58pXAkWyuRmVA0r2RxsOSVYUTZcySJ8WpbTxw==}
    dev: false

  /chalk/2.4.2:
@@ -1467,7 +1527,7 @@ packages:
      postcss: ^8.4
    dependencies:
      postcss: 8.4.8
-      postcss-selector-parser: 6.0.9
+      postcss-selector-parser: 6.0.10
    dev: false

  /css-declaration-sorter/6.1.4_postcss@8.4.8:
@@ -1488,7 +1548,7 @@ packages:
      postcss: ^8.4
    dependencies:
      postcss: 8.4.8
-      postcss-selector-parser: 6.0.9
+      postcss-selector-parser: 6.0.10
    dev: false

  /css-prefers-color-scheme/6.0.3_postcss@8.4.8:
@@ -1524,8 +1584,8 @@ packages:
    engines: {node: '>= 6'}
    dev: false

-  /cssdb/6.4.1:
-    resolution: {integrity: sha512-R70R/Q1fPlM1D6Y+Kpat0QjiY+aMsY2/8lekdVoYcJ7ZQs9kw71W78FdOMf8DFq975KHQf1089PNg1dLsbAhoA==}
+  /cssdb/6.6.3:
+    resolution: {integrity: sha512-7GDvDSmE+20+WcSMhP17Q1EVWUrLlbxxpMDqG731n8P99JhnQZHR9YvtjPvEHfjFUjvQJvdpKCjlKOX+xe4UVA==}
    dev: false

  /cssesc/3.0.0:
@@ -1739,6 +1799,10 @@ packages:
    resolution: {integrity: sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=}
    dev: true

+  /electron-to-chromium/1.4.147:
+    resolution: {integrity: sha512-czclPqxLMPqPMkahKcske4TaS5lcznsc26ByBlEFDU8grTBVK9C5W6K9I6oEEhm4Ai4jTihGnys90xY1yjXcRg==}
+    dev: false
+
  /electron-to-chromium/1.4.80:
    resolution: {integrity: sha512-COsbJCGVYCc/aAY4cd94x1Js3q0r406YKGbdL8LXHg0O9dEjuFEFU/vZneRxBxKo/f1lLHi0YyAR7sbFM+i8Bg==}
    dev: false
@@ -1987,6 +2051,7 @@ packages:
  /escape-string-regexp/1.0.5:
    resolution: {integrity: sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=}
    engines: {node: '>=0.8.0'}
+    dev: true

  /escape-string-regexp/4.0.0:
    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
@@ -2439,18 +2504,6 @@ packages:
    resolution: {integrity: sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==}
    dev: true

-  /has-ansi/2.0.0:
-    resolution: {integrity: sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      ansi-regex: 2.1.1
-    dev: false
-
-  /has-flag/1.0.0:
-    resolution: {integrity: sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
  /has-flag/3.0.0:
    resolution: {integrity: sha1-tdRU3CGZriJWmfNGfloH87lVuv0=}
    engines: {node: '>=4'}
@@ -2674,10 +2727,6 @@ packages:
    resolution: {integrity: sha512-+az2gi/hvex7eLTMTlbRLOhH6P6WFdk2ITI8HJsaH2VqYO0I594zXSYEP+tf4FW+8Cy68ScDXoAsQdyQanv3sw==}
    dev: false

-  /js-base64/2.6.4:
-    resolution: {integrity: sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==}
-    dev: false
-
  /js-tokens/4.0.0:
    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
    dev: true
@@ -3009,6 +3058,10 @@ packages:
    resolution: {integrity: sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg==}
    dev: false

+  /node-releases/2.0.5:
+    resolution: {integrity: sha512-U9h1NLROZTq9uE1SNffn6WuPDg8icmi3ns4rEl/oTfIle4iLjTliCzgTsbaIFMq/Xn078/lfY/BL0GWZ+psK4Q==}
+    dev: false
+
  /nodemon/2.0.15:
    resolution: {integrity: sha512-gdHMNx47Gw7b3kWxJV64NI+Q5nfl0y5DgDbiVtShiwa7Z0IZ07Ll4RLFo6AjrhzMtoEZn5PDE3/c2AbVsiCkpA==}
    engines: {node: '>=8.10.0'}
@@ -3040,7 +3093,7 @@ packages:
    dev: true

  /normalize-range/0.1.2:
-    resolution: {integrity: sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=}
+    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
    engines: {node: '>=0.10.0'}
    dev: false

@@ -3246,13 +3299,14 @@ packages:
    engines: {node: '>=4.0.0'}
    dev: false

-  /postcss-attribute-case-insensitive/5.0.0_postcss@8.4.8:
-    resolution: {integrity: sha512-b4g9eagFGq9T5SWX4+USfVyjIb3liPnjhHHRMP7FMB2kFVpYyfEscV0wP3eaXhKlcHKUut8lt5BGoeylWA/dBQ==}
+  /postcss-attribute-case-insensitive/5.0.1_postcss@8.4.8:
+    resolution: {integrity: sha512-wrt2VndqSLJpyBRNz9OmJcgnhI9MaongeWgapdBuUMu2a/KNJ8SENesG4SdiTnQwGO9b1VKbTWYAfCPeokLqZQ==}
+    engines: {node: ^12 || ^14 || >=16}
    peerDependencies:
-      postcss: ^8.0.2
+      postcss: ^8.3
    dependencies:
      postcss: 8.4.8
-      postcss-selector-parser: 6.0.9
+      postcss-selector-parser: 6.0.10
    dev: false

  /postcss-calc/8.2.4_postcss@8.4.8:
@@ -3261,12 +3315,22 @@ packages:
      postcss: ^8.2.2
    dependencies:
      postcss: 8.4.8
-      postcss-selector-parser: 6.0.9
+      postcss-selector-parser: 6.0.10
      postcss-value-parser: 4.2.0
    dev: false

-  /postcss-color-functional-notation/4.2.2_postcss@8.4.8:
-    resolution: {integrity: sha512-DXVtwUhIk4f49KK5EGuEdgx4Gnyj6+t2jBSEmxvpIK9QI40tWrpS2Pua8Q7iIZWBrki2QOaeUdEaLPPa91K0RQ==}
+  /postcss-clamp/4.1.0_postcss@8.4.8:
+    resolution: {integrity: sha512-ry4b1Llo/9zz+PKC+030KUnPITTJAHeOwjfAyyB60eT0AorGLdzp52s31OsPRHRf8NchkgFoG2y6fCfn1IV1Ow==}
+    engines: {node: '>=7.6.0'}
+    peerDependencies:
+      postcss: ^8.4.6
+    dependencies:
+      postcss: 8.4.8
+      postcss-value-parser: 4.2.0
+    dev: false
+
+  /postcss-color-functional-notation/4.2.3_postcss@8.4.8:
+    resolution: {integrity: sha512-5fbr6FzFzjwHXKsVnkmEYrJYG8VNNzvD1tAXaPPWR97S6rhKI5uh2yOfV5TAzhDkZoq4h+chxEplFDc8GeyFtw==}
    engines: {node: ^12 || ^14 || >=16}
    peerDependencies:
      postcss: ^8.4
@@ -3318,17 +3382,18 @@ packages:
      postcss-value-parser: 4.2.0
    dev: false

-  /postcss-custom-media/8.0.0_postcss@8.4.8:
-    resolution: {integrity: sha512-FvO2GzMUaTN0t1fBULDeIvxr5IvbDXcIatt6pnJghc736nqNgsGao5NT+5+WVLAQiTt6Cb3YUms0jiPaXhL//g==}
-    engines: {node: '>=10.0.0'}
+  /postcss-custom-media/8.0.2_postcss@8.4.8:
+    resolution: {integrity: sha512-7yi25vDAoHAkbhAzX9dHx2yc6ntS4jQvejrNcC+csQJAXjj15e7VcWfMgLqBNAbOvqi5uIa9huOVwdHbf+sKqg==}
+    engines: {node: ^12 || ^14 || >=16}
    peerDependencies:
-      postcss: ^8.1.0
+      postcss: ^8.3
    dependencies:
      postcss: 8.4.8
+      postcss-value-parser: 4.2.0
    dev: false

-  /postcss-custom-properties/12.1.4_postcss@8.4.8:
-    resolution: {integrity: sha512-i6AytuTCoDLJkWN/MtAIGriJz3j7UX6bV7Z5t+KgFz+dwZS15/mlTJY1S0kRizlk6ba0V8u8hN50Fz5Nm7tdZw==}
+  /postcss-custom-properties/12.1.7_postcss@8.4.8:
+    resolution: {integrity: sha512-N/hYP5gSoFhaqxi2DPCmvto/ZcRDVjE3T1LiAMzc/bg53hvhcHOLpXOHb526LzBBp5ZlAUhkuot/bfpmpgStJg==}
    engines: {node: ^12 || ^14 || >=16}
    peerDependencies:
      postcss: ^8.4
@@ -3337,14 +3402,14 @@ packages:
      postcss-value-parser: 4.2.0
    dev: false

-  /postcss-custom-selectors/6.0.0_postcss@8.4.8:
-    resolution: {integrity: sha512-/1iyBhz/W8jUepjGyu7V1OPcGbc636snN1yXEQCinb6Bwt7KxsiU7/bLQlp8GwAXzCh7cobBU5odNn/2zQWR8Q==}
-    engines: {node: '>=10.0.0'}
+  /postcss-custom-selectors/6.0.3_postcss@8.4.8:
+    resolution: {integrity: sha512-fgVkmyiWDwmD3JbpCmB45SvvlCD6z9CG6Ie6Iere22W5aHea6oWa7EM2bpnv2Fj3I94L3VbtvX9KqwSi5aFzSg==}
+    engines: {node: ^12 || ^14 || >=16}
    peerDependencies:
-      postcss: ^8.1.2
+      postcss: ^8.3
    dependencies:
      postcss: 8.4.8
-      postcss-selector-parser: 6.0.9
+      postcss-selector-parser: 6.0.10
    dev: false

  /postcss-dir-pseudo-class/6.0.4_postcss@8.4.8:
@@ -3354,7 +3419,7 @@ packages:
      postcss: ^8.4
    dependencies:
      postcss: 8.4.8
-      postcss-selector-parser: 6.0.9
+      postcss-selector-parser: 6.0.10
    dev: false

  /postcss-discard-comments/5.1.1_postcss@8.4.8:
@@ -3420,8 +3485,8 @@ packages:
      resolve: 1.22.0
    dev: false

-  /postcss-env-function/4.0.5_postcss@8.4.8:
-    resolution: {integrity: sha512-gPUJc71ji9XKyl0WSzAalBeEA/89kU+XpffpPxSaaaZ1c48OL36r1Ep5R6+9XAPkIiDlSvVAwP4io12q/vTcvA==}
+  /postcss-env-function/4.0.6_postcss@8.4.8:
+    resolution: {integrity: sha512-kpA6FsLra+NqcFnL81TnsU+Z7orGtDTxcOhl6pwXeEq1yFPpRMkCDpHhrz8CFQDr/Wfm0jLiNQ1OsGGPjlqPwA==}
    engines: {node: ^12 || ^14 || >=16}
    peerDependencies:
      postcss: ^8.4
@@ -3447,7 +3512,7 @@ packages:
      postcss: ^8.4
    dependencies:
      postcss: 8.4.8
-      postcss-selector-parser: 6.0.9
+      postcss-selector-parser: 6.0.10
    dev: false

  /postcss-focus-within/5.0.4_postcss@8.4.8:
@@ -3457,7 +3522,7 @@ packages:
      postcss: ^8.4
    dependencies:
      postcss: 8.4.8
-      postcss-selector-parser: 6.0.9
+      postcss-selector-parser: 6.0.10
    dev: false

  /postcss-font-variant/5.0.0_postcss@8.4.8:
@@ -3518,8 +3583,8 @@ packages:
      postcss: 8.4.8
    dev: false

-  /postcss-lab-function/4.1.2_postcss@8.4.8:
-    resolution: {integrity: sha512-isudf5ldhg4fk16M8viAwAbg6Gv14lVO35N3Z/49NhbwPQ2xbiEoHgrRgpgQojosF4vF7jY653ktB6dDrUOR8Q==}
+  /postcss-lab-function/4.2.0_postcss@8.4.8:
+    resolution: {integrity: sha512-Zb1EO9DGYfa3CP8LhINHCcTTCTLI+R3t7AX2mKsDzdgVQ/GkCpHOTgOr6HBHslP7XDdVbqgHW5vvRPMdVANQ8w==}
    engines: {node: ^12 || ^14 || >=16}
    peerDependencies:
      postcss: ^8.4
@@ -3584,7 +3649,7 @@ packages:
      caniuse-api: 3.0.0
      cssnano-utils: 3.1.0_postcss@8.4.8
      postcss: 8.4.8
-      postcss-selector-parser: 6.0.9
+      postcss-selector-parser: 6.0.10
    dev: false

  /postcss-minify-font-values/5.1.0_postcss@8.4.8:
@@ -3628,7 +3693,7 @@ packages:
      postcss: ^8.2.15
    dependencies:
      postcss: 8.4.8
-      postcss-selector-parser: 6.0.9
+      postcss-selector-parser: 6.0.10
    dev: false

  /postcss-nested/5.0.6_postcss@8.4.8:
@@ -3638,7 +3703,7 @@ packages:
      postcss: ^8.2.14
    dependencies:
      postcss: 8.4.8
-      postcss-selector-parser: 6.0.9
+      postcss-selector-parser: 6.0.10
    dev: false

  /postcss-nesting/10.1.3_postcss@8.4.8:
@@ -3648,7 +3713,18 @@ packages:
      postcss: ^8.4
    dependencies:
      postcss: 8.4.8
-      postcss-selector-parser: 6.0.9
+      postcss-selector-parser: 6.0.10
+    dev: false
+
+  /postcss-nesting/10.1.8_postcss@8.4.8:
+    resolution: {integrity: sha512-txdb3/idHYsBbNDFo1PFY0ExCgH5nfWi8G5lO49e6iuU42TydbODTzJgF5UuL5bhgeSlnAtDgfFTDG0Cl1zaSQ==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      '@csstools/selector-specificity': 2.0.0_bdyst2ohrq5amsk7v2dqmobd64
+      postcss: 8.4.8
+      postcss-selector-parser: 6.0.10
    dev: false

  /postcss-normalize-charset/5.1.0_postcss@8.4.8:
@@ -3785,65 +3861,70 @@ packages:
      postcss-value-parser: 4.2.0
    dev: false

-  /postcss-preset-env/7.4.2_postcss@8.4.8:
-    resolution: {integrity: sha512-AmOkb8AeNNQwE/z2fHl1iwOIt8J50V8WR0rmLagcgIDoqlJZWjV3NdtOPnLGco1oN8DZe+Ss5B9ULbBeS6HfeA==}
+  /postcss-preset-env/7.7.1_postcss@8.4.8:
+    resolution: {integrity: sha512-1sx6+Nl1wMVJzaYLVaz4OAR6JodIN/Z1upmVqLwSPCLT6XyxrEoePgNMHPH08kseLe3z06i9Vfkt/32BYEKDeA==}
    engines: {node: ^12 || ^14 || >=16}
    peerDependencies:
      postcss: ^8.4
    dependencies:
-      '@csstools/postcss-color-function': 1.0.3_postcss@8.4.8
+      '@csstools/postcss-cascade-layers': 1.0.3_postcss@8.4.8
+      '@csstools/postcss-color-function': 1.1.0_postcss@8.4.8
      '@csstools/postcss-font-format-keywords': 1.0.0_postcss@8.4.8
-      '@csstools/postcss-hwb-function': 1.0.0_postcss@8.4.8
+      '@csstools/postcss-hwb-function': 1.0.1_postcss@8.4.8
      '@csstools/postcss-ic-unit': 1.0.0_postcss@8.4.8
-      '@csstools/postcss-is-pseudo-class': 2.0.1_postcss@8.4.8
+      '@csstools/postcss-is-pseudo-class': 2.0.5_postcss@8.4.8
      '@csstools/postcss-normalize-display-values': 1.0.0_postcss@8.4.8
-      '@csstools/postcss-oklab-function': 1.0.2_postcss@8.4.8
+      '@csstools/postcss-oklab-function': 1.1.0_postcss@8.4.8
      '@csstools/postcss-progressive-custom-properties': 1.3.0_postcss@8.4.8
-      autoprefixer: 10.4.2_postcss@8.4.8
-      browserslist: 4.20.0
+      '@csstools/postcss-stepped-value-functions': 1.0.0_postcss@8.4.8
+      '@csstools/postcss-trigonometric-functions': 1.0.1_postcss@8.4.8
+      '@csstools/postcss-unset-value': 1.0.1_postcss@8.4.8
+      autoprefixer: 10.4.7_postcss@8.4.8
+      browserslist: 4.20.4
      css-blank-pseudo: 3.0.3_postcss@8.4.8
      css-has-pseudo: 3.0.4_postcss@8.4.8
      css-prefers-color-scheme: 6.0.3_postcss@8.4.8
-      cssdb: 6.4.1
+      cssdb: 6.6.3
      postcss: 8.4.8
-      postcss-attribute-case-insensitive: 5.0.0_postcss@8.4.8
-      postcss-color-functional-notation: 4.2.2_postcss@8.4.8
+      postcss-attribute-case-insensitive: 5.0.1_postcss@8.4.8
+      postcss-clamp: 4.1.0_postcss@8.4.8
+      postcss-color-functional-notation: 4.2.3_postcss@8.4.8
      postcss-color-hex-alpha: 8.0.3_postcss@8.4.8
      postcss-color-rebeccapurple: 7.0.2_postcss@8.4.8
-      postcss-custom-media: 8.0.0_postcss@8.4.8
-      postcss-custom-properties: 12.1.4_postcss@8.4.8
-      postcss-custom-selectors: 6.0.0_postcss@8.4.8
+      postcss-custom-media: 8.0.2_postcss@8.4.8
+      postcss-custom-properties: 12.1.7_postcss@8.4.8
+      postcss-custom-selectors: 6.0.3_postcss@8.4.8
      postcss-dir-pseudo-class: 6.0.4_postcss@8.4.8
      postcss-double-position-gradients: 3.1.1_postcss@8.4.8
-      postcss-env-function: 4.0.5_postcss@8.4.8
+      postcss-env-function: 4.0.6_postcss@8.4.8
      postcss-focus-visible: 6.0.4_postcss@8.4.8
      postcss-focus-within: 5.0.4_postcss@8.4.8
      postcss-font-variant: 5.0.0_postcss@8.4.8
      postcss-gap-properties: 3.0.3_postcss@8.4.8
      postcss-image-set-function: 4.0.6_postcss@8.4.8
      postcss-initial: 4.0.1_postcss@8.4.8
-      postcss-lab-function: 4.1.2_postcss@8.4.8
+      postcss-lab-function: 4.2.0_postcss@8.4.8
      postcss-logical: 5.0.4_postcss@8.4.8
      postcss-media-minmax: 5.0.0_postcss@8.4.8
-      postcss-nesting: 10.1.3_postcss@8.4.8
+      postcss-nesting: 10.1.8_postcss@8.4.8
      postcss-opacity-percentage: 1.1.2
      postcss-overflow-shorthand: 3.0.3_postcss@8.4.8
      postcss-page-break: 3.0.4_postcss@8.4.8
      postcss-place: 7.0.4_postcss@8.4.8
-      postcss-pseudo-class-any-link: 7.1.1_postcss@8.4.8
+      postcss-pseudo-class-any-link: 7.1.4_postcss@8.4.8
      postcss-replace-overflow-wrap: 4.0.0_postcss@8.4.8
-      postcss-selector-not: 5.0.0_postcss@8.4.8
+      postcss-selector-not: 6.0.0_postcss@8.4.8
      postcss-value-parser: 4.2.0
    dev: false

-  /postcss-pseudo-class-any-link/7.1.1_postcss@8.4.8:
-    resolution: {integrity: sha512-JRoLFvPEX/1YTPxRxp1JO4WxBVXJYrSY7NHeak5LImwJ+VobFMwYDQHvfTXEpcn+7fYIeGkC29zYFhFWIZD8fg==}
+  /postcss-pseudo-class-any-link/7.1.4_postcss@8.4.8:
+    resolution: {integrity: sha512-JxRcLXm96u14N3RzFavPIE9cRPuOqLDuzKeBsqi4oRk4vt8n0A7I0plFs/VXTg7U2n7g/XkQi0OwqTO3VWBfEg==}
    engines: {node: ^12 || ^14 || >=16}
    peerDependencies:
      postcss: ^8.4
    dependencies:
      postcss: 8.4.8
-      postcss-selector-parser: 6.0.9
+      postcss-selector-parser: 6.0.10
    dev: false

  /postcss-pxtorem/6.0.0_postcss@8.4.8:
@@ -3883,29 +3964,24 @@ packages:
      postcss: 8.4.8
    dev: false

-  /postcss-selector-not/5.0.0_postcss@8.4.8:
-    resolution: {integrity: sha512-/2K3A4TCP9orP4TNS7u3tGdRFVKqz/E6pX3aGnriPG0jU78of8wsUcqE4QAhWEU0d+WnMSF93Ah3F//vUtK+iQ==}
+  /postcss-selector-not/6.0.0_postcss@8.4.8:
+    resolution: {integrity: sha512-i/HI/VNd3V9e1WOLCwJsf9nePBRXqcGtVibcJ9FsVo0agfDEfsLSlFt94aYjY35wUNcdG0KrvdyjEr7It50wLQ==}
+    engines: {node: ^12 || ^14 || >=16}
    peerDependencies:
-      postcss: ^8.1.0
+      postcss: ^8.3
    dependencies:
-      balanced-match: 1.0.2
      postcss: 8.4.8
+      postcss-selector-parser: 6.0.10
    dev: false

-  /postcss-selector-parser/6.0.9:
-    resolution: {integrity: sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==}
+  /postcss-selector-parser/6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
    engines: {node: '>=4'}
    dependencies:
      cssesc: 3.0.0
      util-deprecate: 1.0.2
    dev: false

-  /postcss-strip-inline-comments/0.1.5:
-    resolution: {integrity: sha1-f/a83BTmM+1M36AguuPt2tT4S5A=}
-    dependencies:
-      postcss: 5.2.18
-    dev: false
-
  /postcss-svgo/5.1.0_postcss@8.4.8:
    resolution: {integrity: sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==}
    engines: {node: ^10 || ^12 || >=14.0}
@@ -3924,23 +4000,13 @@ packages:
      postcss: ^8.2.15
    dependencies:
      postcss: 8.4.8
-      postcss-selector-parser: 6.0.9
+      postcss-selector-parser: 6.0.10
    dev: false

  /postcss-value-parser/4.2.0:
    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
    dev: false

-  /postcss/5.2.18:
-    resolution: {integrity: sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==}
-    engines: {node: '>=0.12'}
-    dependencies:
-      chalk: 1.1.3
-      js-base64: 2.6.4
-      source-map: 0.5.7
-      supports-color: 3.2.3
-    dev: false
-
  /postcss/8.4.14:
    resolution: {integrity: sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==}
    engines: {node: ^10 || ^12 || >=14}
@@ -4343,11 +4409,6 @@ packages:
    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
    engines: {node: '>=0.10.0'}

-  /source-map/0.5.7:
-    resolution: {integrity: sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
  /source-map/0.6.1:
    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
    engines: {node: '>=0.10.0'}
@@ -4441,19 +4502,7 @@ packages:
    dependencies:
      browserslist: 4.20.0
      postcss: 8.4.8
-      postcss-selector-parser: 6.0.9
-    dev: false
-
-  /supports-color/2.0.0:
-    resolution: {integrity: sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=}
-    engines: {node: '>=0.8.0'}
-    dev: false
-
-  /supports-color/3.2.3:
-    resolution: {integrity: sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=}
-    engines: {node: '>=0.8.0'}
-    dependencies:
-      has-flag: 1.0.0
+      postcss-selector-parser: 6.0.10
    dev: false

  /supports-color/5.5.0:
@@ -4939,8 +4988,8 @@ packages:
      unist-util-stringify-position: 2.0.3
    dev: true

-  /vite/2.9.9:
-    resolution: {integrity: sha512-ffaam+NgHfbEmfw/Vuh6BHKKlI/XIAhxE5QSS7gFLIngxg171mg1P3a4LSRME0z2ZU1ScxoKzphkipcYwSD5Ew==}
+  /vite/2.9.10:
+    resolution: {integrity: sha512-TwZRuSMYjpTurLqXspct+HZE7ONiW9d+wSWgvADGxhDPPyoIcNywY+RX4ng+QpK30DCa1l/oZgi2PLZDibhzbQ==}
    engines: {node: '>=12.2.0'}
    hasBin: true
    peerDependencies:
--- a/src/docs/components/Example.svelte
+++ b/src/docs/components/Example.svelte
@@ -31,19 +31,19 @@

 <style lang="postcss">
 	.example {
-		margin: 15px 0 32px;
+		margin: 1rem 0 2rem;

 		&__preview {
 			border-radius: var(--rounded-sm-top);
 			border: solid 2px hsl(0, 0%, 20%);
 			border-bottom: none;
 			display: flex;
-			grid-gap: 16px;
+			gap: 1rem;
 			flex-wrap: wrap;
 			position: relative;
 			justify-content: flex-start;
 			z-index: 1;
-			padding: 16px;
+			padding: 1rem;
 		}

 		&__source {
@@ -53,7 +53,7 @@
 				position: absolute;
 				top: 0;
 				right: 0;
-				padding: 8px;
+				padding: 0.5rem;
 				display: flex;
 				justify-content: flex-end;

--- a/src/docs/components/Header.svelte
+++ b/src/docs/components/Header.svelte
@@ -40,10 +40,10 @@
 <style lang="postcss">
 	.header {
 		display: flex;
-		grid-gap: 10px;
+		gap: 0.5rem;
 		align-items: center;
 		flex-wrap: wrap;
-		padding: 16px 24px;
+		padding: 1rem 1.5rem;
 		position: fixed;
 		left: 0;
 		right: 0;
@@ -58,12 +58,12 @@
 		}

 		@media (--sm) {
-			padding: 10px 32px;
+			padding: 12px 2rem;
 		}

 		:global(&__logo) {
-			max-width: 32px;
-			min-width: 32px;
+			max-width: 2rem;
+			min-width: 2rem;
 			aspect-ratio: 1 / 1;
 		}

@@ -74,7 +74,7 @@

 		&__links {
 			margin-left: auto;
-			grid-gap: 16px;
+			gap: 1rem;
 			align-items: center;
 			justify-content: center;
 			display: flex;
@@ -104,7 +104,7 @@

 	.spacer-dot {
 		background-color: hsla(0, 0%, 0%, 0.2);
-		border-radius: 999px;
+		border-radius: var(--rounded-max);
 		width: 5px;
 		aspect-ratio: 1 / 1;
 	}
--- a/src/docs/components/Sidebar.svelte
+++ b/src/docs/components/Sidebar.svelte
@@ -25,7 +25,7 @@
 			<a href="/" class="section__link">Introduction</a>
 			<a href="/getting-started/configure" class="section__link">Configure</a>
 			<a href="/getting-started/icons" class="section__link">Using Icons</a>
-			<!-- <a href="/getting-started/css" class="section__link">Writing CSS</a> -->
+			<a href="/getting-started/css" class="section__link">Writing CSS</a>
 			<a href="/getting-started/illustrations" class="section__link">Illustrations</a>
 			<a href="/getting-started/utils" class="section__link">Built-in utilities</a>
 			<a href="/getting-started/generator" class="section__link">Generator plugin</a>
@@ -77,18 +77,18 @@

 		&__content {
 			mask-image: linear-gradient(to bottom, transparent, hsla(0, 0%, 0%, 1) 5% 95%, transparent);
-			padding: 88px 32px 32px;
+			padding: 88px 2rem 2rem;
 			height: 100vh;
 			max-height: 100vh;
 			overflow-y: auto;
-			grid-gap: 40px;
+			gap: 2.5rem;
 			display: flex;
 			flex-direction: column;

 			.section {
 				display: flex;
 				flex-direction: column;
-				grid-gap: 0.5rem;
+				gap: 0.5rem;

 				&__title {
 					text-transform: uppercase;
@@ -109,9 +109,9 @@

 		&__toggle {
 			position: fixed;
-			left: 16px;
-			bottom: 16px;
-			padding: 8px;
+			left: 1rem;
+			bottom: 1rem;
+			padding: 0.5rem;
 			aspect-ratio: 1 / 1;
 			background-color: var(--accent-color);
 			z-index: 20;
@@ -121,7 +121,7 @@
 			transition: left 0.2s cubic-bezier(0.38, 0.52, 0.37, 1.27);

 			:global(.icon) {
-				width: 32px;
+				width: 2rem;
 				height: auto;
 			}

@@ -134,14 +134,14 @@
 			left: 0;

 			.sidebar__toggle {
-				left: calc(32px + min(70vw, var(--sidebar-width)));
+				left: calc(2rem + min(70vw, var(--sidebar-width)));
 			}
 		}

 		scrollbar-color: var(--scrollbar-thumb-color) var(--sidebar-color);

 		&::-webkit-scrollbar {
-			width: 14px;
+			width: 1rem;
 		}

 		&::-webkit-scrollbar-track {
@@ -150,7 +150,7 @@

 		&::-webkit-scrollbar-thumb {
 			background-color: var(--scrollbar-thumb-color);
-			border-radius: 999px;
+			border-radius: var(--rounded-max);
 			border: 3px solid var(--sidebar-color);
 		}
 	}
--- a/src/docs/layout/page.svelte
+++ b/src/docs/layout/page.svelte
@@ -2,6 +2,7 @@
 	import IconPencil from 'virtual:icons/heroicons-outline/pencil'
 	import { page } from '$app/stores'
 	import COMPONENT_API from '../../generated/COMPONENT_API.json'
+	import { markdownInline } from 'omorphia/utils'

 	export let fileName = $page.url.pathname
 		.substring($page.url.pathname.lastIndexOf('/') + 1)
@@ -57,9 +58,10 @@
 							<td><code>{prop.name}</code></td>
 							<td><code>{prop.type ?? ''}</code></td>
 							<td><code>{prop.value ?? ''}</code></td>
-							<td
-								>{prop.constant ? '[Read only] ' : ''}{prop.description?.replace('null', '') ||
-									''}</td>
+							<td>
+								{prop.constant ? '[Read only] ' : ''}
+								{@html markdownInline(prop.description?.replace('null', '') || '')}
+							</td>
 						</tr>
 					{/each}
 				</tbody>
@@ -112,13 +114,13 @@
 	.edit-link {
 		display: flex;
 		align-items: center;
-		grid-gap: 8px;
+		gap: 0.5rem;
 		margin-bottom: 54px;
 		color: var(--accent-color);
 	}

 	.extra-info {
-		margin-top: 64px;
+		margin-top: 4rem;
 	}

 	.api-table {
--- a/src/docs/styles/prism-one-dark.css
+++ b/src/docs/styles/prism-one-dark.css
@@ -32,7 +32,6 @@ code[class*='language-'],
 pre[class*='language-'] {
 	background: hsl(220, 13%, 18%);
 	color: hsl(220, 14%, 71%);
-	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
 	font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
 	direction: ltr;
 	text-align: left;
--- a/src/package/components/Avatar.svelte
+++ b/src/package/components/Avatar.svelte
@@ -68,7 +68,7 @@

 		&--size {
 			&-xs {
-				--size: 2.25rem;
+				--size: 2.5rem;
 				box-shadow: var(--shadow-inset), var(--shadow-raised);
 			}

--- a/src/package/components/Badge.svelte
+++ b/src/package/components/Badge.svelte
@@ -13,8 +13,8 @@
 		font-weight: var(--font-weight-bold);
 		display: inline;
 		position: relative;
-		padding-left: 0.9rem;
-		line-height: 1rem;
+		padding-left: 1rem;
+		line-height: 1em;

 		&--color-green {
 			color: var(--color-badge-green-text);
@@ -40,7 +40,7 @@
 			content: '';
 			display: inline-block;
 			width: 0.5rem;
-			height: 0.5rem;
+			aspect-ratio: 1 / 1;
 			border-radius: 50%;
 			background-color: var(--color-dot);
 			position: absolute;
--- a/src/package/components/Button.svelte
+++ b/src/package/components/Button.svelte
@@ -61,11 +61,14 @@
 		display: flex;
 		justify-content: flex-start;
 		align-items: center;
-		padding: 0.25rem 1rem;
-		grid-gap: 14px;
+		justify-content: center;
+		padding: 0.5rem 1rem;
+		min-width: 2rem;
+		gap: 0.5rem;
 		cursor: pointer;
 		position: relative;
 		white-space: nowrap;
+		line-height: 100%;

 		color: var(--color-bg-contrast);

@@ -73,15 +76,21 @@
 		background-color: var(--color-button-bg);

 		border-radius: var(--rounded);
-		transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out;
+		transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out;

 		&:hover {
 			filter: brightness(0.85);
 		}

+		&:active {
+			transform: scale(0.95);
+			filter: brightness(0.8);
+		}
+
 		&--color {
 			&-raised {
 				background-color: var(--color-raised-bg);
+				box-shadow: var(--shadow-inset-sm), var(--shadow-raised);
 			}

 			&-primary {
@@ -146,10 +155,5 @@
 			top: 0.5rem;
 			right: 0.5rem;
 		}
-
-		/* Only child doesn't work as intended because text is passed through as `innerText` */
-		:global(.icon:only-child) {
-			margin: 4px -7px;
-		}
 	}
 </style>
--- a/src/package/components/Checkbox.svelte
+++ b/src/package/components/Checkbox.svelte
@@ -25,16 +25,16 @@

 		display: inline-flex;
 		align-items: center;
-		grid-gap: 0.5rem;
+		gap: 0.5rem;

 		&__label {
 			display: flex;
 			align-items: center;
-			gap: 8px;
+			gap: 0.5rem;

 			> :global(.icon) {
-				width: 1.1rem;
-				margin-right: -0.1rem;
+				width: 1var (--unit-3);
+				margin-right: -0var (--unit-3);
 			}

 			&__box {
--- a/src/package/components/CheckboxList.svelte
+++ b/src/package/components/CheckboxList.svelte
@@ -40,7 +40,7 @@
 		&.wrap {
 			flex-direction: row;
 			flex-wrap: wrap;
-			grid-gap: 2rem;
+			gap: 2rem;
 		}
 	}
 </style>
--- a/src/package/components/Chips.svelte
+++ b/src/package/components/Chips.svelte
@@ -40,6 +40,6 @@
 <style lang="postcss">
 	.chips {
 		display: flex;
-		grid-gap: 0.5rem;
+		gap: 0.5rem;
 	}
 </style>
--- a/src/package/components/FormField.svelte
+++ b/src/package/components/FormField.svelte
@@ -18,6 +18,6 @@
 	.form-field {
 		display: flex;
 		flex-direction: column;
-		gap: 8px;
+		gap: 0.5rem;
 	}
 </style>
--- a/src/package/components/NavRow.svelte
+++ b/src/package/components/NavRow.svelte
@@ -7,6 +7,7 @@
 	}

 	export let links: Link[]
+	/** Query param name to use (to not use queries, leave this prop blank) */
 	export let query = ''

 	export let resetScroll = false
@@ -52,7 +53,7 @@
 		display: flex;
 		flex-direction: row;
 		align-items: center;
-		grid-gap: 1rem;
+		gap: 1rem;
 		flex-wrap: wrap;

 		&__link {
@@ -67,10 +68,10 @@
 					content: '';
 					display: block;
 					position: absolute;
-					bottom: -0.1rem;
+					bottom: -0var (--unit-3);
 					width: 100%;
 					border-radius: var(--rounded-max);
-					height: 0.2rem;
+					height: 0.25rem;
 					background-color: var(--color-brand);
 				}
 			}
--- a/src/package/components/Pagination.svelte
+++ b/src/package/components/Pagination.svelte
@@ -54,17 +54,24 @@
 	.pagination {
 		align-self: center;
 		display: flex;
-		grid-gap: 0.5rem;
+		gap: 0.5rem;
 		align-items: center;

+		:global(.button) {
+			box-shadow: var(--shadow-inset-sm), var(--shadow-raised);
+		}
+
+		:global(.icon) {
+			width: 1rem;
+			aspect-ratio: 1 / 1;
+		}
+
 		:global(&__dash) {
 			margin: 0 0.5rem;
-			width: 1rem;
-			height: 1rem;
 		}

 		@media (width <= 500px) {
-			grid-gap: 0.25rem;
+			gap: 0.25rem;

 			:global(> *:nth-child(4)),
 			:global(> *:nth-child(6)) {
--- a/src/package/components/Select.svelte
+++ b/src/package/components/Select.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import IconChevronDown from 'virtual:icons/lucide/chevron-down'
+	import IconCheck from 'virtual:icons/heroicons-outline/check'
 	import { debounce } from 'throttle-debounce'
 	import { clickOutside } from 'svelte-use-click-outside'
 	import { onMount } from 'svelte'
@@ -11,13 +12,21 @@

 	export let options: Option[] = []
 	export let value: string | number
-	export let selected: Option = options.find((option) => option.value === (value || ''))
+	export let selected: Option
 	export let color = ''
 	export let label = ''
 	export let icon = null

 	let open = false

+	$: if (options) {
+		setSelected()
+	}
+
+	function setSelected() {
+		selected = options.find((option) => option.value === (value || ''))
+	}
+
 	$: if (selected) {
 		value = selected.value
 	}
@@ -88,14 +97,14 @@

 <div
 	class="select select--color-{color}"
-	class:is-open={open}
-	class:select--opens-up={shouldOpenUp}
+	class:select--opens-up={false}
 	use:clickOutside={() => {
 		open = false
 	}}
 	bind:this={element}
 	tabindex="0"
-	on:keydown={keydown}>
+	on:keydown={keydown}
+	on:click>
 	<div
 		class="select__input"
 		on:click={() => {
@@ -104,18 +113,17 @@
 		{#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}
+		<span class="select__input__value" style:min-width="{minWidth + 16 + 8}px">
+			{label || selected?.label || value || 'Choose...'}
+		</span>
+		<div class="select__input__arrow">
+			<slot name="expandIcon">
+				<IconChevronDown />
+			</slot>
+		</div>
 	</div>
 	{#if open}
-		<ul class="select__options">
+		<ul class="select__options" style:--selected-index={options.indexOf(selected)}>
 			{#each options as option (option.value)}
 				<li
 					on:click={() => {
@@ -124,6 +132,9 @@
 					}}
 					class:is-selected={selected?.value === option.value}>
 					{option.label || option.value}
+					{#if selected?.value === option.value}
+						<IconCheck />
+					{/if}
 				</li>
 			{/each}
 		</ul>
@@ -145,8 +156,8 @@
 			width: 100%;
 			justify-content: space-between;
 			align-items: center;
-			padding: 0.25rem 0.9rem;
-			grid-gap: 0.4rem;
+			padding: 0.25rem 1rem;
+			gap: 0.5rem;
 			background-color: var(--color-button-bg);
 			box-shadow: var(--shadow-inset-sm);
 			border-radius: var(--rounded);
@@ -160,38 +171,32 @@
 			padding: 0;
 			margin: 0;
 			position: absolute;
-			top: 100%;
+			top: calc(100% * -1 * var(--selected-index));
 			background-color: var(--color-button-bg);
-			border-radius: var(--rounded-bottom);
+			border-radius: var(--rounded);
 			box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
+			border: var(--border-width) solid var(--color-tertiary);
 			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);
+					background-color: var(--color-brand-dark);
+					color: var(--color-brand-dark-contrast);
 				}

 				&.is-selected {
-					background-color: var(--color-brand-dark);
-					color: var(--color-brand-contrast);
+					background-color: var(--color-brand-light);
+					color: var(--color-text);
 					cursor: default;
-				}
-			}
-		}
+					display: flex;
+					align-items: center;
+					gap: 0.5rem;

-		&.is-open {
-			z-index: 10;
-
-			.select__input {
-				border-radius: var(--rounded-top);
-				box-shadow: none;
-
-				&__arrow {
-					transform: rotate(180deg);
+					:global(.icon) {
+					}
 				}
 			}
 		}
@@ -209,11 +214,7 @@
 				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);
+				border-bottom: var(--border-width) solid var(--color-divider);
 			}
 		}
 	}
--- a/src/package/components/Slider.svelte
+++ b/src/package/components/Slider.svelte
@@ -15,7 +15,7 @@
 		display: flex;
 		flex-direction: row;
 		align-items: center;
-		gap: 8px;
+		gap: 0.5rem;

 		.slider-input {
 			-webkit-appearance: none;
@@ -35,7 +35,7 @@
 				-webkit-appearance: none;
 				appearance: none;
 				width: 0.5rem;
-				height: 1.25rem;
+				height: 0.5rem;
 				border-radius: var(--rounded-sm);
 				background-color: var(--color-brand);

--- a/src/package/components/TextInput.svelte
+++ b/src/package/components/TextInput.svelte
@@ -6,9 +6,10 @@
 	export let value = ''
 	export let multiline = false
 	export let id: string = undefined
+	export let fill = false
 </script>

-<div class="text-input">
+<div class="text-input" class:fill>
 	{#if multiline}
 		<textarea name={id} {placeholder} bind:value />
 	{:else}
@@ -23,18 +24,28 @@
 	.text-input {
 		display: flex;
 		flex-direction: column;
-		gap: 8px;
+		gap: 0.5rem;
 		position: relative;
+		width: 20rem;
+
+		&.fill {
+			width: 100%;
+			flex: 1;
+		}

 		input,
 		textarea {
-			border-radius: var(--rounded-sm);
+			border-radius: var(--rounded);
 			box-shadow: var(--shadow-inset-sm);
 			background-color: var(--color-button-bg);
 			border: none;
-			padding: 6px 14px;
-			width: 20rem;
+			padding: 0.25rem 1rem;
+			width: 100%;
 			max-width: 100%;
+
+			&.has-icon {
+				padding-left: 2.5rem;
+			}
 		}

 		textarea {
@@ -45,12 +56,8 @@
 			position: absolute;
 			display: flex;
 			height: 100%;
-			left: 14px;
+			left: 1rem;
 			opacity: 0.75;
 		}
-
-		input.has-icon {
-			padding-left: 40px;
-		}
 	}
 </style>
--- a/src/package/config/postcss.config.cjs
+++ b/src/package/config/postcss.config.cjs
@@ -2,10 +2,10 @@ 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')({
+			stage: 1,
 			features: {
 				'custom-media-queries': {
 					importFrom: [
@@ -22,10 +22,16 @@ const config = {
 			},
 		}),
 		require('postcss-pxtorem'),
-		require('autoprefixer'),
 		process.env.NODE_ENV === 'development' &&
 			require('cssnano')({
-				preset: 'default',
+				preset: [
+					'default',
+					{
+						discardComments: {
+							removeAll: true,
+						},
+					},
+				],
 			}),
 	],
 }
--- a/src/package/plugins/generator/outputs/projectColors.js
+++ b/src/package/plugins/generator/outputs/projectColors.js
@@ -1,5 +1,5 @@
 import { fetch } from 'undici'
-import { promises as fs, createWriteStream } from 'fs'
+import { createWriteStream } from 'fs'
 import cliProgress from 'cli-progress'
 import Jimp from 'jimp'
 import { getAverageColor } from 'fast-average-color-node'
--- a/src/package/styles.postcss
+++ b/src/package/styles.postcss
@@ -2,3 +2,4 @@
@import-glob "./styles/themes/**.postcss";
@import-glob "./styles/variables/**.postcss";
@import-glob "./styles/classes/**.postcss";
+@import-glob "./styles/external/**.postcss";
--- a/src/package/styles/classes/actions.postcss
+++ b/src/package/styles/classes/actions.postcss
@@ -2,7 +2,7 @@
 	display: flex;
 	flex-direction: column;
 	align-items: flex-end;
-	grid-gap: 0.5rem;
+	gap: 0.5rem;
 	flex-wrap: wrap;
 	margin-left: auto;
 	min-width: fit-content;
--- a/src/package/styles/classes/base.postcss
+++ b/src/package/styles/classes/base.postcss
@@ -8,7 +8,7 @@
 	scrollbar-color: var(--color-scrollbar) var(--color-bg);

 	&::-webkit-scrollbar {
-		width: 14px;
+		width: 1rem;
 	}

 	&::-webkit-scrollbar-track {
@@ -17,7 +17,7 @@

 	&::-webkit-scrollbar-thumb {
 		background-color: var(--color-scrollbar);
-		border-radius: 999px;
+		border-radius: var(--rounded-max);
 		border: 3px solid var(--color-bg);
 	}
 }
--- a/src/package/styles/classes/button-group.postcss
+++ b/src/package/styles/classes/button-group.postcss
@@ -1,5 +1,5 @@
 .button-group {
 	display: flex;
-	grid-gap: 0.5rem;
+	gap: 0.5rem;
 	flex-wrap: wrap;
 }
--- a/src/package/styles/classes/card.postcss
+++ b/src/package/styles/classes/card.postcss
@@ -7,11 +7,10 @@

 	background-color: var(--color-raised-bg);
 	border-radius: var(--rounded-lg);
-	overflow: hidden;
 	box-shadow: var(--shadow-raised), var(--shadow-inset);

 	padding: var(--padding);
-	grid-gap: 1rem;
+	gap: 1rem;
 	max-width: 100%;

 	.profile-picture {
@@ -20,11 +19,11 @@

 	&--gap {
 		&-compressed {
-			grid-gap: 0.6rem;
+			gap: 0.5rem;
 		}

 		&-none {
-			grid-gap: 0;
+			gap: 0;
 		}
 	}

@@ -34,26 +33,20 @@
 		}
 	}

-	&--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);
+		height: 6.5rem; /* Matches height of 2 buttons exactly */
+		object-fit: cover;
+		object-position: center;
+		border-radius: var(--rounded-top);

 		&:-moz-loading {
 			visibility: hidden;
 		}

-		&--short {
-			height: 6.5rem;
-			object-fit: cover;
-			object-position: center;
-		}
-
 		&--dark {
 			filter: brightness(0.7);
 		}
@@ -67,7 +60,7 @@
 		display: flex;
 		flex-direction: column;
 		align-items: flex-end;
-		grid-gap: 0.5rem;
+		gap: 0.5rem;

 		z-index: 1;

@@ -88,7 +81,7 @@
 	}

 	&--pad-x {
-		--padding: 1rem 1.3rem;
+		--padding: 1rem 1.5rem;
 	}

 	&.markdown {
--- a/src/package/styles/classes/illustration.postcss
+++ b/src/package/styles/classes/illustration.postcss
@@ -3,14 +3,14 @@
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	grid-gap: 2rem;
+	gap: 2rem;

 	&__image {
-		max-width: 300px;
+		max-width: 18.5rem;
 	}

 	&__description {
-		font-size: 1.2rem;
+		font-size: var(--font-size-lg);
 		color: var(--color-text-light);
 	}
 }
--- a/src/package/styles/classes/info-table.postcss
+++ b/src/package/styles/classes/info-table.postcss
@@ -1,7 +1,7 @@
 .info-table {
 	display: grid;
 	grid-template-columns: repeat(2, 1fr);
-	grid-gap: 0.25rem 2rem;
+	gap: 0.25rem 2rem;
 	width: fit-content;

 	&__label {
--- a/src/package/styles/classes/link.postcss
+++ b/src/package/styles/classes/link.postcss
@@ -2,7 +2,7 @@
 	color: var(--color-link);
 	display: flex;
 	align-items: center;
-	gap: 4px;
+	gap: 0.5rem;
 	line-height: 100%;

 	&:hover {
@@ -13,7 +13,7 @@
 .link-group {
 	display: grid;
 	grid-template-columns: repeat(3, auto);
-	grid-gap: 0.75rem;
+	gap: 1rem;

 	.link {
 		color: var(--color-text);
--- a/src/package/styles/classes/markdown.postcss
+++ b/src/package/styles/classes/markdown.postcss
@@ -1,7 +1,7 @@
 .markdown {
 	display: flex;
 	flex-direction: column;
-	grid-gap: 1rem;
+	gap: 1rem;

 	blockquote,
 	details,
@@ -54,7 +54,7 @@
 	}

 	code {
-		padding: 0.2rem 0.4rem;
+		padding: 0.25rem 0.5rem;
 		font-size: 80%;
 		border-radius: var(--rounded-sm);
 		background-color: var(--color-code-bg);
@@ -65,12 +65,13 @@
 		padding: 1rem;
 		border-radius: var(--rounded-sm);
 		overflow-x: auto;
+		background-color: var(--color-code-bg);

 		code {
 			font-size: 80%;
 			padding: 0;
 			border-radius: 0;
-			background-color: unset;
+			background-color: unset !important;
 		}
 	}

@@ -93,8 +94,8 @@

 		td,
 		th {
-			padding: 0.4rem 0.85rem;
-			border: 0.1rem solid var(--color-table-border);
+			padding: 0.5rem 0.85rem;
+			border: 0var (--unit-3) solid var(--color-table-border);
 		}

 		tr:nth-child(2n) {
--- a/src/package/styles/classes/member.postcss
+++ b/src/package/styles/classes/member.postcss
@@ -1,6 +1,6 @@
 .member {
 	display: flex;
-	grid-gap: 0.75rem;
+	gap: 1rem;

 	&__info {
 		display: flex;
--- a/src/package/styles/classes/stat.postcss
+++ b/src/package/styles/classes/stat.postcss
@@ -1,7 +1,7 @@
 .stat {
 	display: flex;
 	align-items: baseline;
-	grid-gap: 0.4rem;
+	gap: 0.5rem;

 	&--light {
 		color: var(--color-text-lightest);
@@ -12,12 +12,12 @@
 	}

 	strong {
-		font-size: 20px;
+		font-size: var(--font-size-lg);
 	}
 }

 .stat-group {
 	display: flex;
-	grid-gap: 0.5rem;
+	gap: 0.5rem;
 	flex-wrap: wrap;
 }
--- a/src/package/styles/classes/tag.postcss
+++ b/src/package/styles/classes/tag.postcss
@@ -1,7 +1,7 @@
 .tag {
 	display: flex;
 	align-items: center;
-	grid-gap: 0.25rem;
+	gap: 0.25rem;
 	color: var(--color-text-lightest);

 	svg {
@@ -14,5 +14,5 @@
 	display: inline-flex;
 	flex-wrap: wrap;
 	margin-top: auto;
-	grid-gap: 0.25rem 0.6rem;
+	gap: 0.25rem 0.5rem;
 }
--- a/src/package/styles/external/github-dark.postcss
+++ b/src/package/styles/external/github-dark.postcss
@@ -0,0 +1,128 @@
+/*
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/
+
+.theme-dark,
+.theme-oled {
+	.hljs {
+		color: #c9d1d9;
+		background: #0d1117;
+	}
+
+	.hljs-doctag,
+	.hljs-keyword,
+	.hljs-meta .hljs-keyword,
+	.hljs-template-tag,
+	.hljs-template-variable,
+	.hljs-type,
+	.hljs-variable.language_ {
+		/* prettylights-syntax-keyword */
+		color: #ff7b72;
+	}
+
+	.hljs-title,
+	.hljs-title.class_,
+	.hljs-title.class_.inherited__,
+	.hljs-title.function_ {
+		/* prettylights-syntax-entity */
+		color: #d2a8ff;
+	}
+
+	.hljs-attr,
+	.hljs-attribute,
+	.hljs-literal,
+	.hljs-meta,
+	.hljs-number,
+	.hljs-operator,
+	.hljs-variable,
+	.hljs-selector-attr,
+	.hljs-selector-class,
+	.hljs-selector-id {
+		/* prettylights-syntax-constant */
+		color: #79c0ff;
+	}
+
+	.hljs-regexp,
+	.hljs-string,
+	.hljs-meta .hljs-string {
+		/* prettylights-syntax-string */
+		color: #a5d6ff;
+	}
+
+	.hljs-built_in,
+	.hljs-symbol {
+		/* prettylights-syntax-variable */
+		color: #ffa657;
+	}
+
+	.hljs-comment,
+	.hljs-code,
+	.hljs-formula {
+		/* prettylights-syntax-comment */
+		color: #8b949e;
+	}
+
+	.hljs-name,
+	.hljs-quote,
+	.hljs-selector-tag,
+	.hljs-selector-pseudo {
+		/* prettylights-syntax-entity-tag */
+		color: #7ee787;
+	}
+
+	.hljs-subst {
+		/* prettylights-syntax-storage-modifier-import */
+		color: #c9d1d9;
+	}
+
+	.hljs-section {
+		/* prettylights-syntax-markup-heading */
+		color: #1f6feb;
+		font-weight: bold;
+	}
+
+	.hljs-bullet {
+		/* prettylights-syntax-markup-list */
+		color: #f2cc60;
+	}
+
+	.hljs-emphasis {
+		/* prettylights-syntax-markup-italic */
+		color: #c9d1d9;
+		font-style: italic;
+	}
+
+	.hljs-strong {
+		/* prettylights-syntax-markup-bold */
+		color: #c9d1d9;
+		font-weight: bold;
+	}
+
+	.hljs-addition {
+		/* prettylights-syntax-markup-inserted */
+		color: #aff5b4;
+		background-color: #033a16;
+	}
+
+	.hljs-deletion {
+		/* prettylights-syntax-markup-deleted */
+		color: #ffdcd7;
+		background-color: #67060c;
+	}
+
+	.hljs-char.escape_,
+	.hljs-link,
+	.hljs-params,
+	.hljs-property,
+	.hljs-punctuation,
+	.hljs-tag {
+		/* purposely ignored */
+	}
+}
--- a/src/package/styles/external/github.postcss
+++ b/src/package/styles/external/github.postcss
@@ -0,0 +1,125 @@
+/*
+  Theme: GitHub
+  Description: Light theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-light
+  Current colors taken from GitHub's CSS
+*/
+
+.hljs {
+	color: #24292e;
+	background: #ffffff;
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+	/* prettylights-syntax-keyword */
+	color: #d73a49;
+}
+
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+	/* prettylights-syntax-entity */
+	color: #6f42c1;
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+	/* prettylights-syntax-constant */
+	color: #005cc5;
+}
+
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+	/* prettylights-syntax-string */
+	color: #032f62;
+}
+
+.hljs-built_in,
+.hljs-symbol {
+	/* prettylights-syntax-variable */
+	color: #e36209;
+}
+
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+	/* prettylights-syntax-comment */
+	color: #6a737d;
+}
+
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+	/* prettylights-syntax-entity-tag */
+	color: #22863a;
+}
+
+.hljs-subst {
+	/* prettylights-syntax-storage-modifier-import */
+	color: #24292e;
+}
+
+.hljs-section {
+	/* prettylights-syntax-markup-heading */
+	color: #005cc5;
+	font-weight: bold;
+}
+
+.hljs-bullet {
+	/* prettylights-syntax-markup-list */
+	color: #735c0f;
+}
+
+.hljs-emphasis {
+	/* prettylights-syntax-markup-italic */
+	color: #24292e;
+	font-style: italic;
+}
+
+.hljs-strong {
+	/* prettylights-syntax-markup-bold */
+	color: #24292e;
+	font-weight: bold;
+}
+
+.hljs-addition {
+	/* prettylights-syntax-markup-inserted */
+	color: #22863a;
+	background-color: #f0fff4;
+}
+
+.hljs-deletion {
+	/* prettylights-syntax-markup-deleted */
+	color: #b31d28;
+	background-color: #ffeef0;
+}
+
+.hljs-char.escape_,
+.hljs-link,
+.hljs-params,
+.hljs-property,
+.hljs-punctuation,
+.hljs-tag {
+	/* purposely ignored */
+}
--- a/src/package/styles/normalize.postcss
+++ b/src/package/styles/normalize.postcss
@@ -24,8 +24,21 @@ a {

 button:focus-visible,
 a:focus-visible,
+input:focus-visible,
 [tabindex='0']:focus-visible {
-	outline: 0.2rem solid var(--color-brand);
+	outline: 0.25rem solid hsla(290, 100%, 40%, 0.5);
+	border-radius: 0.25rem;
+}
+
+input,
+button,
+a {
+	outline: 0.25rem solid hsla(155, 58%, 44%, 0);
+	transition: outline 0.2s ease-in-out;
+}
+
+input[type='text']:focus-visible {
+	outline: 0.25rem solid hsla(155, 58%, 44%, 0.7);
 }

 html,
@@ -56,7 +69,7 @@ ul {

 .icon {
 	height: auto;
-	width: 16px;
-	min-width: 16px;
+	width: 1rem;
+	min-width: 1rem;
 	aspect-ratio: 1 / 1;
 }
--- a/src/package/styles/themes/base.postcss
+++ b/src/package/styles/themes/base.postcss
@@ -2,16 +2,6 @@
 	--rounded: 1rem;
 	--rounded-top: 1rem 1rem 0 0;
 	--rounded-bottom: 0 0 1rem 1rem;
-	--rounded-sm: 0.6rem;
-	--rounded-max: 999999999px;
-
-	--font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto,
-		Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-
-	--font-size-nm: 1rem; /* 16px */
-	--font-size-xl: 1.5rem; /* 24px */
-
-	--font-weight-regular: 400;
-	--font-weight-medium: 600;
-	--font-weight-bold: 700;
+	--rounded-sm: 0.5rem;
+	--rounded-max: 9999px;
 }
--- a/src/package/styles/themes/dark.postcss
+++ b/src/package/styles/themes/dark.postcss
@@ -4,6 +4,7 @@
 	--color-brand-light: hsl(155, 54%, 35%);
 	--color-brand-dark: hsl(155, 58%, 25%);
 	--color-brand-contrast: hsl(0, 0%, 0%);
+	--color-brand-dark-contrast: hsl(0, 0%, 100%);

 	--color-secondary: hsl(231, 5%, 80%);
 	--color-tertiary: hsl(231, 3%, 45%);
@@ -27,11 +28,11 @@
 	--color-link: hsl(215, 100%, 75%);

 	/* Container colors */
-	--color-bg: hsl(220, 13%, 15%);
+	--color-bg: hsl(220, 13%, 10%);
 	--color-bg-contrast: hsl(0, 0%, 100%);
-	--color-raised-bg: hsl(220, 13%, 25%);
-	--color-divider: hsl(220, 13%, 50%);
-	--color-button-bg: hsl(222, 13%, 35%);
+	--color-raised-bg: hsl(220, 13%, 19%);
+	--color-divider: hsl(220, 13%, 34%);
+	--color-button-bg: hsl(222, 13%, 30%);

 	/* Label colors */
 	--color-badge-gray-text: hsl(0, 2%, 69%);
--- a/src/package/styles/themes/light.postcss
+++ b/src/package/styles/themes/light.postcss
@@ -4,6 +4,7 @@
 	--color-brand-light: hsl(135, 50%, 78%);
 	--color-brand-dark: hsl(155, 58%, 38%);
 	--color-brand-contrast: hsl(0, 0%, 100%);
+	--color-brand-dark-contrast: hsl(0, 0%, 100%);

 	--color-secondary: hsl(231, 5%, 45%);
 	--color-tertiary: hsl(231, 3%, 75%);
--- a/src/package/styles/themes/oled.postcss
+++ b/src/package/styles/themes/oled.postcss
@@ -1,11 +1,10 @@
 .theme-oled {
-	@extend .dark-theme;
+	@extend .theme-dark;

 	/* Container colors */
 	--color-bg: hsl(220, 13%, 0%);
 	--color-raised-bg: hsl(220, 13%, 10%);
-	--color-raised-bg-hover: hsl(220, 13%, 20%);
-	--color-divider: hsl(220, 13%, 35%);
+	--color-divider: hsl(220, 13%, 30%);
 	--color-button-bg: hsl(220, 13%, 20%);

 	/* Ad colors */
--- a/src/package/styles/variables/borders.postcss
+++ b/src/package/styles/variables/borders.postcss
@@ -1,14 +1,13 @@
 :root {
 	/* Borders */
 	--border-width: 1px;
-	--border-style: solid;
-	--border: var(--border-width) var(--border-style);

 	/* Rounded radii */
-	--rounded-sm: 8px;
-	--rounded: 10px;
-	--rounded-lg: 14px;
+	--rounded-sm: 10px;
+	--rounded: 16px;
+	--rounded-lg: 18px;
 	--rounded-max: 100px;
+
 	--rounded-top: var(--rounded) var(--rounded) 0 0;
 	--rounded-bottom: 0 0 var(--rounded) var(--rounded);
 	--rounded-sm-top: var(--rounded-sm) var(--rounded-sm) 0 0;
--- a/src/package/styles/variables/breakpoints.postcss
+++ b/src/package/styles/variables/breakpoints.postcss
@@ -0,0 +1,5 @@
+/* Breakpoints */
+@custom-media --sm (min-width: 544px);
+@custom-media --md (min-width: 768px);
+@custom-media --lg (min-width: 1012px);
+@custom-media --xl (min-width: 544px);
--- a/src/package/styles/variables/spacing.postcss
+++ b/src/package/styles/variables/spacing.postcss
@@ -1,212 +0,0 @@
-:root {
-	/* these are values for the display CSS property */
-	/*
-       --display-values: (
-               block,
-               flex,
-               inline,
-               inline-block,
-               inline-flex,
-               none,
-               table,
-               table-cell
-       );
-
-       // maps edges to respective corners for border-radius
-       --edges: (
-               top: (top-left, top-right),
-               right: (top-right, bottom-right),
-               bottom: (bottom-right, bottom-left),
-               left: (bottom-left, top-left)
-       );
-       */
-
-	/*
-        These are our margin and padding utility spacers. The default step size we
-        use is 8px. This gives us a key of:
-            0 => 0px
-            1 => 4px
-            2 => 8px
-            3 => 16px
-            4 => 24px
-            5 => 32px
-            6 => 40px */
-	--spacer: 8px;
-
-	/* Our spacing scale */
-	--spacer-0: 0; /* 0 */
-	--spacer-1: calc(var(--spacer) * 0.5); /* 4px */
-	--spacer-2: --spacer; /* 8px */
-	--spacer-3: calc(var(--spacer) * 2); /* 16px */
-	--spacer-4: calc(var(--spacer) * 3); /* 24px */
-	--spacer-5: calc(var(--spacer) * 4); /* 32px */
-	--spacer-6: calc(var(--spacer) * 5); /* 40px */
-
-	/*
-        /* The list of spacer values
-        --spacers: (
-                --spacer-0,
-                --spacer-1,
-                --spacer-2,
-                --spacer-3,
-                --spacer-4,
-                --spacer-5,
-                --spacer-6,
-        );
-
-        /* And the map of spacers, for easier looping:
-        /* @each --scale, --length in --spacer-map { ... }
-        --spacer-map: (
-                0: --spacer-0,
-                1: --spacer-1,
-                2: --spacer-2,
-                3: --spacer-3,
-                4: --spacer-4,
-                5: --spacer-5,
-                6: --spacer-6,
-        );
-
-        /* Increases the core spacing scale first by 8px for --spacer-7, then by 16px
-        /* increments from --spacer-8 to --spacer-12, i.e. after 40px, we have 48, 64,
-        /* 80, 96, etc.
-        --spacer-7: --spacer * 6; /* 48px
-        --spacer-8: --spacer * 8; /* 64px
-        --spacer-9: --spacer * 10; /* 80px
-        --spacer-10: --spacer * 12; /* 96px
-        --spacer-11: --spacer * 14; /* 112px
-        --spacer-12: --spacer * 16; /* 128px
-
-        --spacers-large: (
-                7: --spacer-7,
-                8: --spacer-8,
-                9: --spacer-9,
-                10: --spacer-10,
-                11: --spacer-11,
-                12: --spacer-12,
-        );
-
-        --spacer-map-extended: map-merge(
-                        (
-                                0: 0,
-                                1: --spacer-1,
-                                2: --spacer-2,
-                                3: --spacer-3,
-                                4: --spacer-4,
-                                5: --spacer-5,
-                                6: --spacer-6,
-                        ),
-                        --spacers-large,
-        );
-
-        /* Em spacer variables
-        --em-spacer-1: 0.0625em; /* 1/16
-        --em-spacer-2: 0.125em; /* 1/8
-        --em-spacer-3: 0.25em; /* 1/4
-        --em-spacer-4: 0.375em; /* 3/8
-        --em-spacer-5: 0.5em; /* 1/2
-        --em-spacer-6: 0.75em; /* 3/4
-
-        /* Size scale
-        /* Used for buttons, inputs, labels, avatars etc.
-        --size: 16px;
-
-        --size-0: 0;
-        --size-1: --size; /* 16px
-        --size-2: --size-1 +  4px; /* 20px
-        --size-3: --size-2 +  4px; /* 24px
-        --size-4: --size-3 +  4px; /* 28px
-        --size-5: --size-4 +  4px; /* 32px
-        --size-6: --size-5 +  8px; /* 40px
-        --size-7: --size-6 +  8px; /* 48px
-        --size-8: --size-7 + 16px; /* 64px
-
-        /* Fixed-width container variables
-        --container-width: 980px;
-        --grid-gutter: 10px;
-
-        // Breakpoint widths
-        --width-xs: 0;
-        // Small screen / phone
-        --width-sm: 544px;
-        // Medium screen / tablet
-        --width-md: 768px;
-        // Large screen / desktop (980 + (16 * 2)) <= container + gutters
-        --width-lg: 1012px;
-        // Extra large screen / wide desktop
-        --width-xl: 1280px;
-
-        // Responsive container widths
-        --container-sm: --width-sm;
-        --container-md: --width-md;
-        --container-lg: --width-lg;
-        --container-xl: --width-xl;
-
-        // Breakpoints in the form (name: length)
-        --breakpoints: (
-                sm: --width-sm,
-                md: --width-md,
-                lg: --width-lg,
-                xl: --width-xl
-        );
-
-        // This map in the form (breakpoint: variant) is used to iterate over
-        // breakpoints and create both responsive and non-responsive classes in one
-        // loop:
-        --responsive-variants: (
-                '': '',
-                sm: '-sm',
-                md: '-md',
-                lg: '-lg',
-                xl: '-xl',
-        );
-
-        // responsive utility position values
-        --responsive-positions: (
-                static,
-                relative,
-                absolute,
-                fixed,
-                sticky
-        );
-
-        --sidebar-width: (
-                sm: 220px,
-                md: 256px,
-                lg: 296px
-        );
-
-        --sidebar-narrow-width: (
-                md: 240px,
-                lg: 256px
-        );
-
-        --sidebar-wide-width: (
-                lg: 320px,
-                xl: 336px
-        );
-
-        --gutter: (
-                md: --spacer-3,
-                lg: --spacer-4,
-                xl: --spacer-5
-        );
-
-        --gutter-condensed: (
-                md: --spacer-3,
-                lg: --spacer-3,
-                xl: --spacer-4
-        );
-
-        --gutter-spacious: (
-                md: --spacer-4,
-                lg: --spacer-5,
-                xl: --spacer-6
-        );
-        */
-}
-
-/* Breakpoints */
-@custom-media --sm (min-width: 544px);
-@custom-media --md (min-width: 768px);
-@custom-media --lg (min-width: 1012px);
-@custom-media --xl (min-width: 544px);
--- a/src/package/styles/variables/typography.postcss
+++ b/src/package/styles/variables/typography.postcss
@@ -1,25 +1,7 @@
 :root {
-	/* Heading sizes - mobile */
-	/* h4-h6 remain the same size on both mobile & desktop */
-	--h00-size-mobile: 40px;
-	--h0-size-mobile: 32px;
-	--h1-size-mobile: 26px;
-	--h2-size-mobile: 22px;
-	--h3-size-mobile: 18px;
-
-	/* Heading sizes - desktop */
-	--h00-size: 48px;
-	--h0-size: 40px;
-	--h1-size: 32px;
-	--h2-size: 24px;
-	--h3-size: 20px;
-	--h4-size: 16px;
-	--h5-size: 14px;
-	--h6-size: 12px;
-
-	--font-size-lg: 19px;
-	--font-size-sm: 13px;
+	--font-size-lg: 20px;
 	--font-size: 16px;
+	--font-size-sm: 14px;

 	/* Line heights */
 	--lh-condensed-ultra: 1;
@@ -33,7 +15,12 @@
 	--font-weight-bold: 600;

 	/* Font stacks */
-	--body-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
-		'Apple Color Emoji', 'Segoe UI Emoji';
+	--body-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica Neue, Helvetica,
+		Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, 'Apple Color Emoji', 'Segoe UI Emoji',
+		Arial, sans-serif;
 	--mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+
+	--font-weight-regular: 400;
+	--font-weight-medium: 600;
+	--font-weight-bold: 700;
 }
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -50,12 +50,12 @@

 			article {
 				max-width: 800px;
-				padding-block: 140px 64px;
+				padding-block: 9rem 4rem;
 				padding-inline: 24px;

 				@media (--sm) {
 					padding-inline: 48px;
-					padding-block: 140px 24px;
+					padding-block: 9rem 24px;
 				}
 			}
 		}
--- a/src/routes/components/NavRow.md
+++ b/src/routes/components/NavRow.md
@@ -1,26 +1,56 @@
 `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).

-```svelte example raised
+### Query example
+
+```svelte example
 <script lang="ts">
 	import { NavRow } from 'omorphia'
 </script>

-<NavRow
-	level={1}
-	links={[
-		{
-			href: '/Button',
-			label: 'Button',
-		},
-		{
-			href: '/Chips',
-			label: 'Chips',
-		},
-		{
-			href: '/NavRow',
-			label: 'NavRow',
-		},
-	]}>
-	Click for fun
-</NavRow>
+<div class="card card--strip card--pad-x">
+	<NavRow
+		level={1}
+		query={'tab'}
+		links={[
+			{
+				href: '',
+				label: 'All',
+			},
+			{
+				href: 'mods',
+				label: 'Mods',
+			},
+			{
+				href: 'modpacks',
+				label: 'Modpacks',
+			},
+		]} />
+</div>
+```
+
+### Route example
+
+```svelte example
+<script lang="ts">
+	import { NavRow } from 'omorphia'
+</script>
+
+<div class="card card--strip card--pad-x">
+	<NavRow
+		level={1}
+		links={[
+			{
+				href: '/Button',
+				label: 'Button',
+			},
+			{
+				href: '/Chips',
+				label: 'Chips',
+			},
+			{
+				href: '/NavRow',
+				label: 'NavRow',
+			},
+		]} />
+</div>
 ```
--- a/src/routes/components/Pagination.md
+++ b/src/routes/components/Pagination.md
@@ -5,5 +5,5 @@ Use pagination to show a set of page numbers and navigation directions to move t
 	import { Pagination } from 'omorphia'
 </script>

-<Pagination page={20} count={50} />
+<Pagination page={20} count={500} />
 ```
--- a/src/routes/components/Select.md
+++ b/src/routes/components/Select.md
@@ -10,8 +10,8 @@
 		{ value: '', label: 'Relevance' },
 		{ value: 'downloads', label: 'Downloads' },
 		{ value: 'follows', label: 'Followers' },
-		{ value: 'newest', label: 'Recently' },
-		{ value: 'updated', label: 'Recently updated really fast whoot' },
+		{ value: 'newest', label: 'Recently created' },
+		{ value: 'updated', label: 'Recently updated' },
 	]}
 	bind:value={sortMethod} />
 ```
--- a/src/routes/getting-started/_css.md
+++ b/src/routes/getting-started/_css.md
@@ -1,11 +0,0 @@
---
-title: Writing CSS
---
-
-TODO
-
-Use `px` measurements.
-
-Use `hsl` for colors.
-
-Use `margin-inline` (x) and `margin-block` (y). Use `inline` & `block` for `padding` too.
--- a/src/routes/getting-started/css.md
+++ b/src/routes/getting-started/css.md
@@ -0,0 +1,32 @@
+---
+title: Writing CSS
+---
+
+## Conventions
+
+### Avoid inconsistent CSS units
+
+Prefer using `rem` units, using only whole and half units, eg. `2rem` or `1.5rem`. If you need a specific pixel (`px`) measurement, use `px` and add comment explaining why you used it. The one exception is that `0.25` is allowed.
+
+> Using `rem` units lets you change the scale of the UI by simply changing the body font size.
+
+### Always use `HSL` colors
+
+### All colors should be theme variables
+
+## Abilities
+
+Omorphia leverages PostCSS to allow you to write in future-standards-compliant CSS. Browse [the CSSWG drafts](https://cssdb.org/) to see what is possible (not including stage 0).
+
+Notable features:
+
+- [Nesting](https://www.w3.org/TR/css-nesting-1/#example-aecb8796)
+- [Gap](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)
+- [`clamp` function](<https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()>)
+- [Custom Media Queries](https://www.w3.org/TR/mediaqueries-5/#example-532b0adb)
+- [`:has()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:has)
+- [place-content](https://developer.mozilla.org/en-US/docs/Web/CSS/place-content)
+
+## Styles
+
+Conform to [BEM styling](http://getbem.com/introduction/) wherever possible. When working in components, you may want to leverage [Svelte's conditional class shorthand](https://svelte.dev/tutorial/class-shorthand) instead of BEM's modifier class name format.
--- a/src/routes/getting-started/icons.md
+++ b/src/routes/getting-started/icons.md
@@ -16,12 +16,12 @@ 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
+> You can style the icon with the `.icon` class. Note, you will have to use the `:global(.icon)` selector in Svelte components.

 ```svelte example
 <script lang="ts">
 	import IconHeart from 'virtual:icons/heroicons-outline/heart'
 </script>

-<p>That's lovely <IconHeart height="14px" />!</p>
+<p>That's lovely! <IconHeart /></p>
 ```
--- a/src/routes/getting-started/utils.md
+++ b/src/routes/getting-started/utils.md
@@ -12,13 +12,14 @@ The `markdown` parser is designed for bodies of markdown text and supports image

 > Use the `.markdown` class on the element containing your parsed markdown.

-```svelte example
+````svelte example
 <script lang="ts">
 	import { markdown } from 'omorphia/utils'

 	const source =
 		'## Example markdown \n\
  This is **some** *text*! \n\
+  `console.log("test")` \n\
  #### An image \n\
  <img src="https://cdn.modrinth.com/data/YL57xq9U/images/d382106b9a2b943d06107c31c139c77849f1a0e8.png" />'
 </script>
@@ -26,7 +27,10 @@ The `markdown` parser is designed for bodies of markdown text and supports image
 <div class="card markdown">
 	{@html markdown(source)}
 </div>
-```
+<div class="card markdown">
+	{@html markdown('test\n```js\nconsole.log("test")\n```')}
+</div>
+````

 ### Inline parser