From d4cc95fe9d1810f273900de3ed1d7cc40b4b2e94 Mon Sep 17 00:00:00 2001
From: Isabella Bastaja <isabella@sorre.xyz>
Date: Sat, 21 Feb 2026 17:33:38 +0100
Subject: style post index and dates

---
 flake.nix                                         |  2 +-
 site/2023-11-15-scraping-images-from-open-tabs.md |  6 ++--
 site/2026-02-20-pleasant-arch-setup.md            |  6 ++--
 site/style.css                                    | 35 +++++++++++++++++++++++
 soupault.toml                                     | 19 ++++++++----
 5 files changed, 58 insertions(+), 10 deletions(-)

diff --git a/flake.nix b/flake.nix
index a11f245..e5ef109 100644
--- a/flake.nix
+++ b/flake.nix
@@ -37,7 +37,7 @@
 
             website = pkgs.stdenv.mkDerivation {
               pname = "sorre-website";
-              version = "2026-02-21-patch-1";
+              version = "2026-02-21-patch-2";
               src = ./.;
               nativeBuildInputs = deps;
               buildPhase = "soupault";
diff --git a/site/2023-11-15-scraping-images-from-open-tabs.md b/site/2023-11-15-scraping-images-from-open-tabs.md
index 75a768c..3975356 100644
--- a/site/2023-11-15-scraping-images-from-open-tabs.md
+++ b/site/2023-11-15-scraping-images-from-open-tabs.md
@@ -1,7 +1,9 @@
 # Scraping images from open tabs
 
-<time id="post-upload-date">2023-11-15</time>
-<time id="post-update-date">2023-11-15</time>
+<div class="post-dates">
+  <time id="post-upload-date">2023-11-15</time>
+  <time id="post-modification-date">2023-11-15</time>
+</div>
 
 <!-- FIXME: shell highlighting doesn't work yet -->
 <pre><code>
diff --git a/site/2026-02-20-pleasant-arch-setup.md b/site/2026-02-20-pleasant-arch-setup.md
index 2ba0ab2..eafc3fe 100644
--- a/site/2026-02-20-pleasant-arch-setup.md
+++ b/site/2026-02-20-pleasant-arch-setup.md
@@ -1,7 +1,9 @@
 # A pleasant Arch Linux setup
 
-<time id="post-upload-date">2026-02-20</time>
-<time id="post-update-date">2026-02-20</time>
+<div class="post-dates">
+  <time id="post-upload-date">2026-02-20</time>
+  <time id="post-modification-date">2026-02-20</time>
+</div>
 
 Recently I distrohopped back to Arch Linux on my laptop and, given the
 opportunity for a fresh start, wanted to keep the setup tidy. In this post I
diff --git a/site/style.css b/site/style.css
index fd183cf..bb43748 100644
--- a/site/style.css
+++ b/site/style.css
@@ -1,3 +1,38 @@
+*, *::after, *::before {
+  box-sizing: inherit;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+#blog-index {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 1rem;
+}
+
+article.post {
+  border: 1px solid;
+  padding: 1rem;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 1rem;
+}
+
+article.post h2 {
+  text-align: center;
+}
+
+article.post :is(h2, p) {
+  margin: 0;
+}
+
+.post-dates {
+  display: flex;
+  justify-content: space-between;
+}
+
 /* Style definition file generated by highlight 4.18, http://andre-simon.de/ */
 /* highlight theme: Github Source View */
 body.hl	{ background-color:#ffffff; }
diff --git a/soupault.toml b/soupault.toml
index 7cc8b99..ac5cc49 100644
--- a/soupault.toml
+++ b/soupault.toml
@@ -72,6 +72,11 @@
   selector = '*[class^="language-"]'
   command = 'highlight -O html -f --syntax=$(echo $ATTR_CLASS | sed "s/language-//")'
 
+[widgets.wrap-upload-date]
+  widget = 'preprocess_element'
+  selector = '.post-dates'
+  # parse = false
+  command = 'sed -E "s/.+post-([a-z]+)-date.+/<p><strong>\1 date: <\/strong>&<\/p>/"'
 
 [index]
   sort_descending = true
@@ -88,16 +93,20 @@
   extract_attribute = 'datetime'
   fallback_to_content = true
 
-[index.fields.updatedate]
-  selector = ['time#post-update-date']
+[index.fields.mtime]
+  selector = ['time#post-modification-date']
   extract_attribute = 'datetime'
   fallback_to_content = true
 
 [index.views.blog]
   index_selector = "#blog-index"
   index_item_template = """
-    <h2><a href="{{url}}">{{title}}</a></h2>
-    <p><strong>Uploaded:</strong> {{uploaddate}}</p>
-    <p><strong>Last update:</strong> {{updatedate}}.</p>
+    <article class="post">
+      <h2><a href="{{url}}">{{title}}</a></h2>
+      <div class="post-dates">
+        <p><strong>upload date:</strong> {{uploaddate}}</p>
+        <p><strong>modification date:</strong> {{mtime}}</p>
+      </div>
+    </article>
   """
 
-- 
cgit v1.3.1