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:
Elf M. Sternberg 2022-04-25 18:28:25 -07:00
parent d01e184f34
commit 8ae58c95a8
24 changed files with 529 additions and 163 deletions

View File

@ -1,5 +1,5 @@
+++
title = "Elf's Notes"
title = "Brains!!!"
# The homepage contents
[extra]

View File

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

View File

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

View File

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

View File

@ -1,12 +1,23 @@
/* normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
margin: 0;
}
article,
@ -21,322 +32,326 @@ menu,
nav,
section,
summary {
display: block;
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
display: none;
height: 0;
}
progress {
vertical-align: baseline;
vertical-align: baseline;
}
template,
[hidden] {
display: none;
display: none;
}
a:active,
a:hover {
outline-width: 0;
outline-width: 0;
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
b,
strong {
font-weight: inherit;
font-weight: inherit;
}
b,
strong {
font-weight: bolder;
font-weight: bolder;
}
dfn {
font-style: italic;
font-style: italic;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
font-size: 2em;
margin: 0.67em 0;
}
mark {
}
small {
font-size: 80%;
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
bottom: -0.25em;
}
sup {
top: -0.5em;
top: -0.5em;
}
img {
border-style: none;
border-style: none;
}
svg:not(:root) {
overflow: hidden;
overflow: hidden;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
font-family: monospace, monospace;
font-size: 1em;
}
figure {
margin: 1em 40px;
margin: 1em 40px;
}
hr {
-webkit-box-sizing: content-box;
box-sizing: content-box;
height: 0;
overflow: visible;
-webkit-box-sizing: content-box;
box-sizing: content-box;
height: 0;
overflow: visible;
}
button,
input,
select,
textarea {
font: inherit;
font: inherit;
}
optgroup {
font-weight: bold;
font-weight: bold;
}
button,
input,
select {
overflow: visible;
overflow: visible;
}
button,
input,
select,
textarea {
margin: 0;
margin: 0;
}
button,
select {
text-transform: none;
text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
cursor: pointer;
cursor: pointer;
}
[disabled] {
cursor: default;
cursor: default;
}
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
-webkit-appearance: button;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
border: 0;
padding: 0;
}
button:-moz-focusring,
input:-moz-focusring {
outline: 1px dotted ButtonText;
outline: 1px dotted ButtonText;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
textarea {
overflow: auto;
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
-webkit-appearance: textfield;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
-webkit-appearance: none;
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*,
*::before,
*::after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
@-ms-viewport {
width: device-width;
width: device-width;
}
[tabindex="-1"]:focus {
outline: none !important;
outline: none !important;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: .5rem;
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: 0.5rem;
}
p {
margin-top: 0;
margin-bottom: 1rem;
margin-top: 0;
margin-bottom: 1rem;
}
abbr[title],
abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted #818a91;
cursor: help;
border-bottom: 1px dotted #818a91;
}
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem;
margin-top: 0;
margin-bottom: 1rem;
}
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
margin-bottom: 0;
}
dt {
font-weight: bold;
font-weight: bold;
}
dd {
margin-bottom: .5rem;
margin-left: 0;
margin-bottom: 0.5rem;
margin-left: 0;
}
blockquote {
margin: 0 0 1rem;
margin: 0 0 1rem;
}
a {
text-decoration: none;
text-decoration: none;
}
a:focus, a:hover {
text-decoration: underline;
a:focus,
a:hover {
text-decoration: underline;
}
a:focus {
outline: none;
outline: none;
}
a:not([href]):not([tabindex]) {
color: inherit;
text-decoration: none;
color: inherit;
text-decoration: none;
}
a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
color: inherit;
text-decoration: none;
a:not([href]):not([tabindex]):focus,
a:not([href]):not([tabindex]):hover {
color: inherit;
text-decoration: none;
}
a:not([href]):not([tabindex]):focus {
outline: none;
outline: none;
}
pre {
margin-top: 0;
margin-bottom: 1rem;
overflow: auto;
margin-top: 0;
margin-bottom: 1rem;
overflow: auto;
}
figure {
margin: 0 0 1rem;
margin: 0 0 1rem;
}
img {
vertical-align: middle;
vertical-align: middle;
}
[role="button"] {
cursor: pointer;
cursor: pointer;
}
a,
@ -348,81 +363,81 @@ label,
select,
summary,
textarea {
-ms-touch-action: manipulation;
touch-action: manipulation;
-ms-touch-action: manipulation;
touch-action: manipulation;
}
table {
border-collapse: collapse;
background-color: transparent;
border-collapse: collapse;
background-color: transparent;
}
caption {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
color: #818a91;
text-align: left;
caption-side: bottom;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
color: #818a91;
text-align: left;
caption-side: bottom;
}
th {
text-align: left;
text-align: left;
}
label {
display: inline-block;
margin-bottom: .5rem;
display: inline-block;
margin-bottom: 0.5rem;
}
button:focus {
outline: none;
outline: none;
}
input,
button,
select,
textarea {
margin: 0;
line-height: inherit;
border-radius: 0;
margin: 0;
line-height: inherit;
border-radius: 0;
}
input[type="radio"]:disabled,
input[type="checkbox"]:disabled {
cursor: not-allowed;
cursor: not-allowed;
}
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
-webkit-appearance: listbox;
-webkit-appearance: listbox;
}
textarea {
resize: vertical;
resize: vertical;
}
fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
min-width: 0;
padding: 0;
margin: 0;
border: 0;
}
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: .5rem;
font-size: 1.5rem;
line-height: inherit;
display: block;
width: 100%;
padding: 0;
margin-bottom: 0.5rem;
font-size: 1.5rem;
line-height: inherit;
}
input[type="search"] {
-webkit-appearance: none;
-webkit-appearance: none;
}
output {
display: inline-block;
display: inline-block;
}

View File

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

View File

@ -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+ */
}

View File

@ -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+ */
}

View File

@ -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-family: "Nunito", sans-serif;
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));
font-family: "Nunito", sans-serif;
font-weight: 400;
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 {
position: fixed;
background-color: var(--background-color, #ffffff);
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%;
}
}
}
}

View File

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

View File

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

View File

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