@abreen/tada 1.2.0 → 1.3.2

package/README.md

@@ -28,7 +28,7 @@ A static site generator. The successor to Presto.
   * `<<< details ... <<<` renders a collapsible box
   * `::: section ... :::` renders a special section with a fancy background
   * `!!! note ... !!!` and `!!! warning ... !!!` render alert boxes
-  * `??? review ... ???` renders a Q & A section; answers hidden until click
+  * `??? question ... ???` renders a Q & A section; answers hidden until click
   * Special heading subtitles with `## Heading # A subtitle here`
 - Automatically generated favicon
   * Text, color, font and font weight taken from config file

package/bin/tada.ts

@@ -116,6 +116,21 @@ function printUsage() {
       console.log('        --tint-amount, --default-time-zone, --prod-base,');
       console.log('        --prod-base-path]');
       continue;
+    } else if (cmd === 'watch') {
+      console.log(`  ${cmd.padEnd(18)} ${desc}`);
+      console.log(
+        '       [--port <n>]        HTTP server port (default: 8080)',
+      );
+      console.log(
+        '       [--ws-port <n>]     WebSocket port for live reload (default: 35729)',
+      );
+      continue;
+    } else if (cmd === 'serve') {
+      console.log(`  ${cmd.padEnd(18)} ${desc}`);
+      console.log(
+        '       [--port <n>]        HTTP server port (default: 8080)',
+      );
+      continue;
     } else if (cmd === 'clean') {
       console.log('  clean              Remove the dist/ directory');
       console.log(
@@ -137,7 +152,18 @@ function printUsage() {
 }
 
 function run(cmd: string): void {
-  execSync(cmd, { cwd: process.cwd(), stdio: 'inherit' });
+  try {
+    execSync(cmd, { cwd: process.cwd(), stdio: 'inherit' });
+  } catch (err: unknown) {
+    const code = (err as { status?: number }).status;
+    if (code != null) {
+      console.error(`tada ${command} failed with exit code ${code}`);
+      process.exit(code);
+    } else {
+      console.error(`tada ${command} failed`);
+      process.exit(1);
+    }
+  }
 }
 
 function copyDirRecursive(src: string, dest: string): void {
@@ -370,6 +396,7 @@ async function initCommand(args: string[]): Promise<void> {
             title: 'Topics',
             links: [
               { text: 'Lectures', internal: '/lectures/index.html' },
+              { text: 'Labs', internal: '/labs/index.html' },
               {
                 text: 'Problem Sets',
                 internal: '/problem_sets/index.html',

package/build/globals.test.ts

@@ -30,10 +30,11 @@ describe('createGlobals', () => {
     expect(g.cx).toBe(g.classNames);
   });
 
-  test('renderTimeZoneChooser includes noscript when defaultTimeZone is set', () => {
+  test('renderTimeZoneChooser includes hidden disabled select, inline script, and noscript', () => {
     const g = makeGlobals('index', { defaultTimeZone: 'America/New_York' });
-    expect(g.renderTimeZoneChooser()).toContain('noscript');
-    expect(g.renderTimeZoneChooser()).toContain('select');
+    const html = g.renderTimeZoneChooser();
+    expect(html).toContain('<select class="time-zone" hidden disabled>');
+    expect(html).toContain('<noscript>Times shown in ET.</noscript>');
   });
 });
 

package/build/globals.ts

@@ -18,8 +18,16 @@ export default function createGlobals(
   const defaultTz = timezones.find(
     t => t.value === siteVariables.defaultTimeZone,
   )!;
+  const options = timezones
+    .map(tz => {
+      const label =
+        tz.value === 'UTC' ? tz.label : `${tz.label} (${tz.abbreviation})`;
+      const selected = tz.value === defaultTz.value ? ' selected' : '';
+      return `<option value="${tz.value}"${selected}>${label}</option>`;
+    })
+    .join('');
   const renderTimeZoneChooser = () =>
-    `<select class="time-zone" hidden></select><noscript>Times shown in ${defaultTz.abbreviation}.</noscript>`;
+    `<span class="time-zone-label" hidden>Times shown in </span><select class="time-zone" hidden disabled>${options}</select><noscript>Times shown in ${defaultTz.abbreviation}.</noscript>`;
 
   return {
     isHomePage: subPath === 'index',

package/build/markdown-plugins.test.ts

@@ -382,9 +382,7 @@ describe('injectKatexStylesheet', () => {
     const result = injectKatexStylesheet(html, p => p);
 
     expect(result).toContain('href="/katex/katex.min.css"');
-    expect(result).toContain('media="print"');
-    expect(result).toContain('onload="this.media=\'all\'"');
-    expect(result).toContain('<noscript>');
+    expect(result).toContain('rel="stylesheet"');
   });
 
   test('applies basePath to the stylesheet URL', () => {

package/build/serve.ts

@@ -20,7 +20,9 @@ try {
   process.exit(1);
 }
 
-function resolvePathname(pathname: string): string | null {
+function resolvePathname(
+  pathname: string,
+): { filePath: string; mtime: Date } | null {
   let decodedPath: string;
   try {
     decodedPath = decodeURIComponent(pathname);
@@ -49,17 +51,27 @@ function resolvePathname(pathname: string): string | null {
     return null;
   }
 
-  return resolvedPath;
+  return { filePath: resolvedPath, mtime: stat.mtime };
 }
 
 function createResponse(req: Request): Response {
   const url = new URL(req.url);
-  const filePath = resolvePathname(url.pathname);
-  if (!filePath) {
+  const result = resolvePathname(url.pathname);
+  if (!result) {
     return new Response('Not Found', { status: 404 });
   }
 
-  return new Response(Bun.file(filePath));
+  const headers = {
+    'Cache-Control': 'no-cache',
+    'Last-Modified': result.mtime.toUTCString(),
+  };
+
+  const ims = req.headers.get('If-Modified-Since');
+  if (ims && new Date(ims) >= new Date(headers['Last-Modified'])) {
+    return new Response(null, { status: 304, headers });
+  }
+
+  return new Response(Bun.file(result.filePath), { headers });
 }
 
 function getPortArg(): number {

package/build/site-variables.ts

@@ -10,7 +10,7 @@ const configDir = getProjectDir();
 
 const DEFAULT: Partial<SiteVariables> = {
   basePath: '/',
-  features: { search: true, code: true, favicon: false },
+  features: { search: true, code: true, favicon: true },
 };
 
 const isValid = compileJsonSchema(siteSchema);

package/build/templates.ts

@@ -23,7 +23,12 @@ const renderStack: string[] = [];
 let errorStack: string[] | null = null;
 
 // JSON data files that live in the user's config directory
-const JSON_DATA_FILES: string[] = ['nav.json', 'authors.json'];
+const REQUIRED_JSON_DATA_FILES: string[] = ['nav.json'];
+const OPTIONAL_JSON_DATA_FILES: string[] = ['authors.json'];
+const JSON_DATA_FILES: string[] = [
+  ...REQUIRED_JSON_DATA_FILES,
+  ...OPTIONAL_JSON_DATA_FILES,
+];
 
 function getHtmlTemplatesDir(): string {
   return path.resolve(getPackageDir(), 'templates');
@@ -97,6 +102,9 @@ export function compileTemplates(
   for (const fileName of JSON_DATA_FILES) {
     const filePath = path.join(jsonDir, fileName);
     if (!fs.existsSync(filePath)) {
+      if (REQUIRED_JSON_DATA_FILES.includes(fileName)) {
+        throw new Error(`Missing required config file: ${filePath}`);
+      }
       continue;
     }
 

package/build/utils/jdi-runner/LiterateRunner.java

@@ -95,6 +95,18 @@ public class LiterateRunner {
         stderrThread.setDaemon(true);
         stderrThread.start();
 
+        // Forward stdin to target VM in a background thread
+        OutputStream targetStdin = process.getOutputStream();
+        Thread stdinThread = new Thread(() -> {
+            try {
+                System.in.transferTo(targetStdin);
+                targetStdin.close();
+            } catch (IOException ignored) {
+            }
+        });
+        stdinThread.setDaemon(true);
+        stdinThread.start();
+
         int activeBlock = -1;
 
         try {
@@ -199,6 +211,7 @@ public class LiterateRunner {
             } catch (VMDisconnectedException ignored) {
             }
             stderrThread.join(1000);
+            stdinThread.join(1000);
         }
 
         // Output JSON to our own stdout

package/build/utils/literate-java.ts

@@ -39,6 +39,12 @@ export function parseLiterateJava(
       continue;
     }
 
+    // Skip fences with a non-Java language tag (e.g., ```text)
+    const lang = token.info.trim();
+    if (token.type === 'fence' && lang !== '' && lang !== 'java') {
+      continue;
+    }
+
     const code = token.content;
     const codeLines = code.endsWith('\n')
       ? code.slice(0, -1).split('\n')
@@ -138,6 +144,7 @@ export function executeLiterateJava(
   className: string,
   classPath: string,
   codeBlocks: LiterateCodeBlock[],
+  stdin?: string,
 ): LiterateRunnerEntry[] {
   const runnerDir = path.join(__dirname, 'jdi-runner');
   ensureRunnerCompiled(runnerDir);
@@ -153,9 +160,13 @@ export function executeLiterateJava(
     const result = execFileSync(
       'java',
       ['-cp', runnerDir, 'LiterateRunner', className, classPath, rangesJson],
-      { timeout: 30000, encoding: 'utf-8' },
+      { timeout: 30000, encoding: 'utf-8', input: stdin },
     );
-    const entries: LiterateRunnerEntry[] = JSON.parse(result);
+    const raw: [number, string][] = JSON.parse(result);
+    const entries: LiterateRunnerEntry[] = raw.map(([blockIndex, output]) => ({
+      blockIndex,
+      output,
+    }));
     log.debug`LiterateRunner returned ${entries.length} output entries`;
     return entries;
   } catch (err: unknown) {

package/build/utils/render.ts

@@ -127,9 +127,7 @@ export function injectAssetTags(
     .join('');
   const asyncLinkTags = asyncAssets
     .map(
-      asset =>
-        `<link href="${applyBasePath('/' + asset)}" rel="stylesheet" media="print" onload="this.media='all'">` +
-        `<noscript><link href="${applyBasePath('/' + asset)}" rel="stylesheet"></noscript>`,
+      asset => `<link href="${applyBasePath('/' + asset)}" rel="stylesheet">`,
     )
     .join('');
 
@@ -143,9 +141,7 @@ export function injectKatexStylesheet(
   applyBasePath: (subPath: string) => string,
 ): string {
   const href = applyBasePath('/katex/katex.min.css');
-  const tag =
-    `<link href="${href}" rel="stylesheet" media="print" onload="this.media='all'">` +
-    `<noscript><link href="${href}" rel="stylesheet"></noscript>`;
+  const tag = `<link href="${href}" rel="stylesheet">`;
   return html.replace('<head>', `<head>${tag}`);
 }
 
@@ -416,6 +412,9 @@ export function renderLiterateJavaPageAsset({
 
   validateFrontMatter(pageVariables, filePath);
 
+  const stdin =
+    typeof pageVariables.stdin === 'string' ? pageVariables.stdin : undefined;
+
   // Compile and execute the concatenated Java source
   let tempDir: string | undefined;
   let blockOutputMap: Map<number, string> | null = null;
@@ -429,6 +428,7 @@ export function renderLiterateJavaPageAsset({
           className,
           tempDir,
           codeBlocks,
+          stdin,
         );
         blockOutputMap = new Map(
           outputEntries.map(e => [e.blockIndex, e.output]),
@@ -447,9 +447,17 @@ export function renderLiterateJavaPageAsset({
     validatorOptions: { enabled: false },
   });
   let fenceIndex = 0;
+  const defaultFence = md.renderer.rules.fence!;
 
-  md.renderer.rules.fence = (tokens, idx) => {
+  md.renderer.rules.fence = (tokens, idx, options, env, self) => {
     const token = tokens[idx];
+    const lang = token.info.trim();
+
+    // Non-Java fences render with the default renderer (no line numbers)
+    if (lang !== '' && lang !== 'java') {
+      return defaultFence(tokens, idx, options, env, self);
+    }
+
     const code = token.content;
     const lines = code.endsWith('\n')
       ? code.slice(0, -1).split('\n')

package/build/watch.ts

@@ -75,7 +75,7 @@ type ChangeCategory = 'content' | 'public' | 'config';
 const log = makeLogger(__filename);
 const wslog = makeLogger('WebSocket');
 
-// --- WebSocket server (unchanged) ---
+// --- WebSocket server ---
 
 let webSocketsReady = false;
 let watcherReady = false;
@@ -511,23 +511,28 @@ initialBuild()
     initialBuildFailed = true;
   })
   .finally(() => {
-    // Watch content, public, data files, site config
     const watchPaths: string[] = [contentDir, publicDir];
 
-    // Watch data files (nav.json, authors.json)
+    // Watch config files (nav.json, authors.json, site config) via the
+    // project root directory (depth 0). Chokidar v4 doesn't emit unlink
+    // for individually watched files, so we must watch the directory.
     const jsonDataDir = getJsonDataDir();
-    for (const dataFile of JSON_DATA_FILES) {
-      const dataPath = path.join(jsonDataDir, dataFile);
-      if (fs.existsSync(dataPath)) {
-        watchPaths.push(dataPath);
+    const configFilePaths = new Set([
+      ...JSON_DATA_FILES.map(f => path.resolve(jsonDataDir, f)),
+      path.resolve('site.dev.json'),
+    ]);
+    const configWatcher = chokidar.watch(jsonDataDir, {
+      ignoreInitial: true,
+      depth: 0,
+    });
+    const onConfigFileChange = (filePath: string) => {
+      if (configFilePaths.has(path.resolve(filePath))) {
+        onFileChange(filePath);
       }
-    }
-
-    // Watch site config
-    const siteConfigPath = path.resolve('site.dev.json');
-    if (fs.existsSync(siteConfigPath)) {
-      watchPaths.push(siteConfigPath);
-    }
+    };
+    configWatcher.on('add', onConfigFileChange);
+    configWatcher.on('change', onConfigFileChange);
+    configWatcher.on('unlink', onConfigFileChange);
 
     const watcher = chokidar.watch(watchPaths, {
       ignoreInitial: true,
@@ -538,12 +543,28 @@ initialBuild()
     watcher.on('add', onFileChange);
     watcher.on('unlink', onFileChange);
 
-    watcher.on('ready', () => {
+    let configWatcherReady = false;
+    let contentWatcherReady = false;
+
+    function onWatcherReady(): void {
+      if (!configWatcherReady || !contentWatcherReady) {
+        return;
+      }
       watcherReady = true;
       if (initialBuildFailed) {
         broadcast('error');
       }
       broadcast('ready');
       log.info`Watching for changes...`;
+    }
+
+    configWatcher.on('ready', () => {
+      configWatcherReady = true;
+      onWatcherReady();
+    });
+
+    watcher.on('ready', () => {
+      contentWatcherReady = true;
+      onWatcherReady();
     });
   });

package/init/content/index.md

@@ -11,8 +11,9 @@ This is an example site built with <%= page.toolName %>.
 
 ## Getting started
 
-Edit the files in `content/` to add your own pages. The `config/` directory
-contains the site configuration, and `templates/` contains the HTML layouts.
+Edit the files in `content/` to add your own pages. To configure the nav,
+update `nav.json`. Update `authors.json` with your information, or delete it
+if you won't use the `author` front matter field.
 
 See the [Markdown examples page](/markdown.html) for syntax examples.
 

package/init/content/labs/00/VowelCounter.java.md

@@ -0,0 +1,129 @@
+parent: /labs/00/index.html
+parentLabel: Lab 0
+title: Counting vowels
+author: alex
+description: An example of a literate Java program that takes predefined input.
+stdin: "hello, world!\n"
+
+A Java program can process input in different ways: it could open a file and
+read it; it could open a network connection and wait for data from another
+computer on the Internet, or it can read from the standard in.
+
+The <dfn>standard in</dfn> (or `stdin`) is one of three streams available to a
+running program. The other two streams are the standard out and standard error.
+
+<figure>
+<svg viewBox="0 50 410 90" xmlns="http://www.w3.org/2000/svg" font-size="14" fill="none" style="margin:1rem auto;display:block;max-width:410px">
+  <defs>
+    <marker id="arrow" markerWidth="8" markerHeight="8" refX="8" refY="4" orient="auto">
+      <path d="M0,0 L8,4 L0,8 Z" stroke="currentColor" fill="currentColor"></path>
+    </marker>
+  </defs>
+  <!-- Java program box -->
+  <rect x="155" y="60" width="100" height="60" stroke-width="2" stroke="currentColor"></rect>
+  <text x="205" y="95" text-anchor="middle" fill="currentColor">Program</text>
+  <!-- stdin arrow (incoming from left) -->
+  <path d="M20 90H143" marker-end="url(#arrow)" stroke="currentColor"></path>
+  <text x="80" y="82" text-anchor="middle" fill="currentColor" font-family="var(--mono-font)">stdin</text>
+  <!-- stdout arrow (outgoing, upper right) -->
+  <path d="M267 75H390" marker-end="url(#arrow)" stroke="currentColor"></path>
+  <text x="328" y="67" text-anchor="middle" fill="currentColor" font-family="var(--mono-font)">stdout</text>
+  <!-- stderr arrow (outgoing, lower right) -->
+  <path d="M267 105H390" marker-end="url(#arrow)" stroke="currentColor"></path>
+  <text x="328" y="125" text-anchor="middle" fill="currentColor" font-family="var(--mono-font)">stderr</text>
+</svg>
+<figcaption>
+A running Java program (depicted as a box) with the standard in stream as an
+incoming arrow and the standard out & error streams as outgoing arrows.
+</figcaption>
+</figure>
+
+When a Java program calls `System.out.print()` (or `IO.print()`), the program
+sends data to the standard out. When a program uses `System.err.print()`, it
+sends data to the standard error, an output stream similar to `System.out`
+but reserved for error messages.
+
+`System.in` is an `InputStream` object that allows a program to read characters
+from the standard input, one character at a time. Its `read()` method returns an
+integer value.
+
+- If the integer is positive, it represents a Unicode character coming through
+  the stream.
+- If the integer is -1, there is no more input in the stream.
+
+The -1 is known as a <dfn>sentinel</dfn>, or a reserved value known ahead of
+time to represent a specific condition. Because all Unicode characters are
+positive numbers, -1 cannot be converted to a character, and is instead used
+to represent the specific condition of "*no more input in the stream*."
+
+Let's implement a program that uses `System.in.read()` to get all the characters
+from the standard in, counting how many characters are vowels. When there are
+no more characters in the stream, the program prints the total number of vowels.
+
+<!---
+Hiding the method signature for main() keeps us focused on the program's logic,
+and avoids discussion of IOException.
+```
+void main() throws Exception {
+```
+-->
+
+We'll start the program with a `numVowels` counter initialized to zero,
+the additive identity, and a second integer variable `ch` used to store the
+return value of the `read()` method:
+
+```
+    int numVowels = 0;
+    int ch;
+```
+
+Using an indefinite loop (since we don't know in advance how many characters
+we'll get), we call the `read()` method and check if it returned the sentinel:
+
+```
+    while (true) {
+        ch = System.in.read();
+        if (ch == -1) {
+            break;
+        }
+```
+
+If `read()` returns the sentinel, we stop the loop with `break`. Otherwise,
+we test whether `ch` is a vowel:
+
+```
+        if ("aeiouAEIOU".indexOf(ch) >= 0) {
+            numVowels++;
+        }
+```
+
+<!---
+Hide the closing brace of the `while` loop to avoid indenting the conditional.
+```
+    }
+```
+-->
+
+Putting lower case and upper case vowels into a `String` allows us to use the
+`indexOf()` method to check if `ch` is one of those characters. If `ch` is
+nowhere in the string, `indexOf()` returns -1.
+
+When reading input from a terminal, the loop ends when the user presses
+<kbd>Ctrl</kbd>+<kbd>D</kbd> on the keyboard. If we type the input
+
+```text
+hello, world!
+```
+
+Then the last line of the program, which prints the total count, will output 3:
+
+```
+    IO.println("vowels: " + numVowels);
+```
+
+<!---
+Hiding the closing brace for main().
+```
+}
+```
+-->

package/init/content/labs/00/index.md

@@ -0,0 +1,29 @@
+parent: /labs/index.html
+parentLabel: Labs
+title: Lab 0
+author: alex
+description: An example lab page for <%= site.title %>.
+
+In this lab, we'll explore the [`VowelCounter` program](./VowelCounter.html).
+
+## Review questions
+
+??? question What is an input stream?
+
+An input stream is an abstraction that represents arbitrary data going into a
+program. The data in a stream doesn't have a predefined size or length.
+When you write a program that uses an input stream, the program may wait for
+more data.
+
+???
+
+??? question What is a sentinel? Provide an example.
+
+A sentinel is a special value a program uses to change its behavior.
+For example, `System.in.read()` returns -1 when the standard in stream doesn't
+have any more characters.
+
+Another example: the character `'q'` might be reserved to indicate a command
+like "quit." When a user presses <kbd>Q</kbd>, the program exits.
+
+???

package/init/content/labs/index.md

@@ -0,0 +1,9 @@
+title: Labs
+author: alex
+description: An example page for <%= site.title %>.
+
+In each one-hour lab, we'll dive deeper and write code together, exploring how
+to apply the concepts we learned in lecture to solve real-world problems and
+write full-length programs.
+
+0. [`VowelCounter` and user input](/labs/00/index.html)

package/init/content/lectures/01/Pair.java.md

@@ -1,5 +1,6 @@
 title: A generic `Pair` class
 author: alex
+description: An example of a literate Java program.
 
 <!---
 You may hide code from the generated HTML page but still include it in the

package/init/content/markdown.md

@@ -25,8 +25,6 @@ the `<main>` element.
 Note that the table of contents contains more than just headings, but
 also alerts (notes and warnings) `<hr>` elements.
 
----
-
 ## Basic syntax
 
 <!---

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "@abreen/tada",
-  "version": "1.2.0",
+  "version": "1.3.2",
   "type": "module",
   "description": "A static site generator",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/abreen/Tada.git"
+  },
+  "author": "Alex Breen <npm@abreen.email>",
   "bin": {
     "tada": "bin/tada.ts"
   },
@@ -20,6 +25,7 @@
   ],
   "scripts": {
     "prepare": "husky && bun run scripts/check-deps.ts",
+    "prepack": "bun run scripts/prepack.ts",
     "init-example": "bun run bin/tada.ts init example --no-interactive",
     "lint": "eslint src/ build/ bin/",
     "typecheck": "tsc --noEmit",
@@ -29,6 +35,10 @@
   "engines": {
     "bun": ">=1.0.0"
   },
+  "os": [
+    "darwin",
+    "linux"
+  ],
   "dependencies": {
     "@tsconfig/node23": "^23.0.2",
     "@vscode/markdown-it-katex": "^1.1.2",

package/schema/site.schema.json

@@ -4,13 +4,12 @@
   "properties": {
     "features": {
       "type": "object",
-      "default": { "search": true, "code": true },
+      "default": { "search": true, "code": true, "favicon": true },
       "properties": {
         "search": { "type": "boolean", "default": true },
         "code": { "type": "boolean", "default": true },
-        "favicon": { "type": "boolean", "default": false }
+        "favicon": { "type": "boolean", "default": true }
       },
-      "required": ["search", "code", "favicon"],
       "additionalProperties": false
     },
     "base": { "type": "string", "pattern": "^https?:\\/\\/[-.:a-zA-Z0-9]+$" },

package/src/_base.scss

@@ -1,3 +1,5 @@
+@use 'mixins' as *;
+
 :root {
   --box-border-width: 5px;
 
@@ -13,10 +15,6 @@
   --main-width: 900px;
 }
 
-p {
-  margin: 0 0 1rem 0;
-}
-
 h1,
 h2,
 h3,
@@ -27,14 +25,6 @@ h6 {
   -webkit-break-after: avoid;
   break-after: avoid;
   line-height: 1.3;
-
-  /*
-   * Enable Inter's features:
-   * ss03 - round quotes & commas
-   * ss04 - disambiguation (make uppercase i and lowercase L distinct)
-   * dlig - discretionary ligatures (for style)
-   */
-  font-feature-settings: 'ss03', 'ss04', 'dlig';
 }
 
 h1 {
@@ -52,11 +42,15 @@ body {
   line-height: var(--line-height);
 
   /*
-   * Enable Inter's features for legibility:
-   * ss03 - round quotes & commas
-   * ss04 - disambiguation (make uppercase i and lowercase L distinct)
+   * Enable Inter's features:
+   * liga - standard ligatures
+   * calt - contextual alternates
+   * ss03 - round quotes & commas (legibility)
+   * cv01 - alternate 1 (style)
+   * cv05 - lower case L with tail (legibility)
+   * cv10 - capital G with spur (style)
    */
-  font-feature-settings: 'ss03', 'ss04';
+  font-feature-settings: 'liga', 'calt', 'ss03', 'cv01', 'cv05', 'cv10';
 
   @media (prefers-color-scheme: dark) {
     & {
@@ -118,8 +112,46 @@ pre {
   }
 }
 
+details .content > *:first-child {
+  margin-top: 0;
+}
+
+details .content > *:last-child {
+  margin-bottom: 0;
+}
+
+details summary {
+  cursor: pointer;
+  @include user-select(none);
+  padding: var(--details-padding);
+}
+
+details .content {
+  padding: 0 var(--details-padding) var(--details-padding)
+    var(--details-padding);
+}
+
+@media (hover: hover) {
+  details summary {
+    &:hover {
+      color: var(--fg2-color);
+    }
+
+    &:active {
+      color: var(--link-active-color);
+    }
+  }
+}
+
+main details {
+  margin-bottom: 1rem;
+  border-radius: var(--border-radius);
+  border: 2px solid var(--fg-color);
+}
+
 input[type='text'],
 input[type='search'] {
+  font-family: var(--font);
   background: var(--bg-color);
   color: var(--fg-color);
   border: var(--control-border-width) solid var(--fg2-color);
@@ -143,3 +175,13 @@ input[type='search'] {
     cursor: not-allowed;
   }
 }
+
+figure {
+  margin: 1rem 0;
+
+  figcaption {
+    margin: 0 3rem;
+    font-size: var(--font-size-smaller);
+    color: var(--fg2-color);
+  }
+}

package/src/_layout.scss

@@ -26,18 +26,11 @@ body > .container {
   padding-bottom: 2rem;
 }
 
-body.default .body,
-body.literate .body {
-  > *:first-child {
-    margin-top: 0;
-  }
-}
-
 body.default .title-and-info,
 body.default nav.toc,
 body.literate .title-and-info,
 body.literate nav.toc {
-  margin-bottom: 2rem;
+  margin-bottom: var(--gap);
 }
 
 body.default .title-and-info,
@@ -47,12 +40,17 @@ body.literate .title-and-info {
   }
 }
 
+body.default .title-and-info {
+  padding-bottom: var(--gap);
+  border-bottom: 1px solid var(--fg2-color);
+}
+
 body.default main table,
 body.literate main table {
   width: 100%;
 }
 
-@media (max-width: 899px) {
+@media (width < 900px) {
   .toc-is-active .main-content {
     display: flex;
     flex-direction: column;
@@ -81,7 +79,7 @@ body.literate main table {
   }
 }
 
-@media (min-width: 900px) {
+@media (width >= 900px) {
   body.default main table,
   body.literate main table {
     width: auto;

package/src/question/style.scss

@@ -35,8 +35,7 @@
   @include user-select(none);
 }
 
-.question-a-body > ol:first-child,
-.question-a-body > ul:first-child {
+.question-a-body > *:first-child {
   margin-top: 0;
 }
 
@@ -49,19 +48,25 @@
   @media (prefers-reduced-motion: no-preference) {
     transition:
       color 0.25s,
-      background-color 0.25s;
+      background-color 0.25s,
+      border-color 0.25s,
+      box-shadow 0.25s;
   }
 }
 
 .question-a-body:not([data-revealed]) > * {
   color: transparent;
   background-color: var(--bg2-color);
+  border-color: transparent;
+  box-shadow: none;
   pointer-events: none;
 }
 
 .question-a-body:not([data-revealed]) > * * {
   color: transparent;
   background-color: var(--bg2-color);
+  border-color: transparent;
+  box-shadow: none;
 }
 
 .question-a-body::after {

package/src/search/style.scss

@@ -61,12 +61,8 @@ header {
         color: var(--fg2-color);
 
         kbd {
-          display: inline-block;
-          padding: 1px 5px;
-          border: 1px solid var(--fg2-color);
-          border-radius: 4px;
-          font-family: var(--font);
-          font-size: var(--font-size-small);
+          border-color: var(--fg2-color);
+          box-shadow: 0 2px 0 var(--fg2-color);
           line-height: 1.4;
         }
       }

package/src/style.scss

@@ -133,34 +133,6 @@ a.footnote-ref,
   @include user-select(none);
 }
 
-details .content > p:last-child,
-details .content > div:last-child {
-  margin-bottom: 0;
-}
-
-details summary {
-  cursor: pointer;
-  @include user-select(none);
-  padding: var(--details-padding);
-}
-
-details .content {
-  padding: 0 var(--details-padding) var(--details-padding)
-    var(--details-padding);
-}
-
-@media (hover: hover) {
-  details summary {
-    &:hover {
-      color: var(--fg2-color);
-    }
-
-    &:active {
-      color: var(--link-active-color);
-    }
-  }
-}
-
 hr {
   border: none;
   height: 32px;
@@ -181,16 +153,6 @@ hr::after {
   mask-repeat: no-repeat;
 }
 
-main p,
-main details {
-  margin-bottom: 1rem;
-}
-
-main details {
-  border-radius: var(--border-radius);
-  border: 2px solid var(--fg-color);
-}
-
 button,
 a.button,
 input[type='submit'] {
@@ -244,10 +206,6 @@ button.icon-button {
   vertical-align: top;
 }
 
-li {
-  margin-bottom: 0.5rem;
-}
-
 ol.styled-list,
 ul.styled-list {
   color: var(--theme-color-text);
@@ -472,14 +430,23 @@ figure.bio {
   }
 
   figcaption {
-    font-size: var(--font-size-small);
-    color: var(--fg2-color);
     text-align: center;
     margin-top: var(--gap);
     font-style: italic;
   }
 }
 
+kbd {
+  display: inline-block;
+  padding: 1px 5px;
+  border: 1px solid var(--fg-color);
+  border-radius: 4px;
+  box-shadow: 0 2px 0 var(--fg-color);
+  font-family: var(--font);
+  font-size: var(--font-size-small);
+  font-weight: 500;
+}
+
 select {
   font-family: var(--font);
   color: var(--fg-color);

package/src/timezone/index.ts

@@ -100,25 +100,10 @@ function computeOffsets(baseDate: Date) {
   });
 }
 
-function init(element: HTMLDataListElement, selectedTz: string) {
-  const beforeText = window.document.createTextNode('Times shown in ');
-  element.parentElement?.insertBefore(beforeText, element);
-
-  TIMEZONES.forEach(tz => {
-    const opt = document.createElement('option');
-    opt.value = tz.value;
-    if (tz.value === 'UTC') {
-      opt.textContent = tz.label;
-    } else {
-      opt.textContent = `${tz.label} (${tz.abbreviation})`;
-    }
-    if (tz.value === selectedTz) {
-      opt.selected = true;
-    }
-    element.appendChild(opt);
-  });
-
-  element.removeAttribute('hidden');
+function init(element: HTMLSelectElement, selectedTz: string) {
+  element.value = selectedTz;
+  element.hidden = false;
+  element.disabled = false;
 }
 
 function dominantPeriodStyle(

package/templates/_top.html

@@ -42,6 +42,7 @@
       }]
     }
   </script>
+  <script>document.head.appendChild(document.createElement('style')).textContent='.time-zone-label[hidden],select.time-zone[hidden]{display:revert}'</script>
   <noscript><style>
     .question-a-body:not([data-revealed]) > * { color: unset; background-color: unset; }
     .question-a-body:not([data-revealed]) > * * { color: unset; background-color: unset; }