Style codeblocks and blockquotes

_config.ts

@@ -23,12 +23,24 @@ site.process([".html"], (pages) => {
     document.querySelectorAll("table").forEach((table) => {
       const div = document.createElement("div");
 
-      div.classList.add("room", "rotated");
       table.classList.add("rotated");
+      div.classList.add("overflow", "rotated");
 
       table.parentNode!.insertBefore(div, table);
       div.appendChild(table);
     });
+
+    document.querySelectorAll(".hljs").forEach((code) => {
+      const pre = code.parentElement!;
+      const div = document.createElement("div");
+
+      code.classList.add("rotated");
+      pre.classList.add("rotated");
+      div.classList.add("overflow", "rotated");
+
+      pre.parentNode?.insertBefore(div, pre);
+      div.appendChild(pre);
+    });
   });
 });
 

site/_includes/text.vto

@@ -3,12 +3,21 @@ layout: base.vto
 ---
 
 <style>
+  /* Centering */
   html,
   body {
     display: flex;
     justify-content: center;
   }
 
+  .centered {
+    font-size: large;
+
+    display: initial;
+    width: min(100vw - 2rem, 50rem);
+  }
+
+  /* Make wrapping pretty */
   h1,
   h2,
   h3,
@@ -20,21 +29,17 @@ layout: base.vto
     text-wrap: pretty;
   }
 
-  .centered {
+  /* Rotate nav, tables and codeblocks so the scrollbar is at the top */
-    font-size: large;
-
-    display: initial;
-    width: min(100vw - 2rem, 50rem);
-  }
-
   .rotated {
     transform: rotateX(180deg);
   }
 
-  .content {
+  /* Make tables and other elements scroll horizontally */
-    overflow-wrap: break-word;
+  .overflow {
+    overflow-x: auto;
   }
 
+  /* Style nav */
   nav {
     font-size: larger;
     word-break: normal;
@@ -63,6 +68,11 @@ layout: base.vto
     margin-right: 0.6rem;
   }
 
+  /* Style content */
+  .content {
+    overflow-wrap: break-word;
+  }
+
   a {
     color: var(--link);
   }
@@ -71,10 +81,24 @@ layout: base.vto
     font-style: italic;
   }
 
-  .room {
+  blockquote {
-    overflow-x: auto;
+    border-left: 0.15rem solid var(--foreground);
+    padding: 0.6rem;
   }
 
+  @media (prefers-color-scheme: dark) {
+    blockquote {
+      background-color: #222;
+    }
+  }
+
+  @media (prefers-color-scheme: light) {
+    blockquote {
+      background-color: #EEE;
+    }
+  }
+
+  /* Style tables */
   table {
     border-collapse: collapse;
     white-space: nowrap;
@@ -87,8 +111,8 @@ layout: base.vto
   } */
 
   th, td {
-    border: 0.15em solid var(--foreground);
+    border: 0.15rem solid var(--foreground);
-    padding: 0.3em;
+    padding: 0.3rem;
   }
 
   th {
@@ -96,6 +120,35 @@ layout: base.vto
     color: var(--background);
   }
 
+  /* Codeblocks */
+  .rotated:has(pre) {
+    padding: 0.6rem;
+    border: 0.15rem solid var(--foreground);
+  }
+
+  pre:has(code) {
+    margin: 0;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .hljs-attr { color: lightblue; }
+    .hljs-keyword { color: firebrick; }
+    .hljs-number { color: mediumslateblue; }
+    .hljs-string { color: limegreen; }
+    .hljs-title { color: lightcoral; }
+    .hljs-type { color: aquamarine; }
+  }
+
+  @media (prefers-color-scheme: light) {
+    .hljs-attr { color: dodgerblue; }
+    .hljs-keyword { color: darkred; }
+    .hljs-number { color: darkslateblue; }
+    .hljs-string { color: darkgreen; }
+    .hljs-title { color: darkgoldenrod; }
+    .hljs-type { color: darkcyan; }
+  }
+
+  /* The end */
   footer {
     border-top: 0.15rem solid var(--foreground);