Example: Docs template (#226)

* fix: markdown issues

* wip: add docs example

* example: update doc template

* chore: credit Steph for AvatarList

* chore: align footer to bottom viewport

* chore: feeback R1

* fix: font fallback in firefox

* fix merge conflicts

* fix: add default value to headers

* chore: fix doc example

1 files changed, 49 insertions, 0 deletions

diff --git a/examples/doc/src/components/Note.astro b/examples/doc/src/components/Note.astro
new file mode 100644
index 000000000..46940ddf8
--- /dev/null
+++ b/examples/doc/src/components/Note.astro
@@ -0,0 +1,49 @@
+---
+export let type = "tip";
+export let title;
+---
+
+<aside class={`note type-${type}`}>
+  {title && <label>{title}</label>}
+  <slot />
+</aside>
+
+<style>
+  .note {
+    --padding-block: 1rem;
+    --padding-inline: 1.25rem;
+
+    display: flex;
+    flex-direction: column;
+
+    padding: var(--padding-block) var(--padding-inline);
+    margin-left: calc(var(--padding-inline) * -1);
+    margin-right: calc(var(--padding-inline) * -1);
+    
+    background: var(--theme-bg-offset);
+    border-left: calc(var(--padding-inline) / 2) solid var(--color);
+    border-radius: 0;
+  }
+
+  .note label {
+    font-weight: 500;
+    color: var(--color);
+  }
+
+  /* .note :global(a) {
+    color: var(--color);
+  } */
+
+  .note.type-tip {
+    --color: var(--color-green);
+    --color-rgb: var(--color-green-rgb);
+  }
+  .note.type-warning {
+    --color: var(--color-yellow);
+    --color-rgb: var(--color-yellow-rgb);
+  }
+  .note.type-error {
+    --color: var(--color-red);
+    --color-rgb: var(--color-red-rgb);
+  }
+</style>