goofy css

static/css/blog/post.css

@@ -5,6 +5,8 @@
     --font-color: #18181b;
     --code-font-color: #333333;
     --code-bg-color: #eeeeee;
+    --quote-border-color: #9852fa;
+    --quote-bg-color: #d8d6d6;
   }
 }
 
@@ -15,6 +17,8 @@
     --font-color: #a1a1aa;
     --code-font-color: #eeeeee;
     --code-bg-color: #333333;
+    --quote-border-color: #bd93f9;
+    --quote-bg-color: #273341;
   }
 }
 
@@ -35,6 +39,15 @@ html {
   background: var(--selection);
 }
 
+* {
+  color: var(--font-color);
+}
+
+p {
+  color: var(--font-color);
+  font-size: var(--font-size);
+}
+
 /* Anchors */
 h1:hover > a::before,
 h2:hover > a::before,
@@ -66,15 +79,6 @@ h6 > a {
   text-decoration: none;
 }
 
-* {
-  color: var(--font-color);
-}
-
-p {
-  color: var(--font-color);
-  font-size: var(--font-size);
-}
-
 body {
   margin: 0 auto;
   max-width: 720px;
@@ -84,18 +88,19 @@ footer {
   text-align: center;
 }
 
+/* Marge for numbers */
 .hljs {
   margin-inline: 0.4em;
 }
 
-/* for block of numbers */
+/* Numbers in codeblocks */
 .hljs-ln-numbers {
   text-align: right;
 }
 
 .hljs-ln
   > tbody
-  > tr:last-child:has(td:last-child > span:-moz-only-whitespace) {
+  > tr:last-child:has(td:last-child > span::-moz-only-whitespace) {
   visibility: collapse;
 }
 
@@ -105,8 +110,9 @@ footer {
   visibility: collapse;
 }
 
+/* Little snippet of code (not blocks) */
 kbd,
-code {
+code:not(:has(:not(pre))) {
   background-color: var(--code-bg-color);
   border-radius: 3px;
   color: var(--code-font-color);
@@ -119,11 +125,13 @@ code {
   vertical-align: 1.5px;
 }
 
+/* Footnotes */
 .footnotes a {
   font-family: "Segoe UI";
   text-decoration: underline dotted;
 }
 
+/* Reference to footnotes */
 .footnote-ref > a {
   text-decoration: underline dotted;
 }
@@ -133,3 +141,23 @@ hr {
   height: 1px;
   background: #8080802f;
 }
+
+/* Quotes */
+blockquote {
+  margin: 1em 0;
+  padding: 0.1em 10px;
+  border-left: 6px solid;
+  border-color: var(--quote-border-color);
+  background-color: var(--quote-bg-color);
+}
+
+/* Mermaid diagrams */
+pre:has(code.language-mermaid) {
+  text-align: center;
+}
+
+/* Images */
+img {
+  display: block;
+  margin: auto;
+}