From 310fab5496d82f5f8c0b3f308a6f8592f2b08866 Mon Sep 17 00:00:00 2001
From: Oliver Ladner <waste@lugh.ch>
Date: Wed, 8 Jan 2025 11:45:09 +0100
Subject: [PATCH] feat: yearly archives, restructure headings

---
 static/css/out.css        | 88 +++++++++++++++++++++++++++++++++++++++
 templates/archives.html   | 27 ++++++++----
 templates/article.html    |  4 +-
 templates/author.html     |  2 +-
 templates/authors.html    |  2 +-
 templates/categories.html |  2 +-
 templates/category.html   |  2 +-
 templates/index.html      |  6 +--
 templates/page.html       |  2 +-
 templates/tag.html        |  2 +-
 templates/tags.html       |  2 +-
 11 files changed, 120 insertions(+), 19 deletions(-)

diff --git a/static/css/out.css b/static/css/out.css
index d5e7de90..998b8c26 100644
--- a/static/css/out.css
+++ b/static/css/out.css
@@ -1185,6 +1185,10 @@ dd {
   color: #575279;
 }
 
+.prose :where(th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  color: #575279;
+}
+
 /*This does not seem to affect prismjs which is good*/
 
 code {
@@ -1235,6 +1239,50 @@ code {
   margin-left: 3.5rem;
 }
 
+.-mb-4 {
+  margin-bottom: -1rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.-mb-2 {
+  margin-bottom: -0.5rem;
+}
+
+.-mb-1 {
+  margin-bottom: -0.25rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mt-8 {
+  margin-top: 2rem;
+}
+
+.mt-12 {
+  margin-top: 3rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
 .block {
   display: block;
 }
@@ -1268,10 +1316,18 @@ code {
   width: 2rem;
 }
 
+.list-outside {
+  list-style-position: outside;
+}
+
 .list-none {
   list-style-type: none;
 }
 
+.list-disc {
+  list-style-type: disc;
+}
+
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -1374,6 +1430,14 @@ code {
   padding-top: 5rem;
 }
 
+.pt-4 {
+  padding-top: 1rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -1401,6 +1465,16 @@ code {
   line-height: 1.75rem;
 }
 
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.text-7xl {
+  font-size: 4.5rem;
+  line-height: 1;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -2033,6 +2107,10 @@ code {
     color: #c4a7e7;
     font-weight: 800;
   }
+
+  .dark\:prose-dark :where(th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    color: #c4a7e7;
+  }
 }
 
 .hover\:no-underline:hover {
@@ -2079,6 +2157,16 @@ code {
     font-size: 1rem;
     line-height: 1.5rem;
   }
+
+  .md\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
+  .md\:text-3xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
 }
 
 @media (min-width: 1024px) {
diff --git a/templates/archives.html b/templates/archives.html
index 882148bc..131a095a 100644
--- a/templates/archives.html
+++ b/templates/archives.html
@@ -4,13 +4,26 @@
 
 {% block content %}
 <div class="md:text-base lg:text-lg">
-    <h2>Blog archive</h2>
+    <h1 class="text-3xl md:text-5xl">Blog archive</h1>
+    <ul class="hyphens-auto list-outside list-disc">
 
-    <dl class="hyphens-auto">
-        {% for article in dates %}
-            <dt>{{ article.locale_date }}</dt>
-            <dd><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></dd>
-        {% endfor %}
-    </dl>
+    {% for article in dates %}
+      {% set year = article.date.strftime('%Y') %}
+      {% if loop.first %}
+        <h2 class="text-2xl md:text-3xl mt-6 mb-2" id="{{year }}"><a href="#{{year}}">{{ year }}</a></h2>
+      {% else %}
+        {% set prevyear = loop.previtem.date.strftime('%Y') %}
+        {% if prevyear != year %}
+          <h2 class="text-2xl md:text-3xl mt-6 mb-2" id="{{year }}"><a href="#{{year}}">{{ year }}</a></h2>
+        {% endif %}
+      {% endif %}
+        {% set month = article.date.strftime('%m') %}
+        {% set day = article.date.strftime('%d') %}
+                <li>{{ article.locale_date }}: <a href="{{ SITEURL }}/{{ article.url }}#content">{{ article.title }}</a></li>
+          {%if article.subtitle %}
+          {{ article.subtitle }}
+          {% endif %}
+    {% endfor %}
+    </ul>
 </div>
 {% endblock %}
diff --git a/templates/article.html b/templates/article.html
index 44369964..62142b84 100644
--- a/templates/article.html
+++ b/templates/article.html
@@ -19,10 +19,10 @@
 {% block content %}
   <article class="prose dark:prose-dark md:prose-base lg:prose-lg prose-img:rounded hyphens-auto">
     <header>
-        <h3 class="text-3xl md:text-5xl">
+        <h1 class="text-3xl md:text-5xl">
             {{ article.title }}
             <a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}" class="no-underline text-rp-dawn-overlay">#</a>
-        </h3>
+        </h1>
         <ul class="list-none border-b-2 border-rp-dawn-overlay dark:border-rp-moon-overlay">
             <li>
                 <span class="flex items-center">
diff --git a/templates/author.html b/templates/author.html
index 06f871dc..1a5a8903 100644
--- a/templates/author.html
+++ b/templates/author.html
@@ -3,5 +3,5 @@
 {% block title %}{{ SITENAME|striptags }} - Articles by {{ author }}{% endblock %}
 
 {% block content_title %}
-    <h2>Articles by {{ author }}</h2>
+    <h1 class="text-3xl md:text-5xl">Articles by {{ author }}</h1>
 {% endblock %}
diff --git a/templates/authors.html b/templates/authors.html
index 97a74572..9d68c972 100644
--- a/templates/authors.html
+++ b/templates/authors.html
@@ -3,7 +3,7 @@
 {% block title %}{{ SITENAME|striptags }} - Authors{% endblock %}
 
 {% block content %}
-    <h2>Authors on {{ SITENAME }}</h2>
+    <h1 class="text-3xl md:text-5xl">Authors on {{ SITENAME }}</h1>
     <ul>
         {% for author, articles in authors|sort %}
             <li><a href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a> ({{ articles|count }})</li>
diff --git a/templates/categories.html b/templates/categories.html
index fc7246b3..1482ebd6 100644
--- a/templates/categories.html
+++ b/templates/categories.html
@@ -4,7 +4,7 @@
 
 {% block content %}
 <div class="md:text-base lg:text-lg">
-    <h2>Blog categories</h2>
+    <h1 class="text-3xl md:text-5xl">Blog categories</h1>
     <ul class="hyphens-auto">
         {% for category, articles in categories|sort %}
             <li><a href="{{ SITEURL }}/{{ category.url }}">{{ category }}</a> ({{ articles|count }})</li>
diff --git a/templates/category.html b/templates/category.html
index 2cb03291..b73b635e 100644
--- a/templates/category.html
+++ b/templates/category.html
@@ -3,5 +3,5 @@
 {% block title %}{{ SITENAME|striptags }} - {{ category }} category{% endblock %}
 
 {% block content_title %}
-<h2>Tales from the <em>{{ category }}</em> department</h2>
+<h1 class="text-3xl md:text-5xl">Tales from the <em>{{ category }}</em> department</h1>
 {% endblock %}
diff --git a/templates/index.html b/templates/index.html
index c2441e03..dcdd4cbc 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% block content %}
     {% block content_title %}
-        <h2>Recent blog posts</h2>
+        <h1 class="text-3xl md:text-5xl">Recent blog posts</h1>
     {% endblock %}
     <!--This needs to align to the PAGINATION value in pelicanconf.py-->
     <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8">
@@ -12,8 +12,8 @@
                     <time datetime="{{ article.date.isoformat() }}" class="italic">{{ article.locale_date }}</time>
                 </footer>
                 <header>
-                    <h3 class="text-3xl mb-3 hyphens-auto"><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a>
-                    </h3>
+                    <h2 class="text-3xl mb-3 hyphens-auto"><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a>
+                    </h2>
                 </header>
                 <section>{{ article.summary }}</section>
             </article>
diff --git a/templates/page.html b/templates/page.html
index 791ae288..3d795423 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -9,7 +9,7 @@
 {% block content %}
   <article>
     <div class="prose dark:prose-dark md:prose-base lg:prose-lg hyphens-auto">
-      <h3 class="text-3xl md:text-5xl">{{ page.title }}</h3>
+      <h1 class="text-3xl md:text-5xl">{{ page.title }}</h1>
       {{ page.content }}
     </div>
   </article>
diff --git a/templates/tag.html b/templates/tag.html
index 9654e991..c34a7b33 100644
--- a/templates/tag.html
+++ b/templates/tag.html
@@ -3,5 +3,5 @@
 {% block title %}{{ SITENAME|striptags }} - {{ tag }} tag{% endblock %}
 
 {% block content_title %}
-<h2>Tales tagged with <em>{{ tag }}</em></h2>
+<h1 class="text-3xl md:text-5xl">Tales tagged with <em>{{ tag }}</em></h1>
 {% endblock %}
diff --git a/templates/tags.html b/templates/tags.html
index b21e5b52..52d30b56 100644
--- a/templates/tags.html
+++ b/templates/tags.html
@@ -3,7 +3,7 @@
 {% block title %}{{ SITENAME|striptags }} - Tags{% endblock %}
 
 {% block content %}
-    <h2>Tags for {{ SITENAME }}</h2>
+    <h1 class="text-3xl md:text-5xl">Tags for {{ SITENAME }}</h1>
     <ul>
         {% for tag, articles in tags|sort %}
             <li><a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a> ({{ articles|count }})</li>