From e5d686fad6c0674e7e8a59820747b98eb6f49394 Mon Sep 17 00:00:00 2001
From: Toby Vincent <tobyv13@gmail.com>
Date: Thu, 18 May 2023 19:59:47 -0500
Subject: feat: improve styling and rewrite macros

---
 config.toml            |  18 ++---
 sass/_code.scss        |  27 +++++++
 sass/_colors.scss      |  71 +++++++++++++++++
 sass/_syntax.scss      | 207 +++++++++++++++++++++++++++++++++++++++++++++++++
 sass/style.scss        | 204 ++++++++++++++++++------------------------------
 templates/index.html   |  21 ++---
 templates/macros.html  |  83 ++++++--------------
 templates/section.html |   2 +-
 8 files changed, 414 insertions(+), 219 deletions(-)
 create mode 100644 sass/_code.scss
 create mode 100644 sass/_colors.scss
 create mode 100644 sass/_syntax.scss

diff --git a/config.toml b/config.toml
index 8608327..966ef9e 100644
--- a/config.toml
+++ b/config.toml
@@ -1,24 +1,18 @@
 base_url = "https://tobyvin.dev"
 title = "~tobyvin"
 compile_sass = true
-generate_feed = true
 minify_html = true
-taxonomies = [{ name = "tags", feed = true }]
-
+generate_feed = true
 
 [markdown]
 highlight_code = true
-highlight_theme = "gruvbox-dark"
+highlight_theme = "css"
+highlight_themes_css = [
+    { theme = "gruvbox-dark", filename = "../public/syntax-theme-dark.css" },
+    { theme = "gruvbox-light", filename = "../public/syntax-theme-light.css" },
+]
 
 [extra]
 repository = "https://git.sr.ht/~tobyvin/tobyvin.dev"
 license = "MIT"
 author = "Toby Vincent"
