From 6bca7c83a7e2d62015f45f873b0f69f11b4d902b Mon Sep 17 00:00:00 2001
From: "Fred K. Schott" <fkschott@gmail.com>
Date: Tue, 8 Jun 2021 08:10:56 -0700
Subject: redesign create-astro (#301)

* redesign create astro

* add changeset

* Use npm start

* Update the astro version

* Adds the changeset

Co-authored-by: Fred Schott <fks@Freds-MBP.attlocal.net>
Co-authored-by: Matthew Phillips <matthew@skypack.dev>
---
 examples/docs/src/components/Note.astro | 49 +++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 examples/docs/src/components/Note.astro

(limited to 'examples/docs/src/components/Note.astro')

diff --git a/examples/docs/src/components/Note.astro b/examples/docs/src/components/Note.astro
new file mode 100644
index 000000000..46940ddf8
--- /dev/null
+++ b/examples/docs/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>
-- 
cgit v1.2.3