Trying to get a more Django-traditional template

More like, trying to get a more Django-traditional template for my
semantic layout, and going for a modern, Flex-based holy-grail layout
for the style.

It's not quite coming together.  This isn't a skill I use often, so
I'm having a headache figuring out all of the nuances.

content/docs/zola/filters.json

@@ -18,7 +18,7 @@
         },
         {
             "dd": "Takes two strings as arguments, replaces the first with the second",
-            "dt": "replace"
+            "dt": "replace(from=\"\", to=\"\")"
         },
         {
             "dd": "Escapes quoted strings",
@@ -46,11 +46,11 @@
         },
         {
             "dd": "Removes leading characters that match a pattern",
-            "dt": "trim_start_matches"
+            "dt": "trim_start_matches(pat=\"\")"
         },
         {
             "dd": "Removes trailing characters that match a pattern",
-            "dt": "trim_end_matches"
+            "dt": "trim_end_matches(pat=\"\")"
         },
         {
             "dd": "Truncates the string to the length specified",
@@ -78,11 +78,11 @@
         },
         {
             "dd": "Returns the nth element of an array",
-            "dt": "nth"
+            "dt": "nth(n=2)"
         },
         {
             "dd": "Joins an array with a delimeter",
-            "dt": "join"
+            "dt": "join(sep=\"\")"
         },
         {
             "dd": "Returns the length of an array, an object, or a string",
@@ -94,31 +94,31 @@
         },
         {
             "dd": "Sorts an array into ascending order. You can sort objects by providing a fieldname argument",
-            "dt": "sort"
+            "dt": "sort(attribute=\"fieldname.subname\")"
         },
         {
             "dd": "Removes duplicate items from an array. You can filter objects by providing a fieldname argument",
-            "dt": "unique"
+            "dt": "unique(attribute=\"fieldname\")"
         },
         {
             "dd": "Slices an array by the given start and end parameter",
-            "dt": "slice"
+            "dt": "slice(start=n, end=m)"
         },
         {
             "dd": "Groups an array using the required attribute argument",
-            "dt": "group_by"
+            "dt": "group_by(attribute=\"fieldname\")"
         },
         {
             "dd": "Filters the array values, returning objects whose attribute is equal to the argument",
-            "dt": "filter"
+            "dt": "filter(attribute=\"fieldname\", value=\"value\")"
         },
         {
             "dd": "Retrieves an attribute from each object in an array",
-            "dt": "map"
+            "dt": "map(attribute=\"fieldname\")"
         },
         {
             "dd": "Appends values to an array",
-            "dt": "concat"
+            "dt": "concat(with=otherarray)"
         },
         {
             "dd": "Performs classic (%-based) URL encoding",
@@ -130,7 +130,7 @@
         },
         {
             "dd": "Can return an alternative text if the argument is greater than one",
-            "dt": "pluralize"
+            "dt": "pluralize(singular=\"y\", plural=\"ies\")"
         },
         {
             "dd": "Returns a number rounded",
@@ -142,7 +142,7 @@
         },
         {
             "dd": "Parses a timestamp into a date(time) string",
-            "dt": "date"
+            "dt": "date(format=\"%Y-%m-%d\")"
         },
         {
             "dd": "Escapes a string's HTML",
@@ -158,11 +158,11 @@
         },
         {
             "dd": "Accesses a value from an object when the key is not a valid identifier.",
-            "dt": "get"
+            "dt": "get(key=\"posts/content\")"
         },
         {
             "dd": "Splits a string into an array of strings, separated by a pattern.",
-            "dt": "split"
+            "dt": "split(pat=\"\")"
         },
         {
             "dd": "Converts a value into an integer.",
@@ -173,8 +173,8 @@
             "dt": "float"
         },
         {
-            "dd": "Transforms a value into its JSON representation",
+            "dd": "Transforms a value into its JSON representation. Argument is optional.",
-            "dt": "json_encode"
+            "dt": "json_encode(pretty=true)"
         },
         {
             "dd": "Returns a string representation of the value.",
@@ -182,11 +182,11 @@
         },
         {
             "dd": "Provides a default value if the name is not present in the context",
-            "dt": "default"
+            "dt": "default(value=1)"
         },
         {
-            "dd": "Converts the variable contents from markdown to HTML",
+            "dd": "Converts the variable contents from markdown to HTML. Argument is optional.",
-            "dt": "markdown"
+            "dt": "markdown(inline=true)"
         },
         {
             "dd": "Encode the variable to base64",
@@ -197,8 +197,8 @@
             "dt": "base64_decode"
         },
         {
-            "dd": "Format a number in a variety of ways",
+            "dd": "Format a number into its string representation. Argument is optional.",
-            "dt": "num_format"
+            "dt": "num_format(locale=\"\")"
         }
     ]
 }

