added new logo and made stuff

blog/README.md

@@ -40,4 +40,6 @@ All commands are run from the root of the project, from a terminal:
 
 ## Bilder für Webuseage convertieren
 
+`magick convert input_file -resize 50% output_file`
+
 `magick mogrify -format webp -quality 80 *.jpg`

blog/public/scripts/image-modal.js

@@ -0,0 +1,23 @@
+const backdrop = document.querySelector("#image-backdrop");
+const preview = document.querySelector("#image-preview");
+
+if (backdrop instanceof HTMLElement && preview instanceof HTMLImageElement) {
+    document.addEventListener("click", (event) => {
+        if (!(event.target instanceof Element)) return;
+
+        if (!backdrop.hidden && backdrop.contains(event.target)) {
+            backdrop.hidden = true;
+            document.body.style.overflow = "";
+            return;
+        }
+
+        const image = event.target.closest("article img");
+
+        if (!(image instanceof HTMLImageElement)) return;
+
+        preview.src = image.currentSrc || image.src;
+        preview.alt = image.alt;
+        backdrop.hidden = false;
+        document.body.style.overflow = "hidden";
+    });
+}

blog/src/components/Header.astro

@@ -1,58 +1,149 @@
+---
+import Logo from "./Logo.astro";
+---
+
 <header>
-  <span id="name">Blauwasser Mausis</span>
-  <span class="vertical-line"></span>
+  <Logo />
+
   <nav>
     <div class="nav-left">
-      <a class="nav-link" href="/">Startseite</a>
-      <!-- <a class="nav-link" href="/about">Über uns</a> -->
+      <Logo id="side-nav-logo" />
+      <a class="" href="/">Startseite</a>
     </div>
     <div class="nav-right">
-      <a class="nav-link" href="/impressum" style="#789">Impressum</a>
-      <a class="nav-link" href="/privacy-policy" style="#789">Datenschutz</a>
+      <a href="/impressum" style="#789">Impressum</a>
+      <a href="/privacy-policy" style="#789">Datenschutz</a>
     </div>
   </nav>
+
+  <input type="checkbox" id="menu-toggle" class="menu-icon" />
+  <label for="menu-toggle" class="menu-icon" aria-label="Menü öffnen">
+    ☰
+  </label>
+
+  <label for="menu-toggle" class="menu-backdrop"></label>
 </header>
 
 <style>
   * {
+    box-sizing: border-box;
     color: var(--primary-text);
   }
 
   header {
+    position: relative;
+    width: 100%;
     padding: 32px;
     display: flex;
     align-items: center;
-    background-color: #fff;
-  }
-
-  #name {
-    font-weight: bold;
-    width: min-content;
-  }
-
-  .vertical-line {
-    color: var(--primary-text);
-    border-right-width: 3px;
+    justify-content: space-between;
+    gap: 20px;
   }
 
   nav {
-    width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    flex: 1;
+  }
+
+  .nav-left,
+  .nav-right {
+    display: flex;
+    align-items: center;
+    gap: 16px;
   }
 
   a {
-    padding-left: 16px;
     color: var(--primary-text);
-    width: fit-content;
+    text-decoration: none;
   }
 
-  .nav-right {
+  #menu-toggle,
+  .menu-icon,
+  .menu-backdrop,
+  #side-nav-logo {
+    display: none;
+  }
+
+  @media only screen and (max-width: 800px) {
+    .menu-icon {
+      display: block;
+      position: relative;
+      font-size: 1.6rem;
+      cursor: pointer;
+      z-index: 4;
+    }
+
+    #menu-toggle {
+      position: absolute;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    nav {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 66vw;
+      height: 100vh;
+      padding: 32px;
+      background: var(--primary-color);
+
       display: flex;
-    flex-wrap: wrap;
-    justify-content: end;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: flex-start;
 
+      transform: translateX(-100%);
+      transition: transform 0.3s ease;
+      z-index: 3;
+
+      a {
+        color: whitesmoke;
+      }
     }
 
+    .nav-left,
+    .nav-right {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .nav-left {
+      gap: 32px;
+      margin-bottom: 64px;
+    }
+
+    nav:has(~ #menu-toggle:checked) {
+      transform: translateX(0);
+    }
+
+    .menu-backdrop {
+      display: block;
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.25);
+      backdrop-filter: blur(6px);
+      -webkit-backdrop-filter: blur(6px);
+
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+      transition:
+        opacity 0.3s ease,
+        visibility 0.3s ease;
+      z-index: 2;
+    }
+
+    #menu-toggle:checked ~ .menu-backdrop {
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+    }
+  }
+
+  .vertical-line {
+    visibility: hidden;
+  }
 </style>

blog/src/components/Logo.astro

