47 tiling

static/css/main.css

@@ -186,6 +186,7 @@ strong {
 i,
 em {
     --recursive-slnt: -16.0;
+    font-style: normal;
 }
 
 /* Lay out elements a bit more compactly */
@@ -240,18 +241,28 @@ th-literate-program {
     transition: background-color var(--transition-duration);
 }
 
-th-literate-program {
-    white-space: pre;
-}
+@media (prefers-color-scheme: light) {
 
-.tree summary:hover {
-
-    & pre,
-    & th-literate-program {
-        background-color: var(--shaded-against-background-twice);
+    pre,
+    th-literate-program {
+        background-color: transparent;
+        border: 1px solid var(--border-1);
     }
 }
 
+
+@media (prefers-color-scheme: dark) {
+    .tree summary:hover {
+
+        & pre,
+        & th-literate-program {
+            background-color: var(--shaded-against-background-twice);
+        }
+    }
+}
+
+
+
 pre>code,
 th-literate-program>code {
     padding: 0;
@@ -259,6 +270,10 @@ th-literate-program>code {
     border-radius: 0px;
 }
 
+th-literate-program {
+    white-space: pre;
+}
+
 /* And don't let code examples fly off and overflow the window */
 
 pre {
@@ -283,10 +298,12 @@ img.pic {
 /* Image hints for tweaking rendering */
 img {
     &[src*='+pixel'] {
-        image-rendering: crisp-edges;
+        image-rendering: pixelated;
         border-radius: 0;
     }
 
+    /* TODO: These could be autogenerated! */
+
     &[src*='+width160'] {
         width: 160px;
         height: auto;
@@ -297,6 +314,11 @@ img {
         height: auto;
     }
 
+    &[src*='+width752'] {
+        width: 752px;
+        height: auto;
+    }
+
     /* Resources for use in JavaScript. */
     &.resource {
         display: none;
@@ -532,11 +554,6 @@ th-literate-program[data-mode="output"] {
         color: #e39393;
     }
 
-    & code .return-value {
-        content: 'Return value: ';
-        opacity: 50%;
-    }
-
     &::after {
         content: 'Output';
 
@@ -553,7 +570,15 @@ th-literate-program[data-mode="output"] {
 /* Syntax highlighting */
 
 :root {
-    /* TODO: Light mode syntax highlighting */
+    --syntax-comment: #9b8580;
+    --syntax-identifier: var(--text-color);
+    --syntax-keyword1: #e15e2b;
+    --syntax-keyword2: #199aca;
+    --syntax-operator: #e3755b;
+    --syntax-function: #d57b07;
+    --syntax-literal: #a64fb3;
+    --syntax-string: #79ac3b;
+    --syntax-punct: #a28680;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -607,4 +632,21 @@ th-literate-program[data-mode="output"] {
     &.punct {
         color: var(--syntax-punct);
     }
+
+}
+
+.th-syntax-highlighting {
+    & .export {
+        text-decoration: underline dotted;
+        cursor: help;
+        text-decoration-color: transparent;
+        transition: text-decoration-color var(--transition-duration);
+    }
+
+    &:hover,
+    &:focus {
+        & .export {
+            text-decoration-color: var(--syntax-keyword1);
+        }
+    }
 }