From 2c8341cd1ef805d6fd1dd491a501bc1edb773fde Mon Sep 17 00:00:00 2001
From: Sven Balzer <4653051+Kyuusokuna@users.noreply.github.com>
Date: Tue, 10 Dec 2024 08:13:57 +0100
Subject: [PATCH] make header sticky at the top and convert to nested css

---
 website_main.css | 85 +++++++++++++++++++++++++-----------------------
 1 file changed, 44 insertions(+), 41 deletions(-)

diff --git a/website_main.css b/website_main.css
index 0ae96e9..343d7a8 100644
--- a/website_main.css
+++ b/website_main.css
@@ -12,55 +12,58 @@
 
 /*BODY*/
 body {
-    background: #292a2d;
-    color: #EEE;
     margin: 0em;
-}
 
-/*##########################################################*/
-/*HEADER*/
-header {
-    z-index: 1;
-    display: flex;
-    position: fixed;
-    width: 100%;
-    line-height: 3.5em;
-    background: #151617;
-    box-shadow:  0em 0.16em 0.8em 0em rgba(0,0,0,0.55);
-    /*font*/
-    font-size: 1.2em;
-}
+    font-family: 'Inconsolata', 'Courier New';
+    font-size: 16pt;
 
-header .title {
-    margin-left: 3em;
-    font-weight: bold;
-    font-size: 1.6em;
-    text-shadow: 0em 0em 0.2em rgba(175, 175, 175, 0.5);
-}
+    color: #EEE;
+    background: #292a2d;
 
-header .title a{
-    color: inherit;
-    text-decoration: none;
-}    
+    & a {
+        text-decoration: none;
+    }
 
-header .menu {
-    margin-left: auto;
-    margin-right: 3em;
-}
+    & > header {
+        position: sticky;
+        z-index:  100;
+        top:      0;
 
-header .menu a{
-    color: inherit;
-    text-decoration: none;
-    margin-right: 2em;
-}
+        margin-bottom: 1em;
 
-header .menu a:last-child {
-    margin-right: 0; /* No margin for the last menu item */
-}
+        background: #151617;
+        font-size: 1.2em;
+        line-height: 3.5em;
+        box-shadow:  0em 0.16em 0.8em 0em rgba(0,0,0,0.55);
 
-header .menu a:hover {
-    transform: scale(1.02);
-    text-shadow: 0em 0em 1em rgba(175, 175, 175, 0.9);
+        display: grid;
+        grid-template-columns: minmax(0, 3em) max-content auto max-content minmax(0, 3em);
+
+        & a {
+            color: inherit;
+
+            &:hover {
+                transform: scale(1.02);
+                text-shadow: 0em 0em 1em rgba(175, 175, 175, 0.9);
+            }
+        }
+
+        & .title {
+            grid-column: 2;
+
+            font-size: 1.6em;
+            font-weight: bold;
+
+            text-shadow: 0em 0em 0.2em rgba(175, 175, 175, 0.5);
+        }
+
+        & .menu {
+            grid-column: 4;
+
+            display: flex;
+            gap: 2em
+        }
+    }
 }
 
 /*##########################################################*/