Added a lot of content to the Zola block
Added a mono font for code Added CSS for code Added a better reset/normalize Added my 1.25 scaled header text styling. Added the home-page 'topic-card' styling.
This commit is contained in:
parent
d01e184f34
commit
8ae58c95a8
|
|
@ -1,5 +1,5 @@
|
|||
+++
|
||||
title = "Elf's Notes"
|
||||
title = "Brains!!!"
|
||||
|
||||
# The homepage contents
|
||||
[extra]
|
||||
|
|
|
|||
|
|
@ -76,7 +76,12 @@ 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.
|
||||
|
||||
#### `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.
|
||||
|
||||
#### `set`
|
||||
|
||||
|
|
@ -143,6 +148,9 @@ the list in reverse order.
|
|||
{% for name in users | reverse %}{{ name }}{% endfor %}
|
||||
```
|
||||
|
||||
Loops have `continue` and `break` statements that can be invoked inside `if`
|
||||
blocks.
|
||||
|
||||
#### `include`
|
||||
|
||||
Include other content into the current template being rendered. Include strings
|
||||
|
|
@ -179,13 +187,9 @@ And an example of this macro (again, in the `header.html` file) would look like
|
|||
<h1>{ title }</h1>
|
||||
</header>
|
||||
{% endmacro %}
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
#### `raw`
|
||||
|
||||
```jinja2
|
||||
{% raw %}Content {{ goes here }}{% endraw %}
|
||||
|
|
@ -193,3 +197,151 @@ And an example of this macro (again, in the `header.html` file) would look like
|
|||
|
||||
Content within the `raw` block will not be processed.
|
||||
|
||||
### Expressions
|
||||
|
||||
Tera's `{{` ... `}}` syntax supports expressions, usually just evaluating the
|
||||
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`.
|
||||
|
||||
**Concatenation**:
|
||||
|
||||
Strings can be concatenated with the `~` operator.
|
||||
|
||||
**Filters**:
|
||||
|
||||
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 %}`.
|
||||
|
||||
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
|
||||
|
||||
|
||||
### Functions
|
||||
|
||||
Only a few functions provide ad-hoc expressions in-line with template
|
||||
interpretation.
|
||||
|
||||
- `range`: Generates an array of numbers.
|
||||
- `now`: Generates the current datetime
|
||||
- `get_random`: Generates a random number
|
||||
- `get_env`: Returns an environment variable
|
||||
- `get_page`: Returns a the content of a page in the Zola content folder
|
||||
- `get_section`: Returns the content of a Zola section (an `_index.md`) file as an
|
||||
object.
|
||||
- `get_taxonomy_url`: Returns the URL of a Zola taxonomy index
|
||||
- `get_url`: Gets the generated URL for a document in the Zola content folder
|
||||
- `get_image_metadata`: Gets the metadata for an image in Zola's static folder
|
||||
- `load_data`: (Zola) Loads static data from a file. Understands TOML, JSON, CSV and
|
||||
BibTeX. Takes either `path=` or `url=` (!) as an argument.
|
||||
- `resize_image`: (Zola) Takes an image, resizes the image, and provides a link to the
|
||||
resized image.
|
||||
|
||||
## Zola Content
|
||||
|
||||
### Sections
|
||||
|
||||
In Zola, every folder under `./content/` (including that folder itself) is
|
||||
potentially a _section_. Sections are basically Zola's version of the WWW
|
||||
`index` protocol. A section is defined by the presence of an `_index.md` file
|
||||
which contains both a TOML header (separated by `+++` above and below), and by
|
||||
some optional content. The TOML header _may_ specify which template to use to
|
||||
render the section info, otherwise Zola falls back to the default at
|
||||
`./templates/section.html`.
|
||||
|
||||
The context for a section page contains the following fields, which will be
|
||||
available to the template:
|
||||
|
||||
- `content`: The content of the `_index.md` file
|
||||
- `title`: The Title found in the TOML part of `_index.md`
|
||||
- `description`: (optional): The description
|
||||
- `path`: As provided by Zola
|
||||
- `components`: The path, split into atoms
|
||||
- `permalink`: The URL for this page
|
||||
- `extra`: The contents of the TOML's `[extra.*]` blocks.
|
||||
- `pages`: An array of all child pages _in this same folder_.
|
||||
- `subsections`: An array of all child sections _in this same folder_.
|
||||
- `toc`: An array of `Header` objects: id, title, permalink, children (Which is itself
|
||||
an array of `Header` objects)
|
||||
- `word_count`: Unicode-smart.
|
||||
- `reading_time`: Number;
|
||||
- `assets`: An array of assets available in this section.
|
||||
- `ancestors`: An array of parent paths, with the root being the last one.
|
||||
|
||||
### Pages
|
||||
|
||||
A page is _either_ a markdown file within the same folder as its section, or it
|
||||
is in `index.md` (note the lack of prefix underscore!) file in a separate
|
||||
folder. The latter syntax is preferred if the file has associated assets, such
|
||||
as javascript or images.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: "Sauna Mono";
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 0.25rem 0.5rem;
|
||||
background-color: var(--inline-code-color);
|
||||
}
|
||||
|
||||
pre {
|
||||
color: var(--text-color);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background: var(--background-code-color);
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
line-height: 1.5;
|
||||
padding: 1.25rem 1.5rem;
|
||||
tab-size: 4;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: transparent transparent;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
padding: 1.25rem 1.5rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 540px) {
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 2rem -1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
pre code::-webkit-scrollbar {
|
||||
height: 0.25rem;
|
||||
}
|
||||
|
||||
pre code::-webkit-scrollbar-thumb {
|
||||
background: #e9ecef;
|
||||
}
|
||||
|
||||
pre code:hover {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #e9ecef;
|
||||
}
|
||||
|
||||
pre code::-webkit-scrollbar-thumb:hover {
|
||||
background: #e9ecef;
|
||||
}
|
||||
|
|
@ -4,5 +4,7 @@
|
|||
--background-color: #ffffff;
|
||||
--background-secondary-color: #dcdcdc;
|
||||
--text-color: #1f000d;
|
||||
--code-color: #213300;
|
||||
--inline-code-color: rgba(219, 255, 152, 0.20);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,17 @@ html {
|
|||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
:root {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -75,7 +86,6 @@ h1 {
|
|||
}
|
||||
|
||||
mark {
|
||||
|
||||
}
|
||||
|
||||
small {
|
||||
|
|
@ -240,15 +250,18 @@ html {
|
|||
width: device-width;
|
||||
}
|
||||
|
||||
|
||||
|
||||
[tabindex="-1"]:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: .5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -287,7 +300,7 @@ dt {
|
|||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: .5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
|
@ -299,7 +312,8 @@ a {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:focus, a:hover {
|
||||
a:focus,
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
|
@ -312,7 +326,8 @@ a:not([href]):not([tabindex]) {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
|
||||
a:not([href]):not([tabindex]):focus,
|
||||
a:not([href]):not([tabindex]):hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -371,7 +386,7 @@ th {
|
|||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-bottom: .5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
|
|
@ -414,7 +429,7 @@ legend {
|
|||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: .5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
$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;
|
||||
|
||||
@each $type, $ptype, $size, $height, $weight in $headers {
|
||||
#{$type} {
|
||||
font-size: $size;
|
||||
line-height: $height;
|
||||
font-weight: $weight;
|
||||
}
|
||||
|
||||
#{$ptype} {
|
||||
font-size: $size;
|
||||
line-height: $height;
|
||||
font-weight: $weight;
|
||||
}
|
||||
}
|
||||
|
|
@ -59,3 +59,4 @@
|
|||
url("fonts/nunito/Nunito-BoldItalic.woff2") format("woff2"),
|
||||
url("fonts/nunito/Nunito-BoldItalic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
@font-face {
|
||||
font-family: "Sauna Mono";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src:
|
||||
url("fonts/sauna-mono/SaunaMonoPro-Regular.ttf") format("ttf"),
|
||||
url("fonts/sauna-mono/SaunaMonoPro-Regular.woff2") format("woff2"),
|
||||
url("fonts/sauna-mono/SaunaMonoPro-Regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Sauna Mono";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src:
|
||||
url("fonts/sauna-mono/SaunaMonoPro-Bold.woff2") format("woff2"),
|
||||
url("fonts/sauna-mono/SaunaMonoPro-Bold.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Sauna Mono";
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src:
|
||||
url("fonts/sauna-mono/SaunaMonoPro-RegularItalic.woff2") format("woff2"),
|
||||
url("fonts/sauna-mono/SaunaMonoPro-RegularItalic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Sauna Mono";
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
src:
|
||||
url("fonts/sauna-mono/SaunaMonoPro-BoldItalic.woff2") format("woff2"),
|
||||
url("fonts/sauna-mono/SaunaMonoPro-BoldItalic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
|
|
@ -1,20 +1,42 @@
|
|||
@import "design/normalize";
|
||||
@import "design/definitions";
|
||||
@import "design/fonts";
|
||||
@import "design/fonts/nunito";
|
||||
@import "design/fonts/sauna_mono";
|
||||
@import "design/typography";
|
||||
@import "components/code";
|
||||
|
||||
:root {
|
||||
font-size: calc(clamp(0.875rem, .725rem + 0.6666vw, 1.125rem));
|
||||
font-size: calc(clamp(0.875rem, 0.725rem + 0.6666vw, 1.125rem));
|
||||
font-family: "Nunito", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: calc(clamp(0.875rem, .725rem + 0.6666vw, 1.125rem));
|
||||
padding-top: 3.625rem;
|
||||
font-size: calc(clamp(0.875rem, 0.725rem + 0.6666vw, 1.125rem));
|
||||
font-family: "Nunito", sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
header.header {
|
||||
header.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: var(--background-color, #ffffff);
|
||||
|
||||
.identity {
|
||||
margin-right: 1rem;
|
||||
font-size: 1.375rem;
|
||||
padding: 0.325rem 0 0.325rem 0;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
color: var(--text-color, #1f000d);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
article.text-article {
|
||||
max-width: 30em;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -24,3 +46,57 @@ header.header {
|
|||
margin-left: auto;
|
||||
}
|
||||
|
||||
.topic-list {
|
||||
margin-top: 1.5rem;
|
||||
@media screen and (min-width: 541px) {
|
||||
margin-top: 3.5rem;
|
||||
}
|
||||
|
||||
> h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.topic-cards {
|
||||
margin-top: 1rem;
|
||||
@media screen and (min-width: 541px) {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
flex-gap: 1rem;
|
||||
|
||||
.topic-card {
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--border-color, #dadce0);
|
||||
transition: all 0.18s ease;
|
||||
padding: 0.5rem;
|
||||
flex: 0 0 100%;
|
||||
|
||||
> h3 {
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: var(--primary-color, #520022);
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: var(--text-color, #1f000d);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 361px) {
|
||||
flex: 0 0 50%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 541px) {
|
||||
flex: 0 0 33%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 721px) {
|
||||
flex: 0 0 25%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
f43cc8c9-a393-49d5-9e49-793a866cef52
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -8,27 +8,27 @@
|
|||
<div class="col-lg-12 text-center">
|
||||
<h1>{{ section.title | default(value="Elf's Notes") }}</h1>
|
||||
</div>
|
||||
<div class="col-lg-9 col-xl-8 text-center">
|
||||
<article class="text-article">
|
||||
<p class="lead">
|
||||
{{ section.extra.lead | default(value="Please start setting config.toml and adding
|
||||
your content.") | safe }}
|
||||
{{ section.extra.lead | default(value="You need to add some content") | safe }}
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="section section-sm">
|
||||
<div class="container">
|
||||
<div class="container topic-list">
|
||||
<h2>Topics Available:</h2>
|
||||
<section class="section">
|
||||
<div class="topic-cards">
|
||||
{% if section.extra.list %} {% for val in section.extra.list %}
|
||||
<div class="topic-card">
|
||||
<h2>{{ val.title }}</h2>
|
||||
<h3><a href="{{val.url}}">{{ val.title }}</a></h3>
|
||||
<p>{{ val.content | safe }}</p>
|
||||
</div>
|
||||
{% endfor %} {% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<div class="content">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-12 col-lg-10 col-xxl-8">
|
||||
<article>
|
||||
<article class="text-article">
|
||||
<div class="page-header">
|
||||
<h1>{{ section.title }}</h1>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue