Update aside shortcode with types and new accent colors

assets/css/bobastyle.css

@@ -3,7 +3,6 @@
  */
 
 /* color notes:
- * accent is 15 chroma, 270 hue
  *
  * lightness (dark):
  * background-0: 5
@@ -19,7 +18,21 @@
   --background-1: #212121;
   --background-2: #303030;
   --background-highlight: #414141;
-  --background-accent: #101c30; /* lch(10, 15, 270) */
+
+  --background-accent-red: #2d1411;       /* lch(10, 15, 30) */
+  --background-accent-orange: #291705;    /* lch(10, 15, 60) */
+  --background-accent-yellow: #2b2510;    /* lch(15, 15, 90) */
+  --background-accent-lime: #202813;      /* lch(15, 15, 120) */
+  --background-accent-green: #092010;     /* lch(10, 15, 150) */
+  --background-accent-turquoise: #062b25; /* lch(15, 15, 180) */
+  --background-accent-teal: #002b30;      /* lch(15, 15, 210) */
+  --background-accent-cerulean: #022331;  /* lch(12, 15, 240) */
+  --background-accent-blue: #101c30;      /* lch(10, 15, 270) */
+  --background-accent-purple: #1e182d;    /* lch(10, 15, 300) */
+  --background-accent-pink: #291526;      /* lch(10, 15, 330) */
+
+  --background-accent: var(--background-accent-blue);
+
   --text-0: #e9e9e9;
   --text-1: #d4d4d4;
   --link-color: #3a94fb; /* lch(60, 60, 270) */
@@ -36,7 +49,21 @@
     --background-1: #dbdbdb;
     --background-2: #c6c6c6;
     --background-highlight: #c6c6c6;
-    --background-accent: #d7e3ff;
+
+    --background-accent-red: #f1cbc7;       /* lch(85, 15, 30); */
+    --background-accent-orange: #f8ddca;    /* lch(90, 15, 60); */
+    --background-accent-yellow: #f0e1b2;    /* lch(90, 25, 90); */
+    --background-accent-lime: #dce6c9;      /* lch(90, 15, 120); */
+    --background-accent-green: #cdead3;     /* lch(90, 15, 150); */
+    --background-accent-turquoise: #c3ebe2; /* lch(90, 15, 180); */
+    --background-accent-teal: #c1eaf0;      /* lch(90, 15, 210); */
+    --background-accent-cerulean: #c8e7fb;  /* lch(90, 15, 240); */
+    --background-accent-blue: #d7e3ff;      /* lch(90, 15, 270); */
+    --background-accent-purple: #e8defb;    /* lch(90, 15, 300); */
+    --background-accent-pink: #f6daf1;      /* lch(90, 15, 330); */
+
+    --background-accent: var(--background-accent-blue);
+
     --text-0: #171717;
     --text-1: #262626;
     --link-color: #2061a8; /* lch(40, 45, 270) */
@@ -528,13 +555,6 @@ figcaption {
   text-align: center;
 }
 
-aside {
-  background-color: var(--background-1);
-  padding: 12px 16px;
-  margin: 16px 0;
-  border-radius: 8px;
-}
-
 a {
   color: var(--link-color);
   text-decoration: inherit;
@@ -606,6 +626,47 @@ code {
 
 
 
+/* Asides */
+aside {
+  padding: 8px 16px;
+  margin: 16px 0;
+  border-radius: 8px;
+}
+
+.aside-title {
+  margin-bottom: 8px;
+  padding-bottom: 4px;
+  font-weight: bold;
+}
+
+.aside-content > :first-child {
+  margin-top: 0;
+}
+.aside-content > :last-child {
+  margin-bottom: 0;
+}
+
+aside.note {
+  background-color: var(--background-accent-blue);
+}
+aside.info {
+  background-color: var(--background-accent-green);
+}
+aside.tip {
+  background-color: var(--background-accent-teal);
+}
+aside.warning {
+  background-color: var(--background-accent-yellow);
+}
+aside.example {
+  background-color: var(--background-accent-purple);
+}
+aside.quote {
+  background-color: var(--background-1);
+}
+
+
+
 /* Icons */
 .icon {
   width: 20px;

layouts/shortcodes/aside.html

@@ -1,5 +1,28 @@
-<aside>
+{{ $type := "" }}
-    {{ with .Inner }}
+{{ if .IsNamedParams }}
-        {{ . | markdownify }}
+    {{ $type = .Get "type" | default "note" }}
+{{ else }}
+    {{ $type = .Get 0 | default "note" }}
 {{ end }}
+
+{{/* This idea comes from the LoveIt theme:
+     https://github.com/dillonzq/LoveIt/blob/aa834e89af8349f6c18d4c7ad50a73fd5f1e40e0/layouts/shortcodes/admonition.html#L3-L14
+*/}}
+
+{{ $icons := dict "note" "pencil" }}
+{{ $icons  = dict "info" "info" | merge $icons }}
+{{ $icons  = dict "tip" "lightbulb" | merge $icons }}
+{{ $icons  = dict "warning" "info" | merge $icons }}
+{{ $icons  = dict "example" "flask" | merge $icons }}
+{{ $icons  = dict "quote" "quote" | merge $icons }}
+
+<aside class="{{ $type }}">
+    <div class="aside-title">
+        {{ partial "icon.html" (index $icons $type) }}
+        {{ title $type }}
+    </div>
+
+    <div class="aside-content">
+        {{ .Inner | .Page.RenderString (dict "display" "block") }}
+    </div>
 </aside>