diff --git a/content/docs/zola/_index.md b/content/docs/zola/_index.md
index f9f4499..6ed528f 100644
--- a/content/docs/zola/_index.md
+++ b/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/)
- configuration language. Can contain a lot of information that will be made
- available to *all* pages in the system.
+The following files and folders define a basic Zola project. Any other folders
+in a zola project are ignored.
+
+- `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
-like Typescript or a bundler like Webpack, that is outside the functionality of
-Zola. You'll have to have a separate project for that, or a subfolder or git
-submodule, and you'll have to have a separate build step for that.
+Every folder under the `content/` folder that has an `_index.md` file is
+considered a *section*, presenting a table of contents or other introductory
+matter. Every other markdown document in a section is considered a *page*.
+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
-or similar HTML templating involved. That would be a nifty project.
-
-## Tera
+A folder under a section that has an `index.md` file (note the lack of
+underscore prefix) is considered a *page*. This allows content writers to
+supply additional assets, such as images or data files, along with the contents
+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 %}
+```
+
+
+
#### `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
-templated, substituting its own content and processing for that of the extended
-template.
+that import then provides its own overrides or extensions for blocks found in
+the imported templates, substituting its own content and processing for that of
+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
-- `-`: 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`.
+{{ definition_list(source="docs/zola/expressions.json") }}
**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 %} ... {%
-endfilter %}`.
+An entire chunk of HTML can be filtered by:
+
+``` jinja2
+{% filter filter_name %}
+ ...
+{% endfilter %}
+```
The filters provided are:
-- `lower`: Converts string to lowercase
-- `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 ( )
-- `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
-
+{{ definition_list(source="docs/zola/filters.json") }}
### Functions
diff --git a/content/docs/zola/expressions.json b/content/docs/zola/expressions.json
new file mode 100644
index 0000000..aa1b449
--- /dev/null
+++ b/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"
+ }
+ ]
+}
diff --git a/content/docs/zola/expressions.yaml b/content/docs/zola/expressions.yaml
new file mode 100644
index 0000000..a77023d
--- /dev/null
+++ b/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".
diff --git a/content/docs/zola/filters.json b/content/docs/zola/filters.json
new file mode 100644
index 0000000..b069777
--- /dev/null
+++ b/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"
+ }
+ ]
+}
diff --git a/content/docs/zola/filters.yaml b/content/docs/zola/filters.yaml
new file mode 100644
index 0000000..c8d3b26
--- /dev/null
+++ b/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 ( )
+-
+ 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
diff --git a/sass/design/_reset.scss b/sass/design/_reset.scss
new file mode 100644
index 0000000..ae9be7b
--- /dev/null
+++ b/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;
+}
diff --git a/sass/design/_scales.scss b/sass/design/_scales.scss
new file mode 100644
index 0000000..8475bc4
--- /dev/null
+++ b/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);
+}
diff --git a/sass/design/_typography.scss b/sass/design/_typography.scss
index 633e3c0..7a6b01a 100644
--- a/sass/design/_typography.scss
+++ b/sass/design/_typography.scss
@@ -1,10 +1,10 @@
$headers:
- h1 ".h1" 1.9535rem 1.2 500,
- h2 ".h2" 1.5625rem 1.25 500,
- h3 ".h3" 1.25rem 1.3 500,
- h4 ".h4" 1.0rem 1.4 700,
- h5 ".h5" 0.8rem 1.5 500,
- h6 ".h6" 0.64rem 1.4 500;
+ h1 ".h1" var(--step-4) 1.1 700,
+ h2 ".h2" var(--step-3) 1.25 500,
+ h3 ".h3" var(--step-2) 1.1 500,
+ h4 ".h4" var(--step-1) 1.35 700,
+ h5 ".h5" var(--step-0) 1.5 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;
}
}
+
diff --git a/sass/main.scss b/sass/main.scss
index 8555eec..e2efa68 100644
--- a/sass/main.scss
+++ b/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);
+ }
+}
diff --git a/templates/macros/definition_body.html b/templates/macros/definition_body.html
index a8ef1f0..d2c07f3 100644
--- a/templates/macros/definition_body.html
+++ b/templates/macros/definition_body.html
@@ -1,7 +1,7 @@
{% macro definition_body(source) %}