[theme] Drop-down for supplementary pages

3 files changed, 42 insertions, 9 deletions

diff --git a/haunt/jakob/theme.scm b/haunt/jakob/theme.scm
index 141dc68..166d20f 100644
--- a/haunt/jakob/theme.scm
+++ b/haunt/jakob/theme.scm
@@ -15,6 +15,7 @@
 ;;; <http://www.gnu.org/licenses/>.
 
 (define-module (jakob theme)
+  #:use-module (srfi srfi-1)
   #:use-module (ice-9 match)
   #:use-module (jakob utils sxml)
   #:export (theme))
@@ -33,19 +34,28 @@
                     ("pgpkey authn" "/static/gpg.txt")))
 (define %nav-bar-tabs '(("About" "/pages/about.html")
                         ("Tags" "/tag.html")
-                        ("Blogroll" "/blogroll/")
-                        ("Bookmarks" "/bookmark/")
-                        ("Changelog" "/pages/changelog.html")))
+                        ("More ▼" "#"
+                         ("Blogroll" "/blogroll/")
+                         ("Bookmarks" "/bookmark/")
+                         ("Changelog" "/pages/changelog.html"))))
 
 (define %title "Jakob's Personal Webpage")
 
+(define (format-nav-item item-content)
+    (let* ((anchor-element (apply hyperlink (reverse (take item-content 2))))
+           (children       (drop item-content 2)))
+      (if (null? children)
+          `(li ,anchor-element)
+          `(li (@ (class "drop-parent"))
+               ,anchor-element
+               (ul (@ (class "drop-menu"))
+                   ,@(map format-nav-item children))))))
+
 (define %header
   `(header
     ,(hyperlink "/" (image "lambda.svg" "home"))
     (nav (ul
-          ,@(map (lambda (tuple)
-                   `(li ,(apply hyperlink (reverse tuple))))
-                 %nav-bar-tabs)))))
+          ,@(map format-nav-item %nav-bar-tabs)))))
 
 (define %footer
   `(footer
diff --git a/haunt/static/css/style.css b/haunt/static/css/style.css
index 3ee08fc..1ee1b2f 100644
--- a/haunt/static/css/style.css
+++ b/haunt/static/css/style.css
@@ -56,7 +56,7 @@ body > header > a > img {
     }
 }
 
-body > header > nav > ul {
+body > header > nav ul {
     list-style-type: none;
     padding-left: 0;
 }
@@ -64,15 +64,38 @@ body > header > nav > ul {
 @media screen and (min-width: 480px) {
     body > header > nav > ul > li {
         display: inline-block;
+    }
+
+    body > header > nav > ul li {
         padding: 1rem 2rem;
         border-bottom: 2px solid #d2d6dd;
         text-align: center;
     }
 
-    body > header > nav > ul > li > a {
+    body > header > nav > ul li > a {
         color: #000;
         text-decoration: none;
     }
+
+    body > header > nav > ul .drop-menu {
+        display: none;
+        position: absolute;
+    }
+
+    body > header > nav > ul .drop-menu > li {
+        background: #fff;
+    }
+
+    body > header > nav > ul > li:hover .drop-menu {
+        display: block;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    body > header > nav > ul .drop-menu {
+        list-style-type: circle;
+        padding-left: 1em;
+    }
 }
 
 /* Horizontal lists. */
diff --git a/org/pages/changelog.org b/org/pages/changelog.org
index b519805..abf046f 100644
--- a/org/pages/changelog.org
+++ b/org/pages/changelog.org
@@ -2,7 +2,7 @@
 
 A record of any notable user-facing changes made to this website. For more detail, refer to the log of the [[https://git.sr.ht/~jakob/blog][Git repository]].
 
-** Sunday, December 3, 2023
+** Sunday, December 24, 2023
 
 - Updated the header bar. I don't see the point in having a user-facing link to the Atom feed, since any reader software worth its weight will be able to pick up on my site having a feed automatically.