elf
/
elf-notes
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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.)
This commit is contained in:
Elf M. Sternberg 2022-05-17 08:16:51 -07:00
parent 25d88c42ec
commit 18aacee501
10 changed files with 662 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

163
content/docs/zola/_index.md
View File

@ -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.
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.
## Tera
## 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
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 (<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
{{ definition_list(source="docs/zola/filters.json") }}
### Functions

64
content/docs/zola/expressions.json Normal file
View File

@ -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"
}
]
}

47
content/docs/zola/expressions.yaml Normal file
View File

@ -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".

204
content/docs/zola/filters.json Normal file
View File

@ -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 (&lt;br&gt;)",
"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"
}
]
}

150
content/docs/zola/filters.yaml Normal file
View File

@ -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

76
sass/design/_reset.scss Normal file
View File

@ -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;
}

43
sass/design/_scales.scss Normal file
View File

@ -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);
}

13
sass/design/_typography.scss
View File

@ -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;
}
}

10
sass/main.scss
View File

@ -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);
}
}

2
templates/macros/definition_body.html
View File

@ -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 %}