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(-)
(limited to 'website')
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