image clickable large and rounded

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/src/layouts/BlogPostLayout.astro

@@ -37,8 +37,38 @@ 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>
+  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";
+    });
+  }
+</script>
+
 <style>
   article {
     max-width: 900px;
@@ -48,10 +78,11 @@ const localeDate = formatLocalizedDateString(frontmatter.date);
   .markdown-content {
     font-size: 1.5rem;
     line-height: 1.6;
-  }
 
-  .markdown-content img {
-    width: 100%;
+
+    img {
+      cursor: zoom-in;
+    }
   }
 
   #titleImg {
@@ -72,6 +103,32 @@ 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/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>