@@ -0,0 +1,20 @@
+<a id="logo-container" class="no-link-link" href="/">
+  <img id="logo-img" src="/BWM_512.webp" />
+  <span id="logo-text">Blauwasser Mausis</span>
+</a>
+
+<style>
+  #logo-container {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  #logo-img {
+    height: 64px;
+  }
+
+  #logo-text {
+    font-weight: bold;
+  }
+</style>

blog/src/components/PostPreviewLarge.astro

@@ -2,6 +2,7 @@
 import type { Post } from "../types/global";
 import { findImageByPath } from "../lib/findImage";
 import { Image } from "astro:assets";
+import { formatLocalizedDateString } from "../lib/formatDate";
 
 interface Props {
   post: Post;
@@ -11,6 +12,7 @@ interface Props {
 const { post, url } = Astro.props;
 
 const img = findImageByPath(post.image.path);
+const localeDate = formatLocalizedDateString(post.date)
 ---
 
 <div class="wide-container">
@@ -25,7 +27,7 @@ const img = findImageByPath(post.image.path);
     </a>
     <h7>{post.subtitle}</h7>
     <div class="top-info">
-      <span>{post.date}</span>
+      <span>{localeDate}</span>
       <span class="vertical-line"></span>
       <span>Autor: {post.author}</span>
     </div>

blog/src/components/PostPreviewSmall.astro

@@ -1,6 +1,7 @@
 ---
 
 import { findImageByPath } from "../lib/findImage";
+import { formatLocalizedDateString } from "../lib/formatDate";
 import type { Post } from "../types/global";
 
 interface Props {
@@ -11,6 +12,7 @@ interface Props {
 const { post, url } = Astro.props;
 
 const img = findImageByPath(post.image.path)
+const localeDate = formatLocalizedDateString(post.date)
 ---
 
 <a href={url} class="no-link-link">
@@ -21,7 +23,7 @@ const img = findImageByPath(post.image.path)
     <p class="description">{post.description}</p>
     <div class="bottom-info">
       <span>Author: {post.author}</span>
-      <span>{post.date}</span>
+      <span>{localeDate}</span>
     </div>
   </div>
 </a>

blog/src/layouts/BlogPostLayout.astro

@@ -4,6 +4,7 @@ import BackNav from "../components/BackNav.astro";
 import { findImageByPath } from "../lib/findImage";
 import type { Post } from "../types/global";
 import Main from "./Main.astro";
+import { formatLocalizedDateString } from "../lib/formatDate";
 
 interface Props {
   frontmatter: Post;
@@ -12,6 +13,7 @@ interface Props {
 const { frontmatter } = Astro.props;
 
 const titleImg = findImageByPath(frontmatter.image.path);
+const localeDate = formatLocalizedDateString(frontmatter.date);
 ---
 
 <Main>
@@ -25,7 +27,7 @@ const titleImg = findImageByPath(frontmatter.image.path);
     <h1 class="headline">{frontmatter.title}</h1>
     <div class="bottom-info">
       <span>Autor: {frontmatter.author}</span>
-      <span>{frontmatter.date}</span>
+      <span>{localeDate}</span>
     </div>
     <slot />
     <BackNav />
@@ -35,8 +37,14 @@ const titleImg = findImageByPath(frontmatter.image.path);
       dienen allein dem Zweck der Information.
     </p>
   </article>
+
+  <div id="image-backdrop" hidden>
+    <img id="image-preview" class="rounded" src="" alt="" />
+  </div>
 </Main>
 
+<script is:inline src="/scripts/image-modal.js"></script>
+
 <style>
   article {
     max-width: 900px;
@@ -46,10 +54,11 @@ const titleImg = findImageByPath(frontmatter.image.path);
   .markdown-content {
     font-size: 1.5rem;
     line-height: 1.6;
-  }
 
-  .markdown-content img {
-    width: 100%;
+
+    img {
+      cursor: zoom-in;
+    }
   }
 
   #titleImg {
@@ -69,4 +78,37 @@ const titleImg = findImageByPath(frontmatter.image.path);
     margin: 32px 0 64px 0;
     font-size: smaller;
   }
+
+  #image-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+
+    display: grid;
+    place-items: center;
+
+    padding: 24px;
+    background: rgba(0, 0, 0, 0.8);
+    cursor: pointer;
+  }
+
+  #image-backdrop[hidden] {
+    display: none;
+  }
+
+  #image-preview {
+    max-width: 90vw;
+    max-height: 90vh;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    cursor: pointer;
+  }
+
+  @media only screen and (max-width: 800px) {
+    .markdown-content {
+      font-size: 1.25rem;
+      line-height: 1.4;
+    }
+  }
 </style>

blog/src/layouts/Main.astro

@@ -6,7 +6,7 @@ import "../styles/global.css";
 <html lang="de">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" type="image/png" href="/favicon.png" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <link
       rel="alternate"
       type="application/rss+xml"

blog/src/lib/formatDate.ts

@@ -0,0 +1,3 @@
+export function formatLocalizedDateString(date: string): string {
+    return new Date(date).toLocaleDateString('de-DE')
+}

blog/src/pages/posts/200826_Ostseeurlaub.md

@@ -35,10 +35,12 @@ Einschlafen klappt dann aber doch irgendwie. Wenn man hier eins lernt, dann auch
 <div style="display: flex; flex-direction: row; gap: 2%;">
     <img src="/blog_img/ostseeurlaub/molly_1.webp" 
         alt="Chiara und Tim stehen vor der Dampflok Molly." 
+        class="rounded"
         style="max-width: 49%; height: auto;" 
         loading="lazy" />
     <img src="/blog_img/ostseeurlaub/molly_2.webp" 
         alt="Chiara und Tim stehen neben der Dampflok Molly." 
+        class="rounded"
         style="max-width: 49%; height: auto;" 
         loading="lazy" />
 </div>
@@ -61,7 +63,8 @@ Hier kommen wir schon zu einem meiner Highlights der Woche: Chiara, die das erst
  <img src="/blog_img/ostseeurlaub/karls.webp" 
         alt="Chiara und Tim stehen vor dem Eingangsschild zum Karls Erlebnisdorf in Rövershagen." 
         style="max-width: 100%; height: auto;" 
-        loading="lazy" />
+        loading="lazy" 
+        class="rounded"/>
 
 Nächster Halt ist <a href="https://karls.de/" target="_blank">**Karls Erlebnis-Dorf**</a> in Rövershagen. Eine meiner jüngeren Kindheitserinnerungen. 
 Hier muss ich immer an Tom denken, einen lieben Kollegen. Er hat in seiner Jugend im Karls Erlebnis-Dorf bei Berlin in der Pfannkuchen-Schmiede gearbeitet. Liebe Grüße!<br>
@@ -73,6 +76,7 @@ Mit dem Tagesticket können wir jegliche Attraktion fahren. Das machen wir auch!
 
 <img src="/blog_img/ostseeurlaub/karls_mais.webp" 
     alt="Chiara sizt in einem riesigen Maisbad." 
+    class="rounded"
     style="max-width: 100%; height: auto;" 
     loading="lazy" />
 Chiara wird im Mais verbuddelt.
@@ -82,10 +86,12 @@ Besonders freue ich mich auf die Eiswelt. In einer großen Halle stellen Bildhau
 <div style="display: flex; flex-direction: row; gap: 2%;">
     <img src="/blog_img/ostseeurlaub/karls_eis_thron.webp" 
         alt="Chiara und Tim auf einem Thron aus Eis." 
+        class="rounded"
         style="max-width: 49%; height: auto;" 
         loading="lazy" />
     <img src="/blog_img/ostseeurlaub/karls_eis_aida.webp" 
         alt="Chiara und Tim stehen auf einem kleinen AIDA Bug aus Eis und spielen diese eine Szene aus Titanic nach." 
+        class="rounded"
         style="max-width: 49%; height: auto;" 
         loading="lazy" />
 </div>
@@ -117,6 +123,7 @@ Spoilern werde ich natürlich nicht. Nur soviel: **So'n großer Feuerball, Junge
 <img src="/blog_img/ostseeurlaub/stoertebeker.webp" 
     alt="Chiara sizt in einem riesigen Maisbad." 
     style="max-width: 100%; height: auto;" 
+    class="rounded"
     loading="lazy" />
 Nach der Vorstellung auf dem Weg zum Auto.
 </br>

blog/src/pages/rss.xml.js

@@ -12,6 +12,7 @@ export async function GET(context) {
         site: context.site,
         items: posts.map(post => ({
             title: post.frontmatter.title,
+            subtitle: post.frontmatter.subtitle,
             pubDate: Date.parse(post.frontmatter.date),
             description: post.frontmatter.description,
             link: post.url,

blog/src/styles/global.css

@@ -8,7 +8,8 @@
     box-sizing: border-box;
 }
 
-html, body {
+html,
+body {
     height: 100%;
     margin: 0;
 }
@@ -22,7 +23,6 @@ body {
 }
 
 .nav-link {
-    font-size: 1.2rem;
     text-decoration: none;
     color: black;
 }

blog/src/types/global.ts

@@ -2,7 +2,7 @@ export interface Post {
     title: String,
     subtitle: String,
     description: String,
-    date: String, 
+    date: string, 
     author: String,
     image: {
         path: string,