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.

content/_index.md

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

content/docs/zola/_index.md

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

sass/components/_code.scss

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

sass/design/_definitions.scss

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

sass/design/_normalize.css

@@ -1,12 +1,23 @@
 /* normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
 html {
-  font-family: sans-serif;
+    font-family: sans-serif;
-  -ms-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
-  -webkit-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;
+    display: none;
-  height: 0;
+    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;
+    border-bottom: none;
-  text-decoration: underline;
+    text-decoration: underline;
-  text-decoration: underline dotted;
+    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;
+    font-size: 2em;
-  margin: 0.67em 0;
+    margin: 0.67em 0;
 }
 
 mark {
-
 }
 
 small {
-  font-size: 80%;
+    font-size: 80%;
 }
 
 sub,
 sup {
-  font-size: 75%;
+    font-size: 75%;
-  line-height: 0;
+    line-height: 0;
-  position: relative;
+    position: relative;
-  vertical-align: baseline;
+    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-family: monospace, monospace;
-  font-size: 1em;
+    font-size: 1em;
 }
 
 figure {
-  margin: 1em 40px;
+    margin: 1em 40px;
 }
 
 hr {
-  -webkit-box-sizing: content-box;
+    -webkit-box-sizing: content-box;
-          box-sizing: content-box;
+    box-sizing: content-box;
-  height: 0;
+    height: 0;
-  overflow: visible;
+    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;
+    border: 0;
-  padding: 0;
+    padding: 0;
 }
 
 button:-moz-focusring,
 input:-moz-focusring {
-  outline: 1px dotted ButtonText;
+    outline: 1px dotted ButtonText;
 }
 
 fieldset {
-  border: 1px solid #c0c0c0;
+    border: 1px solid #c0c0c0;
-  margin: 0 2px;
+    margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
+    padding: 0.35em 0.625em 0.75em;
 }
 
 legend {
-  -webkit-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+    box-sizing: border-box;
-  color: inherit;
+    color: inherit;
-  display: table;
+    display: table;
-  max-width: 100%;
+    max-width: 100%;
-  padding: 0;
+    padding: 0;
-  white-space: normal;
+    white-space: normal;
 }
 
 textarea {
-  overflow: auto;
+    overflow: auto;
 }
 
 [type="checkbox"],
 [type="radio"] {
-  -webkit-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+    box-sizing: border-box;
-  padding: 0;
+    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;
+    -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 *,
 *::before,
 *::after {
-  -webkit-box-sizing: inherit;
+    -webkit-box-sizing: inherit;
-          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 {
+h1,
-  margin-top: 0;
+h2,
-  margin-bottom: .5rem;
+h3,
+h4,
+h5,
+h6 {
+    margin-top: 0;
+    margin-bottom: 0.5rem;
 }
 
 p {
-  margin-top: 0;
+    margin-top: 0;
-  margin-bottom: 1rem;
+    margin-bottom: 1rem;
 }
 
 abbr[title],
 abbr[data-original-title] {
-  cursor: help;
+    cursor: help;
-  border-bottom: 1px dotted #818a91;
+    border-bottom: 1px dotted #818a91;
 }
 
 address {
-  margin-bottom: 1rem;
+    margin-bottom: 1rem;
-  font-style: normal;
+    font-style: normal;
-  line-height: inherit;
+    line-height: inherit;
 }
 
 ol,
 ul,
 dl {
-  margin-top: 0;
+    margin-top: 0;
-  margin-bottom: 1rem;
+    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-bottom: 0.5rem;
-  margin-left: 0;
+    margin-left: 0;
 }
 
 blockquote {
-  margin: 0 0 1rem;
+    margin: 0 0 1rem;
 }
 
 a {
-  text-decoration: none;
+    text-decoration: none;
 }
 
-a:focus, a:hover {
+a:focus,
-  text-decoration: underline;
+a:hover {
+    text-decoration: underline;
 }
 
 a:focus {
-  outline: none;
+    outline: none;
 }
 
 a:not([href]):not([tabindex]) {
-  color: inherit;
+    color: inherit;
-  text-decoration: none;
+    text-decoration: none;
 }
 
-a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
+a:not([href]):not([tabindex]):focus,
-  color: inherit;
+a:not([href]):not([tabindex]):hover {
-  text-decoration: none;
+    color: inherit;
+    text-decoration: none;
 }
 
 a:not([href]):not([tabindex]):focus {
-  outline: none;
+    outline: none;
 }
 
 pre {
-  margin-top: 0;
+    margin-top: 0;
-  margin-bottom: 1rem;
+    margin-bottom: 1rem;
-  overflow: auto;
+    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;
+    -ms-touch-action: manipulation;
-      touch-action: manipulation;
+    touch-action: manipulation;
 }
 
 table {
-  border-collapse: collapse;
+    border-collapse: collapse;
-  background-color: transparent;
+    background-color: transparent;
 }
 
 caption {
-  padding-top: 0.75rem;
+    padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+    padding-bottom: 0.75rem;
-  color: #818a91;
+    color: #818a91;
-  text-align: left;
+    text-align: left;
-  caption-side: bottom;
+    caption-side: bottom;
 }
 
 th {
-  text-align: left;
+    text-align: left;
 }
 
 label {
-  display: inline-block;
+    display: inline-block;
-  margin-bottom: .5rem;
+    margin-bottom: 0.5rem;
 }
 
 button:focus {
-  outline: none;
+    outline: none;
 }
 
 input,
 button,
 select,
 textarea {
-  margin: 0;
+    margin: 0;
-  line-height: inherit;
+    line-height: inherit;
-  border-radius: 0;
+    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;
+    min-width: 0;
-  padding: 0;
+    padding: 0;
-  margin: 0;
+    margin: 0;
-  border: 0;
+    border: 0;
 }
 
 legend {
-  display: block;
+    display: block;
-  width: 100%;
+    width: 100%;
-  padding: 0;
+    padding: 0;
-  margin-bottom: .5rem;
+    margin-bottom: 0.5rem;
-  font-size: 1.5rem;
+    font-size: 1.5rem;
-  line-height: inherit;
+    line-height: inherit;
 }
 
 input[type="search"] {
-  -webkit-appearance: none;
+    -webkit-appearance: none;
 }
 
 output {
-  display: inline-block;
+    display: inline-block;
 }

sass/design/_typography.scss

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

sass/design/fonts/_nunito.scss

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

sass/design/fonts/_sauna_mono.scss

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

sass/main.scss

@@ -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;
+    font-family: "Nunito", sans-serif;
 }
 
 body {
-  font-size: calc(clamp(0.875rem, .725rem + 0.6666vw, 1.125rem));
+    padding-top: 3.625rem;
-  font-family: "Nunito", sans-serif;
+    font-size: calc(clamp(0.875rem, 0.725rem + 0.6666vw, 1.125rem));
-  font-weight: 400;
+    font-family: "Nunito", sans-serif;
+    font-weight: 400;
 }
 
-header.header {
+header.navbar {
-  position: fixed;
+    position: fixed;
-  background-color: var(--background-color, #ffffff);
+    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%;
+            }
+        }
+    }
+}
+

static/fonts/sauna-mono/.uuid

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

templates/index.html

@@ -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
+                        {{ section.extra.lead | default(value="You need to add some content") | safe }}
-                        your content.") | safe }}
                     </p>
-                </div>
+                </article>
             </div>
         </section>
     </div>
 </div>
 
-<section class="section section-sm">
+<div class="container topic-list">
-    <div class="container">
+    <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 %}

templates/section.html

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