From 3feeee7982ad16081c066a27d67486fa821d280b Mon Sep 17 00:00:00 2001
From: Ricardo Wurmus <rekado@elephly.net>
Date: Sun, 11 Apr 2021 10:34:53 +0200
Subject: website: Move menubar to header.

---
 website/haunt.scm           | 46 +++++++++++++++++++++------------------
 website/static/css/main.css | 53 ++++++++++++++++++++++++++-------------------
 2 files changed, 56 insertions(+), 43 deletions(-)

diff --git a/website/haunt.scm b/website/haunt.scm
index a8b6a35..5d00630 100644
--- a/website/haunt.scm
+++ b/website/haunt.scm
@@ -39,6 +39,19 @@
 
 (define* (base-layout body #:key (title "") (meta '())
                       (posts '()) site)
+  (define menubar
+    `(div (@ (id "menubar")
+             (class "width-control"))
+          (ul
+           (li (a (@ (href ,(base-url "/")))
+                  "About"))
+           (li (a (@ (href ,(base-url "/software")))
+                  "Software"))
+           (li (a (@ (href ,(base-url "/blog")))
+                  "Blog"))
+           (li (a (@ (href ,(base-url "/blog/feed.xml")))
+                  (img (@ (alt "Atom feed")
+                          (src ,(image-url "/feed.png")))))))))
   (define front-page?
     (assoc-ref meta 'frontpage))
 
@@ -56,16 +69,16 @@
                     (media "screen")))
            (title ,title))
           (body
-           (div (@ (id "header")
-                   ,@(if front-page?
-                         '((class "frontpage"))
-                         '()))
+           ,@(if front-page?
+                 '((@ (class "frontpage")))
+                 '())
+           (div (@ (id "header"))
                 (div (@ (id "header-inner")
                         (class "width-control"))
-                     (a (@ (href ,(base-url "/")))
-                        (img (@ (class ,(if front-page?
-                                            "logo" "logo small"))
-                                (alt "The logo of the GNU Assembly")
+                     (a (@ (href ,(base-url "/"))
+                           (class ,(if front-page?
+                                       "logo" "logo small")))
+                        (img (@ (alt "The logo of the GNU Assembly")
                                 (src ,(image-url (if front-page?
                                                      "/logo.svg"
                                                      "/logo-small.svg"))))))
@@ -82,19 +95,10 @@
                                 "giving them individual and collective control "
                                 "over their computing, from the operating "
                                 "system to applications."))
-                           '())))
-           (div (@ (id "menubar")
-                   (class "width-control"))
-                (ul
-                 (li (a (@ (href ,(base-url "/")))
-                        "About"))
-                 (li (a (@ (href ,(base-url "/software")))
-                        "Software"))
-                 (li (a (@ (href ,(base-url "/blog")))
-                        "Blog"))
-                 (li (a (@ (href ,(base-url "/blog/feed.xml")))
-                        (img (@ (alt "Atom feed")
-                                (src ,(image-url "/feed.png"))))))))
+                           `(,menubar))))
+           ,@(if (assoc-ref meta 'frontpage)
+                 `(,menubar)
+                 '())
 
            (div (@ (id "content")
                    (class "width-control"))
diff --git a/website/static/css/main.css b/website/static/css/main.css
index 3bf1e1e..2bb9803 100644
--- a/website/static/css/main.css
+++ b/website/static/css/main.css
@@ -92,61 +92,59 @@ p + p {
 
 #header {
     background: url('../images/noise-bg.png');
-    height: 90px;
     width: 100%;
     box-shadow: 0 3px 8px #ccc;
+    margin-bottom: 1em;
 }
 
-#header .logo {
-    padding: 10px;
-    display: block;
-    height: 25rem;
-    margin-bottom: 2em;
-}
-
-#header a:focus .logo {
+#header a.logo:focus img {
     border-left: 2px dotted #118ab2;
     border-right: 2px dotted #118ab2;
 }
 
-#header .logo.small {
+#header .logo.small img {
     height: 4.5rem;
 }
 
-#header .members {
-    float: right;
+#header .logo.small {
+    border: none;
 }
 
-@media screen and (min-width: 640px) {
-    #header {
-        height: 110px;
-    }
+#header .members {
+    float: right;
 }
 
-#header.frontpage {
+.frontpage #header {
     height: auto;
-    margin-bottom: 1em;
     text-align: center;
     padding-top: 2rem;
     padding-bottom: 1rem;
 }
 
-#header.frontpage .front-page-heading {
+.frontpage #header .front-page-heading {
     font-size: 175%;
     line-height: 150%;
     text-align: left;
     padding-top: 0.5em;
 }
 
-#header.frontpage .logo {
-    padding: 0;
+.frontpage #header .logo img {
     margin: 0 auto;
     max-width: 100%;
+    padding: 10px;
+    display: block;
+    height: 25rem;
 }
 
 #menubar {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.frontpage #menubar {
     margin: auto;
     padding: 0px;
+    display: block;
     clear: both;
 }
 
@@ -155,6 +153,17 @@ p + p {
     padding: 0px;
 }
 
+#header-inner * {
+    vertical-align: middle;
+}
+
+/* ghost element to maintain perfect centering */
+#header-inner:before {
+  content: '';
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+}
 
 .latest-news {
     margin-top: 20px;
@@ -290,7 +299,7 @@ h1 {
 
 h1:first-child {
     font-size: 1.8rem;
-    margin-bottom: 3rem;
+    margin-bottom: 2rem;
     margin-top: 0;
 }
 
-- 
cgit v1.2.1