From 552c8f0c4d7a40394eb2a76694982788798b04f7 Mon Sep 17 00:00:00 2001
From: Alex Scerba <alex@scerba.org>
Date: Sun, 27 Oct 2024 17:42:53 -0400
Subject: Add in-page nav for blog sections.

---
 html/blog.tmpl.html | 12 +++++++++++
 static/style.css    | 58 +++++++++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 68 insertions(+), 2 deletions(-)

diff --git a/html/blog.tmpl.html b/html/blog.tmpl.html
index 0f36f63..2e586dc 100644
--- a/html/blog.tmpl.html
+++ b/html/blog.tmpl.html
@@ -3,6 +3,18 @@
 {{ define "keywords" }}blog{{end}}
 
 {{ define "main" }}
+    <div>
+      <input type="checkbox" class="side-toggler">
+      <span class="carrot">&gt;</span>
+      <div class="in-page-nav-group">
+        <h2 id="pgnv">Page Navigation</h2>
+        <nav class="in-page-nav" aria-labelledby="pgnv">
+          <a href="/blog#">Blog</a>
+          <a href="/blog#archive">Archive</a>
+          <a href="/blog#extended-archive">Extended Archive</a>
+        </nav>
+      </div>
+    </div>
     <section>
       <div class="main-bg">
         <h1>Blog</h1>
diff --git a/static/style.css b/static/style.css
index c427bff..6957c25 100644
--- a/static/style.css
+++ b/static/style.css
@@ -88,7 +88,7 @@ article, #intro {
   margin-top: 1.75rem;
 }
 
-article h2, .article-h2 {
+article h2, .article-h2, #pgnv {
   margin-top: 0;
 }
 
@@ -190,7 +190,7 @@ h2, h3, h4, h5, h6 {
 }
 
 h3, h4, h5, h6 {
-  opacity: 50%;
+  color:rgb(150, 150, 150);
 }
 
 p {
@@ -291,6 +291,60 @@ header a, .projects a {
   border-top: .12rem solid rgb(196, 196, 196);
 }
 
+.in-page-nav-group {
+  position: fixed;
+  bottom: 5rem;
+  left: -100%;
+  padding: 2.5rem 3rem;
+  background-color: white;
+  box-shadow: 0 0 1em 0.4em rgba(154, 154, 154, 0.394);
+}
+
+.in-page-nav {
+  display: flex;
+  flex-direction: column;
+}
+
+.in-page-nav a:not(:last-child) {
+  margin-bottom: .5rem;
+}
+
+.side-toggler {
+  position: fixed;
+  bottom: 1rem;
+  left: 0;
+  display: block;
+  margin: 0;
+  width: 2rem;
+  height: 3rem;
+  opacity: 0;
+  z-index: 4;
+}
+
+.side-toggler:checked + .carrot {
+  transform: scaleX(-1);
+}
+
+.side-toggler:checked ~ .in-page-nav-group {
+  left: 0;
+  transition: all 0.2s ease;
+}
+
+.carrot {
+  display: block;
+  position: fixed;
+  bottom: 1rem;
+  left: 0;
+  z-index: 3;
+  width: 2rem;
+  height: 3rem;
+  padding-top: .6rem;
+  text-align: center;
+  font-weight: bold;
+  background-color: white;
+  box-shadow: 0 0 1em 0.4em rgba(154, 154, 154, 0.394);
+}
+
 .footer-logo {
     filter: invert(100%);
     height: 1rem;
-- 
cgit v1.2.3