implement hamburger-type nav menumain

2 files changed, 22 insertions, 12 deletions

diff --git a/style.css b/style.css
index 42ad66a..1a5f578 100644
--- a/style.css
+++ b/style.css
@@ -12,7 +12,7 @@ main {
     margin: 0 1rem;
 }
 body > header {
-    padding: 0.5rem 1rem;
+    padding: 0.5rem 0 0.5rem 1rem;
     color: FieldText;
     background-color: Field;
     gap: 0.5rem 1rem;
@@ -25,23 +25,30 @@ nav {
 }
 nav ul {
     list-style-type: none;
-    border-left: 1px solid FieldText;
     margin: 0;
     padding: 0;
 }
-nav ul li {
-    display: inline;
-    border-right: 1px solid FieldText;
-    padding: 0 10px;
+nav > ul > li {
+    display: inline-block;
     margin: 0;
+    vertical-align: top;
+}
+nav > ul > li > details {
+    cursor: pointer;
+    text-align: right;
+    background-color: Field;
+    padding: 0 1rem;
+}
+nav > ul > li > details > ul {
+    text-align: left;
+}
+nav > ul > li > details > ul > li {
+    padding: 0.5rem 0;
 }
 nav ul li a,
 nav ul li a:visited {
     color: FieldText;
 }
-li {
-    margin-left: 1rem;
-}
 p {
     margin: 1rem 0;
     line-height: 1.5rem;
diff --git a/theme.scm b/theme.scm
index 1c5be1a..e3b4a09 100644
--- a/theme.scm
+++ b/theme.scm
@@ -39,9 +39,12 @@
        (body
         (header (span ,(assq-ref (site-default-metadata site) 'author))
                 (nav (ul (li (a (@ (href "/")) "Home"))
-                         (li (a (@ (href "/now")) "Now"))
-                         (li (a (@ (href "/blog")) "Blog"))
-                         (li (a (@ (href "/games.html")) "Games")))))
+                         (li (details (summary "Pages")
+                                      (ul 
+                                       (li (a (@ (href "/now")) "Now"))
+                                       (li (a (@ (href "/blog")) "Blog"))
+                                       (li (a (@ (href "/games.html")) "Games"))
+                                       ))))))
         (main
          ,body))))))