restructure & expand docs

docs/css/card.md

@@ -1,54 +1,3 @@
-# CSS: Card
+<meta http-equiv="refresh" content="0; url=../markdown#cards">
 
-The `card` class is used to group and delineate content. The `card` classes applies a background and border (with colors determined by the current [theme](../themes)). A card can have a title and subtitle using <code>h2</code> and <code>h3</code> elements, respectively.
-
-```html echo
-<div class="card" style="max-width: 640px;">
-  <h2>It gets hotter during summer</h2>
-  <h3>And months have 28–31 days</h3>
-  ${Plot.cell(weather.slice(-365), {x: (d) => d.date.getUTCDate(), y: (d) => d.date.getUTCMonth(), fill: "temp_max", tip: true, inset: 0.5}).plot({marginTop: 0, height: 240, padding: 0})}
-</div>
-```
-
-<div class="tip"><a href="../lib/plot">Observable Plot</a>’s <b>title</b> and <b>subtitle</b> options generate <code>h2</code> and <code>h3</code> elements, respectively, and so will inherit these card styles.</div>
-
-Cards can be used on their own, but they most often exist in a [grid](./grid). Cards can contain whatever you like, including text, images, charts, tables, inputs, and more.
-
-```html echo
-<div class="grid grid-cols-2">
-  <div class="card">
-    <h2>Lorem ipsum</h2>
-    <p>Id ornare arcu odio ut sem nulla pharetra. Aliquet lectus proin nibh nisl condimentum id venenatis a. Feugiat sed lectus vestibulum mattis ullamcorper velit. Aliquet nec ullamcorper sit amet. Sit amet tellus cras adipiscing. Condimentum id venenatis a condimentum vitae. Semper eget duis at tellus. Ut faucibus pulvinar elementum integer enim.</p>
-    <p>Et malesuada fames ac turpis. Integer vitae justo eget magna fermentum iaculis eu non diam. Aliquet risus feugiat in ante metus dictum at. Consectetur purus ut faucibus pulvinar.</p>
-  </div>
-  <div class="card" style="padding: 0;">
-    ${Inputs.table(industries)}
-  </div>
-</div>
-```
-
-<div class="tip">Remove the padding from a card if it contains only a table.</div>
-
-To place an input inside a card, first declare a detached input as a [top-level variable](../javascript/reactivity#top-level-variables) and use [`Generators.input`](../lib/generators#inputelement) to expose its reactive value:
-
-```js echo
-const industryInput = Inputs.select(industries.map((d) => d.industry), {unique: true, sort: true, label: "Industry:"});
-const industry = Generators.input(industryInput);
-```
-
-Then, insert the input into the card:
-
-```html echo
-<div class="card" style="display: flex; flex-direction: column; gap: 1rem;">
-  ${industryInput}
-  ${resize((width) => Plot.plot({
-    width,
-    y: {grid: true, label: "Unemployed (thousands)"},
-    marks: [
-      Plot.areaY(industries.filter((d) => d.industry === industry), {x: "date", y: "unemployed", fill: "var(--theme-foreground-muted)", curve: "step"}),
-      Plot.lineY(industries.filter((d) => d.industry === industry), {x: "date", y: "unemployed", curve: "step"}),
-      Plot.ruleY([0])
-    ]
-  }))}
-</div>
-```
+Moved to [Layout: Cards](../markdown#cards).

docs/css/color.md

@@ -1,88 +1,3 @@
-# CSS: Color
+<meta http-equiv="refresh" content="0; url=../themes#colors">
 
-The following custom properties are defined by the current [theme](../themes):
-
-<table>
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Color</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>--theme-foreground</code></td>
-      <td><div style="background-color: var(--theme-foreground); width: 2rem; height: 1rem;"></div></td>
-      <td>page foreground color</td>
-    </tr>
-    <tr>
-      <td><code>--theme-background</code></td>
-      <td><div style="background-color: var(--theme-background); width: 2rem; height: 1rem;"></div></td>
-      <td>page background color</td>
-    </tr>
-    <tr>
-      <td><code>--theme-background-alt</code></td>
-      <td><div style="background-color: var(--theme-background-alt); width: 2rem; height: 1rem;"></div></td>
-      <td>block background color</td>
-    </tr>
-    <tr>
-      <td><code>--theme-foreground-alt</code></td>
-      <td><div style="background-color: var(--theme-foreground-alt); width: 2rem; height: 1rem;"></div></td>
-      <td>heading foreground color</td>
-    </tr>
-    <tr>
-      <td><code>--theme-foreground-muted</code></td>
-      <td><div style="background-color: var(--theme-foreground-muted); width: 2rem; height: 1rem;"></div></td>
-      <td>secondary text foreground color</td>
-    </tr>
-    <tr>
-      <td><code>--theme-foreground-faint</code></td>
-      <td><div style="background-color: var(--theme-foreground-faint); width: 2rem; height: 1rem;"></div></td>
-      <td>faint border color</td>
-    </tr>
-    <tr>
-      <td><code>--theme-foreground-fainter</code></td>
-      <td><div style="background-color: var(--theme-foreground-fainter); width: 2rem; height: 1rem;"></div></td>
-      <td>fainter border color</td>
-    </tr>
-    <tr>
-      <td><code>--theme-foreground-faintest</code></td>
-      <td><div style="background-color: var(--theme-foreground-faintest); width: 2rem; height: 1rem;"></div></td>
-      <td>faintest border color</td>
-    </tr>
-    <tr>
-      <td><code>--theme-foreground-focus</code></td>
-      <td><div style="background-color: var(--theme-foreground-focus); width: 2rem; height: 1rem;"></div></td>
-      <td>emphasis foreground color</td>
-    </tr>
-  </tbody>
-</table>
-
-You can use these properties anywhere you like. For example, to style a line chart to match the focus color:
-
-```js echo
-Plot.lineY(aapl, {x: "Date", y: "Close", stroke: "var(--theme-foreground-focus)"}).plot()
-```
-
-A handful of color classes are also provided:
-
-```html echo
-<div class="red">I am red text.</div>
-```
-
-```html echo
-<div class="yellow">I am yellow text.</div>
-```
-
-```html echo
-<div class="green">I am green text.</div>
-```
-
-```html echo
-<div class="blue">I am blue text.</div>
-```
-
-```html echo
-<div class="muted">I am muted text.</div>
-```
+Moved to [Themes: Colors](../themes#colors).

docs/css/grid.md

@@ -1,82 +1,3 @@
-# CSS: Grid
+<meta http-equiv="refresh" content="0; url=../markdown#grids">
 
-The `grid` class declares a [CSS grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) container. The `grid` class is designed to pair with the [`card` class](./card) and the [`dashboard` theme](../themes) for dashboard layout.
-
-```html echo
-<div class="grid grid-cols-4">
-  <div class="card"><h1>A</h1></div>
-  <div class="card"><h1>B</h1></div>
-  <div class="card"><h1>C</h1></div>
-  <div class="card"><h1>D</h1></div>
-</div>
-```
-
-Grids have a single column by default, but you can declare two, three, or four columns using the `grid-cols-2`, `grid-cols-3`, or `grid-cols-4` class.
-
-The built-in `grid` class is automatically responsive: in narrow windows, the number of columns is automatically reduced. The four-column grid can be reduced to two or one columns, while the three- and two-column grid can be reduced to one column. (If you want more columns or more control over the grid layout, you can always write custom styles.)
-
-<div class="tip">To see the responsive grid layout, resize the window or collapse the sidebar on the left. You can also zoom to change the effective window size.</div>
-
-With multi-column and multi-row grids, you can use the `grid-colspan-*` and `grid-rowspan-*` classes to have cells that span columns and rows, respectively.
-
-```html echo
-<div class="grid grid-cols-2">
-  <div class="card"><h1>A</h1>1 × 1</div>
-  <div class="card grid-rowspan-2"><h1>B</h1>1 × 2</div>
-  <div class="card"><h1>C</h1>1 × 1</div>
-  <div class="card grid-colspan-2"><h1>D</h1>2 × 1</div>
-</div>
-```
-
-By default, the `grid` uses `grid-auto-rows: 1fr`, which means that every row of the grid has the same height. The “rhythm” of equal-height rows is often desirable.
-
-```html echo
-<div class="grid grid-cols-2">
-  <div class="card">Call me Ishmael.</div>
-  <div class="card">Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.</div>
-  <div class="card">It is a way I have of driving off the spleen and regulating the circulation.</div>
-</div>
-```
-
-On the other hand, forcing all rows to the same height can waste space, since the height of all rows is based on the tallest content across rows. To have variable-height rows instead, you can either set [`grid-auto-rows`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows) on the grid container:
-
-```html echo
-<div class="grid grid-cols-2" style="grid-auto-rows: auto;">
-  <div class="card">Call me Ishmael.</div>
-  <div class="card">Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.</div>
-  <div class="card">It is a way I have of driving off the spleen and regulating the circulation.</div>
-</div>
-```
-
-Or break your grid into multiple grids:
-
-```html echo
-<div class="grid grid-cols-2">
-  <div class="card">Call me Ishmael.</div>
-  <div class="card">Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.</div>
-</div>
-<div class="grid grid-cols-2">
-  <div class="card">It is a way I have of driving off the spleen and regulating the circulation.</div>
-</div>
-```
-
-The `card` class is not required to use `grid`. If you use `grid` by itself, you’ll get the same layout but without the card aesthetics.
-
-```html echo
-<div class="grid grid-cols-2">
-  <div>Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.</div>
-  <div class="card">Call me Ishmael.</div>
-</div>
-```
-
-Use the `resize` helper to re-render content when the container resizes.
-
-```html echo
-<div class="grid grid-cols-4">
-  <div class="card">
-    ${resize((width) => `This card is ${width}px wide.`)}
-  </div>
-</div>
-```
-
-See [Responsive display](../javascript/display#responsive-display) for more.
+Moved to [Markdown: Grids](../markdown#grids).

docs/css/note.md

@@ -1,55 +1,3 @@
-# CSS: Note
+<meta http-equiv="refresh" content="0; url=../markdown#notes">
 
-The `note`, `tip`, `warning`, and `caution` classes can be used to insert labeled notes (also known as callouts) into prose. These are intended to emphasize important information that could otherwise be overlooked.
-
-<div class="note">This is a note.</div>
-
-```html run=false
-<div class="note">This is a note.</div>
-```
-
-<div class="tip">This is a tip.</div>
-
-```html run=false
-<div class="tip">This is a tip.</div>
-```
-
-<div class="warning">This is a warning.</div>
-
-```html run=false
-<div class="warning">This is a warning.</div>
-```
-
-<div class="caution">This is a caution.</div>
-
-```html run=false
-<div class="caution">This is a caution.</div>
-```
-
-Markdown is not supported within HTML, so if you want rich formatting or links within a note, you must write it as HTML. (In the future, we may add support for notes within Markdown.)
-
-<div class="tip">
-  <p>This is a <i>styled</i> tip using <small>HTML</small>.</p>
-</div>
-
-```html run=false
-<div class="tip">
-  <p>This is a <i>styled</i> tip using <small>HTML</small>.</p>
-</div>
-```
-
-You can override the note’s label using the `label` attribute.
-
-<div class="warning" label="⚠️ Danger ⚠️">No lifeguard on duty. Swim at your own risk!</div>
-
-```html run=false
-<div class="warning" label="⚠️ Danger ⚠️">No lifeguard on duty. Swim at your own risk!</div>
-```
-
-You can disable the label entirely with an empty `label` attribute.
-
-<div class="note" label>This note has no label.</div>
-
-```html run=false
-<div class="note" label>This note has no label.</div>
-```
+Moved to [Layout: Notes](../markdown#notes).

docs/data/alphabet.csv

@@ -0,0 +1,27 @@
+letter,frequency
+E,0.12702
+T,0.09056
+A,0.08167
+O,0.07507
+I,0.06966
+N,0.06749
+S,0.06327
+H,0.06094
+R,0.05987
+D,0.04253
+L,0.04025
+C,0.02782
+U,0.02758
+M,0.02406
+W,0.0236
+F,0.02288
+G,0.02015
+Y,0.01974
+P,0.01929
+B,0.01492
+V,0.00978
+K,0.00772
+J,0.00153
+X,0.0015
+Q,0.00095
+Z,0.00074