Header Responsive

2024-04-08 16:54:31 +02:00
parent ecd7973f33
commit 1517903a3b
4 changed files with 11 additions and 1 deletions
@@ -1,7 +1,17 @@
 {{ define "main" }}
  {{ $p := where site.RegularPages "Type" "blog" }}
  <div class="mx-2 md:mx-0">
-    <img src="/img/header.jpg" class="lg:w-full my-4" />
+    <picture class="lg:w-full my-4">
+      <source media="(max-width: 376px)" 
+          srcset="/img/header-500.webp">
+      <source media="(max-width: 1400px)" 
+          srcset="/img/header-800.webp">
+      <source media="(min-width: 1401px)" 
+          srcset="/img/header-1200.webp">
+      <img 
+        alt="Ein Bild von einer Insel mit Palmen, dem Meer und dem Himmel" src="/img/header.jpg" 
+        height="280px" width="1200px">
+    </picture>
  </div>
  <div class="flex flex-col lg:flex-row px-2 md:px-0">
    <div class="basis-1/1 lg:basis-2/3 lg:mr-6 min-h-[200vh] border-2">