Update CSS guidelines + Prefer rem

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