From 1de0c63a978d84cb515c585cf9383d25e0098a3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?kleines=20Filmr=C3=B6llchen?= <kleines@filmroellchen.eu>
Date: Sat, 23 Nov 2024 20:18:12 +0100
Subject: [PATCH] improvements to header layout

---
 static/main.css     | 27 +++++++++++++++++++--------
 templates/page.html |  4 ++--
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/static/main.css b/static/main.css
index 86fc7ba..3da5ee4 100644
--- a/static/main.css
+++ b/static/main.css
@@ -23,7 +23,7 @@ body {
   background-color: var(--main-bg-color);
   color: var(--main-text-color);
 
-  margin: 1.5rem;
+  margin: 3rem;
   margin-top: 0;
 }
 
@@ -84,7 +84,7 @@ header {
     "logo . nav        nav"
     "logo . .          ." min-content
     "logo . space-text space-image" min-content /
-    minmax(min-content, 30vw) 1fr auto minmax(0, min-content);
+    minmax(min-content, 25vw) 1fr auto minmax(0, min-content);
   overflow: hidden;
 
   #logo {
@@ -105,7 +105,18 @@ header {
   }
 }
 
-@media screen and (device-width < 600px) {
+@media screen and (device-width > 1700px) {
+  header {
+    position: fixed;
+    width: calc(100vw - 2 * 3em);
+  }
+}
+
+@media screen and (device-width < 650px) {
+  body {
+    margin: 1.5rem;
+    margin-top: 0;
+  }
   header {
     grid-template:
       "logo space-image" minmax(0, 20vh)
@@ -124,13 +135,13 @@ header {
   }
 }
 
-@media screen and (device-width < 340px) {
+@media screen and (device-width < 400px) {
   header {
     grid-template:
-      "logo" minmax(5cm, 20vh)
-      "space-image" min-content
-      "nav" /
-      1fr;
+      ". logo ." minmax(3cm, 10vh)
+      "space-text space-text space-image" min-content
+      "nav nav nav" /
+      1fr minmax(min-content, 30vh) 1fr;
   }
 }
 
diff --git a/templates/page.html b/templates/page.html
index c083337..52a5c0b 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -62,7 +62,6 @@ truncate(length=150) %} {% else %} {% set description = "" %} {% endif %}
           alt="Chaostreff Backnang Logo"
       /></a>
       <nav>
-        <a href="{{ get_url(path='/') }}">Home</a>
         <a href="{{ get_url(path='/#termine') }}">Termine</a>
         <a href="{{ get_url(path='/#kontakt') }}">Kontakt</a>
         <a href="{{ get_url(path='/#dienste') }}">Dienste</a>
@@ -74,10 +73,11 @@ truncate(length=150) %} {% else %} {% set description = "" %} {% endif %}
           >Nächstes Treffen: siehe <a href="/#termine">Termine</a></span
         ><br /><span id="space-last-update"></span>
       </p>
+      <!-- TODO: explainer page for the spaceapi and how we implement it -->
       <a
         class="image-container"
         id="space-image-container"
-        href="https://spaceapi.ctbk.de"
+        href=""
         ><img
           id="space-image"
           src="{{ get_url(path='/img/unknown.png') }}"