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?
+  - arrays: is the arg given one of the members of the array?
-  - maps: is the arg a key of the map?
+  - 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

@@ -5,17 +5,6 @@ html {
   -webkit-text-size-adjust: 100%;
 }
 
-:root {
-  box-sizing: border-box;
-}
-
-
-*,
-*::before,
-*::after {
-    box-sizing: inherit;
-}
-
 body {
   margin: 0;
 }
@@ -86,6 +75,7 @@ h1 {
 }
 
 mark {
+
 }
 
 small {
@@ -250,18 +240,15 @@ html {
   width: device-width;
 }
 
+
+
 [tabindex="-1"]:focus {
   outline: none !important;
 }
 
-h1,
+h1, h2, h3, h4, h5, h6 {
-h2,
-h3,
-h4,
-h5,
-h6 {
   margin-top: 0;
-    margin-bottom: 0.5rem;
+  margin-bottom: .5rem;
 }
 
 p {
@@ -300,7 +287,7 @@ dt {
 }
 
 dd {
-    margin-bottom: 0.5rem;
+  margin-bottom: .5rem;
   margin-left: 0;
 }
 
@@ -312,8 +299,7 @@ a {
   text-decoration: none;
 }
 
-a:focus,
+a:focus, a:hover {
-a:hover {
   text-decoration: underline;
 }
 
@@ -326,8 +312,7 @@ a:not([href]):not([tabindex]) {
   text-decoration: none;
 }
 
-a:not([href]):not([tabindex]):focus,
+a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
-a:not([href]):not([tabindex]):hover {
   color: inherit;
   text-decoration: none;
 }
@@ -386,7 +371,7 @@ th {
 
 label {
   display: inline-block;
-    margin-bottom: 0.5rem;
+  margin-bottom: .5rem;
 }
 
 button:focus {
@@ -429,7 +414,7 @@ legend {
   display: block;
   width: 100%;
   padding: 0;
-    margin-bottom: 0.5rem;
+  margin-bottom: .5rem;
   font-size: 1.5rem;
   line-height: inherit;
 }

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";
-@import "design/fonts/sauna_mono";
-@import "design/typography";
-@import "components/code";
 
 :root {
-    font-size: calc(clamp(0.875rem, 0.725rem + 0.6666vw, 1.125rem));
+  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, .725rem + 0.6666vw, 1.125rem));
-    font-size: calc(clamp(0.875rem, 0.725rem + 0.6666vw, 1.125rem));
   font-family: "Nunito", sans-serif;
   font-weight: 400;
 }
   
-header.navbar {
+header.header {
   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 {
@@ -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">
+<section class="section section-sm">
-    <h2>Topics Available:</h2>
+    <div class="container">
-    <section class="section">
         <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>