From b210ba7c18bce648f154d5b5e43409be2314c619 Mon Sep 17 00:00:00 2001
From: chfour <chfourchfour@protonmail.com>
Date: Tue, 16 Sep 2025 13:53:37 +0200
Subject: [PATCH] better styling and headers in the blog pages

---
 buildblog.sh                          |  3 ++-
 src/blog/2025-09-14-test/content.djot |  2 ++
 src/blog/template_index.html          | 32 ++++++++++++++++--------
 src/blog/template_page.html           | 26 ++++++++++++++++----
 src/index.html                        |  6 +----
 src/style.css                         | 35 +++++++++++++++++++++++++++
 6 files changed, 83 insertions(+), 21 deletions(-)

diff --git a/buildblog.sh b/buildblog.sh
index b584c49..07901d7 100755
--- a/buildblog.sh
+++ b/buildblog.sh
@@ -38,11 +38,12 @@ find . -name content.djot -print0 | sort -r -z | while read -r -d '' post; do
     backtoblogroot="$(for ((i=0; i < slashesinpath; i++)); do echo -n '../'; done)"
     backtoblogroot="${backtoblogroot%/}"
     jq '.title' "${post}/meta.json"
-    jq -r --arg path "${post#./*/*/}" "${template}" "${post}/meta.json" >> ./index.html
+    jq -r --arg path "${post}" "${template}" "${post}/meta.json" >> ./index.html
     pandoc -f djot -t html5 \
         --mathml \
         --template="${page_template}" \
         --variable="backtoblogroot=${backtoblogroot}" \
+        --variable="path=${post#./}" \
         --metadata-file="${post}/meta.json" \
         "${post}/content.djot" -o "${post}/index.html"
 done
diff --git a/src/blog/2025-09-14-test/content.djot b/src/blog/2025-09-14-test/content.djot
index 9241595..7fdc28e 100644
--- a/src/blog/2025-09-14-test/content.djot
+++ b/src/blog/2025-09-14-test/content.djot
@@ -38,3 +38,5 @@ for (i = 0; i < samplecount; i++) {
     float sum_space = sum_space_i*sum_space_i + sum_space_q*sum_space_q;
 /* ... */
 ```
+
+i promise i'll change this syntax highlighting theme i know it looks bad
diff --git a/src/blog/template_index.html b/src/blog/template_index.html
index 253f6ab..77f1c07 100644
--- a/src/blog/template_index.html
+++ b/src/blog/template_index.html
@@ -7,18 +7,30 @@
     <title>blog index</title>
     <link rel="stylesheet" href="../style.css">
     <style>
-        a {
-            text-decoration: none;
-        }
+        a { text-decoration: none; }
     </style>
 </head>
 <body>
-    <ul>
-<!--BEGIN TEMPLATE-->
-        <li><article>
-            <a href="{{$path}}/">{{.title | @html}}</a> {{.tags | map("<span class=\"tag\" data-tag=\"\(.)\">\(.)</span>") | join(" ")}}
-        </article></li>
-<!--END TEMPLATE-->
-    </ul>
+    <nav>
+        <img src="../platinum_fop_45_o.svg" alt="" width="64" height="64" id="fops">
+        <ul class="inline-list slashed">
+            <li><a href="../">home</a></li>
+        </ul>
+    </nav>
+    <main>
+        <header>
+            <h1>blog index</h1>
+            <p>posts & things & various ramblings, probably</p>
+        </header>
+        <ul>
+            <!--BEGIN TEMPLATE-->
+            <li><article>
+                <a href="{{$path}}/">{{.title | @html}}</a>
+                (<time datetime="{{.date}}">{{.date}}</time>)
+                <span class="tags">{{.tags | map("<span class=\"tag\" data-tag=\"\(.)\">\(.)</span>") | join(" ")}}</span>
+            </article></li>
+            <!--END TEMPLATE-->
+        </ul>
+    </main>
 </body>
 </html>
diff --git a/src/blog/template_page.html b/src/blog/template_page.html
index e242df7..7a2781d 100644
--- a/src/blog/template_page.html
+++ b/src/blog/template_page.html
@@ -5,10 +5,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="generator" content="pandoc and a shell script">
     <title>$if(title-prefix)$$title-prefix$ &ndash; $endif$$pagetitle$</title>
+    <link rel="stylesheet" href="$backtoblogroot$/../style.css">
+    <style>
+        main {
+            max-width: 50rem;
+        }
+    </style>
 $if(highlighting-css)$
     <link rel="stylesheet" href="$backtoblogroot$/highlighting.css">
 $endif$
-    <link rel="stylesheet" href="$backtoblogroot$/../style.css">
 $for(author-meta)$
     <meta name="author" content="$author-meta$" />
 $endfor$
@@ -26,18 +31,29 @@ $for(header-includes)$
 $endfor$
 </head>
 <body>
+    <nav>
+        <img src="$backtoblogroot$/../platinum_fop_45_o.svg" alt="" width="64" height="64" id="fops">
+        <ul class="inline-list slashed">
+            <li><a href="$backtoblogroot$/../">home</a></li>
+            <li><a href="$backtoblogroot$/">blog</a></li>
+        </ul>
+    </nav>
     <article>
 $for(include-before)$
 $include-before$
 $endfor$
 $if(title)$
-        <header id="title-block-header">
-            <h1 class="title">$title$</h1>
-            <p>
+        <header>
+            <h1 id="title">$title$</h1>
+            <p id="details">
 $if(date-meta)$
                 <time datetime="$date-meta$">$date-meta$</time>
 $endif$
-                $for(tags)$<span class="tag" data-tag="$tags$">$tags$</span> $endfor$
+                <span class="tags">
+$for(tags)$
+                    <span class="tag" data-tag="$tags$">$tags$</span>
+$endfor$
+                </span>
             </p>
 $if(subtitle)$
             <p class="subtitle">$subtitle$</p>
diff --git a/src/index.html b/src/index.html
index f911d4e..e5d752b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9,11 +9,7 @@
         #fops {
             height: auto;
             max-width: 100%;
-            margin-block: 2em;
-            filter: drop-shadow(0 0 5px #ccc);
-        }
-        @media (prefers-color-scheme: dark) {
-            #fops { filter: drop-shadow(0 0 5px #f2f2f277); }
+            margin-block: 2rem;
         }
         :root {
             display: flex;
diff --git a/src/style.css b/src/style.css
index 4d22753..86d579c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -45,6 +45,7 @@ body {
     font-weight: 500;
 
     margin: 3rem;
+    margin-top: 2rem;
 }
 
 a { color: var(--color-link); }
@@ -52,6 +53,40 @@ a:visited { color: var(--color-link-visited); }
 
 img { display: block; }
 
+#fops { filter: drop-shadow(0 0 5px #ccc); }
+@media (prefers-color-scheme: dark) {
+    #fops { filter: drop-shadow(0 0 5px #f2f2f277); }
+}
+
+time { font-feature-settings: "tnum"; }
+
+nav #fops { display: inline; }
+nav {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+nav > ul {
+    margin-block: auto;
+    font-size: 1.1em;
+}
+/* specificity hack lol */
+nav a[href] {
+    color: var(--color-link);
+    text-decoration: none;
+}
+
+header > * { margin-block: 0; }
+header {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+}
+h1 {
+    font-size: 2.5em; /* shur up firefox */
+    line-height: 1;
+    margin-bottom: 0.4rem;
+}
+
 .inline-list {
     list-style-type: none;
     padding-left: 0;
-- 
2.51.2