content/docs/zola/predicates.json

@@ -6,7 +6,7 @@
         { "dt": "even", "dd": " the given variable is an even number." },
         { "dt": "string", "dd": " the given variable is a string." },
         { "dt": "number", "dd": " the given variable is a number." },
-        { "dt": "divisibleby", "dd": " the given expression is divisible by the arg given." },
+        { "dt": "divisibleby(num)", "dd": " the given expression is divisible by the arg given." },
         {
             "dt": "iterable",
             "dd": " Returns true if the given variable can be iterated over in Tera (i.e. is an array/tuple or an object)."

sass/base.scss

@@ -0,0 +1,14 @@
+@import "design/_normalize";
+@import "design/_scales";
+@import "design/_typography";
+@import "design/fonts/_nunito";
+@import "design/fonts/_sauna_mono";
+
+:root {
+    --default-font-size: var(--step-0);
+    --background-color: #ffffff;
+    --text-color: #1f000d;
+}
+
+
+

sass/design/_normalize.css

@@ -55,6 +55,7 @@ template,
 [hidden] {
     display: none;
 }
+
 a:active,
 a:hover {
     outline-width: 0;
@@ -80,14 +81,6 @@ dfn {
     font-style: italic;
 }
 
-h1 {
-    font-size: 2em;
-    margin: 0.67em 0;
-}
-
-mark {
-}
-
 small {
     font-size: 80%;
 }
@@ -193,12 +186,6 @@ input:-moz-focusring {
     outline: 1px dotted ButtonText;
 }
 
-fieldset {
-    border: 1px solid #c0c0c0;
-    margin: 0 2px;
-    padding: 0.35em 0.625em 0.75em;
-}
-
 legend {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
@@ -283,7 +270,8 @@ address {
 
 ol,
 ul,
-dl {
+dl,
+menu {
     margin-top: 0;
     margin-bottom: 1rem;
 }
@@ -375,7 +363,6 @@ table {
 caption {
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
-    color: #818a91;
     text-align: left;
     caption-side: bottom;
 }

sass/layouts/page.scss

@@ -0,0 +1,59 @@
+:root {
+    --inner-border-color: hsl(275, 15%, 92%);
+}
+
+.main {
+    display: flex;
+    flex-wrap: nowrap;
+
+    @mixin sidebar-gap {
+        position: sticky;
+        top: var(--space-xl);
+        height: calc(100vh - var(--space-xl));
+    }   
+
+    .notes-sidebar {
+        order: 2;
+
+        @media screen and (min-width: 768px) {
+            @include sidebar-gap;
+            flex: 0 0 31.25%;
+            order: 0;
+            border-right: 1px solid var(--inner-border-color);
+        }
+
+        @media(min-width: 992px) {
+            flex: 0 1 25%;
+        }
+    }
+
+    .page-sidebar {
+        display: none;
+
+        @media screen and (min-width: 992px) {
+            display: block;
+            order: 2;
+            flex: 0 0 18.75%;
+            border-left: 1px solid var(--inner-border-color);
+            @include sidebar-gap;
+        }
+    }
+
+    article {
+        order: 1;
+        padding-bottom: 3rem;
+        
+        @media screen and (min-width: 768px) {
+            flex: 0 0 68.75%;
+            order: 1;
+        }
+
+        @media screen and (min-width: 992px) {
+            flex: 0 1 56.25%;
+        }
+    }
+}
+    
+
+    
+        

sass/main.scss

@@ -1,19 +1,14 @@
-@import "design/normalize";
+@import "./base.scss";
-@import "design/definitions";
-@import "design/fonts/nunito";
-@import "design/fonts/sauna_mono";
-@import "design/typography";
-@import "design/_scales";
 @import "components/code";
 
 :root {
-    font-size: calc(clamp(0.875rem, 0.725rem + 0.6666vw, 1.125rem));
+    font-size: var(--default-font-size);
     font-family: "Nunito", sans-serif;
 }
 
 body {
     padding-top: 3.625rem;
-    font-size: calc(clamp(0.875rem, 0.725rem + 0.6666vw, 1.125rem));
+    font-size: var(--default-font-size);
     font-family: "Nunito", sans-serif;
     font-weight: 400;
 }
@@ -26,9 +21,9 @@ header.navbar {
     background-color: var(--background-color, #ffffff);
 
     .identity {
-        margin-right: 1rem;
+        margin-right: var(--space-s);
-        font-size: 1.375rem;
+        font-size: var(--step-2);
-        padding: 0.325rem 0 0.325rem 0;
+        padding: var(--space-3xs) 0 var(--space-3xs) 0;
         font-weight: 700;
         white-space: nowrap;
         color: var(--text-color, #1f000d);
@@ -37,20 +32,21 @@ header.navbar {
 }
 
 article.text-article {
-    max-width: 30em;
+    max-width: 32em;
 }
 
 .container {
-    padding-right: calc(clamp(0.5rem, -0.7rem + 5.3333vw, 2.5rem));
+    padding: 0 var(--space-xs-m) 0 var(--space-xs-m);
-    padding-left: calc(clamp(0.5rem, -0.7rem + 5.3333vw, 2.5rem));
     margin-right: auto;
     margin-left: auto;
 }
 
+// Left sidebar
+
 .topic-list {
-    margin-top: 1.5rem;
+    margin-top: var(--space-s);
     @media screen and (min-width: 541px) {
-        margin-top: 3.5rem;
+        margin-top: var(--space-l);
     }
 
     > h2 {

templates/docs/section.html

@@ -1,47 +1,21 @@
 {% extends "section.html" %}
 
-{% block body %}
+{% block stylesheets %}
-{% set page_class = "docs list" %}
+    <link rel="stylesheet" href="{{ get_url(path="page.css") | safe }}">
-{% endblock body %}
+{% endblock %}
-
-{% block header %}
-{% set current_section = "docs" %}
-{{ header::header(current_section=current_section)}}
-{% endblock header %}
 
 {% block content %}
-<div class="wrap container" role="document">
+<div class="container" role="document">
-  <div class="content">
+  <div class="main">
-    <div class="row justify-content-center">
+    <div class="notes-sidebar">
-      <div class="col-md-12 col-lg-10 col-xxl-8">
+    Sidebar!
-        <article>
+    </div>
-          <h1 class="text-center">{{ section.title }}</h1>
+    <article>
-          <div class="text-center">{{ section.content | safe }}</div>
+      <h1 class="text-center">{{ section.title }}</h1>
-          <div class="card-list">
+      <div class="text-center">{{ section.content | safe }}</div>
-            {% set index_path = current_path ~ "_index.md" | trim_start_matches(pat="/") %}
+    </article>
-            {% set index = get_section(path=index_path) %}
+    <div class="page-sidebar">
-            {% for page in index.pages %}
+    Page!
-            <div class="card my-3">
-              <div class="card-body">
-                <a class="stretched-link" href="{{ page.permalink }}">{{ page.title }} &rarr;</a>
-              </div>
-            </div>
-            {% endfor %}
-            {% for s in index.subsections %}
-            {% set subsection = get_section(path=s) %}
-            {% if subsection.pages %}
-            {% for page in subsection.pages %}
-            <div class="card my-3">
-              <div class="card-body">
-                <a class="stretched-link" href="{{ page.permalink }}">{{ page.title }} &rarr;</a>
-              </div>
-            </div>
-            {% endfor %}                                    
-            {% endif %}
-            {% endfor %}
-          </div>
-        </article>
-      </div>
     </div>
   </div>
 </div>