Merge branch 'master' into lume

9 files changed, 230 insertions, 41 deletions

diff --git a/build/version-archive.sh b/build/version-archive.sh
new file mode 100755
index 0000000..f4d51c8
--- /dev/null
+++ b/build/version-archive.sh
@@ -0,0 +1,25 @@
+#!/usr/bin/env bash
+set -e
+
+root_dist=$(realpath dist)
+
+ command -v git grep npm
+
+rm -rf dist/src.tmp.d
+git clone . dist/src.tmp.d
+(
+    cd dist/src.tmp.d
+    { echo master; git tag --list | grep -E '^v[0-9]+\.[0-9]+\.[0-9]+'
+    } | while read tag
+        do
+            echo "${0}: Checking out $tag"
+            git checkout $tag
+            echo "${0}: Building $tag"
+            npm run build
+
+            echo "${0}: Built, placing into /$tag/"
+            mkdir -p $root_dist/archive/$tag
+            cp dist/missing.* $root_dist/archive/$tag/
+        done
+)
+rm -rf dist/src.tmp.d
diff --git a/package.json b/package.json
index 89f4431..6432e29 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
   },
   "scripts": {
     "build": "node build/postcss.js",
-    "www": "eleventy --config=www/.eleventy.cjs",
+    "www": "eleventy --config=www/.eleventy.cjs && build/version-history.sh",
     "dev": "eleventy --config=www/.eleventy.cjs --serve",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
diff --git a/www/_redirects b/www/_redirects
index 574f423..2f3c5d2 100644
--- a/www/_redirects
+++ b/www/_redirects
@@ -1 +1,3 @@
-https://the.missing.style/*                     https://missing.style/missing.css  200!
+https://the.missing.style/                    https://missing.style/missing.css                   200!
+https://the.missing.style/:version            https://missing.style/archive/:version/missing.css  200!
+https://the.missing.style/:version/*          https://missing.style/archive/:version/:splat       200!
\ No newline at end of file
diff --git a/www/docs/colorways.md b/www/docs/colorways.md
index 11a180c..e3fc100 100644
--- a/www/docs/colorways.md
+++ b/www/docs/colorways.md
@@ -18,13 +18,13 @@ here is the `ok` colorway in the missing.css source code:
 
 The following colorways are provided by default:
 
- * `info` is used to highlight information without any emotional 
+ * <dfn>`.info`</dfn> is used to highlight information without any emotional 
    affect. {.info .bg .color}
- * `ok` is used to indicate successes, insertions, desired
+ * <dfn>`.ok`</dfn> is used to indicate successes, insertions, desired
    states. {.ok .bg .color}
- * `warn` is used to warn the user, although there may not necessarily be a bad
+ * <dfn>`.warn`</dfn> is used to warn the user, although there may not necessarily be a bad
    situation. {.warn .bg .color}
- * `bad` is used for errors, deletions, failure states. {.bad .bg .color}
+ * <dfn>`.bad`</dfn> is used for errors, deletions, failure states. {.bad .bg .color}
 
 Applying the colorway class to an element will not change its appearance by 
 default. Use the `bg`, `color` and `border` classes to use an aspect of the
diff --git a/www/docs/components.md b/www/docs/components.md
index c40eab3..4393624 100644
--- a/www/docs/components.md
+++ b/www/docs/components.md
@@ -2,6 +2,39 @@
 # Components
 
 
+## Box
+
+<table>
+<th scope="row">Class<td><dfn><code>.box</code></dfn>
+</table>
+
+A box with a border.
+
+Boxes use the border and background color of the [colorway][].
+
+<figure>
+
+  ~~~ html
+  <div class="box warn">
+    <strong>Warning</strong>: If you're putting <!-- ... -->
+  </div>
+  ~~~
+
+</figure>
+
+::: box {.warn}
+**Warning**: If you're putting something in a box, make sure to clarify
+why it is in a box in some other way. For example, this box has "Warning" in
+bold, in addition to being yellow. This makes your page clearer and prevents
+accessibility failures.
+:::
+
+The above box, in addition to being an example, is also a genuine warning.
+
+The `<figure>`, `<aside>`, `<details>` elements share their appearance with the
+`.box` class.
+
+
 ## Subtitle
 
 A subtitle for a heading.
@@ -44,7 +77,7 @@ A subtitle for a heading.
 A horizontally laid-out collection of controls.
 
 ::: box {.warn}
-Warning: This is not a substitute for the `toolbar` ARIA role, see
+**Warning**: This is not a substitute for the `toolbar` ARIA role, see
 [WAI: Toolbar][] for that.
 :::
 
@@ -114,3 +147,13 @@ A rounded chip, like what you might use for a tag list or contacts.
   ~~~
 
 </figure>
+
+::: box {.info}
+When you have multiple `<nav>` elements on a page, it's a good idea to put
+`aria-label` attributes on them. This is because many assistive programs have
+a feature to jump to the navigation part of a page, which does not work well if
+the user can't tell which nav is which.
+:::
+
+
+[colorway]: /docs/colorways
diff --git a/www/docs/index.md b/www/docs/index.md
index 76452a1..b2cb8d3 100644
--- a/www/docs/index.md
+++ b/www/docs/index.md
@@ -12,6 +12,7 @@ Then, see how you can go beyond classless CSS with its features:
  * [Customize with CSS **variables**](/docs/variables)
  * [Learn about **ARIA patterns**](/docs/aria)
  * [Get to know our **components**](/docs/components)
+ * [Make a useful **layout**](/docs/layout)
  * [Add color with **colorways**](/docs/colorways)
  * [Use our **utility classes**](/docs/utils)
  {.list-of-links}
diff --git a/www/docs/layout.md b/www/docs/layout.md
new file mode 100644
index 0000000..9903573
--- /dev/null
+++ b/www/docs/layout.md
@@ -0,0 +1,38 @@
+
+# Layout
+
+Mechanisms of creating layouts.
+
+## Basic Grid
+
+Applying the <dfn>`.basicgrid`</dfn> class to an element creates a grid with a
+minimum column width of 15ch.
+
+You can use the following classes to adjust the minimum width for columns or
+manually set the <dfn>`--column-width`</dfn> variable.
+
+| Class                   | Column width                              |
+|-------------------------|-------------------------------------------|
+| <dfn>`colwidth-s`</dfn> | `--column-width` = 15ch (same as default) |
+| <dfn>`colwidth-m`</dfn> | `--column-width` = 24ch                   |
+| <dfn>`colwidth-l`</dfn> | `--column-width` = 35ch                   |
+
+If you want an element to take up multiple columns, use the `col-*` classes:
+
+ * <dfn>`.col-2`</dfn>
+ * <dfn>`.col-3`</dfn>
+ * <dfn>`.col-4`</dfn>
+ * <dfn>`.col-5`</dfn>
+ * <dfn>`.col-6`</dfn>
+ * <dfn>`.col-7`</dfn>
+ * <dfn>`.col-8`</dfn>
+ * <dfn>`.col-9`</dfn>
+ * <dfn>`.col-10`</dfn>
+ * <dfn>`.col-11`</dfn>
+ * <dfn>`.col-12`</dfn>
+
+## Full Bleed
+
+Add the <dfn>`.full-bleed`</dfn> class to make an element go outside its
+container and span the whole width of the viewport.
+
diff --git a/www/docs/utils.md b/www/docs/utils.md
new file mode 100644
index 0000000..b4d5d9b
--- /dev/null
+++ b/www/docs/utils.md
@@ -0,0 +1,73 @@
+
+# Utilities
+
+For the minor alterations to the default look that make all the difference,
+missing.css has a collection of classes and custom elements.
+
+## Visually hidden content
+
+<dfn>`.v-h`</dfn>, <dfn>`<v-h>`</dfn>
+:   Visually hide a content without hiding it from assistive software.
+
+## Container
+
+`<div class="container">`
+
+The container class imposes a maximum width on an element and centers it. The
+`<main>` element does the same, but carries semantic baggage that might not be
+appropriate for all contexts.
+
+
+## Density {#density}
+
+The density utilities set the `--density` [CSS variable][], which
+controls the amount of spacing between elements. The default value of
+`--density` is `1`, which means the spacing between paragraphs is
+equal to the height of 1 line.
+
+We provide three utility classes that set `--density`:
+
+| Class                  | Density                                    |
+|------------------------|--------------------------------------------|
+| <dfn>`.crowded`</dfn>  | `--density` = 0.5                          |
+| <dfn>`.dense`</dfn>    | `--density` = 1 (same as default)          |
+| <dfn>`.airy`</dfn>     | `--density` = 3                            |
+
+You can set `--density` yourself in inline styles or your own CSS:
+
+<figure>
+<figcaption>Setting <code>--density</code> with inline styles</figcaption>
+
+  ~~~ html
+  <section id="tagline" style="--density: 2">
+    <h1>So easy, even a programmer can do it.</h1>
+    <p>
+        missing.css makes it easy to ship beautiful applications without
+        locking yourself into classless libraries.
+    </p>
+  </section>
+  ~~~
+</figure>
+
+<figure>
+<figcaption>Setting `--density` in a stylesheet</figcaption>
+
+  ~~~ css
+  .link-embed {
+      --density: .5; /* Embeds shouldn't take up too much space */
+  }
+  ~~~
+
+</figure>
+
+
+## Typography
+
+<dfn>`.allcaps`</dfn>
+:   Sets text in all caps and adds appropriate letter spacing.
+
+<dfn>`.monospace`</dfn>
+:   Renders the text in the monospace font (`--font-mono`).
+
+
+[CSS variable]: /docs/variables
diff --git a/www/docs/variables.md b/www/docs/variables.md
index 7105dff..f1602a3 100644
--- a/www/docs/variables.md
+++ b/www/docs/variables.md
@@ -12,82 +12,82 @@ classes; these will be listed in the documentation for that class.
 
 ## Colors
 
---fg
+<dfn>--fg</dfn> {#var-fg}
 :   The text color.
 
---muted-fg
+<dfn>--muted-fg</dfn> {#var-muted-fg}
 :   Text color for disabled or de-emphasized elements. It's important that this
     color is readable against all of the background colors.
 
---faded-fg
+<dfn>--faded-fg</dfn> {#var-faded-fg}
 :   De-emphasized or disabled graphical elements. Will not be used as a text color.
 
---info-fg:
-:   --
+<dfn>--info-fg:</dfn> {#var-info-fg}
+:   Foreground color for the `.info` [colorway][].
 
---ok-fg: #060;
-:   --
+<dfn>--ok-fg</dfn> {#var-ok-fg}
+:   Foreground color for the `.ok` [colorway][].
 
---bad-fg: #a00;
-:   --
+<dfn>--bad-fg</dfn> {#var-bad-fg}
+:   Foreground color for the `.bad` [colorway][].
 
---warn-fg: #550;
-:   --
+<dfn>--warn-fg</dfn> {#var-warn-fg}
+:   Foreground color for the `.warn` [colorway][].
 
---bg
+<dfn>--bg</dfn> {#var-bg}
 :   Page background.
 
---bg-2
+<dfn>--bg-2</dfn> {#var-bg-2}
 :   Background for blocks: cards, admonitions etc.
 
---bg-3
+<dfn>--bg-3</dfn> {#var-bg-3}
 :   Background for interactive elements
 
 
---bg-4
+<dfn>--bg-4</dfn> {#var-bg-4}
 :   Background for pressed interactive elements
 
---info-bg
-:   --
+<dfn>--info-bg</dfn> {#var-info-bg}
+:   Background color for the `.info` [colorway][].
 
---ok-bg
-:   --
+<dfn>--ok-bg</dfn> {#var-ok-bg}
+:   Background color for the `.ok` [colorway][].
 
---bad-bg
-:   --
+<dfn>--bad-bg</dfn> {#var-bad-bg}
+:   Background color for the `.bad` [colorway][].
 
---warn-bg
-:   --
+<dfn>--warn-bg</dfn> {#var-warn-bg}
+:   Background color for the `.warn` [colorway][].
 
---shadow
+<dfn>--shadow</dfn> {#var-shadow}
 :   Box shadows.
 
---accent
+<dfn>--accent</dfn> {#var-accent}
 :   Accent color. It's important that this
     color is readable against all of the background colors.
 
---muted-accent
+<dfn>--muted-accent</dfn> {#var-muted-accent}
 :   Less vivid version of accent color. Will not be used for text.
 
 
 ## Lengths
 
---rhythm
+<dfn>--rhythm</dfn> {#var-rhythm}
 :   Vertical rhythm, line height.
 
---line-length
+<dfn>--line-length</dfn> {#var-line-length}
 :   Maximum line length for prose.
 
 ## Fonts
 
---main-font
+<dfn>--main-font</dfn> {#var-main-font}
 :   The main font family for text.
 
---display-font
+<dfn>--display-font</dfn> {#var-display-font}
 :   A secondary text font. It's a good idea to specify a sans-serif font as it
     will be used for buttons.
 
---mono-font
+<dfn>--mono-font</dfn> {#var-mono-font}
 :   Monospace font for code, preformatted text, computer input and output.
 
     ::: box {.info}
@@ -95,11 +95,18 @@ classes; these will be listed in the documentation for that class.
     specifying `monospace` _twice_:
 
     ~~~ css
-    --mono-font: "Cascadia Code", monospace, monospace
+    {
+      --mono-font: "Cascadia Code", monospace, monospace
+    }
     ~~~
     :::
 
 ## Density
 
---density
-:   --
\ No newline at end of file
+<dfn>--density</dfn> {#var-density}
+:   The amount of space between elements (i.e. gaps between paragraphs, padding
+    of boxes), as a multiplier of the line height (`--rhythm`). See
+    [Utilities / Density](/docs/util#density).
+
+
+[colorway]: /docs/colorways