CSS tweaks

static/css/doc.css

@@ -56,6 +56,12 @@ main.doc {
             grid-column: main;
         }
 
+        & hr,
+        & pre,
+        & th-literate-program {
+            grid-column: left-code / right-wide;
+        }
+
         & p {
             padding-top: 0.5lh;
             padding-bottom: 0.5lh;
@@ -67,7 +73,8 @@ main.doc {
             padding-bottom: 0.5lh;
         }
 
-        & h3 {
+        & h3,
+        & h4 {
             margin: 0;
             padding-top: 0.5lh;
             padding-bottom: 0.5lh;
@@ -90,7 +97,6 @@ main.doc {
         & pre,
         & th-literate-program {
             padding: 0.8rem var(--code-block-h-padding);
-            grid-column: left-code / right-wide;
 
             & code {
                 --recursive-wght: 500;
@@ -149,6 +155,69 @@ main.doc {
             text-align: center;
         }
 
+        & details {
+            /* I wanted this to work on grid layout, but currently it is impossible to set
+               <details> to display: grid; across all browsers.
+               Instead you have to include a <details-content> element after the summary. */
+
+            --details-marker-size: var(--code-block-h-padding);
+            --details-indent-size: var(--code-block-h-padding);
+
+            grid-column: left-code / right-wide;
+
+            padding-top: 0.5lh;
+            padding-bottom: 0.5lh;
+
+            & > summary {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+
+                --recursive-wght: 600;
+                border-bottom: 1px solid var(--border-1);
+
+                cursor: pointer;
+
+                &::before {
+                    content: "";
+
+                    display: block;
+                    width: calc(2 * var(--details-marker-size));
+                    height: calc(2 * var(--details-marker-size));
+                    flex-shrink: 0;
+
+                    background-image: var(--icon-expand);
+                    background-position: 50% 50%;
+                    background-repeat: no-repeat;
+                }
+            }
+
+            &[open] > summary::before {
+                background-image: var(--icon-collapse);
+            }
+
+            & > details-content {
+                display: grid;
+                grid-template-columns:
+                    [indent] auto
+                    [main] 1fr;
+
+                border-bottom: 1px solid var(--border-1);
+
+                &::before {
+                    content: "";
+                    display: block;
+                    width: 100%;
+                    margin: 0 var(--details-indent-size);
+                    border-left: 1px solid var(--border-1);
+                }
+
+                & > * {
+                    grid-column: main;
+                }
+            }
+        }
+
         & .wide {
             grid-column: left-wide / right;
         }
@@ -209,15 +278,18 @@ main.doc {
         & .doc-text {
             --code-block-grid-space: 0;
 
-            & pre,
+            & details {
-            & th-literate-program {
+                --details-marker-size: 1.6rem;
+                --details-indent-size: 1.6rem;
+            }
+
+            & > 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;
@@ -229,6 +301,20 @@ main.doc {
                 }
             }
 
+            & > pre,
+            & > th-literate-program,
+            & > details {
+                margin-left: calc(var(--doc-padding) * -1);
+                margin-right: calc(var(--doc-padding) * -1);
+            }
+
+            & > details {
+                & > summary,
+                & > details-content {
+                    padding-right: var(--doc-padding);
+                }
+            }
+
             & figure figcaption {
                 &.overlay-bottom-right {
                     position: static;

static/css/main.css

@@ -376,6 +376,39 @@ a.secret {
     text-decoration: none;
 }
 
+/* Links to headings should be invisible by default, only appearing on hover. */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    & > a,
+    & > a:visited {
+        color: var(--text-color);
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+}
+
+@media (hover: none) {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        & > a,
+        & > a:visited {
+            text-decoration: underline;
+        }
+    }
+}
+
 /* Make blockquotes a bit prettier */
 
 blockquote {
@@ -718,8 +751,6 @@ h1.page-title {
         text-decoration: underline;
         text-decoration-color: transparent;
 
-        transition: var(--transition-duration) text-decoration-color;
-
         &:hover {
             text-decoration-color: var(--text-color);
         }