From c1d791a915ba6c273b12272b245665f689dc29d4 Mon Sep 17 00:00:00 2001
From: Wim Hendrikx <mail@wimhendrikx.be>
Date: Wed, 9 Nov 2022 10:37:45 +0100
Subject: [PATCH 1/3] Make images more responsive

More info can be found here: https://www.zachleat.com/web/fluid-images/
---
 assets.css | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/assets.css b/assets.css
index 4cb1697..87f5fa7 100644
--- a/assets.css
+++ b/assets.css
@@ -2,7 +2,33 @@
  * Restrict sizing to the page width in all browsers (opinionated).
  */
 
-:where(iframe, img, input, video, select, textarea) {
+:where(iframe, input, video, select, textarea) {
   height: auto;
   max-width: 100%;
 }
+
+/**
+ * Do not stretch image or grow bigger than parent
+ */
+
+:where(img) {
+  max-width: 100%;
+}
+
+/**
+ * Preserve aspect ratio
+ */
+
+:where(img[width][height]) {
+  height: auto;
+}
+
+/**
+ * Let SVG scale without boundaries
+ */
+
+:where(img[src$=".svg"]) {
+  width: 100%;
+  height: auto;
+  max-width: none;
+}

From f4c7ae6687bf0923187d2f2927796cbe4f953815 Mon Sep 17 00:00:00 2001
From: Wim Hendrikx <wim@inventis.be>
Date: Fri, 11 Nov 2022 20:47:35 +0100
Subject: [PATCH 2/3] Don't make exception for SVG images

---
 assets.css | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/assets.css b/assets.css
index 87f5fa7..16adc71 100644
--- a/assets.css
+++ b/assets.css
@@ -22,13 +22,3 @@
 :where(img[width][height]) {
   height: auto;
 }
-
-/**
- * Let SVG scale without boundaries
- */
-
-:where(img[src$=".svg"]) {
-  width: 100%;
-  height: auto;
-  max-width: none;
-}

From 081e9e503e53976a42fbbfc7d472df53249d3f90 Mon Sep 17 00:00:00 2001
From: Wim Hendrikx <wim@inventis.be>
Date: Fri, 11 Nov 2022 20:49:56 +0100
Subject: [PATCH 3/3] Refactor assets file

---
 assets.css | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/assets.css b/assets.css
index 16adc71..b23fb04 100644
--- a/assets.css
+++ b/assets.css
@@ -2,16 +2,7 @@
  * Restrict sizing to the page width in all browsers (opinionated).
  */
 
-:where(iframe, input, video, select, textarea) {
-  height: auto;
-  max-width: 100%;
-}
-
-/**
- * Do not stretch image or grow bigger than parent
- */
-
-:where(img) {
+:where(iframe, img, input, video, select, textarea) {
   max-width: 100%;
 }
 
@@ -19,6 +10,6 @@
  * Preserve aspect ratio
  */
 
-:where(img[width][height]) {
+:where(iframe, img[width][height], input, video, select, textarea) {
   height: auto;
 }