site: admonitions custom title with icons

site/src/routes/docs/getting-started/overview.md

@@ -46,4 +46,90 @@ inventory.instances = {
 
 ## Step Foo
 
+Miscellaneous Symbols
+    ☀ ☁ ☂ ☃ ☄ ★ ☆ ☇ ☈ ☉ ☊ ☋ ☌ ☍ ☎ ☏ ☐ ☑ ☒ ☓ ☚ ☛ ☜ ☝ ☞ ☟ ☠ ☡ ☢ ☣ ☤ ☥ ☦ ☧ ☨ ☩ ☪ ☫ ☬ ☭ ☮ ☯ ☰ ☱ ☲ ☳ ☴ ☵ ☶ ☷ ☸ ☹ ☺ ☻ ☼ ☽ ☾ ☿ ♀ ♁ ♂ ♃ ♄ ♅ ♆ ♇ ♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓ ♔ ♕ ♖ ♗ ♘ ♙ ♚ ♛ ♜ ♝ ♞ ♟ ♠ ♡ ♢ ♣ ♤ ♥ ♦ ♧ ♨ ♩ ♪ ♫ ♬ ♭ ♮ ♯
+
 ## Step Bar
+
+↑
+Duplicate heading, should still be linked
+
+This is a divider
+
+---
+
+---
+
+:::note[Note about nature]
+
+Respect the nature of things
+
+:::
+
+::::important[Its important]
+
+Follow this and your life will be happy
+
+:::note
+nested note probably a bad idea
+
+but technically valid
+:::
+
+::::
+
+:::danger[Attention Footgun]
+
+Please don't erase your disk
+
+```nix
+erase = false;
+```
+
+:::
+
+:::tip[Outsmart]
+
+Lets be really clever
+
+- List
+- Inside
+
+:::
+
+This is a table
+
+| A/B | A | ¬A |
+| - | - | - |
+| B | AB | B |
+| ¬B | A | 0 |
+
+## GFM
+
+### Autolink literals
+
+www.example.com, https://example.com, and contact@example.com.
+
+### Footnote
+
+A note[^1]
+
+[^1]: Big note.
+
+### Strikethrough
+
+~one~ or ~~two~~ tildes.
+
+### Table
+
+| a | b  |  c |  d  |
+| - | :- | -: | :-: |
+| 1 | 2  | 3  |  4  |
+
+### Tasklist
+
+* [ ] to do
+* [x] done
+
+- item
+- normal

site/src/routes/index.css

@@ -3,3 +3,105 @@
 body {
   font-family: "Geist Variable";
 }
+
+
+.admonition {
+    border-left: 4px solid;
+    padding: 1rem;
+    margin: 1rem 0;
+    .admonition-title {
+        text-transform: capitalize;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        justify-content: start;
+        gap: 0.5rem;
+    }
+    .admonition-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.25rem;
+        height: 1.25rem;
+        flex-shrink: 0;
+    }
+    .admonition-icon::before {
+        content: "";
+        display: block;
+        width: 1rem;
+        height: 1rem;
+        background-color: currentColor;
+    }
+}
+
+/* TODO: Adjust styling */
+.admonition.note {
+    border-left-color:#3b82f6;
+    background-color: #eff6ff;
+    .admonition-title {
+        color: #1e40af;
+    }
+    .admonition-icon::before {
+        mask: url("/icons/info.svg") no-repeat center;
+        mask-size: contain;
+    }
+}
+
+.admonition.important {
+    border-left-color: #facc15;
+    background-color: #fffbeb;
+    .admonition-title {
+        color: #b45309;
+    }
+    .admonition-icon::before {
+        mask: url("/icons/attention.svg") no-repeat center;
+        mask-size: contain;
+    }
+}
+
+.admonition.danger {
+    border-left-color: #ef4444;
+    background-color: #fef2f2;
+
+    .admonition-title {
+        color: #b91c1c;
+    }
+    .admonition-icon::before {
+        mask: url("/icons/warning-filled.svg") no-repeat center;
+        mask-size: contain;
+    }
+}
+
+.admonition.tip {
+    border-left-color: #10b981;
+    background-color: #ecfdf5;
+
+    .admonition-title {
+        color: #065f46;
+    }
+    .admonition-icon::before {
+        mask: url("/icons/heart.svg") no-repeat center;
+        mask-size: contain;
+    }
+}
+
+ul {
+  list-style: none;
+  padding-left: 1rem;
+}
+
+ul li {
+  display: flex;
+  align-items: flex-start;
+  margin-top: 0.35em;
+  gap: 0.5rem;
+}
+
+/* TODO: Checklist */
+ul li::before {
+  content: "-";
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}