Style callout delimiters in discussion for HTML output (#282)

* Delete commented rules

* Style callout delimiters in discussion

* Use more accessible colors for callouts

Author: mattt

Assets/css/all.css

@@ -803,23 +803,6 @@ nav {
   }
 }
 
-/* main :matches(h1, h2, h3) {
-    position: sticky;
-    top: 0px;
-}
-
-main h1 {
-    z-index: 1;
-}
-
-main h2 {
-    z-index: 2;
-}
-
-main h3 {
-    z-index: 3;
-} */
-
 blockquote {
   --link: var(--secondary-label);
   border-left: 4px var(--separator) solid;
@@ -833,6 +816,61 @@ blockquote {
   }
 }
 
+.discussion aside {
+  --link: var(--accent-color);
+
+  border: 0.25px var(--separator) solid;
+  border-left: 6px var(--separator) solid;
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  padding: 0.125em 1em;
+  margin-bottom: 1em;
+  color: var(--accent-color);
+
+  &:before {
+    content: attr(title);
+    font-variant: small-caps;
+    text-transform: lowercase;
+    color: var(--accent-color);
+  }
+
+  & > p {
+    margin-top: 0.25em;
+    margin-bottom: 0.25em;
+  }
+
+  & {
+    --accent-color: rgb(0, 0, 73);
+    --separator: var(--system-blue);
+    background: rgba(0, 122, 255, 0.0125);
+  }
+
+  &.author,
+  &.authors,
+  &.copyright,
+  &.date {
+    --accent-color: rgb(51, 51, 51);
+    --separator: var(--system-fill);
+    background: var(--system-background);
+  }
+
+  &.attention,
+  &.warning,
+  &.important {
+    --accent-color: rgb(76, 37, 2);
+    --separator: var(--system-orange);
+    background: rgba(255, 149, 0, 0.0125);
+  }
+
+  &.bug {
+    --accent-color: rgb(78, 0, 41);
+    --separator: var(--system-pink);
+    background: rgba(255, 59, 48, 0.0125);
+  }
+}
+
 article {
   padding: 2em 0 1em 0;
 
@@ -960,7 +998,6 @@ p code,
 dd code,
 li code {
   font-size: smaller;
-  color: var(--secondary-label);
 }
 
 a code {