Initial iteration

1 files changed, 49 insertions, 0 deletions

diff --git a/public/styles/markdown/asides.css b/public/styles/markdown/asides.css
new file mode 100644
index 0000000..86aff8d
--- /dev/null
+++ b/public/styles/markdown/asides.css
@@ -0,0 +1,49 @@
+.starlight-aside {
+  padding: 1rem;
+  border-inline-start: 0.25rem solid var(--sl-color-asides-border);
+  color: var(--sl-color-white);
+}
+.starlight-aside--note {
+  --sl-color-asides-text-accent: var(--sl-color-blue-high);
+  --sl-color-asides-border: var(--sl-color-blue);
+  background-color: var(--sl-color-blue-low);
+}
+.starlight-aside--tip {
+  --sl-color-asides-text-accent: var(--sl-color-purple-high);
+  --sl-color-asides-border: var(--sl-color-purple);
+  background-color: var(--sl-color-purple-low);
+}
+.starlight-aside--caution {
+  --sl-color-asides-text-accent: var(--sl-color-orange-high);
+  --sl-color-asides-border: var(--sl-color-orange);
+  background-color: var(--sl-color-orange-low);
+}
+.starlight-aside--danger {
+  --sl-color-asides-text-accent: var(--sl-color-red-high);
+  --sl-color-asides-border: var(--sl-color-red);
+  background-color: var(--sl-color-red-low);
+}
+
+.starlight-aside__title {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  font-size: var(--sl-text-h5);
+  font-weight: 600;
+  line-height: var(--sl-line-height-headings);
+  color: var(--sl-color-asides-text-accent);
+}
+
+.starlight-aside__icon {
+  font-size: 1.333em;
+  width: 1em;
+  height: 1em;
+}
+
+.starlight-aside__title + .starlight-aside__content {
+  margin-top: 0.5rem;
+}
+
+.starlight-aside__content a {
+  color: var(--sl-color-asides-text-accent);
+}