Move site title and random caption from landing page body to header

1 files changed, 35 insertions, 12 deletions

diff --git a/style.css b/style.css
index 8b42384..a481424 100644
--- a/style.css
+++ b/style.css
@@ -36,7 +36,7 @@
   --bodywidth: min(90vw, 80ch);
   --stddropshadow: 4px 4px 8px var(--stdshadow);
   --stdpadding: 1rem;
-  --navbarheight: calc(var(--stdpadding) * 2.5);
+  --navbarheight: calc(var(--stdpadding) * 4.5);
   --h1-image: url('images/isopod.php');
   --shadowsize: 3rem;
 }
@@ -86,24 +86,38 @@ a:hover {
   color: var(--linkhover);
 }
 
-/* Nav */
+/* Nav & Header */
+header {
+  position: absolute;
+  top: 0;
+  width: fit-content;
+  height: var(--navbarheight);
+  padding-top: 0.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+#header-content {
+  display: flex;
+  align-items: center;
+}
+#header-content > * {
+  margin: 0;
+}
+#header-content > :last-child {
+  flex: 1;
+  text-align: right;
+}
 nav {
   display: flex;
   flex-wrap: wrap;
   max-width: 100%;
   align-items: center;
   justify-content: center;
-}
-nav#main-nav {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: var(--navbarheight);
+  gap: calc(var(--stdpadding / 2));
 }
 nav a, nav span, body > a{
   padding: calc(var(--stdpadding) / 2) calc(var(--stdpadding) / 4 * 3);
-  margin: calc(var(--stdpadding) / 2) calc(var(--stdpadding) / 4);
+  margin: calc(var(--stdpadding) / 2) 0;
 }
 nav a, body > a {
   border-left: var(--stdaccentborder);
@@ -334,13 +348,22 @@ hr {
 
 /* If user is on mobile */
 @media only screen and (hover: none) {
-  nav#main-nav {
+  header {
     position: initial;
     top: initial;
     left: initial;
     right: initial;
     height: initial;
-    margin-top: calc(var(--stdpadding) / 2);
+    transform: initial;
+  }
+  #header-content {
+    padding-bottom: calc(var(--stdpadding) / 2);
+  }
+  #header-content > * {
+    flex: 1;
+  }
+  #header-content > :last-child {
+    word-break: break-word;
   }
   body > h1:first-of-type {
     margin-top: var(--stdpadding);