From 4de62e059b0c206312ca0c3fe3c8b12a96cbaf78 Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Thu, 28 May 2026 14:25:45 +0200
Subject: [PATCH] Switch to ranged media with queries.

---
 assets/css/_zen.css                   | 2 +-
 assets/css/base/_header.css           | 4 ++--
 assets/css/base/_images.css           | 6 +++---
 assets/css/components/_button.css     | 2 +-
 assets/css/components/_flex-group.css | 2 +-
 assets/css/components/_tables.css     | 4 ++--
 assets/css/layouts/_layouts.css       | 6 +++---
 assets/css/reset/_reset.css           | 2 +-
 8 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/assets/css/_zen.css b/assets/css/_zen.css
index b2aef15..54ca2ed 100644
--- a/assets/css/_zen.css
+++ b/assets/css/_zen.css
@@ -81,7 +81,7 @@ aside {
 article {
   .submitted,
   .tags {
-    @media (min-width: 666px) {
+    @media (width >= 666px) {
       display: inline-block;
       padding-inline-end: 1rem;
     }
diff --git a/assets/css/base/_header.css b/assets/css/base/_header.css
index f868d50..40817a9 100644
--- a/assets/css/base/_header.css
+++ b/assets/css/base/_header.css
@@ -10,7 +10,7 @@
   gap: var(--header-gap);
   background-color: var(--color-header-bg);
 
-  @media (min-width: 666px) {
+  @media (width >= 666px) {
     flex-direction: row;
     align-items: center;
   }
@@ -49,7 +49,7 @@
 
 /* Wrapper for any blocks placed in the header region. */
 .header__region {
-  @media (min-width: 666px) {
+  @media (width >= 666px) {
     margin-inline-start: auto;
   }
 }
diff --git a/assets/css/base/_images.css b/assets/css/base/_images.css
index fc00207..9f5ddf9 100644
--- a/assets/css/base/_images.css
+++ b/assets/css/base/_images.css
@@ -5,7 +5,7 @@ img {
   &.image {
     --image-padding: 0.75rem;
 
-    @media (min-width: 666px) {
+    @media (width >= 666px) {
       &.center {
         margin-inline: auto;
       }
@@ -44,7 +44,7 @@ figure {
       /* Nicer text wrap, e.g. no lone word on last line. */
       text-wrap: pretty;
 
-      @media (min-width: 666px) {
+      @media (width >= 666px) {
         padding-block-start: 0;
       }
 
@@ -53,7 +53,7 @@ figure {
       }
     }
 
-    @media (min-width: 666px) {
+    @media (width >= 666px) {
       inline-size: fit-content;
 
       &.left {
diff --git a/assets/css/components/_button.css b/assets/css/components/_button.css
index 3285751..fbac4fa 100644
--- a/assets/css/components/_button.css
+++ b/assets/css/components/_button.css
@@ -123,7 +123,7 @@ textarea {
 }
 
 /* For forms on mobile with single field add space between it and the submit button. */
-@media (min-width: 666px) {
+@media (width >= 666px) {
   input:only-of-type {
     &:has(+ [type='submit']) {
       margin-inline-end: 0.5rem;
diff --git a/assets/css/components/_flex-group.css b/assets/css/components/_flex-group.css
index 8f4de28..a2c7c42 100644
--- a/assets/css/components/_flex-group.css
+++ b/assets/css/components/_flex-group.css
@@ -10,7 +10,7 @@
   }
 }
 
-@media (min-width: 666px) {
+@media (width >= 666px) {
   .flex-group--2 > * {
     flex-basis: calc(100% / 2 - var(--flex-gap));
     flex-grow: 0;
diff --git a/assets/css/components/_tables.css b/assets/css/components/_tables.css
index 22edf53..d7f8eb6 100644
--- a/assets/css/components/_tables.css
+++ b/assets/css/components/_tables.css
@@ -1,7 +1,7 @@
 .zebra-table {
   --table-cell-padding: 0.5rem;
 
-  @media (max-width: 666px) {
+  @media (width < 666px) {
     --table-cell-padding: 0.3rem;
   }
 
@@ -32,7 +32,7 @@
 .responsive-table {
   --table-gap: 0.5rem;
 
-  @media (max-width: 666px) {
+  @media (width < 666px) {
     th {
       display: none;
     }
diff --git a/assets/css/layouts/_layouts.css b/assets/css/layouts/_layouts.css
index 8b0424f..998dc68 100644
--- a/assets/css/layouts/_layouts.css
+++ b/assets/css/layouts/_layouts.css
@@ -4,7 +4,7 @@
 .layout__page {
   max-width: var(--max-page-width);
 
-  @media (min-width: 666px) {
+  @media (width >= 666px) {
     margin-inline: auto;
     min-height: 100svh;
   }
@@ -27,7 +27,7 @@
 .layout__navigation > * {
   max-width: var(--max-content-width);
 
-  @media (min-width: 666px) {
+  @media (width >= 666px) {
     margin-inline: auto;
   }
 }
@@ -86,7 +86,7 @@
   grid-template-columns: 1fr;
 }
 
-@media (min-width: 999px) {
+@media (width >= 999px) {
   .layout__page {
     grid-template-rows: auto
                         auto
diff --git a/assets/css/reset/_reset.css b/assets/css/reset/_reset.css
index 8922e25..16a6216 100644
--- a/assets/css/reset/_reset.css
+++ b/assets/css/reset/_reset.css
@@ -81,7 +81,7 @@ select {
 }
 
 [type='search'] {
-  @media (min-width: 666px) {
+  @media (width >= 666px) {
     /* Correct the odd appearance in Safari on desktop. */
     -webkit-appearance: textfield;
   }