blog/README.md

@@ -40,6 +40,4 @@ 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

@@ -1,23 +0,0 @@
-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,18 +1,16 @@
----
-import Logo from "./Logo.astro";
----
-
 <header>
-  <Logo />
+  <span>Blauwasser Mausis</span>
+  <span class="vertical-line"></span>
 
   <nav>
     <div class="nav-left">
-      <Logo />
+      <span id="side-nav-header">Blauwasser Mausis</span>
-      <a href="/">Startseite</a>
+      <a class="nav-link" href="/">Startseite</a>
+      <!-- <a class="nav-link" href="/about">Über uns</a> -->
     </div>
     <div class="nav-right">
-      <a href="/impressum" style="#789">Impressum</a>
+      <a class="nav-link" href="/impressum" style="#789">Impressum</a>
-      <a href="/privacy-policy" style="#789">Datenschutz</a>
+      <a class="nav-link" href="/privacy-policy" style="#789">Datenschutz</a>
     </div>
   </nav>
 
@@ -43,10 +41,11 @@ import Logo from "./Logo.astro";
   nav {
     display: flex;
     align-items: center;
-    justify-content: flex-end;
+    justify-content: space-between;
     flex: 1;
   }
 
+  .nav-left,
   .nav-right {
     display: flex;
     align-items: center;
@@ -61,15 +60,11 @@ import Logo from "./Logo.astro";
   #menu-toggle,
   .menu-icon,
   .menu-backdrop,
-  .nav-left {
+  #side-nav-header {
     display: none;
   }
 
   @media only screen and (max-width: 800px) {
-    * {
-      font-size: 1.2rem;
-    }
-
     .menu-icon {
       display: block;
       position: relative;
@@ -84,8 +79,9 @@ import Logo from "./Logo.astro";
       pointer-events: none;
     }
 
-    .mobile-nav {
+    #side-nav-header {
       display: block;
+      padding-bottom: 32px;
     }
 
     nav {
@@ -93,35 +89,29 @@ import Logo from "./Logo.astro";
       top: 0;
       left: 0;
       width: 66vw;
-      min-width: 320px;
       height: 100vh;
-      padding: 32px 0 0 32px;
+      padding: 42px 24px 24px;
-      background: var(--primary-color);
+      background: #ddd;
 
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       justify-content: flex-start;
+      gap: 30px;
 
       transform: translateX(-100%);
       transition: transform 0.3s ease;
-      z-index: 10;
+      z-index: 3;
-
-      a {
-        color: whitesmoke;
-      }
     }
 
     .nav-left,
     .nav-right {
-      display: flex;
       flex-direction: column;
       align-items: flex-start;
     }
 
-    .nav-left {
+    .nav-right > a {
-      gap: 32px;
+      font-size: 1rem;
-      margin-bottom: 64px;
     }
 
     nav:has(~ #menu-toggle:checked) {
@@ -142,7 +132,7 @@ import Logo from "./Logo.astro";
       transition:
         opacity 0.3s ease,
         visibility 0.3s ease;
-      z-index: 9;
+      z-index: 2;
     }
 
     #menu-toggle:checked ~ .menu-backdrop {

blog/src/components/Logo.astro

@@ -1,20 +0,0 @@
-<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/layouts/BlogPostLayout.astro

@@ -37,14 +37,8 @@ const localeDate = formatLocalizedDateString(frontmatter.date);
       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;
@@ -54,11 +48,10 @@ const localeDate = formatLocalizedDateString(frontmatter.date);
   .markdown-content {
     font-size: 1.5rem;
     line-height: 1.6;
+  }
 
-
+  .markdown-content img {
-    img {
+    width: 100%;
-      cursor: zoom-in;
-    }
   }
 
   #titleImg {
@@ -79,32 +72,6 @@ const localeDate = formatLocalizedDateString(frontmatter.date);
     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;

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/x-icon" href="/favicon.ico" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
     <link
       rel="alternate"
       type="application/rss+xml"

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

@@ -35,12 +35,10 @@ 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>
@@ -63,8 +61,7 @@ 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>
@@ -76,7 +73,6 @@ 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.
@@ -86,12 +82,10 @@ 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>
@@ -123,7 +117,6 @@ 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/styles/global.css

@@ -23,6 +23,7 @@ body {
 }
 
 .nav-link {
+    font-size: 1.2rem;
     text-decoration: none;
     color: black;
 }