experiment for narrow screens: variable tab width / proportional code font

okay, so imagine this: you can change the tab size to something smaller on narrow screens...!
isn't that hella cool?

content/fmt.dj

@@ -177,6 +177,7 @@ bool next_hole(String_Buffer& buf, const char*& fstr)
 
 A call to `next_hole` will find the literal part, visualised with `---`, and leave the `fstr` pointer past the hole `{}`, visualised with `^`.
 
+{.monospaced}
 ```
 Hello, {}!
 -------  ^
@@ -185,6 +186,7 @@ Hello, {}!
 In this case, it will return `true` to signal that it stopped at a hole.\
 In case there is no hole however, and the end of the string is reached, it will return `false`.
 
+{.monospaced}
 ```
 Hello, {}!
          -^ end of string
@@ -195,6 +197,7 @@ Without the extra `if` clause, it would be printed into the output literally as
 
 Therefore, when `{` is encountered directly after another `{`, we have to flush the current span, and start a new one directly after the first `{`. Underlined with `---` are the spans of characters that get written to the output.
 
+{.monospaced}
 ```
 empty {{} hole
 ------- ------
@@ -230,7 +233,6 @@ For example, providing an implementation of:
 
 ```cpp
 void format_value(String_Buffer& buf, const char*& fstr, int value);
-//                                                       ^^^^^^^^^
 ```
 
 will make it possible to write out integers in addition to strings.

static/css/doc.css

@@ -18,7 +18,9 @@ main.doc {
     }
 
     & .doc-text {
-        padding: 1.6rem;
+        --doc-padding: 1.6rem;
+
+        padding: var(--doc-padding);
         max-width: min(100%, var(--doc-text-width));
 
         line-height: 1.6;
@@ -62,6 +64,20 @@ main.doc {
         & ul {
             list-style: "-  ";
         }
+
+        & pre,
+        & th-literate-program {
+            & code {
+                --recursive-wght: 520;
+                --recursive-mono: 0.5; /* You didn't expect a proportional font being used for code, did you. */
+                font-size: 90%;
+                tab-size: 3;
+            }
+
+            &.monospaced code {
+                --recursive-mono: 1;
+            }
+        }
     }
 
     & section.feed {
@@ -93,3 +109,27 @@ main.doc {
         }
     }
 }
+
+@media (max-width: 700px) {
+    main.doc {
+        & .doc-text {
+            & > pre,
+            & > th-literate-program {
+                /* Stretch to whole page.
+                   This way of doing it feels a bit brittle, though.
+                   It might be good to refactor this to CSS grid at some point. */
+                padding-left: var(--doc-padding);
+                padding-right: var(--doc-padding);
+                margin-left: calc(var(--doc-padding) * -1);
+                margin-right: calc(var(--doc-padding) * -1);
+                border-radius: 0;
+                border-left: none;
+                border-right: none;
+
+                & code {
+                    tab-size: 2;
+                }
+            }
+        }
+    }
+}

static/css/main.css

@@ -175,12 +175,17 @@ h4 {
     font-size: 1.6rem;
 }
 
+code {
+    --recursive-mono: 0.5;
+}
+
 pre,
-code,
+pre code,
 kbd,
 th-literate-program {
     --recursive-mono: 1;
     --recursive-wght: 450;
+    tab-size: 4;
 }
 
 strong code {