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:
parent
25d88c42ec
commit
18aacee501
|
@ -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 %}
|
||||
```
|
||||
|
||||
<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
|
||||
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
|
@ -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".
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
|
@ -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
|
|
@ -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;
|
||||
}
|
|
@ -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);
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 %}
|
||||
|
|
Loading…
Reference in New Issue