more design tweaks (#1594)

Author: mbostock

docs/javascript.md

@@ -28,7 +28,7 @@ A program block looks like this (note the semicolon):
 const foo = 1 + 2;
 ```
 
-A program block doesn’t display anything by default, but you can call [`display`](#display(value)) to display something.
+A program block doesn’t display anything by default, but you can call [`display`](#display-value) to display something.
 
 JavaScript blocks do not show their code by default. If you want to show the code, use the `echo` directive:
 
@@ -129,7 +129,7 @@ Expressions cannot declare top-level reactive variables. To declare a variable,
 
 ## Explicit display
 
-The built-in [`display` function](#display(value)) displays the specified value.
+The built-in [`display` function](#display-value) displays the specified value.
 
 ```js echo
 const x = Math.random();
@@ -202,7 +202,7 @@ Inputs.button("Click me", {value: 0, reduce: (i) => displayThere(++i)})
 
 ## Implicit display
 
-JavaScript expression fenced code blocks are implicitly wrapped with a call to [`display`](#display(value)). For example, this arithmetic expression displays implicitly:
+JavaScript expression fenced code blocks are implicitly wrapped with a call to [`display`](#display-value). For example, this arithmetic expression displays implicitly:
 
 ```js echo
 1 + 2 // implicit display
@@ -297,7 +297,7 @@ The current width of the main element in pixels as a reactive variable. A fenced
 width
 ```
 
-See [`Generators.width`](./lib/generators#width(element)) for implementation.
+See [`Generators.width`](./lib/generators#width-element) for implementation.
 
 ## now
 
@@ -307,4 +307,4 @@ The current time in milliseconds since Unix epoch as a reactive variable. A fenc
 now
 ```
 
-See [`Generators.now`](./lib/generators#now()) for implementation.
+See [`Generators.now`](./lib/generators#now) for implementation.

docs/reactivity.md

@@ -126,7 +126,7 @@ Values that change over time — such as interactive inputs, animation parameter
 
 <div class="note">As with implicit await and promises, implicit iteration of generators only applies <i>across</i> code blocks, not <i>within</i> a code block.</div>
 
-As an example, here’s an HTML input element. By passing it to [`Generators.input`](<../lib/generators#input(element)>), we can define a generator that yields the input’s value each time it changes.
+As an example, here’s an HTML input element. By passing it to [`Generators.input`](<../lib/generators#input-element>), we can define a generator that yields the input’s value each time it changes.
 
 <input id="nameInput">
 
@@ -298,7 +298,7 @@ The `view` function does two things:
 1. it [displays](../javascript#explicit-display) the given DOM *element*, and then
 2. returns a corresponding value generator.
 
-The `view` function uses [`Generators.input`](../lib/generators#input(element)) under the hood. As shown above, you can call `Generators.input` directly, say to declare the input as a top-level variable without immediately displaying it.
+The `view` function uses [`Generators.input`](../lib/generators#input-element) under the hood. As shown above, you can call `Generators.input` directly, say to declare the input as a top-level variable without immediately displaying it.
 
 ```js echo
 const subjectInput = html`<input type="text" placeholder="anonymous">`;

docs/style.css

@@ -9,9 +9,31 @@
   --theme-foreground-focus: #148576;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: revert;
+}
+
+h1 code,
+h2 code,
+h3 code,
+h4 code,
+h5 code,
+h6 code,
 code,
 tt {
-  font-size: inherit;
+  font-size: revert;
+}
+
+code:not(pre code, h1 code, h2 code, h3 code, h4 code, h5 code, h6 code) {
+  color: var(--theme-foreground-alt);
+  background-color: var(--theme-background-alt);
+  padding: 2px 4px;
+  border-radius: 4px;
 }
 
 @media (prefers-color-scheme: dark) {