New files, optical enhancement, new conten

2025-11-14 21:06:22 +01:00
parent 19e8faa088
commit 24e79a86bf
8 changed files with 584 additions and 14 deletions
--- a/templates/recipe.txt
+++ b/templates/recipe.txt
@@ -0,0 +1,95 @@
+<section class="popup-day popup-recipe">
+
+  <!-- TITEL -->
+  <div class="popup-header">
+    <h2><!-- TITEL HIER --></h2>
+  </div>
+
+  <!-- HAUPTBEREICH -->
+  <div class="popup-body">
+
+    <!-- =====================================
+         LINKE SPALTE – STORYTEXT
+         ===================================== -->
+    <div class="story">
+      <!-- DEIN STORYTEXT HIER REIN -->
+    </div>
+
+
+    <!-- =====================================
+         RECHTE SPALTE – REZEPT (mit responsivem Bild)
+         ===================================== -->
+    <div class="addon popup-recipe-content">
+
+      <!-- REZEPTNAME -->
+      <h3 class="recipe-title"><!-- Rezeptname --></h3>
+
+      <!-- RESPONSIVES REZEPTBILD -->
+      <picture class="recipe-image-wrapper">
+
+        <!-- AVIF -->
+        <source
+          type="image/avif"
+          srcset="
+            /2025/assets/images/rezepte/480/avif/REZEPT.avif 480w,
+            /2025/assets/images/rezepte/720/avif/REZEPT.avif 720w,
+            /2025/assets/images/rezepte/1024/avif/REZEPT.avif 1024w,
+            /2025/assets/images/rezepte/1366/avif/REZEPT.avif 1366w,
+            /2025/assets/images/rezepte/1600/avif/REZEPT.avif 1600w,
+            /2025/assets/images/rezepte/1920/avif/REZEPT.avif 1920w
+          "
+          sizes="(max-width: 900px) 100vw, 40vw"
+        >
+
+        <!-- WEBP -->
+        <source
+          type="image/webp"
+          srcset="
+            /2025/assets/images/rezepte/480/webp/REZEPT.webp 480w,
+            /2025/assets/images/rezepte/720/webp/REZEPT.webp 720w,
+            /2025/assets/images/rezepte/1024/webp/REZEPT.webp 1024w,
+            /2025/assets/images/rezepte/1366/webp/REZEPT.webp 1366w,
+            /2025/assets/images/rezepte/1600/webp/REZEPT.webp 1600w,
+            /2025/assets/images/rezepte/1920/webp/REZEPT.webp 1920w
+          "
+          sizes="(max-width: 900px) 100vw, 40vw"
+        >
+
+        <!-- JPEG Fallback -->
+        <img
+          src="/2025/assets/images/rezepte/1024/jpeg/REZEPT.jpg"
+          srcset="
+            /2025/assets/images/rezepte/480/jpeg/REZEPT.jpg 480w,
+            /2025/assets/images/rezepte/720/jpeg/REZEPT.jpg 720w,
+            /2025/assets/images/rezepte/1024/jpeg/REZEPT.jpg 1024w,
+            /2025/assets/images/rezepte/1366/jpeg/REZEPT.jpg 1366w,
+            /2025/assets/images/rezepte/1600/jpeg/REZEPT.jpg 1600w,
+            /2025/assets/images/rezepte/1920/jpeg/REZEPT.jpg 1920w
+          "
+          sizes="(max-width: 900px) 100vw, 40vw"
+          alt="Rezeptbild"
+          class="recipe-image"
+          decoding="async"
+          loading="lazy"
+        >
+
+      </picture>
+
+
+      <!-- Zutaten -->
+      <h4>Zutaten</h4>
+      <ul>
+        <!-- Zutaten -->
+      </ul>
+
+      <!-- Zubereitung -->
+      <h4>Zubereitung</h4>
+      <p>
+        <!-- Zubereitung -->
+      </p>
+
+    </div>
+
+  </div>
+
+</section>