Update CSS guidelines + Prefer rem

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;
 				}
 			}
 		}

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>
 ```

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} />
 ```

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} />
 ```

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.

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.

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>
 ```

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