remove style.css from git

.gitignore

@@ -4,3 +4,4 @@ public/
 resources/_gen/
 themes/bluewater/node_modules/
 themes/bluewater/package-lock.json
+themes/bluewater/assets/style.css

themes/bluewater/layouts/_default/_markup/render-image.html

@@ -1,13 +1,33 @@
 {{- $image := .Page.Resources.GetMatch .Destination -}}
 {{- if $image -}}
-{{ $image_resize := $image.Resize "1024x webp q80" }}
+{{ $tiny := $image.Resize "500x webp q80" }}
+{{ $small := $image.Resize "800x webp q80" }}
+{{ $medium := $image.Resize "1200x webp q80" }}
+{{ $large := $image.Resize "1500x webp q80" }}
 
-<div class="flex justify-center">
+{{ $classes := ""}}
+{{ if gt $image.Height $image.Width }}
+ {{ $classes = "mx-12 md:mx-32"}}
+{{ else }}
+ {{ $classes = "mx-4 md:mx-12"}}
+{{ end }}
+
+<div class="flex justify-center {{ print $classes }}">
   <a href="{{- $image.RelPermalink -}}">
-    <img loading="lazy" src="{{ $image_resize.RelPermalink }}" alt="{{ .Text }}" class="max-h-96">
+
+    <picture>
+      <source media="(max-width: 376px)" 
+          srcset="{{ $tiny.RelPermalink }}">
+      <source media="(max-width: 992px)" 
+          srcset="{{ $small.RelPermalink }}">
+      <source media="(max-width: 1400px)" 
+          srcset="{{ $medium.RelPermalink }}">
+      <source media="(min-width: 1401px)" 
+          srcset="{{ $large.RelPermalink }}">
+      <img 
+        alt="{{ .Text }}" src="{{ $image.RelPermalink }}" 
+        height="{{ $image.Height}}" width="{{ $image.Width }}">
+    </picture>
   </a>
 </div>
-{{- else -}}
-  <img loading="lazy" class="img-fluid" src="{{ .Destination | safeURL }}" {{ with .Text}} alt="{{ . }}" {{ else }} alt="{{ .Page.Title }}" {{ end }} {{ with .Title}} title="{{ . }}"{{ end }} />
-  <p>Fallback</p>
 {{- end -}}

themes/bluewater/layouts/index.html

@@ -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">