Better use of dt/dd definition lists

Improved the look of Definition Lists, but I think we're gonna
need a couple of flags on the macro to supply different base
classes, because I don't think I really like using the CODE style
with its yellow background, at least not the one in the default
template, and because I think we're gonna need a distinction between
a "tight" list (where the dt & dd share a line) and a standard
list (where they don't.)

content/docs/zola/_index.md

@@ -17,37 +17,56 @@ categories=["Web Development", "Static Site Generation", "Zola"]
 collection and a collection of HTML templates. The templating language is called
 [Tera](https://tera.netlify.app).
 
+Zola is a single binary capable of assembling the website out of a collection of
+templates, SASS files, static data (including CSS if you're not into SASS), and
+markdown files.  The Markdown files create the structure of the website as a
+series of folders.
+
+If you need anything else (Typescript built into Javascript, templates other
+than Zola's internal, static file conversion, etc.), you'll need separate
+toolchains for those.
+
 ## Running Zola
 
-Zola is a single binary.
+Zola has only a few commands:
 
 - `zola init` - Starts a new Zola project. Creates the structure described in
   the next section, especially if you enable sass.
 - `zola serve` - Starts a localhost webserver to serve your content for demo.
 - `zola build` - Builds a Zola project into a collection of static HTML.
+- `zola check` - Check that the current site is coherent
+- `zola help` - This list!
 
-## Project layout
+## Project Layout
 
-The following files and folders define a basic Zola project
+Zola uses a simple layout of content and support, with a single configuration
+file. The configuration file has two parts: a root which controls compilation,
+and an `[extra]` section that provides data and details that will be available
+to all templates during compilation.
 
-- `config.toml`: A configuration file in the [TOML](https://toml.io/en/)
+The following files and folders define a basic Zola project.  Any other folders
-  configuration language. Can contain a lot of information that will be made
+in a zola project are ignored.
-  available to *all* pages in the system.
+
+- `config.toml`: The configuration file. Uses the [TOML](https://toml.io/en/)
+  configuration language.
 - `content/`: The structured content folder. All your "living" stuff goes here.
 - `sass/`: [Sass](../sass) is a CSS preprocessor language that makes CSS easier.
 - `static/`: Static content such as images, fonts, and Javascript
-- `templates`: The HTML templates (and includes, etc) that define the website's
+- `templates/`: The HTML templates (and includes, etc) that define the website's
   layouts
   
-Note that if you want to use modern Javascript features such as a precompiler
+Every folder under the `content/` folder that has an `_index.md` file is
-like Typescript or a bundler like Webpack, that is outside the functionality of
+considered a *section*, presenting a table of contents or other introductory
-Zola. You'll have to have a separate project for that, or a subfolder or git
+matter.  Every other markdown document in a section is considered a *page*.
-submodule, and you'll have to have a separate build step for that.
+Zola uses different templates for sections versus pages, and individual pages
+and sections can choose alternative templates.
 
-It's also a bit of a shame that Tera is 100% an HTML play, and there's no HAML
+A folder under a section that has an `index.md` file (note the lack of
-or similar HTML templating involved.  That would be a nifty project.
+underscore prefix) is considered a *page*.  This allows content writers to
-
+supply additional assets, such as images or data files, along with the contents
-## Tera
+of the page.
+  
+## The Templating Languagae
 
 The Tera templating language looks a lot like Django's, or for that matter any
 number of templating languages. Every page generated with Tera receives a
@@ -62,7 +81,7 @@ Tera; everything outside is left untouched.
 - `{%` and `%}` for statements
 - `{#` and `#}` for comments
 
-Statements that have a dash as part of their delimeter remove all whitespace
+Statements that have a dash as part of their delimiter remove all whitespace
 from around the delimiter.  `{%-` says to eliminate all whitespace between this
 statement and anything that came before it; `-%}` says to eliminate everything
 that comes after it.
@@ -77,12 +96,25 @@ block, and it can define subsections (note: section is a heavily overloaded
 word) of itself.  These blocks can be used as-is, or replaced when another
 template inherits them and overwrites them.
 
+You can inherit and extend a block with a `super()` command:
+
+``` jinja2
+{% block stylesheet %}
+{​{ super() }}
+{# Insert your own stylesheet HTML here #}
+{% endblock %}
+```
+
+<aside>Note that using some of these templates in this document to *show* them
+required the use of the Unicode "zero-width" space (Ux200B;) to prevent Tera
+from interpreting them.</aside>
+
 #### `extends`
 
 The `extends` keyword imports one template into another. A file that `extends`
-that import then provides its own overrides for blocks found in the imported
+that import then provides its own overrides or extensions for blocks found in
-templated, substituting its own content and processing for that of the extended
+the imported templates, substituting its own content and processing for that of
-template.
+the extended template.
 
 #### `set`
 
@@ -109,23 +141,6 @@ The list of `is` tests that are shipped with Zola are:
 
 {{ definition_list(source="docs/zola/predicates.json") }}
 
-- `defined`: the given variable is defined.
-- `undefined`: the given variable is undefined.
-- `odd`: the given variable is an odd number.
-- `even`: the given variable is an even number.
-- `string`: the given variable is a string.
-- `number`: the given variable is a number.
-- `divisibleby`: the given expression is divisible by the arg given.
-- `iterable`: Returns true if the given variable can be iterated over in Tera (i.e. is an array/tuple or an object).
-- `object`: Returns true if the given variable is an object (i.e. can be iterated over key, value).
-- `starting_with(string)`: Returns true if the given variable is a string and starts with the arg given.
-- `ending_with(string)`: Returns true if the given variable is a string and ends with the arg given.
-- `containing(val)`: Returns true if the given variable contains the arg given.
-  - strings: is the arg a substring?
-  - arrays: is the arg one of the members of the array?
-  - maps: is the arg a key of the map?
-- `matching(regexp)`: Returns true if the given variable is a string and matches the regex in the argument.
-
 #### `for`
 
 Arrays are iterated with the `for x in array/map ... endfor` syntax.
@@ -207,22 +222,7 @@ variable.  There are a few basic operations and filters available, however:
 
 **Math And Logic Expressions**:
 
-- `+`: adds 2 values together, {{ 1 + 1 }} will print 2
+{{ definition_list(source="docs/zola/expressions.json") }}
-- `-`: performs a subtraction, {{ 2 - 1 }} will print 1
-- `/`: performs a division, {{ 10 / 2 }} will print 5
-- `*`: performs a multiplication, {{ 5 * 2 }} will print 10
-- `%`: performs a modulo, {{ 2 % 2 }} will print 0
-- `==`: checks whether the values are equal
-- `!=`: checks whether the values are different
-- `>=`: true if the left value is equal or greater to the right one
-- `<=`: true if the right value is equal or greater to the left one
-- `>`: true if the left value is greater than the right one
-- `<`: true if the right value is greater than the left one
-- `and`: true if the left and right operands are true
-- `or`: true if the left or right operands are true
-- `not`: negate an expression
-- `in`: true if the left operand is inside the right container. May be combined
-  with `not`.
 
 **Concatenation**:
 
@@ -234,62 +234,17 @@ Filters can be used to, well, filter and edit expressions.  A filter is placed
 at the end of an expression with a pipe between them, i.e. `{{ name | upper }}`
 would upper-case the contents of the variable `name`.
 
-An entire chunk of HTML can be filtered by `{% filter filter_name %} ... {%
+An entire chunk of HTML can be filtered by:
-endfilter %}`.
+
+``` jinja2
+{% filter filter_name %} 
+    ... 
+{% endfilter %}
+```
 
 The filters provided are:
 
-- `lower`: Converts string to lowercase
+{{ definition_list(source="docs/zola/filters.json") }}
-- `upper`: Converts string to uppercase
-- `wordcount`: Counts the words in a string
-- `capitalize`: Capitalizes the first letter, lowercase the rest
-- `replace`: Takes two strings as arguments, replaces the first with the second
-- `addslashes`: Escapes quoted strings
-- `slugify`: Provides a slug for the string
-- `title`: Capitalizes each word in the string
-- `trim`: Removes leading and trailing whitespace
-- `trim_start`: Removes leading whitespace
-- `trim_end`: Removes trailing whitespace
-- `trim_start_matches`: Removes leading characters that match a pattern
-- `trim_end_matches`: Removes trailing characters that match a pattern
-- `truncate`: Truncates the string to the length specified
-- `linebreaksbr`: Replaces line breaks (\n or \r\n) with HTML line breaks (<br>)
-- `spaceless`: Remove space ( ) and line breaks (\n or \r\n) between HTML tags
-- `striptags`: Tries to remove HTML tags from input
-- `first`: Returns the first element of an array
-- `last`: Returns the last element of an array
-- `nth`: Returns the nth element of an array
-- `join`: Joins an array with a delimeter
-- `length`: Returns the length of an array, an object, or a string
-- `reverse`: Returns a reversed string or array
-- `sort`: Sorts an array into ascending order. You can sort objects by providing a fieldname argument
-- `unique`: Removes duplicate items from an array. You can filter objects by providing a fieldname argument
-- `slice`: Slices an array by the given start and end parameter
-- `group_by`: Groups an array using the required attribute argument
-- `filter`: Filters the array values, returning objects whose attribute is equal to the argument
-- `map`: Retrieves an attribute from each object in an array
-- `concat`: Appends values to an array
-- `urlencode`: Performs classic (%-based) URL encoding
-- `urlencode_strict`: Encodes URLs, including any slashes
-- `pluralize`: Can return an alternative text if the argument is greater than one
-- `round`: Returns a number rounded
-- `filesizeformat`: Generates human-readable sizes for integers
-- `date`: Parses a timestamp into a date(time) string
-- `escape`: Escapes a string's HTML
-- `escape_xml`: Escapes XML special characters
-- `safe`: Marks a variable as safe: HTML will not be escaped
-- `get`: Accesses a value from an object when the key is not a valid identifier.
-- `split`: Splits a string into an array of strings, separated by a pattern.
-- `int`: Converts a value into an integer.
-- `float`: Converts a value into a float.
-- `json_encode`: Transforms a value into its JSON representation
-- `as_str`: Returns a string representation of the value.
-- `default`: Provides a default value if the name is not present in the context
-- `markdown`: Converts the variable contents from markdown to HTML
-- `base64_encode`: Encode the variable to base64
-- `base64_decode`: Decode the variable from base64
-- `num_format`: Format a number in a variety of ways
-
 
 ### Functions
 

content/docs/zola/expressions.json

@@ -0,0 +1,64 @@
+{
+    "definitions": [
+        {
+            "dd": "adds 2 values together, {{ 1 + 1 }} will print 2",
+            "dt": "+"
+        },
+        {
+            "dd": "performs a subtraction, {{ 2 - 1 }} will print 1",
+            "dt": "-"
+        },
+        {
+            "dd": "performs a division, {{ 10 / 2 }} will print 5",
+            "dt": "/"
+        },
+        {
+            "dd": "performs a multiplication, {{ 5 * 2 }} will print 10",
+            "dt": "*"
+        },
+        {
+            "dd": "performs a modulo, {{ 2 % 2 }} will print 0",
+            "dt": "%"
+        },
+        {
+            "dd": "checks whether the values are equal",
+            "dt": "=="
+        },
+        {
+            "dd": "checks whether the values are different",
+            "dt": "!="
+        },
+        {
+            "dd": "true if the left value is equal or greater to the right one",
+            "dt": ">="
+        },
+        {
+            "dd": "true if the right value is equal or greater to the left one",
+            "dt": "<="
+        },
+        {
+            "dd": "true if the left value is greater than the right one",
+            "dt": ">"
+        },
+        {
+            "dd": "true if the right value is greater than the left one",
+            "dt": "<"
+        },
+        {
+            "dd": "true if the left and right operands are true",
+            "dt": "and"
+        },
+        {
+            "dd": "true if the left or right operands are true",
+            "dt": "or"
+        },
+        {
+            "dd": "negate an expression",
+            "dt": "not"
+        },
+        {
+            "dd": "true if the left operand is inside the right container. May be combined with \"not\".",
+            "dt": "in"
+        }
+    ]
+}

content/docs/zola/expressions.yaml

@@ -0,0 +1,47 @@
+---
+expressions:
+  - 
+      dt: "+"
+      dd:  adds 2 values together, {{ 1 + 1 }} will print 2
+  - 
+      dt: "-"
+      dd:  performs a subtraction, {{ 2 - 1 }} will print 1
+  - 
+      dt: "/"
+      dd:  performs a division, {{ 10 / 2 }} will print 5
+  - 
+      dt: "*"
+      dd:  performs a multiplication, {{ 5 * 2 }} will print 10
+  - 
+      dt: "%"
+      dd:  performs a modulo, {{ 2 % 2 }} will print 0
+  - 
+      dt: "=="
+      dd:  checks whether the values are equal
+  - 
+      dt: "!="
+      dd:  checks whether the values are different
+  - 
+      dt: ">="
+      dd:  true if the left value is equal or greater to the right one
+  - 
+      dt: "<="
+      dd:  true if the right value is equal or greater to the left one
+  - 
+      dt: ">"
+      dd:  true if the left value is greater than the right one
+  - 
+      dt: "<"
+      dd:  true if the right value is greater than the left one
+  - 
+      dt: "and"
+      dd:  true if the left and right operands are true
+  - 
+      dt: "or"
+      dd:  true if the left or right operands are true
+  - 
+      dt: "not"
+      dd:  negate an expression
+  - 
+      dt: "in"
+      dd:  true if the left operand is inside the right container. May be combined with "not".

content/docs/zola/filters.json

@@ -0,0 +1,204 @@
+{
+    "definitions": [
+        {
+            "dd": "Converts string to lowercase",
+            "dt": "lower"
+        },
+        {
+            "dd": "Converts string to uppercase",
+            "dt": "upper"
+        },
+        {
+            "dd": "Counts the words in a string",
+            "dt": "wordcount"
+        },
+        {
+            "dd": "Capitalizes the first letter, lowercase the rest",
+            "dt": "capitalize"
+        },
+        {
+            "dd": "Takes two strings as arguments, replaces the first with the second",
+            "dt": "replace"
+        },
+        {
+            "dd": "Escapes quoted strings",
+            "dt": "addslashes"
+        },
+        {
+            "dd": "Provides a slug for the string",
+            "dt": "slugify"
+        },
+        {
+            "dd": "Capitalizes each word in the string",
+            "dt": "title"
+        },
+        {
+            "dd": "Removes leading and trailing whitespace",
+            "dt": "trim"
+        },
+        {
+            "dd": "Removes leading whitespace",
+            "dt": "trim_start"
+        },
+        {
+            "dd": "Removes trailing whitespace",
+            "dt": "trim_end"
+        },
+        {
+            "dd": "Removes leading characters that match a pattern",
+            "dt": "trim_start_matches"
+        },
+        {
+            "dd": "Removes trailing characters that match a pattern",
+            "dt": "trim_end_matches"
+        },
+        {
+            "dd": "Truncates the string to the length specified",
+            "dt": "truncate"
+        },
+        {
+            "dd": "Replaces line breaks (\\n or \\r\\n) with HTML line breaks (<br>)",
+            "dt": "linebreaksbr"
+        },
+        {
+            "dd": "Remove space ( ) and line breaks (\\n or \\r\\n) between HTML tags",
+            "dt": "spaceless"
+        },
+        {
+            "dd": "Tries to remove HTML tags from input",
+            "dt": "striptags"
+        },
+        {
+            "dd": "Returns the first element of an array",
+            "dt": "first"
+        },
+        {
+            "dd": "Returns the last element of an array",
+            "dt": "last"
+        },
+        {
+            "dd": "Returns the nth element of an array",
+            "dt": "nth"
+        },
+        {
+            "dd": "Joins an array with a delimeter",
+            "dt": "join"
+        },
+        {
+            "dd": "Returns the length of an array, an object, or a string",
+            "dt": "length"
+        },
+        {
+            "dd": "Returns a reversed string or array",
+            "dt": "reverse"
+        },
+        {
+            "dd": "Sorts an array into ascending order. You can sort objects by providing a fieldname argument",
+            "dt": "sort"
+        },
+        {
+            "dd": "Removes duplicate items from an array. You can filter objects by providing a fieldname argument",
+            "dt": "unique"
+        },
+        {
+            "dd": "Slices an array by the given start and end parameter",
+            "dt": "slice"
+        },
+        {
+            "dd": "Groups an array using the required attribute argument",
+            "dt": "group_by"
+        },
+        {
+            "dd": "Filters the array values, returning objects whose attribute is equal to the argument",
+            "dt": "filter"
+        },
+        {
+            "dd": "Retrieves an attribute from each object in an array",
+            "dt": "map"
+        },
+        {
+            "dd": "Appends values to an array",
+            "dt": "concat"
+        },
+        {
+            "dd": "Performs classic (%-based) URL encoding",
+            "dt": "urlencode"
+        },
+        {
+            "dd": "Encodes URLs, including any slashes",
+            "dt": "urlencode_strict"
+        },
+        {
+            "dd": "Can return an alternative text if the argument is greater than one",
+            "dt": "pluralize"
+        },
+        {
+            "dd": "Returns a number rounded",
+            "dt": "round"
+        },
+        {
+            "dd": "Generates human-readable sizes for integers",
+            "dt": "filesizeformat"
+        },
+        {
+            "dd": "Parses a timestamp into a date(time) string",
+            "dt": "date"
+        },
+        {
+            "dd": "Escapes a string's HTML",
+            "dt": "escape"
+        },
+        {
+            "dd": "Escapes XML special characters",
+            "dt": "escape_xml"
+        },
+        {
+            "dd": "Marks a variable as safe: HTML will not be escaped",
+            "dt": "safe"
+        },
+        {
+            "dd": "Accesses a value from an object when the key is not a valid identifier.",
+            "dt": "get"
+        },
+        {
+            "dd": "Splits a string into an array of strings, separated by a pattern.",
+            "dt": "split"
+        },
+        {
+            "dd": "Converts a value into an integer.",
+            "dt": "int"
+        },
+        {
+            "dd": "Converts a value into a float.",
+            "dt": "float"
+        },
+        {
+            "dd": "Transforms a value into its JSON representation",
+            "dt": "json_encode"
+        },
+        {
+            "dd": "Returns a string representation of the value.",
+            "dt": "as_str"
+        },
+        {
+            "dd": "Provides a default value if the name is not present in the context",
+            "dt": "default"
+        },
+        {
+            "dd": "Converts the variable contents from markdown to HTML",
+            "dt": "markdown"
+        },
+        {
+            "dd": "Encode the variable to base64",
+            "dt": "base64_encode"
+        },
+        {
+            "dd": "Decode the variable from base64",
+            "dt": "base64_decode"
+        },
+        {
+            "dd": "Format a number in a variety of ways",
+            "dt": "num_format"
+        }
+    ]
+}

content/docs/zola/filters.yaml

@@ -0,0 +1,150 @@
+-
+    dt: "lower"
+    dd:  Converts string to lowercase
+-
+    dt: "upper"
+    dd:  Converts string to uppercase
+-
+    dt: "wordcount"
+    dd:  Counts the words in a string
+-
+    dt: "capitalize"
+    dd:  Capitalizes the first letter, lowercase the rest
+-
+    dt: "replace"
+    dd:  Takes two strings as arguments, replaces the first with the second
+-
+    dt: "addslashes"
+    dd:  Escapes quoted strings
+-
+    dt: "slugify"
+    dd:  Provides a slug for the string
+-
+    dt: "title"
+    dd:  Capitalizes each word in the string
+-
+    dt: "trim"
+    dd:  Removes leading and trailing whitespace
+-
+    dt: "trim_start"
+    dd:  Removes leading whitespace
+-
+    dt: "trim_end"
+    dd:  Removes trailing whitespace
+-
+    dt: "trim_start_matches"
+    dd:  Removes leading characters that match a pattern
+-
+    dt: "trim_end_matches"
+    dd:  Removes trailing characters that match a pattern
+-
+    dt: "truncate"
+    dd:  Truncates the string to the length specified
+-
+    dt: "linebreaksbr"
+    dd:  Replaces line breaks (\n or \r\n) with HTML line breaks (<br>)
+-
+    dt: "spaceless"
+    dd:  Remove space ( ) and line breaks (\n or \r\n) between HTML tags
+-
+    dt: "striptags"
+    dd:  Tries to remove HTML tags from input
+-
+    dt: "first"
+    dd:  Returns the first element of an array
+-
+    dt: "last"
+    dd:  Returns the last element of an array
+-
+    dt: "nth"
+    dd:  Returns the nth element of an array
+-
+    dt: "join"
+    dd:  Joins an array with a delimeter
+-
+    dt: "length"
+    dd:  Returns the length of an array, an object, or a string
+-
+    dt: "reverse"
+    dd:  Returns a reversed string or array
+-
+    dt: "sort"
+    dd:  Sorts an array into ascending order. You can sort objects by providing a fieldname argument
+-
+    dt: "unique"
+    dd:  Removes duplicate items from an array. You can filter objects by providing a fieldname argument
+-
+    dt: "slice"
+    dd:  Slices an array by the given start and end parameter
+-
+    dt: "group_by"
+    dd:  Groups an array using the required attribute argument
+-
+    dt: "filter"
+    dd:  Filters the array values, returning objects whose attribute is equal to the argument
+-
+    dt: "map"
+    dd:  Retrieves an attribute from each object in an array
+-
+    dt: "concat"
+    dd:  Appends values to an array
+-
+    dt: "urlencode"
+    dd:  Performs classic (%-based) URL encoding
+-
+    dt: "urlencode_strict"
+    dd:  Encodes URLs, including any slashes
+-
+    dt: "pluralize"
+    dd:  Can return an alternative text if the argument is greater than one
+-
+    dt: "round"
+    dd:  Returns a number rounded
+-
+    dt: "filesizeformat"
+    dd:  Generates human-readable sizes for integers
+-
+    dt: "date"
+    dd:  Parses a timestamp into a date(time) string
+-
+    dt: "escape"
+    dd:  Escapes a string's HTML
+-
+    dt: "escape_xml"
+    dd:  Escapes XML special characters
+-
+    dt: "safe"
+    dd:  "Marks a variable as safe: HTML will not be escaped"
+-
+    dt: "get"
+    dd:  Accesses a value from an object when the key is not a valid identifier.
+-
+    dt: "split"
+    dd:  Splits a string into an array of strings, separated by a pattern.
+-
+    dt: "int"
+    dd:  Converts a value into an integer.
+-
+    dt: "float"
+    dd:  Converts a value into a float.
+-
+    dt: "json_encode"
+    dd:  Transforms a value into its JSON representation
+-
+    dt: "as_str"
+    dd:  Returns a string representation of the value.
+-
+    dt: "default"
+    dd:  Provides a default value if the name is not present in the context
+-
+    dt: "markdown"
+    dd:  Converts the variable contents from markdown to HTML
+-
+    dt: "base64_encode"
+    dd:  Encode the variable to base64
+-
+    dt: "base64_decode"
+    dd:  Decode the variable from base64
+-
+    dt: "num_format"
+    dd:  Format a number in a variety of ways

sass/design/_reset.scss

@@ -0,0 +1,76 @@
+/***
+    The new CSS reset - version 1.5.1 (last updated 1.3.2022)
+    GitHub page: https://github.com/elad2412/the-new-css-reset
+***/
+
+/*
+    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
+    - The "symbol *" part is to solve Firefox SVG sprite bug
+*/
+*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
+    all: unset;
+    display: revert;
+}
+
+/* Preferred box-sizing value */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+/* Reapply the pointer cursor for anchor tags */
+a, button {
+    cursor: revert;
+}
+
+/* Remove list styles (bullets/numbers) */
+ol, ul, menu {
+    list-style: none;
+}
+
+/* For images to not be able to exceed their container */
+img {
+    max-width: 100%;
+}
+
+/* removes spacing between cells in tables */
+table {
+    border-collapse: collapse;
+}
+
+/* revert the 'white-space' property for textarea elements on Safari */
+textarea {
+    white-space: revert;
+}
+
+/* minimum style to allow to style meter element */
+meter {
+    -webkit-appearance: revert;
+    appearance: revert;
+}
+
+/* reset default text opacity of input placeholder */
+::placeholder {
+    color: unset;
+}
+
+/* fix the feature of 'hidden' attribute.
+   display:revert; revert to element instead of attribute */
+:where([hidden]) {
+    display: none;
+}
+
+/* revert for bug in Chromium browsers
+   - fix for the content editable attribute will work properly. */
+:where([contenteditable]) {
+    -moz-user-modify: read-write;
+    -webkit-user-modify: read-write;
+    overflow-wrap: break-word;
+    -webkit-line-break: after-white-space;
+}
+
+/* apply back the draggable feature - exist only in Chromium and Safari */
+:where([draggable="true"]) {
+    -webkit-user-drag: element;
+}

sass/design/_scales.scss

@@ -0,0 +1,43 @@
+/* @link https://utopia.fyi/type/calculator?c=320,12,1.2,1024,24,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l|xs-m */
+
+
+:root {
+  --step--2: calc(clamp(0.52rem, calc(0.43rem + 0.45vw), 0.72rem));
+  --step--1: calc(clamp(0.63rem, calc(0.50rem + 0.63vw), 0.90rem));
+  --step-0: calc(clamp(0.75rem, calc(0.58rem + 0.85vw), 1.13rem));
+  --step-1: calc(clamp(0.90rem, calc(0.67rem + 1.15vw), 1.41rem));
+  --step-2: calc(clamp(1.08rem, calc(0.77rem + 1.54vw), 1.76rem));
+  --step-3: calc(clamp(1.30rem, calc(0.89rem + 2.05vw), 2.20rem));
+  --step-4: calc(clamp(1.56rem, calc(1.01rem + 2.71vw), 2.75rem));
+  --step-5: calc(clamp(1.87rem, calc(1.15rem + 3.56vw), 3.43rem));
+  --half-step-0: calc(clamp(0.75rem, calc(0.58rem + 0.85vw), 1.13rem) / 2);
+}
+
+/* @link https://utopia.fyi/space/calculator?c=320,12,1.2,1024,24,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l|xs-m */
+
+:root {
+    --space-3xs: calc(clamp(0.19rem, calc(0.1rem + 0.43vw), 0.38rem));
+    --space-2xs: calc(clamp(0.38rem, calc(0.2rem + 0.85vw), 0.75rem));
+    --space-xs: calc(clamp(0.56rem, calc(0.31rem + 1.28vw), 1.13rem));
+    --space-s: calc(clamp(0.75rem, calc(0.41rem + 1.7vw), 1.5rem));
+    --space-m: calc(clamp(1.13rem, calc(0.61rem + 2.56vw), 2.25rem));
+    --space-l: calc(clamp(1.5rem, calc(0.82rem + 3.41vw), 3rem));
+    --space-xl: calc(clamp(2.25rem, calc(1.23rem + 5.11vw), 4.5rem));
+    --space-2xl: calc(clamp(3rem, calc(1.64rem + 6.82vw), 6rem));
+    --space-3xl: calc(clamp(4.5rem, calc(2.45rem + 10.23vw), 9rem));
+
+    /* One-up pairs */
+    --space-3xs-2xs: calc(clamp(0.19rem, calc(-0.07rem + 1.28vw), 0.75rem));
+    --space-2xs-xs: calc(clamp(0.38rem, calc(0.03rem + 1.7vw), 1.13rem));
+    --space-xs-s: calc(clamp(0.56rem, calc(0.14rem + 2.13vw), 1.5rem));
+    --space-s-m: calc(clamp(0.75rem, calc(0.07rem + 3.41vw), 2.25rem));
+    --space-m-l: calc(clamp(1.13rem, calc(0.27rem + 4.26vw), 3rem));
+    --space-l-xl: calc(clamp(1.5rem, calc(0.14rem + 6.82vw), 4.5rem));
+    --space-xl-2xl: calc(clamp(2.25rem, calc(0.55rem + 8.52vw), 6rem));
+    --space-2xl-3xl: calc(clamp(3rem, calc(0.27rem + 13.64vw), 9rem));
+
+    /* Custom pairs */
+    --space-s-l: calc(clamp(0.75rem, calc(-0.27rem + 5.11vw), 3rem));
+    --space-xs-m: calc(clamp(0.56rem, calc(-0.2rem + 3.84vw), 2.25rem));
+    --space-3xs-l: clamp(0.19rem, calc(-1.09rem + 6.39vw), 3.00rem);
+}

sass/design/_typography.scss

@@ -1,10 +1,10 @@
 $headers:
-    h1 ".h1" 1.9535rem 1.2 500,
+    h1 ".h1" var(--step-4) 1.1 700,
-    h2 ".h2" 1.5625rem 1.25 500,
+    h2 ".h2" var(--step-3) 1.25 500,
-    h3 ".h3" 1.25rem 1.3 500,
+    h3 ".h3" var(--step-2) 1.1 500,
-    h4 ".h4" 1.0rem 1.4 700,
+    h4 ".h4" var(--step-1) 1.35 700,
-    h5 ".h5" 0.8rem 1.5 500,
+    h5 ".h5" var(--step-0) 1.5 500,
-    h6 ".h6" 0.64rem 1.4 500;
+    h6 ".h6" var(--step--1) 1.4 500;
 
 @each $type, $ptype, $size, $height, $weight in $headers {
     #{$type} {
@@ -19,3 +19,4 @@ $headers:
         font-weight: $weight;
     }
 }
+

sass/main.scss

@@ -3,6 +3,7 @@
 @import "design/fonts/nunito";
 @import "design/fonts/sauna_mono";
 @import "design/typography";
+@import "design/_scales";
 @import "components/code";
 
 :root {
@@ -100,3 +101,12 @@ article.text-article {
     }
 }
 
+dl {
+    margin-left: var(--space-m);
+    dt {
+        font-weight: 500;
+    }
+    dd {
+        margin-left: var(--space-m);
+    }
+}

templates/macros/definition_body.html

@@ -1,7 +1,7 @@
 {% macro definition_body(source) %}
 <dl>
 {% for entry in source %}
-<dt><kbd>{{ entry.dt | safe }}</kbd></dt>
+<dt><code>{{ entry.dt | safe }}</code></dt>
 <dd>{{ entry.dd | safe }}</dd>
 {% if entry.definitions %}{{ self::definition_body(source=entry.definitions) }}{% endif %}
 {% endfor %}