feat: improve consistency of styling

Mostly done through writing macro for templating articles
author: Toby Vincent <tobyv13@gmail.com> 2023-05-19 16:28:25 -0500
committer: Toby Vincent <tobyv13@gmail.com> 2023-05-19 16:28:25 -0500
commit: 1b04d37d1ecb61a357917663c5449b68f0c88c26 (patch)
tree: 396d5d6b9870f092d5a2e5a1b77818b580f6496d
parent: a68d0a7515eef730cd78523aec6eb918aa51c2ee (diff)
6 files changed, 150 insertions, 101 deletions
diff --git a/sass/style.scss b/sass/style.scss
index 1645ee2..c6004b8 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -16,6 +16,34 @@ html {
   background-color: var(--fg);
 }
 
+ul.simple {
+  list-style: none;
+}
+
+a {
+  color: var(--aqua);
+
+  &:visited {
+    color: var(--aqua-dim);
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:active {
+    background: var(--orange-dim);
+  }
+}
+
+nav a {
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
 body {
   height: 100%;
   width: 100%;
@@ -25,86 +53,88 @@ body {
   margin: 0 auto 1;
   line-height: 1.4;
   align-self: center;
-}
-
-body > header > nav {
-  display: flex;
-
-  h1 {
-    display: flex;
-  }
 
-  ul {
+  & > header > nav {
     display: flex;
-    margin-left: auto;
-    column-gap: 1rem;
 
-    list-style: none;
-
-    li {
+    & > * {
       display: flex;
       align-items: center;
     }
-  }
-
-  a,
-  a:visited {
-    font-size: 1.2rem;
-    color: var(--gray);
-    font-weight: bold;
-    text-decoration: none;
-  }
-
-  a.active {
-    color: var(--orange-dim);
-  }
 
-  a:hover {
-    text-decoration: underline;
-  }
-}
+    & > ul {
+      margin-left: auto;
+      column-gap: 1rem;
+      list-style: none;
 
-article,
-aside,
-main,
-nav,
-section {
-  header {
-    h1 {
-      color: var(--orange);
-      margin-bottom: 0;
-      + * {
-        color: var(--gray-dim);
-        margin-top: 0;
+      & > li {
+        display: flex;
+        align-items: center;
       }
     }
 
-    nav {
-      text-align: left;
-      font-size: 0.9rem;
-      margin-bottom: 2rem;
+    a,
+    a:visited {
+      font-size: 1.2rem;
+      color: var(--gray);
+      font-weight: bold;
+
+      &.active {
+        color: var(--orange-dim);
+      }
     }
   }
-}
 
-footer {
-  text-align: center;
-  font-size: 0.8rem;
-  margin-top: auto;
-}
+  article,
+  aside,
+  main,
+  nav,
+  section {
+    & > header {
+      & > hgroup > {
+        :first-child {
+          color: var(--orange);
+          margin-bottom: 0;
+        }
+
+        :not(:first-child) {
+          color: var(--gray-dim);
+          margin-top: 0;
+          margin-bottom: 0;
+        }
+      }
 
-a {
-  color: var(--aqua);
-}
+      & > footer {
+        color: var(--gray);
+        font-size: 0.8rem;
 
-a:visited {
-  color: var(--aqua-dim);
-}
+        & > * {
+          display: inline;
+        }
 
-a:hover {
-  text-decoration: none;
-}
+        & > time {
+          text-decoration: underline;
+        }
+      }
+
+      & > nav {
+        text-align: left;
+        font-size: 0.9rem;
+      }
+    }
+
+    & > ul > li > article a {
+      color: var(--blue);
 
-a:active {
-  background: var(--orange-dim);
+      a:visited {
+        color: var(--blue-dim);
+      }
+    }
+  }
+
+  & > footer {
+    text-align: center;
+    font-size: 0.8rem;
+    margin-top: auto;
+  }
 }
diff --git a/templates/index.html b/templates/index.html
index 1f2d933..9e61436 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -26,7 +26,7 @@
   <body>
     <header>
       <nav>
-        <h1>{{ macros::nav_item(name=config.title, url=config.base_url) }}</h1>
+        <span>{{ macros::nav_item(name=config.title, url=config.base_url) }}</span>
         <ul>
           <li>{{ macros::nav_item(name="Projects",url=get_url(path="@/projects.md") ) }}</li>
           <li>{{ macros::nav_item(name="Posts",url=get_url(path="@/posts/_index.md") ) }}</li>
@@ -37,8 +37,10 @@
     <main>
       {% block content %}
         <header>
-          <h1>{{ section.title | safe }}</h1>
-          <h3>{{ section.description | default(value="") | markdown(inline=true) | safe }}</h3>
+          <hgroup>
+            <h1>{{ section.title | safe }}</h1>
+            <p>{{ section.description | default(value="") | markdown(inline=true) | safe }}</p>
+          </hgroup>
         </header>
         {{ section.content | safe }}
       {% endblock content %}
diff --git a/templates/macros.html b/templates/macros.html
index 12591b5..a2376ca 100644
--- a/templates/macros.html
+++ b/templates/macros.html
@@ -18,15 +18,44 @@
     {% endif %}
   </li>
 {% endmacro %}
-{% macro toc(page) %}
-  {% if page.toc %}
-    {%- set len = page.toc | length -%}
-  {% endif %}
+{% macro toc(toc) %}
+  {%- set len = toc | length -%}
   {% if len > 1 %}
-    <nav class="toc">
+    <nav>
       <ul>
         {% for child in page.toc %}{{ self::toc_item(item=child) }}{% endfor %}
       </ul>
     </nav>
   {% endif %}
 {% endmacro %}
+{% if page.summary %}
+  <p>{{ page.summary | safe }}</p>
+  <a href="{{ page.permalink }}#continue-reading">...</a>
+{% endif %}
+{% macro post_header(page_ref=false) %}
+  {% set page = page_ref | default(value=page) %}
+  <header>
+    <hgroup>
+      <h1>
+        {%- if page_ref -%}
+          <a href="{{ page.permalink }}">{{ page.title | safe }}</a>
+        {% else %}
+          {{ page.title | safe }}
+        {%- endif -%}
+      </h1>
+      <p>{{ page.description | default(value="") | markdown(inline=true) | safe }}</p>
+    </hgroup>
+    <footer>
+      Posted on
+      <time pubdate datetime="{{ page.date | date(format="%Y-%m-%d") }}">{{ page.date | date(format="%d %b %Y") }}</time>
+      by
+      <address class="author"> <a rel="author" href="{{ config.base_url }}">{{ config.extra.author }}</a></address>
+    </footer>
+  </header>
+  {% if page_ref and page.summary %}
+    <p>{{ page.summary | safe }}</p>
+    <a href="{{ page.permalink }}#continue-reading">...</a>
+  {% else %}
+    {{ self::toc(toc=page.toc) }}
+  {% endif %}
+{% endmacro %}
diff --git a/templates/page.html b/templates/page.html
index 350652a..3920e5e 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -2,8 +2,10 @@
 {% extends "index.html" %}
 {% block content %}
   <header>
-    <h1>{{ page.title | safe }}</h1>
-    <h3>{{ page.description | default(value="") | markdown(inline=true) | safe }}</h3>
+    <hgroup>
+      <h1>{{ page.title | safe }}</h1>
+      <p>{{ page.description | default(value="") | markdown(inline=true) | safe }}</p>
+    </hgroup>
   </header>
   {{ page.content | safe }}
 {% endblock content %}
diff --git a/templates/post.html b/templates/post.html
index 0dd3bbb..bda1e03 100644
--- a/templates/post.html
+++ b/templates/post.html
@@ -1,14 +1,6 @@
-{% import "macros.html" as macros -%}
+{% import "macros.html" as macros %}
 {% extends "index.html" %}
 {% block content %}
-  <header>
-    <h1 id="title">{{ page.title }}</h1>
-    {% if page.date %}
-      <time datetime="{{ page.date | date(format="%Y-%m-%d") }}">
-        {{ page.date | date(format="%d %b %Y") }}
-      </time>
-    {% endif %}
-  </header>
-  {{ macros::toc(page=page) }}
+  {{ macros::post_header() }}
   {{ page.content | safe }}
 {% endblock content %}
diff --git a/templates/section.html b/templates/section.html
index 57fe0aa..880f421 100644
--- a/templates/section.html
+++ b/templates/section.html
@@ -1,23 +1,17 @@
 {% extends "index.html" %}
 {% block content %}
   {{ super() }}
-  <div>
+  <ul class="simple">
     {% for page in section.pages %}
-      <article>
-        <div>
-          <h2>
-            <a href="{{ page.permalink }}">{{ page.title }}</a>
-            -
-            <time datetime="{{ page.date | date(format="%Y-%m-%d") }}">
-              {{ page.date | date(format="%d %b %Y") }}
-            </time>
-          </h2>
-        </div>
-        {% if page.summary %}
-          <p>{{ page.summary | safe }}</p>
-          <a href="{{ page.permalink }}#continue-reading">...</a>
-        {% endif %}
-      </article>
+      <li>
+        <article>
+          {{ macros::post_header(page_ref=page) }}
+          {% if page.summary %}
+            <p>{{ page.summary | safe }}</p>
+            <a href="{{ page.permalink }}#continue-reading">...</a>
+          {% endif %}
+        </article>
+      </li>
     {% endfor %}
-  </div>
+  </ul>
 {% endblock content %}
author	Toby Vincent <tobyv13@gmail.com>	2023-05-19 16:28:25 -0500
committer	Toby Vincent <tobyv13@gmail.com>	2023-05-19 16:28:25 -0500
commit	1b04d37d1ecb61a357917663c5449b68f0c88c26 (patch)
tree	396d5d6b9870f092d5a2e5a1b77818b580f6496d
parent	a68d0a7515eef730cd78523aec6eb918aa51c2ee (diff)