layout fixes and feedback

content/_index.md

@@ -22,7 +22,7 @@ Weitere Treffen finden nach Bedarf meist sonntags statt. Tagesordnungen, Protoko
 
 <div id="dbkcalendar"><strong>Kalender wird geladen, wenn du JavaScript aktiviert hast.</strong></div>
 
-- [Mehr Termine anzeigen](/termine)
+- <a href="#termine" id="expand-calendar">Mehr Termine anzeigen</a>
 - [Kalender abonnieren](https://cloud.hacknang.de/remote.php/dav/public-calendars/nZTMSHpd29ZRpAr6/?export)
 
 ## Ausstattung

content/impressum.md

@@ -43,4 +43,3 @@ Bei Überweisungen bitte den Verwendungszweck "Spende Chaostreff Backnang" verwe
 Der Chaostreff Backnang e.V. ist im Sinne der Abgabenordnung (AO) als gemeinnützig anerkannt (siehe [§2 Abs. 1 der Satzung](/docs/Satzung.pdf)) und stellt auf Anfrage Spendenbescheinigungen aus. Dafür bitte eine E-Mail an den Vorstand senden und dabei den vollen Namen, die vollständige Anschrift sowie Datum und Höhe der Zuwendung erwähnen.
 
 Bei Beträgen unter 200€ reicht dem Finanzamt ein sogenannter einfacher Nachweis, das ist ein Kontoauszug oder ein Ausdruck der Überweisungsbestätigung.
-

content/termine.md

@@ -1,6 +0,0 @@
-+++
-title = "Termine"
-description =  "Die nächste Termine des Chaostreffs auf einen Blick"
-+++
-
-<div id="dbkcalendar"><strong>Kalender wird geladen, wenn du JavaScript aktiviert hast.</strong></div>

static/dbkcalendar.js

@@ -13,7 +13,7 @@ export default function hackcal(e, p = 1) {
   const calendarParent = document.getElementById("dbkcalendar");
   const body = calendar.querySelector("tbody");
 
-  const calUri = "https://hackcal.ctbk.de/?period=" + p;
+  const calUri = `https://hackcal.ctbk.de/?period=${p}`;
   fetch(calUri)
     .then((res) => res.json())
     .then((data) => {
@@ -68,7 +68,7 @@ export default function hackcal(e, p = 1) {
           }
 
           const categoriesParent = entryItem.querySelector(".categories");
-          for (const category of event.categories.split(",")) {
+          for (const category of event.categories?.split(",") || []) {
             const categoryItem = document.createElement("em");
             categoryItem.innerText = category;
             categoriesParent.appendChild(categoryItem);

static/main.css

@@ -1,5 +1,4 @@
 /* general page styling */
-
 :root {
   --main-bg-color: #020404;
   --main-text-color: #efe3e3;
@@ -67,25 +66,72 @@ h3 {
 /* page header */
 
 #space-image {
-  height: 12vh;
+  height: 8vh;
   transition: height 0.2s, transform 0.2s;
 
   &:hover {
-    height: 14vh;
+    height: 11vh;
   }
 }
 
-header {
+#header-image {
-  display: flex;
+  max-height: 100%;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: space-between;
-  overflow: hidden;
 }
 
-#header-image {
+header {
-  height: 20vh;
+  display: grid;
-  max-width: 40vw;
+  grid-template:
+    "logo . nav        nav"
+    "logo . .          ." min-content
+    "logo . space-text space-image" min-content /
+    minmax(min-content, 30vw) 1fr auto minmax(0, min-content);
+  overflow: hidden;
+
+  #logo {
+    grid-area: logo;
+  }
+  nav {
+    grid-area: nav;
+  }
+  #space-text {
+    grid-area: space-text;
+    text-align: right;
+    margin-right: 1em;
+    vertical-align: bottom;
+    margin-top: auto;
+  }
+  #space-image-container {
+    grid-area: space-image;
+  }
+}
+
+@media screen and (device-width < 600px) {
+  header {
+    grid-template:
+      "logo space-image" minmax(0, 20vh)
+      "nav nav" min-content /
+      auto minmax(0, min-content);
+
+    #space-image-container {
+      margin-top: auto;
+      margin-bottom: auto;
+      margin-left: auto;
+    }
+
+    #space-text {
+      display: none;
+    }
+  }
+}
+
+@media screen and (device-width < 340px) {
+  header {
+    grid-template:
+      "logo" minmax(5cm, 20vh)
+      "space-image" min-content
+      "nav" /
+      1fr;
+  }
 }
 
 #skip-header {
@@ -113,6 +159,7 @@ header {
 
 nav {
   display: flex;
+  justify-content: end;
   flex-wrap: wrap;
   margin: 1em;
 

static/main.js

@@ -4,32 +4,41 @@ const refreshRate = 60 * 1000;
 
 function checkSpace() {
   const icon = document.getElementById("space-image");
-  let openText = "";
+  const stateItem = document.getElementById("space-state");
+  const stateLastUpdateItem = document.getElementById("space-last-update");
+  let stateText = "",
+    stateLastUpdate = "";
   fetch("https://spaceapi.ctbk.de/")
     .then((response) => response.json())
     .then((data) => {
+      let openText = "";
       if (data.state.open) {
-        openText = "Offen";
+        openText = "offen";
         icon.src = data.state.icon.open;
       } else {
-        openText = "Geschlossen";
+        openText = "geschlossen";
         icon.src = data.state.icon.closed;
       }
-      icon.alt = "Der Space ist " + openText;
+      stateText = `Der Space ist derzeit ${openText}.`;
       const lastchangeString = data.state.lastchange
         ? new Date(data.state.lastchange * 1000).toLocaleString(true, {
             timeStyle: "short",
             dateStyle: "medium",
           })
         : "unbekannt";
-      icon.title = "Letzte Statusänderung: " + lastchangeString;
+      stateLastUpdate = "Letzte Statusänderung: " + lastchangeString;
       console.log("Icon: " + icon.src);
     })
     .catch((error) => {
       icon.src = "/img/unknown.png";
-      icon.alt = "Der Spacestatus ist unbekannt";
+      stateText = "Der Spacestatus ist unbekannt";
-      icon.title = "";
       console.error("Error on space state retrieval:", error);
+    })
+    .then(() => {
+      icon.alt = stateText;
+      icon.text = stateLastUpdate;
+      stateItem.innerText = stateText;
+      stateLastUpdateItem.innerText = stateLastUpdate;
     });
 }
 
@@ -39,3 +48,7 @@ const interval = setInterval(() => {
 
 document.addEventListener("DOMContentLoaded", checkSpace);
 document.addEventListener("DOMContentLoaded", hackcal);
+
+document
+  .getElementById("expand-calendar")
+  ?.addEventListener("click", () => hackcal(null, 6));

templates/page.html

@@ -1,25 +1,13 @@
 <!DOCTYPE html>
-{% if page.title %} 
+{% if page.title %} {% set title = page.title %} {% elif section.title %} {% set
-{% set title = page.title %} 
+title = section.title %} {% elif config.title %} {% set title = config.title %}
-{% elif section.title %} 
+{% endif %} {% if page.description %} {% set description = page.description |
-{% set title = section.title %} 
+truncate(length=150) %} {% elif section.description %} {% set description =
-{% elif config.title %} 
+section.description | truncate(length=150) %} {% elif page.summary %} {% set
-{% set title = config.title %}
+description = page.summary | truncate(length=150) %} {% elif section.summary %}
-{% endif %} 
+{% set description = section.summary | truncate(length=150) %} {% elif
-
+config.description %} {% set description = config.description |
-{% if page.description %} 
+truncate(length=150) %} {% else %} {% set description = "" %} {% endif %}
-{% set description = page.description | truncate(length=150) %} 
-{% elif section.description %} 
-{% set description = section.description | truncate(length=150) %} 
-{% elif page.summary %} 
-{% set description = page.summary | truncate(length=150) %} 
-{% elif section.summary %}
-{% set description = section.summary | truncate(length=150) %} 
-{% elif config.description %} 
-{% set description = config.description | truncate(length=150) %}
-{% else %}
-{% set description = "" %}
-{% endif %}
 <html lang="{{ config.default_language }}">
   <head>
     <meta charset="UTF-8" />
@@ -65,9 +53,9 @@
     <title>{{ title }}</title>
   </head>
   <body>
+    <a id="skip-header" href="#main-content">Zum Inhalt springen</a>
     <header>
-      <a id="skip-header" href="#main-content">Zum Inhalt springen</a>
+      <a class="image-container" id="logo" href="/" tabindex="-1"
-      <a href="/" tabindex="-1"
         ><img
           id="header-image"
           src="{{ get_url(path='logo.svg', trailing_slash=false) }}"
@@ -75,14 +63,26 @@
       /></a>
       <nav>
         <a href="{{ get_url(path='/') }}">Home</a>
-        <a href="{{ get_url(path='/termine') }}">Termine</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>
         <a href="{{ get_url(path='/verein') }}">Verein</a>
         <a href="https://fsck.ctbk.de/">FSCK</a>
-        <a href="https://hacknang.de/freifunk/">Freifunk</a>
-        <a class="image-container" href="https://spaceapi.ctbk.de"
-          ><img id="space-image" src="" alt="Space Icon"
-        /></a>
       </nav>
+      <p id="space-text">
+        <strong id="space-state"></strong><br /><span
+          >Nächstes Treffen: siehe <a href="/#termine">Termine</a></span
+        ><br /><span id="space-last-update"></span>
+      </p>
+      <a
+        class="image-container"
+        id="space-image-container"
+        href="https://spaceapi.ctbk.de"
+        ><img
+          id="space-image"
+          src="{{ get_url(path='/img/unknown.png') }}"
+          alt="Space Icon"
+      /></a>
     </header>
     <main id="main-content">
       <section class="main-text">