From dc67f2ad1834994542bd6edcec5d856a8672a3dc Mon Sep 17 00:00:00 2001
From: Aaron Czichon <mail@aaronczichon.de>
Date: Mon, 11 Mar 2024 20:32:12 +0000
Subject: [PATCH] misc: image sizes for other images

---
 web-canada/src/components/Hero.astro | 2 ++
 web-canada/src/pages/index.astro     | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/web-canada/src/components/Hero.astro b/web-canada/src/components/Hero.astro
index f7401d8..dc46305 100644
--- a/web-canada/src/components/Hero.astro
+++ b/web-canada/src/components/Hero.astro
@@ -8,6 +8,8 @@ const { url, alt, image } = Astro.props;
     <Image
       src={image}
       alt={alt}
+ 			widths={[240, 540, 720, image.width]}
+      sizes={`(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, ${image.width}px`}
       style="height: 100%; width: 100%; object-fit: cover;"
     />
     :
diff --git a/web-canada/src/pages/index.astro b/web-canada/src/pages/index.astro
index bb18dda..79ce376 100644
--- a/web-canada/src/pages/index.astro
+++ b/web-canada/src/pages/index.astro
@@ -33,6 +33,8 @@ import image from '../resources/hero.jpeg';
       {allPosts.map((post) => 
         <a href={'/blog/' + post.slug} class="entry">
 					{post.data.image ? <Image
+ 					widths={[240, 540, 720, post.data.image.url.width]}
+          sizes={`(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, ${post.data.image.url.width}px`}
           src={post.data.image.url}
           alt={post.data.image.alt}
           style="max-height: 400px; width: 100%; object-fit: cover;" /> : null }