config.toml

@@ -7,8 +7,6 @@ compile_sass = true
 # Whether to build a search index to be used later on by a JavaScript library
 build_search_index = true
 
-title = "Elf's Notes"
-
 [markdown]
 # Whether to do syntax highlighting
 # Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola

content/_index.md

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

content/docs/zola/_index.md

@@ -3,7 +3,7 @@ title = "Zola"
 description = "Zola is a static site generator"
 date = 2025-05-01T18:00:00+00:00
 updated = 2021-05-01T18:00:00+00:00
-template = "docs/section.html"
+template = "section.html"
 sort_by = "weight"
 weight = 4
 draft = false
@@ -68,21 +68,6 @@ that comes after it.
 
 ### Statements
 
-#### `block`
-
-The `block` is probably the most important statement; it defines a chunk of
-content.  When a template is created, it can define its whole content as a
-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`
 
 Variables are set in a given scope with `set`:
@@ -119,8 +104,8 @@ The list of `is` tests that are shipped with Zola are:
 - `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?
+  - arrays: is the arg given one of the members of the array?
+  - maps: is the arg given a key of the map?
 - `matching(regexp)`: Returns true if the given variable is a string and matches the regex in the argument.
 
 #### `for`
@@ -148,9 +133,6 @@ 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
@@ -187,9 +169,10 @@ 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 %}
@@ -197,151 +180,3 @@ 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.

sass/components/_code.scss

@@ -1,62 +0,0 @@
-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;
-}

sass/design/_definitions.scss

@@ -4,7 +4,5 @@
   --background-color: #ffffff;
   --background-secondary-color: #dcdcdc;
   --text-color: #1f000d;
-  --code-color: #213300;
-  --inline-code-color: rgba(219, 255, 152, 0.20);
 }
     

sass/design/_fonts.scss

@@ -59,4 +59,3 @@
     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+ */
 }
-

sass/design/_normalize.css

@@ -1,23 +1,12 @@
 /* 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%;
-}
-
-:root {
-  box-sizing: border-box;
-}
-
-
-*,
-*::before,
-*::after {
-    box-sizing: inherit;
+  font-family: sans-serif;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
 }
 
 body {
-    margin: 0;
+  margin: 0;
 }
 
 article,
@@ -32,326 +21,322 @@ 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: 0.5rem;
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: .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: 0.5rem;
-    margin-left: 0;
+  margin-bottom: .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,
@@ -363,81 +348,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: 0.5rem;
+  display: inline-block;
+  margin-bottom: .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: 0.5rem;
-    font-size: 1.5rem;
-    line-height: inherit;
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin-bottom: .5rem;
+  font-size: 1.5rem;
+  line-height: inherit;
 }
 
 input[type="search"] {
-    -webkit-appearance: none;
+  -webkit-appearance: none;
 }
 
 output {
-    display: inline-block;
+  display: inline-block;
 }

sass/design/_typography.scss

@@ -1,21 +0,0 @@
-$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;
-    }
-}

sass/design/fonts/_sauna_mono.scss

@@ -1,36 +0,0 @@
-@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+ */
-}

sass/main.scss

@@ -1,42 +1,20 @@
-@import "design/normalize";
 @import "design/definitions";
-@import "design/fonts/nunito";
-@import "design/fonts/sauna_mono";
-@import "design/typography";
-@import "components/code";
+@import "design/fonts";
 
 :root {
-    font-size: calc(clamp(0.875rem, 0.725rem + 0.6666vw, 1.125rem));
-    font-family: "Nunito", sans-serif;
+  font-size: calc(clamp(0.875rem, .725rem + 0.6666vw, 1.125rem));
+  font-family: "Nunito", sans-serif;
 }
 
 body {
-    padding-top: 3.625rem;
-    font-size: calc(clamp(0.875rem, 0.725rem + 0.6666vw, 1.125rem));
-    font-family: "Nunito", sans-serif;
-    font-weight: 400;
+  font-size: calc(clamp(0.875rem, .725rem + 0.6666vw, 1.125rem));
+  font-family: "Nunito", sans-serif;
+  font-weight: 400;
 }
   
-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;
+header.header {
+  position: fixed;
+  background-color: var(--background-color, #ffffff);
 }
 
 .container {
@@ -46,57 +24,3 @@ article.text-article {
     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%;
-            }
-        }
-    }
-}
-

static/fonts/sauna-mono/.uuid

@@ -1 +0,0 @@
-f43cc8c9-a393-49d5-9e49-793a866cef52

templates/docs/section.html

@@ -6,7 +6,7 @@
 
 {% block header %}
 {% set current_section = "docs" %}
-{{ header::header(current_section=current_section)}}
+{{ macros_header::header(current_section=current_section)}}
 {% endblock header %}
 
 {% block content %}

templates/index.html

@@ -8,27 +8,27 @@
                 <div class="col-lg-12 text-center">
                     <h1>{{ section.title | default(value="Elf's Notes") }}</h1>
                 </div>
-                <article class="text-article">
+                <div class="col-lg-9 col-xl-8 text-center">
                     <p class="lead">
-                        {{ section.extra.lead | default(value="You need to add some content") | safe }}
+                        {{ section.extra.lead | default(value="Please start setting config.toml and adding
+                        your content.") | safe }}
                     </p>
-                </article>
+                </div>
             </div>
         </section>
     </div>
 </div>
 
-<div class="container topic-list">
-    <h2>Topics Available:</h2>
-    <section class="section">
+<section class="section section-sm">
+    <div class="container">
         <div class="topic-cards">
             {% if section.extra.list %} {% for val in section.extra.list %}
             <div class="topic-card">
-                <h3><a href="{{val.url}}">{{ val.title }}</a></h3>
+                <h2>{{ val.title }}</h2>
                 <p>{{ val.content | safe }}</p>
             </div>
             {% endfor %} {% endif %}
         </div>
-    </section>
-</div>
+    </div>
+</section>
 {% endblock %}

templates/section.html

@@ -2,6 +2,28 @@
 
 {% extends "base.html" %}
 
+{% block seo %}
+{{ super() }}
+{% set title_addition = "" %}
+
+{% if section.title and config.title %}
+{% set title = section.title %}
+{% set title_addition = title_separator ~ config.title %}
+{% elif section.title %}
+{% set title = section.title %}
+{% else %}
+{% set title = config.title %}
+{% endif %}
+
+{% if section.description %}
+{% set description = section.description %}
+{% else %}
+{% set description = config.description %}
+{% endif %}
+
+{{ macros_head::seo(title=title, title_addition=title_addition, description=description) }}
+{% endblock seo %}
+
 {% block body %}
 {% if section.extra.class %}
 {% set page_class = section.extra.class %}
@@ -15,7 +37,7 @@
   <div class="content">
     <div class="row justify-content-center">
       <div class="col-md-12 col-lg-10 col-xxl-8">
-        <article class="text-article">
+        <article>
           <div class="page-header">
             <h1>{{ section.title }}</h1>
           </div>