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/static/css/main.css | 53 ++++++++++++++++++++++++++-------------------
 1 file changed, 31 insertions(+), 22 deletions(-)

(limited to 'website/static')

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