-email = "contact@tobyvin.dev"
-pgp = "C8F6E06F5C8E2634"
-github = "tobyvin"
-sourcehut = "~tobyvin"
-linkedin = "tobyvin"
-twitter = "toby_wan94"
-favicon = ""
-headerImage = ""
diff --git a/sass/_code.scss b/sass/_code.scss
new file mode 100644
index 0000000..fd0682f
--- /dev/null
+++ b/sass/_code.scss
@@ -0,0 +1,27 @@
+pre[data-linenos] {
+  padding: 1rem 0;
+}
+
+pre {
+  padding: 1rem;
+  overflow: auto;
+
+  table td {
+    padding: 0;
+  }
+
+  table td:nth-of-type(1) {
+    text-align: center;
+    user-select: none;
+  }
+
+  mark {
+    display: block;
+    background-color: var(--bg1);
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+}
diff --git a/sass/_colors.scss b/sass/_colors.scss
new file mode 100644
index 0000000..75199bf
--- /dev/null
+++ b/sass/_colors.scss
@@ -0,0 +1,71 @@
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg_h: #1d2021;
+    --bg_s: #32302f;
+    --bg: #282828;
+    --bg1: #3c3836;
+    --bg2: #504945;
+    --bg3: #665c54;
+    --bg4: #7c6f64;
+
+    --fg: #fbf1c7;
+    --fg1: #ebdbb2;
+    --fg2: #d5c4a1;
+    --fg3: #bdae93;
+    --fg4: #a89984;
+
+    --red: #fb4934;
+    --green: #b8bb26;
+    --yellow: #fabd2f;
+    --blue: #83a598;
+    --purple: #d3869b;
+    --aqua: #8ec07c;
+    --gray: #928374;
+    --orange: #fe8019;
+
+    --red-dim: #cc2412;
+    --green-dim: #98971a;
+    --yellow-dim: #d79921;
+    --blue-dim: #458588;
+    --purple-dim: #b16286;
+    --aqua-dim: #689d6a;
+    --gray-dim: #a89984;
+    --orange-dim: #d65d0e;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg_h: #f9f5d7;
+    --bg_s: #f2e5bc;
+    --bg: #fbf1c7;
+    --bg1: #ebdbb2;
+    --bg2: #d5c4a1;
+    --bg3: #bdae93;
+    --bg4: #a89984;
+
+    --fg: #282828;
+    --fg1: #3c3836;
+    --fg2: #504945;
+    --fg3: #665c54;
+    --fg4: #7c6f64;
+
+    --red: #9d0006;
+    --green: #79740e;
+    --yellow: #b57614;
+    --blue: #076678;
+    --purple: #8f3f71;
+    --aqua: #427b58;
+    --orange: #af3a03;
+    --gray: #928374;
+
+    --red-dim: #cc2412;
+    --green-dim: #98971a;
+    --yellow-dim: #d79921;
+    --blue-dim: #458598;
+    --purple-dim: #b16286;
+    --aqua-dim: #689d6a;
+    --orange-dim: #d65d0e;
+    --gray-dim: #7c6f64;
+  }
+}
diff --git a/sass/_syntax.scss b/sass/_syntax.scss
new file mode 100644
index 0000000..d4cafa0
--- /dev/null
+++ b/sass/_syntax.scss
@@ -0,0 +1,207 @@
+/*
+ * theme "gruvbox" generated by syntect
+ */
+
+.z-code {
+  color: var(--fg);
+  background-color: var(--bg_h);
+}
+
+.z-punctuation.z-definition.z-tag {
+  color: var(--blue);
+}
+.z-punctuation.z-definition.z-entity {
+  color: var(--purple);
+}
+.z-constant {
+  color: var(--purple);
+}
+.z-constant.z-character.z-escape {
+  color: var(--green);
+}
+.z-constant.z-other {
+  color: var(--fg);
+}
+.z-entity {
+  color: var(--aqua);
+}
+.z-keyword.z-operator.z-comparison,
+.z-keyword.z-operator,
+.z-keyword.z-operator.z-symbolic,
+.z-keyword.z-operator.z-string,
+.z-keyword.z-operator.z-assignment,
+.z-keyword.z-operator.z-arithmetic,
+.z-keyword.z-operator.z-class,
+.z-keyword.z-operator.z-key,
+.z-keyword.z-operator.z-logical {
+  color: var(--orange);
+}
+.z-keyword,
+.z-keyword.z-operator.z-new,
+.z-keyword.z-other,
+.z-keyword.z-control {
+  color: var(--red);
+}
+.z-storage {
+  color: var(--red);
+}
+.z-string,
+.z-string.z-unquoted.z-heredoc .z-string {
+  color: var(--green);
+}
+.z-comment {
+  color: var(--gray);
+  font-style: italic;
+}
+.z-string.z-regexp .z-constant.z-character.z-escape {
+  color: var(--green);
+}
+.z-support {
+  color: var(--yellow);
+}
+.z-variable {
+  color: var(--fg);
+}
+.z-variable.z-language {
+  color: var(--fg);
+}
+.z-meta.z-function-call {
+  color: var(--fg);
+}
+.z-invalid {
+  color: var(--fg);
+  background-color: var(--red-dim);
+}
+.z-text .z-source,
+.z-string.z-unquoted.z-heredoc,
+.z-source .z-source {
+  color: var(--fg);
+}
+.z-string.z-quoted .z-source {
+  color: var(--green);
+}
+.z-string {
+  color: var(--green);
+}
+.z-support.z-constant {
+  color: var(--yellow);
+}
+.z-support.z-class {
+  color: var(--aqua);
+}
+.z-entity.z-name.z-tag {
+  color: var(--aqua);
+  font-weight: bold;
+}
+.z-meta.z-tag,
+.z-meta.z-tag .z-entity {
+  color: var(--aqua);
+}
+.z-constant.z-other.z-color.z-rgb-value {
+  color: var(--blue);
+}
+.z-meta.z-selector.z-css .z-entity.z-name.z-tag {
+  color: var(--red);
+}
+.z-meta.z-selector.z-css,
+.z-entity.z-other.z-attribute-name.z-id {
+  color: var(--green);
+}
+.z-meta.z-selector.z-css .z-entity.z-other.z-attribute-name.z-class {
+  color: var(--green);
+}
+.z-support.z-type.z-property-name.z-css {
+  color: var(--aqua);
+}
+.z-meta.z-preprocessor.z-at-rule .z-keyword.z-control.z-at-rule {
+  color: var(--yellow);
+}
+.z-meta.z-property-value .z-constant {
+  color: var(--yellow);
+}
+.z-meta.z-property-value .z-support.z-constant.z-named-color.z-css {
+  color: var(--orange);
+}
+.z-meta.z-constructor.z-argument.z-css {
+  color: var(--yellow);
+}
+.z-meta.z-diff,
+.z-meta.z-diff.z-header {
+  color: var(--blue);
+}
+.z-markup.z-deleted {
+  color: var(--red);
+}
+.z-markup.z-changed {
+  color: var(--yellow);
+}
+.z-markup.z-inserted {
+  color: var(--aqua);
+}
+.z-markup.z-bold {
+  font-weight: bold;
+}
+.z-markup.z-italic {
+  font-style: italic;
+}
+.z-markup.z-heading {
+  color: var(--aqua);
+  font-weight: bold;
+}
+.z-entity.z-name.z-type.z-class.z-php {
+  color: var(--aqua);
+}
+.z-keyword.z-other.z-phpdoc {
+  color: var(--gray);
+}
+.z-constant.z-numeric.z-css,
+.z-keyword.z-other.z-unit.z-css {
+  color: var(--purple);
+}
+.z-punctuation.z-definition.z-entity.z-css {
+  color: var(--green);
+}
+.z-variable.z-language.z-js {
+  color: var(--yellow);
+}
+.z-string.z-unquoted.z-label.z-js {
+  color: var(--fg);
+}
+.z-constant.z-other.z-table-name.z-sql {
+  color: var(--green);
+}
+.z-constant.z-other.z-database-name.z-sql {
+  color: var(--green);
+}
+.z-storage.z-type.z-dired.z-item.z-directory,
+.z-dired.z-item.z-directory {
+  color: var(--aqua);
+}
+.z-orgmode.z-link {
+  color: var(--yellow);
+  font-style: underline;
+}
+.z-orgmode.z-page {
+  color: var(--green);
+}
+.z-orgmode.z-break {
+  color: var(--purple);
+}
+.z-orgmode.z-headline {
+  color: var(--aqua);
+}
+.z-orgmode.z-tack {
+  color: var(--yellow);
+}
+.z-orgmode.z-follow_up {
+  color: var(--yellow);
+}
+.z-orgmode.z-checkbox {
+  color: var(--yellow);
+}
+.z-orgmode.z-checkbox.z-summary {
+  color: var(--yellow);
+}
+.z-orgmode.z-tags {
+  color: var(--red);
+}
diff --git a/sass/style.scss b/sass/style.scss
index 833d2c7..565b1a2 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -1,81 +1,14 @@
-// gruvbox colors
-@media (prefers-color-scheme: dark) {
-  :root {
-    // --bg: #1d2021; // hard
-    // --bg: #32302f; // soft
-    --bg: #282828;
-    --bg1: #3c3836;
-    --bg2: #504945;
-    --bg3: #665c54;
-    --bg4: #7c6f64;
-
-    --fg: #fbf1c7;
-    --fg1: #ebdbb2;
-    --fg2: #d5c4a1;
-    --fg3: #bdae93;
-    --fg4: #a89984;
-
-    --red: #fb4934;
-    --green: #b8bb26;
-    --yellow: #fabd2f;
-    --blue: #83a598;
-    --purple: #d3869b;
-    --aqua: #8ec07c;
-    --gray: #928374;
-    --orange: #fe8019;
-
-    --red-dim: #cc2412;
-    --green-dim: #98971a;
-    --yellow-dim: #d79921;
-    --blue-dim: #458588;
-    --purple-dim: #b16286;
-    --aqua-dim: #689d6a;
-    --gray-dim: #a89984;
-    --orange-dim: #d65d0e;
-  }
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    // --bg: #f9f5d7; // hard
-    // --bg: #f2e5bc; // soft
-    --bg: #fbf1c7;
-    --bg1: #ebdbb2;
-    --bg2: #d5c4a1;
-    --bg3: #bdae93;
-    --bg4: #a89984;
-
-    --fg: #282828;
-    --fg1: #3c3836;
-    --fg2: #504945;
-    --fg3: #665c54;
-    --fg4: #7c6f64;
-
-    --red: #9d0006;
-    --green: #79740e;
-    --yellow: #b57614;
-    --blue: #076678;
-    --purple: #8f3f71;
-    --aqua: #427b58;
-    --orange: #af3a03;
-    --gray: #928374;
-
-    --red-dim: #cc2412;
-    --green-dim: #98971a;
-    --yellow-dim: #d79921;
-    --blue-dim: #458598;
-    --purple-dim: #b16286;
-    --aqua-dim: #689d6a;
-    --orange-dim: #d65d0e;
-    --gray-dim: #7c6f64;
-  }
-}
+@import "colors", "code", "syntax";
 
 html {
-  background: var(--bg);
+  background: var(--bg_s);
   color: var(--fg);
   font-size: 14pt;
   font-family: monospace;
+
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
 
 ::selection {
@@ -84,83 +17,94 @@ html {
 }
 
 body {
-  line-height: 1.4;
+  height: 100%;
+  width: 100%;
   max-width: 900px;
-  margin: 0 auto;
-}
-
-a {
-  color: var(--blue);
-}
-
-a:visited {
-  color: var(--blue-dim);
-}
-
-a:hover {
-  text-decoration: none;
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto 1;
+  line-height: 1.4;
+  align-self: center;
 }
 
-a:active {
-  background: var(--fg1);
-}
+body > header > nav {
+  display: flex;
 
-header > h2:has(+ p) {
-  margin-bottom: 0;
-}
+  h1 {
+    display: flex;
+  }
 
-header > h2 + p {
-  margin-top: 0;
-}
+  ul {
+    display: flex;
+    margin-left: auto;
+    column-gap: 1rem;
 
-nav a {
-  color: var(--aqua);
-  font-weight: bold;
-  text-decoration: none;
-}
+    list-style: none;
 
-nav a.active {
-  color: var(--orange-dim);
-}
+    li {
+      display: flex;
+      align-items: center;
+    }
+  }
 
-nav a:hover {
-  text-decoration: underline;
-}
+  a,
+  a:visited {
+    font-size: 1.2rem;
+    color: var(--gray);
+    font-weight: bold;
+    text-decoration: none;
+  }
 
-nav a:active {
-  background: var(--fg);
-}
+  a.active {
+    color: var(--orange-dim);
+  }
 
-nav.toc {
-  text-align: left;
-  font-size: 0.9rem;
-  margin-bottom: 2rem;
+  a:hover {
+    text-decoration: underline;
+  }
 }
 
-header.banner > nav {
-  display: flex;
-  justify-content: space-between;
+article,
+aside,
+main,
+nav,
+section {
+  header {
+    h1 {
+      color: var(--orange);
+      margin-bottom: 0;
+      + * {
+        color: var(--orange);
+        margin-top: 0;
+      }
+    }
+
+    nav {
+      text-align: left;
+      font-size: 0.9rem;
+      margin-bottom: 2rem;
+    }
+  }
 }
 
-header.banner > nav h1 {
-  display: flex;
+footer {
+  text-align: center;
+  font-size: 0.8rem;
+  margin-top: auto;
 }
 
-header.banner > nav ul {
-  display: flex;
-  list-style: none;
+a {
+  color: var(--aqua);
 }
 
-header.banner > nav li + li {
-  margin-inline-start: 1em;
+a:visited {
+  color: var(--aqua-dim);
 }
 
-header.banner > nav a {
-  font-size: 1.2rem;
+a:hover {
+  text-decoration: none;
 }
 
-footer {
-  margin-top: 2rem;
-  text-align: center;
-  font-size: 0.8rem;
+a:active {
+  background: var(--orange-dim);
 }
diff --git a/templates/index.html b/templates/index.html
index 2130278..c7e55b6 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,4 +1,5 @@
-{% import "macros.html" as macros -%}
+{# vim: set ft=htmldjango: #}
+{% import "macros.html" as macros %}
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -18,28 +19,18 @@
           title="RSS"
           href="{{ get_url(path="rss.xml") | safe }}" />
     <link rel="stylesheet" type="text/css" href="/style.css" />
-    <link rel="stylesheet"
-          type="text/css"
-          href="/syntax-theme-dark.css"
-          media="(prefers-color-scheme: dark)" />
-    <link rel="stylesheet"
-          type="text/css"
-          href="/syntax-theme-light.css"
-          media="(prefers-color-scheme: light)" />
   </head>
   <body>
-    <header class="banner">
+    <header>
       <nav>
         <h1>{{ macros::nav_item(name=config.title, url=config.base_url) }}</h1>
         <ul>
           {% set root = get_section(path="_index.md") %}
           {% set pages = root.pages | sort(attribute="title") %}
-          {% for p in pages %}
-            <li>{{ macros::nav_item(name=p.title,url=p.permalink) }}</li>
-          {%- endfor -%}
+          {% for p in pages %}<li>{{ macros::nav_item(name=p.title,url=p.permalink) }}</li>{% endfor %}
           {% set subsections = root.subsections | sort %}
           {% for p in subsections %}
-            {%- set s = get_section(path=p) %}
+            {% set s = get_section(path=p) %}
             <li>{{ macros::nav_item(name=s.title,url=s.permalink) }}</li>
           {% endfor %}
         </ul>
@@ -49,7 +40,7 @@
       {% block content %}
         <header>
           <h1>{{ section.title | safe }}</h1>
-          <h3>{{ section.description | markdown(inline=true) | safe }}</h3>
+          <h3>{{ section.description | default(value="") | markdown(inline=true) | safe }}</h3>
         </header>
         {{ section.content | safe }}
       {% endblock content %}
diff --git a/templates/macros.html b/templates/macros.html
index 6c6020a..12591b5 100644
--- a/templates/macros.html
+++ b/templates/macros.html
@@ -1,70 +1,31 @@
-{% macro tags(tags) %}
-  {% for tag in tags -%}
-    <a href="{{ get_taxonomy_url(kind="tags", name=tag ) }}">#{{ tag }}</a>
-  {% endfor -%}
-{% endmacro tags %}
+{# vim: set ft=htmldjango: #}
 {% macro nav_item(name, url) %}
-  {%- if page %}
-    {%- set this = page %}
-  {%- elif section %}
-    {%- set this = section %}
-  {%- endif %}
-  <a {% if this.permalink == url %}class="active"{%- endif %} href={{ url }}>{{ name }}</a>
+  {% if page %}
+    {% set curr_url = get_url(path=page.path) %}
+  {% elif section %}
+    {% set curr_url = get_url(path=section.path) %}
+  {% endif %}
+  {% set url = url | trim_end_matches(pat="/") %}
+  <a {% if curr_url == url %}class="active"{% endif %} href={{ url }}>{{ name }}</a>
 {% endmacro nav %}
+{% macro toc_item(item, depth=0) %}
+  <li>
+    <a href="{{ item.permalink | safe }}">{{ item.title }}</a>
+    {% if depth < 6 and item.children %}
+      <ul>
+        {% for child in item.children %}{{ self::toc_item(item=child, depth=depth + 1) }}{% endfor %}
+      </ul>
+    {% endif %}
+  </li>
+{% endmacro %}
 {% macro toc(page) %}
   {% if page.toc %}
+    {%- set len = page.toc | length -%}
+  {% endif %}
+  {% if len > 1 %}
     <nav class="toc">
       <ul>
-        {% for h1 in page.toc %}
-          <li>
-            <a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
-            {% if h1.children %}
-              <ul>
-                {% for h2 in h1.children %}
-                  <li>
-                    <a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
-                  </li>
-                  {% if h2.children %}
-                    <ul>
-                      {% for h3 in h2.children %}
-                        <li>
-                          <a href="{{ h3.permalink | safe }}">{{ h3.title }}</a>
-                          {% if h3.children %}
-                            <ul>
-                              {% for h4 in h3.children %}
-                                <li>
-                                  <a href="{{ h4.permalink | safe }}">{{ h4.title }}</a>
-                                </li>
-                                {% if h4.children %}
-                                  <ul>
-                                    {% for h5 in h4.children %}
-                                      <li>
-                                        <a href="{{ h5.permalink | safe }}">{{ h5.title }}</a>
-                                        {% if h5.children %}
-                                          <ul>
-                                            {% for h6 in h5.children %}
-                                              <li>
-                                                <a href="{{ h5.permalink | safe }}">{{ h6.title }}</a>
-                                              </li>
-                                            {% endfor %}
-                                          </ul>
-                                        {% endif %}
-                                      </li>
-                                    {% endfor %}
-                                  </ul>
-                                {% endif %}
-                              {% endfor %}
-                            </ul>
-                          {% endif %}
-                        </li>
-                      {% endfor %}
-                    </ul>
-                  {% endif %}
-                {% endfor %}
-              </ul>
-            {% endif %}
-          </li>
-        {% endfor %}
+        {% for child in page.toc %}{{ self::toc_item(item=child) }}{% endfor %}
       </ul>
     </nav>
   {% endif %}
diff --git a/templates/section.html b/templates/section.html
index 4d390aa..57fe0aa 100644
--- a/templates/section.html
+++ b/templates/section.html
@@ -1,6 +1,6 @@
 {% extends "index.html" %}
 {% block content %}
-  <h1>{{ section.title }}</h1>
+  {{ super() }}
   <div>
     {% for page in section.pages %}
       <article>
-- 
cgit v1.2.3-70-g09d2