From c97db934af6c7dd3bba8deb500f61314c8a7a478 Mon Sep 17 00:00:00 2001 From: Fredrik Jonsson Date: Thu, 27 Mar 2025 09:03:04 +0100 Subject: [PATCH] Deprecate respond-to mixin, Zen uses css @media directly instead. --- .stylelintrc.yaml | 1 + README.md | 1 + assets/sass/_sass_variables.scss | 2 +- assets/sass/_zen.scss | 2 +- assets/sass/base/forms/_forms.scss | 2 +- assets/sass/base/images/_images.scss | 6 +++--- assets/sass/base/reset/_reset.scss | 2 +- assets/sass/components/flex-group/_flex-group.scss | 2 +- assets/sass/components/header/_header.scss | 4 ++-- assets/sass/components/tables/_tables.scss | 4 ++-- assets/sass/layouts/_layouts.scss | 6 +++--- assets/sass/mobilemenu.scss | 6 +++--- 12 files changed, 20 insertions(+), 18 deletions(-) diff --git a/.stylelintrc.yaml b/.stylelintrc.yaml index 10b7326..137c76b 100644 --- a/.stylelintrc.yaml +++ b/.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\\-]+$" diff --git a/README.md b/README.md index 39ae2d2..2943fdf 100644 --- a/README.md +++ b/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. diff --git a/assets/sass/_sass_variables.scss b/assets/sass/_sass_variables.scss index db3bc4f..b9d92a4 100644 --- a/assets/sass/_sass_variables.scss +++ b/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, diff --git a/assets/sass/_zen.scss b/assets/sass/_zen.scss index 03dc271..c20cac3 100644 --- a/assets/sass/_zen.scss +++ b/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; } diff --git a/assets/sass/base/forms/_forms.scss b/assets/sass/base/forms/_forms.scss index 32dd60d..da243c9 100644 --- a/assets/sass/base/forms/_forms.scss +++ b/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; diff --git a/assets/sass/base/images/_images.scss b/assets/sass/base/images/_images.scss index 246522c..40edc98 100644 --- a/assets/sass/base/images/_images.scss +++ b/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 { diff --git a/assets/sass/base/reset/_reset.scss b/assets/sass/base/reset/_reset.scss index 4133c85..194b0cf 100644 --- a/assets/sass/base/reset/_reset.scss +++ b/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; } diff --git a/assets/sass/components/flex-group/_flex-group.scss b/assets/sass/components/flex-group/_flex-group.scss index 30cc1d7..4d6558c 100644 --- a/assets/sass/components/flex-group/_flex-group.scss +++ b/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); } diff --git a/assets/sass/components/header/_header.scss b/assets/sass/components/header/_header.scss index 18f95bd..cbce184 100644 --- a/assets/sass/components/header/_header.scss +++ b/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; } } diff --git a/assets/sass/components/tables/_tables.scss b/assets/sass/components/tables/_tables.scss index b22da30..c4da578 100644 --- a/assets/sass/components/tables/_tables.scss +++ b/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; } diff --git a/assets/sass/layouts/_layouts.scss b/assets/sass/layouts/_layouts.scss index 45a4242..38e7ee6 100644 --- a/assets/sass/layouts/_layouts.scss +++ b/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 diff --git a/assets/sass/mobilemenu.scss b/assets/sass/mobilemenu.scss index d377916..9301850 100644 --- a/assets/sass/mobilemenu.scss +++ b/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; }