Deprecate respond-to mixin, Zen uses css @media directly instead.

.stylelintrc.yaml

@@ -6,6 +6,7 @@ rules:
   declaration-block-no-redundant-longhand-properties: null
   declaration-empty-line-before: null
   hue-degree-notation: number
+  media-feature-range-notation: prefix
   no-descending-specificity: null
   selector-class-pattern:
     - "^[a-z0-9\\-]+$"

README.md

@@ -55,6 +55,7 @@ Quickstart a new site with the Zen theme by using the [Zen demo repo as a templa
 * Colours are now set directly as css variables. You no longer need to override `_colors.scss`, instead override select colours in `_custom.scss`. This simplification was the main motivation for v5.
 * Converted most sass settings in to pure css variables.
 * Split sass and css settings it to separate files.
+* The "respond-to" mixin is deprecated in v5, use css @media directly instead.
 * No other significant changes.
 
 

assets/sass/_sass_variables.scss

@@ -36,7 +36,7 @@ $font-size-fluid: (
 // $font-size: $font-size-fluid;
 $font-size: $font-size-fixed;
 
-// Breakpoints
+// Breakpoints (Deprecated in v5, use css @media directly instead.)
 // Use the `respond-to(s)` mixin to use named breakpoints.
 $breakpoints: (
   'xxxl':     1222px,

assets/sass/_zen.scss

@@ -61,7 +61,7 @@ aside {
 article {
   .submitted,
   .tags {
-    @include respond-to(s) {
+    @media (min-width: 666px) {
       display: inline-block;
       padding-inline-end: 1rem;
     }

assets/sass/base/forms/_forms.scss

@@ -99,7 +99,7 @@ textarea {
 }
 
 // For forms on mobile with single field add space between it and the submit button.
-@include respond-to(s) {
+@media (min-width: 666px) {
   input:only-of-type {
     &:has(+ [type='submit']) {
       margin-inline-end: .5rem;

assets/sass/base/images/_images.scss

@@ -5,7 +5,7 @@ img {
   &.image {
     --image-padding: .75rem;
 
-    @include respond-to(s) {
+    @media (min-width: 666px) {
       &.center {
         margin-inline: auto;
       }
@@ -41,7 +41,7 @@ figure {
       // Nicer text wrap, e.g. no lone word on last line.
       text-wrap: pretty;
 
-      @include respond-to(s) {
+      @media (min-width: 666px) {
         display: table-caption;
         caption-side: bottom;
         padding-block-start: 0;
@@ -52,7 +52,7 @@ figure {
       }
     }
 
-    @include respond-to(s) {
+    @media (min-width: 666px) {
       display: table;
 
       &.left {

assets/sass/base/reset/_reset.scss

@@ -78,7 +78,7 @@ select {
 }
 
 [type='search'] {
-  @include respond-to(s) {
+  @media (min-width: 666px) {
     // Correct the odd appearance in Safari on desktop.
     -webkit-appearance: textfield;
   }

assets/sass/components/flex-group/_flex-group.scss

@@ -16,7 +16,7 @@
     flex-grow: 1;
   }
 
-  @include respond-to(s) {
+  @media (min-width: 666px) {
     &--2 > * {
       @include flex(2, $gap);
     }

assets/sass/components/header/_header.scss

@@ -8,7 +8,7 @@
   gap: var(--gutters);
   background-color: var(--color-header-bg);
 
-  @include respond-to(s) {
+  @media (min-width: 666px) {
     flex-direction: row;
   }
 
@@ -44,7 +44,7 @@
 
   // Wrapper for any blocks placed in the header region.
   &__region {
-    @include respond-to(s) {
+    @media (min-width: 666px) {
       margin-inline-start: auto;
     }
   }

assets/sass/components/tables/_tables.scss

@@ -2,7 +2,7 @@
 %zebra-table {
   --table-cell-padding: .5rem;
 
-  @include respond-to-max(s) {
+  @media (max-width: 666px) {
     --table-cell-padding: .3rem;
   }
 
@@ -34,7 +34,7 @@
 %responsive-table {
   --table-gap: .5rem;
 
-  @include respond-to-max(s) {
+  @media (max-width: 666px) {
     th {
       display: none;
     }

assets/sass/layouts/_layouts.scss

@@ -5,7 +5,7 @@
   &__page {
     max-width: var(--max-page-width);
 
-    @include respond-to(s) {
+    @media (min-width: 666px) {
       margin-inline: auto;
       min-height: 100vh;
       min-height: 100svh;
@@ -33,7 +33,7 @@
     &__navigation > * {
       max-width: var(--max-content-width);
 
-      @include respond-to(s) {
+      @media (min-width: 666px) {
         margin-inline: auto;
       }
     }
@@ -95,7 +95,7 @@
     grid-template-columns: 1fr;
   }
 
-  @include respond-to(xl) {
+  @media (min-width: 999px) {
     &__page {
       grid-template-rows: auto
                           auto

assets/sass/mobilemenu.scss

@@ -6,7 +6,7 @@
 .header__region { // stylelint-disable selector-class-pattern
   display: none;
 
-  @include respond-to(s) {
+  @media (min-width: 666px) {
     display: block;
   }
 } // stylelint-enable selector-class-pattern
@@ -22,7 +22,7 @@
   z-index: 20;
   pointer-events: none;
 
-  @include respond-to(s) {
+  @media (min-width: 666px) {
     display: none;
   }
 
@@ -60,7 +60,7 @@
     z-index: 22;
     pointer-events: auto;
 
-    @include respond-to(s) {
+    @media (min-width: 666px) {
       display: none;
     }