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.
Merge remote-tracking branch 'refs/remotes/origin/master'
2022-04-25 18:28:25 -07:00 · 2022-04-25 13:24:52 -07:00 · 2022-04-25 13:24:39 -07:00
26 changed files with 545 additions and 186 deletions
--- a/config.toml
+++ b/config.toml
@ -7,6 +7,8 @@ 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
--- a/content/_index.md
+++ b/content/_index.md
@ -1,5 +1,5 @@
 +++
-title = "Elf's Notes"
+title = "Brains!!!"

 # The homepage contents
 [extra]
--- a/content/docs/zola/_index.md
+++ b/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 = "section.html"
+template = "docs/section.html"
 sort_by = "weight"
 weight = 4
 draft = false
@ -68,6 +68,21 @@ 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`:
@ -104,8 +119,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 given one of the members of the array?
-  - maps: is the arg given a key of the map?
+  - arrays: is the arg one of the members of the array?
+  - maps: is the arg a key of the map?
 - `matching(regexp)`: Returns true if the given variable is a string and matches the regex in the argument.

 #### `for`
@ -133,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
@ -169,10 +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 %}
@ -180,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.
--- a/sass/components/_code.scss
+++ b/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;
+}
--- a/sass/design/_definitions.scss
+++ b/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);
 }
    
--- a/sass/design/_normalize.css
+++ b/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;
-  -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;
 }
--- a/sass/design/_typography.scss
+++ b/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;
+    }
+}
--- a/sass/design/fonts/_nunito.scss
+++ b/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+ */
 }
+
--- a/sass/design/fonts/_sauna_mono.scss
+++ b/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+ */
+}
--- a/sass/main.scss
+++ b/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-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%;
+            }
+        }
+    }
+}
+
--- a/static/fonts/sauna-mono/.uuid
+++ b/static/fonts/sauna-mono/.uuid
@ -0,0 +1 @@
+f43cc8c9-a393-49d5-9e49-793a866cef52
--- a/static/fonts/sauna-mono/SaunaMonoPro-Bold.otf
+++ b/static/fonts/sauna-mono/SaunaMonoPro-Bold.otf
--- a/static/fonts/sauna-mono/SaunaMonoPro-Bold.woff
+++ b/static/fonts/sauna-mono/SaunaMonoPro-Bold.woff
--- a/static/fonts/sauna-mono/SaunaMonoPro-Bold.woff2
+++ b/static/fonts/sauna-mono/SaunaMonoPro-Bold.woff2
--- a/static/fonts/sauna-mono/SaunaMonoPro-BoldItalic.otf
+++ b/static/fonts/sauna-mono/SaunaMonoPro-BoldItalic.otf
--- a/static/fonts/sauna-mono/SaunaMonoPro-BoldItalic.woff
+++ b/static/fonts/sauna-mono/SaunaMonoPro-BoldItalic.woff
--- a/static/fonts/sauna-mono/SaunaMonoPro-BoldItalic.woff2
+++ b/static/fonts/sauna-mono/SaunaMonoPro-BoldItalic.woff2
--- a/static/fonts/sauna-mono/SaunaMonoPro-Regular.otf
+++ b/static/fonts/sauna-mono/SaunaMonoPro-Regular.otf
--- a/static/fonts/sauna-mono/SaunaMonoPro-Regular.woff
+++ b/static/fonts/sauna-mono/SaunaMonoPro-Regular.woff
--- a/static/fonts/sauna-mono/SaunaMonoPro-Regular.woff2
+++ b/static/fonts/sauna-mono/SaunaMonoPro-Regular.woff2
--- a/static/fonts/sauna-mono/SaunaMonoPro-RegularItalic.otf
+++ b/static/fonts/sauna-mono/SaunaMonoPro-RegularItalic.otf
--- a/static/fonts/sauna-mono/SaunaMonoPro-RegularItalic.woff
+++ b/static/fonts/sauna-mono/SaunaMonoPro-RegularItalic.woff
--- a/static/fonts/sauna-mono/SaunaMonoPro-RegularItalic.woff2
+++ b/static/fonts/sauna-mono/SaunaMonoPro-RegularItalic.woff2
--- a/templates/docs/section.html
+++ b/templates/docs/section.html
@ -6,7 +6,7 @@

 {% block header %}
 {% set current_section = "docs" %}
-{{ macros_header::header(current_section=current_section)}}
+{{ header::header(current_section=current_section)}}
 {% endblock header %}

 {% block content %}
--- a/templates/index.html
+++ b/templates/index.html
@ -1,4 +1,4 @@
-{% extends "base.html" %} 
+{% extends "base.html" %}

 {% block content %}
 <div class="container" role="document">
@ -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 %}
--- a/templates/section.html
+++ b/templates/section.html
@ -2,28 +2,6 @@

 {% 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 %}
@ -37,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>
Author	SHA1	Message	Date
Elf M. Sternberg	8ae58c95a8	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.	2022-04-25 18:28:25 -07:00
Elf M. Sternberg	d01e184f34	Merge remote-tracking branch 'refs/remotes/origin/master' * refs/remotes/origin/master: Still mucking with the width calculations.	2022-04-25 13:24:52 -07:00
Elf M. Sternberg	0a543d02aa	Trying to get the section looking good.	2022-04-25 13:24:39 -07:00