DEV: Update linting config and run gjs-codemod (#177)

.discourse-compatibility

@@ -0,0 +1,2 @@
+< 3.5.0.beta5-dev: 31249c4f27d93e83c6b83d42d93974522a9a612e
+

Gemfile.lock

@@ -15,16 +15,16 @@ GEM
       tzinfo (~> 2.0, >= 2.0.5)
       uri (>= 0.13.1)
     ast (2.4.3)
-    base64 (0.2.0)
+    base64 (0.3.0)
-    benchmark (0.4.0)
+    benchmark (0.4.1)
-    bigdecimal (3.1.9)
+    bigdecimal (3.2.2)
     concurrent-ruby (1.3.5)
     connection_pool (2.5.3)
-    drb (2.2.1)
+    drb (2.2.3)
     i18n (1.14.7)
       concurrent-ruby (~> 1.0)
-    json (2.11.3)
+    json (2.12.2)
-    language_server-protocol (3.17.0.4)
+    language_server-protocol (3.17.0.5)
     lint_roller (1.1.0)
     logger (1.7.0)
     minitest (5.25.5)
@@ -35,10 +35,10 @@ GEM
     prettier_print (1.2.1)
     prism (1.4.0)
     racc (1.8.1)
-    rack (3.1.13)
+    rack (3.1.15)
     rainbow (3.1.1)
     regexp_parser (2.10.0)
-    rubocop (1.75.4)
+    rubocop (1.76.0)
       json (~> 2.3)
       language_server-protocol (~> 3.17.0.2)
       lint_roller (~> 1.1.0)
@@ -46,10 +46,10 @@ GEM
       parser (>= 3.3.0.2)
       rainbow (>= 2.2.2, < 4.0)
       regexp_parser (>= 2.9.3, < 3.0)
-      rubocop-ast (>= 1.44.0, < 2.0)
+      rubocop-ast (>= 1.45.0, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 2.4.0, < 4.0)
-    rubocop-ast (1.44.1)
+    rubocop-ast (1.45.0)
       parser (>= 3.3.7.2)
       prism (~> 1.4)
     rubocop-capybara (2.22.1)
@@ -67,12 +67,12 @@ GEM
     rubocop-factory_bot (2.27.1)
       lint_roller (~> 1.1)
       rubocop (~> 1.72, >= 1.72.1)
-    rubocop-rails (2.31.0)
+    rubocop-rails (2.32.0)
       activesupport (>= 4.2.0)
       lint_roller (~> 1.1)
       rack (>= 1.1)
       rubocop (>= 1.75.0, < 2.0)
-      rubocop-ast (>= 1.38.0, < 2.0)
+      rubocop-ast (>= 1.44.0, < 2.0)
     rubocop-rspec (3.6.0)
       lint_roller (~> 1.1)
       rubocop (~> 1.72, >= 1.72.1)
@@ -99,4 +99,4 @@ DEPENDENCIES
   syntax_tree
 
 BUNDLED WITH
-   2.6.8
+   2.6.9

about.json

@@ -6,9 +6,7 @@
   "learn_more": "https://meta.discourse.org/t/installing-a-theme-or-theme-component/63682",
   "theme_version": "0.0.1",
   "modifiers": {
-    "svg_icons": [
+    "svg_icons": ["fire"],
-      "fire"
-    ],
     "serialize_topic_is_hot": true
   },
   "color_schemes": {

common/head_tag.html

@@ -1,6 +1,7 @@
 <script>
-  if(!CSS.supports("(color: hsl(from white h s l))")){
+  if (!CSS.supports("(color: hsl(from white h s l))")) {
     window.unsupportedBrowser = true;
-    window.I18n.translations[I18n.locale].js.browser_update = 'The Horizon theme does not support your browser. Please update your browser, or <a href="?safe_mode=no_themes">switch to safe mode</a>.';
+    window.I18n.translations[I18n.locale].js.browser_update =
+      'The Horizon theme does not support your browser. Please update your browser, or <a href="?safe_mode=no_themes">switch to safe mode</a>.';
   }
-</script>
+</script>

javascripts/discourse/components/card/topic-replies-column.gjs

@@ -1,5 +1,5 @@
+import { gt } from "truth-helpers";
 import icon from "discourse/helpers/d-icon";
-import gt from "truth-helpers/helpers/gt";
 
 const TopicRepliesColumn = <template>
   {{#if (gt @topic.replyCount 1)}}

javascripts/discourse/components/sidebar-new-topic-button.gjs

@@ -5,9 +5,8 @@ import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import didUpdate from "@ember/render-modifiers/modifiers/did-update";
 import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
 import { service } from "@ember/service";
-import { gt } from "truth-helpers";
+import { gt, not } from "truth-helpers";
 import CreateTopicButton from "discourse/components/create-topic-button";
-import not from "truth-helpers/helpers/not";
 
 export default class SidebarNewTopicButton extends Component {
   @service composer;

package.json

@@ -1,11 +1,11 @@
 {
   "private": true,
   "devDependencies": {
-    "@discourse/lint-configs": "2.11.1",
+    "@discourse/lint-configs": "2.25.0",
-    "ember-template-lint": "7.0.1",
+    "ember-template-lint": "7.8.1",
-    "eslint": "9.22.0",
+    "eslint": "9.28.0",
     "prettier": "3.5.3",
-    "stylelint": "16.16.0"
+    "stylelint": "16.20.0"
   },
   "engines": {
     "node": ">= 22",

scss/box-view.scss

@@ -1,4 +1,6 @@
-@media screen and (min-width: 1300px) {
+@use "lib/viewport";
+
+@media screen and (width >= 1300px) {
   #main-outlet {
     border-top-right-radius: var(--d-border-radius-large);
     border-top-left-radius: var(--d-border-radius-large);
@@ -20,7 +22,7 @@
 .has-full-page-chat .chat-replying-indicator-container {
   margin-bottom: var(--main-grid-gap);
 
-  @include breakpoint(medium) {
+  @include viewport.until(lg) {
     margin-bottom: 0;
   }
 }
@@ -28,7 +30,7 @@
 .has-full-page-chat .chat-selection-management {
   margin-bottom: var(--main-grid-gap);
 
-  @include breakpoint(medium) {
+  @include viewport.until(lg) {
     margin-bottom: 0;
   }
 }
@@ -41,15 +43,15 @@
   padding: 0;
   position: relative;
 
-  @include breakpoint(medium) {
+  @include viewport.until(lg) {
     display: none;
   }
 
-  @media screen and (max-width: 488px) {
+  @media screen and (width <= 488px) {
     display: none;
   }
 
-  @include breakpoint(tablet) {
+  @include viewport.until(md) {
     display: none;
   }
 
@@ -92,7 +94,7 @@
     bottom: var(--main-grid-gap);
     left: var(--left-distance);
 
-    @media screen and (max-width: 768px) {
+    @media screen and (width <= 768px) {
       bottom: calc(var(--d-border-radius-large) * 2);
     }
   }
@@ -102,7 +104,7 @@
     bottom: var(--main-grid-gap);
     left: calc(var(--right-distance) - var(--d-border-radius-large));
 
-    @media screen and (max-width: 768px) {
+    @media screen and (width <= 768px) {
       bottom: calc(var(--d-border-radius-large) * 2);
     }
   }
@@ -116,7 +118,7 @@
     left: var(--left-distance);
     height: var(--main-grid-gap);
 
-    @media screen and (max-width: 768px) {
+    @media screen and (width <= 768px) {
       height: calc(var(--d-border-radius-large) * 2);
     }
 
@@ -156,7 +158,7 @@
   }
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (width >= 768px) {
   .with-topic-progress {
     bottom: calc(
       env(safe-area-inset-bottom) + var(--composer-height, 0px) +
@@ -165,7 +167,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (width <= 768px) {
   .with-topic-progress {
     bottom: calc(
       env(safe-area-inset-bottom) + var(--composer-height, 0px) +
@@ -174,7 +176,7 @@
   }
 }
 
-@media screen and (max-width: 400px) {
+@media screen and (width <= 400px) {
   .with-topic-progress {
     bottom: calc(env(safe-area-inset-bottom) + var(--composer-height, 0px));
   }

scss/color-exploration.scss

@@ -6,7 +6,7 @@
   --d-sidebar-header-icon-color: var(--d-sidebar-link-color);
   --d-sidebar-active-suffix-color: var(--d-sidebar-suffix-color);
   --d-sidebar-background: var(--background-color);
-  --d-sidebar-footer-fade: rgba(var(--tertiary-50-rgb), 1);
+  --d-sidebar-footer-fade: rgb(var(--tertiary-50-rgb), 1);
   --d-sidebar-prefix-background: var(--d-selected);
   --d-sidebar-active-prefix-background: light-dark(
     oklch(from var(--d-selected) calc(l * 0.85) c h),

scss/composer-peek-mode.scss

@@ -2,7 +2,7 @@
   display: none;
 }
 
-@media screen and (min-width: 1300px) {
+@media screen and (width >= 1300px) {
   html:not(.fullscreen-composer) {
     .peek-mode-toggle svg {
       transform: scaleX(-1);

scss/composer.scss

@@ -1,3 +1,5 @@
+@use "lib/viewport";
+
 #reply-control
   .select-kit.dropdown-select-box.composer-actions
   .select-kit-header {
@@ -12,7 +14,7 @@
 }
 
 #reply-control.hide-preview:not(.draft) {
-  @include breakpoint("mobile-extra-large", $rule: min-width) {
+  @include viewport.from(sm) {
     background: var(--d-content-background);
     border-top-right-radius: var(--d-border-radius);
     border-top-left-radius: var(--d-border-radius);

scss/desktop-full-width.scss

@@ -1,3 +1,5 @@
+@use "lib/viewport";
+
 // Full width layout. Ported from the Discourse Full Width theme component here
 // https://meta.discourse.org/t/discourse-full-width-component/292496, which we
 // intend to move into core over time.
@@ -23,7 +25,7 @@ $sidebar-width: 17em;
   body:not(.has-sidebar-page) & {
     max-width: unset;
 
-    @include breakpoint("mobile-extra-large") {
+    @include viewport.until(sm) {
       max-width: 25vw;
     }
   }
@@ -103,7 +105,7 @@ $sidebar-width: 17em;
         grid-area: extra-info;
         white-space: nowrap;
 
-        @include breakpoint("tablet") {
+        @include viewport.until(md) {
           display: none;
         }
       }
@@ -127,7 +129,7 @@ $sidebar-width: 17em;
         // at narrower widths, when 1fr = 0
         // we can center without matching the sidebar's width
         // which allows the title to take up the remaining width
-        @media screen and (max-width: 1400px) {
+        @media screen and (width <= 1400px) {
           grid-template-columns:
             calc(var(--d-sidebar-width) - 11px)
             1fr
@@ -136,7 +138,7 @@ $sidebar-width: 17em;
             auto;
         }
 
-        @media screen and (max-width: 1000px) {
+        @media screen and (width <= 1000px) {
           gap: 0.5em;
         }
 
@@ -189,11 +191,11 @@ $sidebar-width: 17em;
 .header-search--enabled .floating-search-input-wrapper {
   grid-area: extra-info;
 
-  @include breakpoint(tablet) {
+  @include viewport.until(md) {
     grid-area: rspace;
   }
 
-  @include breakpoint(mobile-extra-large) {
+  @include viewport.until(sm) {
     display: none;
   }
 }
@@ -208,7 +210,7 @@ body.has-sidebar-page {
     padding: 0;
   }
 
-  @media screen and (min-width: calc($reply-area-max-width + ($sidebar-width * 2))) {
+  @media screen and (width >= calc($reply-area-max-width + ($sidebar-width * 2))) {
     #reply-control.show-preview {
       margin-left: auto;
       margin-right: auto;
@@ -219,7 +221,7 @@ body.has-sidebar-page {
     }
   }
 
-  @media screen and (max-width: calc($reply-area-max-width + ($sidebar-width * 2))) and (min-width: calc($reply-area-max-width + calc($sidebar-width / 2))) {
+  @media screen and (width <= calc($reply-area-max-width + ($sidebar-width * 2))) and (width >= calc($reply-area-max-width + calc($sidebar-width / 2))) {
     #reply-control.show-preview:not(.fullscreen) {
       margin-left: $sidebar-width;
       width: auto;
@@ -265,7 +267,7 @@ body.sidebar-animate {
 }
 
 // provides some extra space for login buttons
-@media screen and (min-width: 1400px) {
+@media screen and (width >= 1400px) {
   .anon {
     .d-header .panel {
       grid-column-start: -4;

scss/desktop-horizon-fixes.scss

@@ -13,7 +13,7 @@
     grid-area: bulk-select;
     margin-left: -0.5em;
 
-    @media screen and (max-width: 576px) {
+    @media screen and (width <= 576px) {
       margin-top: 0;
 
       label {

scss/header.scss

@@ -1,8 +1,10 @@
+@use "lib/viewport";
+
 .d-header {
   box-shadow: none;
   background: var(--background-color);
 
-  @include breakpoint(extra-large, $rule: min-width) {
+  @include viewport.from(xl) {
     padding-bottom: var(--main-grid-gap);
   }
 }

scss/main.scss

@@ -1,3 +1,5 @@
+@use "lib/viewport";
+
 :root {
   --main-grid-gap: 0.5em;
 }
@@ -5,7 +7,7 @@
 html:not(:has(.has-full-page-chat)) {
   background-color: var(--background-color);
 
-  @include breakpoint("mobile-extra-large") {
+  @include viewport.until(sm) {
     background-color: var(--d-content-background);
   }
 }
@@ -13,7 +15,7 @@ html:not(:has(.has-full-page-chat)) {
 body {
   -webkit-font-smoothing: antialiased;
 
-  @include breakpoint("mobile-extra-large") {
+  @include viewport.until(sm) {
     background-color: var(--d-content-background);
   }
 }
@@ -35,7 +37,7 @@ body.has-full-page-chat:not(.has-sidebar-page) {
   #main-outlet-wrapper {
     gap: var(--main-grid-gap);
 
-    @include breakpoint(medium) {
+    @include viewport.until(lg) {
       gap: 0;
     }
   }
@@ -50,22 +52,22 @@ body.has-sidebar-page #main-outlet-wrapper {
 }
 
 body:not(.has-sidebar-page) #main-outlet-wrapper {
-  @include breakpoint(medium, $rule: min-width) {
+  @include viewport.from(lg) {
     grid-template-columns: 0 minmax(0, 1fr) 0;
   }
 }
 
 body:not(.has-full-page-chat, .wizard) {
-  @include breakpoint(extra-large, $rule: min-width) {
+  @include viewport.from(xl) {
     background-color: var(--background-color);
   }
 
   #main-outlet-wrapper {
-    @include breakpoint(medium) {
+    @include viewport.until(lg) {
       --main-grid-gap: 0;
     }
 
-    @media screen and (min-width: 768px) {
+    @media screen and (width >= 768px) {
       gap: var(--main-grid-gap);
     }
 
@@ -76,7 +78,7 @@ body:not(.has-full-page-chat, .wizard) {
       border-radius: var(--d-border-radius-large);
       background-color: var(--d-content-background);
 
-      @include breakpoint(medium) {
+      @include viewport.until(lg) {
         border-radius: 0;
       }
 
@@ -85,7 +87,7 @@ body:not(.has-full-page-chat, .wizard) {
       }
 
       > *:not(.experimental-screen, .activate-account) {
-        @include breakpoint(medium, $rule: min-width) {
+        @include viewport.from(lg) {
           box-sizing: border-box;
           max-width: 1000px;
           margin-inline: auto;
@@ -98,7 +100,7 @@ body:not(.has-full-page-chat, .wizard) {
 
 #list-area {
   .show-more.has-topics {
-    @include breakpoint(medium, $rule: min-width) {
+    @include viewport.from(lg) {
       width: auto;
       right: 50%;
       transform: translateX(50%);

scss/misc.scss

@@ -71,7 +71,7 @@ input[type="color"]:focus,
   background-color: var(--background-color);
 }
 
-@include breakpoint(mobile-extra-large) {
+@include viewport.until(sm) {
   // pinned topic excerpts are hidden on small screens too
   .fk-d-menu__trigger.topic-list-layout-trigger {
     display: none;

scss/mobile-stuff.scss

@@ -1,5 +1,7 @@
+@use "lib/viewport";
+
 // temp separate file to avoid merge hell… to be distributed later
-@include breakpoint(medium) {
+@include viewport.until(lg) {
   html,
   .d-header {
     background-color: var(--d-content-background);
@@ -8,19 +10,19 @@
 
 #main-outlet-wrapper {
   *[class*="navigation-"] & {
-    @include breakpoint(mobile-extra-large) {
+    @include viewport.until(sm) {
       padding: 0;
     }
   }
 }
 
 #main-outlet {
-  @include breakpoint(mobile-extra-large) {
+  @include viewport.until(sm) {
     padding-top: var(--spacing-block-sm);
   }
 
   .list-controls {
-    @include breakpoint(mobile-extra-large) {
+    @include viewport.until(sm) {
       padding-inline: var(
         --spacing-inline-m
       ) !important; // override will be fixed when the whole chat page shenanigans is resolved
@@ -29,7 +31,7 @@
     }
 
     .navigation-container {
-      @include breakpoint(mobile-extra-large) {
+      @include viewport.until(sm) {
         gap: var(--spacing-inline-s);
 
         // don't know why we even hide this crucial navigation on mobile
@@ -77,13 +79,13 @@
       #navigation-bar,
       .navigation-controls,
       .category-breadcrumb {
-        @include breakpoint(mobile-extra-large) {
+        @include viewport.until(sm) {
           margin-bottom: 0;
         }
       }
 
       .navigation-controls {
-        @include breakpoint(mobile-extra-large) {
+        @include viewport.until(sm) {
           gap: var(--spacing-inline-s);
         }
       }
@@ -91,12 +93,12 @@
   }
 
   .list-container {
-    @include breakpoint(mobile-extra-large) {
+    @include viewport.until(sm) {
       padding-inline: 0 !important;
     }
 
     .topic-list-body {
-      @include breakpoint(mobile-extra-large) {
+      @include viewport.until(sm) {
         border-top: 0;
         padding-top: 0;
       }
@@ -104,7 +106,7 @@
   }
 
   #topic-title {
-    @include breakpoint(mobile-extra-large) {
+    @include viewport.until(sm) {
       padding-inline: var(--spacing-inline-s) !important;
 
       .title-wrapper {
@@ -158,7 +160,7 @@
   }
 
   .container.posts {
-    @include breakpoint(mobile-extra-large) {
+    @include viewport.until(sm) {
       padding-inline: var(--spacing-inline-xs) !important;
 
       .main-avatar .avatar {
@@ -197,7 +199,7 @@
   }
 
   #topic-footer-buttons {
-    @include breakpoint(mobile-extra-large) {
+    @include viewport.until(sm) {
       padding-inline: var(--spacing-inline-xs) !important;
     }
   }

scss/sidebar.scss

@@ -2,7 +2,7 @@
 
 .sidebar-wrapper,
 .sidebar-hamburger-dropdown {
-  @include breakpoint(medium) {
+  @include viewport.until(lg) {
     background: var(--secondary);
 
     .sidebar-footer-wrapper {
@@ -38,11 +38,11 @@
 }
 
 .sidebar-section-wrapper {
-  @include breakpoint(extra-large, $rule: min-width) {
+  @include viewport.from(xl) {
     padding-block: 0.45em;
   }
 
-  @include breakpoint(mobile-extra-large) {
+  @include viewport.until(sm) {
     .hamburger-panel .revamped & {
       margin-bottom: var(--spacing-block-m);
     }
@@ -57,7 +57,7 @@
     display: flex;
     flex-direction: column;
 
-    @include breakpoint(extra-large, $rule: min-width) {
+    @include viewport.from(xl) {
       gap: var(--spacing-block-xs);
     }
   }

scss/topic-cards.scss

@@ -18,12 +18,12 @@
   flex-direction: column;
   gap: 1.25em;
 
-  @include breakpoint(medium) {
+  @include viewport.until(lg) {
     gap: 0.5em;
     padding: 0 0.5em;
   }
 
-  @include breakpoint(mobile-extra-large) {
+  @include viewport.until(sm) {
     gap: 0;
     padding: 0;
   }
@@ -154,7 +154,7 @@
       oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
     );
 
-    @include breakpoint(tablet) {
+    @include viewport.until(md) {
       padding: 0.25em 0.5rem;
       font-size: var(--font-down-2);
     }
@@ -376,7 +376,7 @@
     ". . . . . . dropdown"
     "avatar update metadata metadata metadata . category";
 
-  @include breakpoint(mobile-extra-large) {
+  @include viewport.until(sm) {
     grid-template-columns: min-content min-content auto min-content min-content min-content min-content;
     grid-template-areas:
       " . . . . . . dropdown"
@@ -390,7 +390,7 @@
   &.has-metadata {
     grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
 
-    @include breakpoint(mobile-extra-large) {
+    @include viewport.until(sm) {
       grid-template-areas:
         ". . . . . . . dropdown"
         "update update metadata metadata metadata metadata category category";
@@ -410,11 +410,11 @@
       "excerpt excerpt excerpt ."
       "excerpt excerpt excerpt category";
 
-    @include breakpoint(extra-large, $rule: min-width) {
+    @include viewport.from(xl) {
       grid-template-columns: 20px min-content auto min-content;
     }
 
-    @include breakpoint(mobile-extra-large) {
+    @include viewport.until(sm) {
       grid-template-columns: auto min-content;
       grid-template-areas:
         ".  dropdown"
@@ -434,7 +434,7 @@
         "excerpt excerpt excerpt . "
         "excerpt excerpt excerpt category";
 
-      @include breakpoint(mobile-extra-large) {
+      @include viewport.until(sm) {
         grid-template-columns: auto min-content;
         grid-template-areas:
           " . dropdown"
@@ -544,7 +544,7 @@
     ". . . . . status dropdown"
     "activity . . . . likes-replies category";
 
-  @include breakpoint(mobile-extra-large) {
+  @include viewport.until(sm) {
     grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
     grid-template-areas:
       "category category . . . . status dropdown"

scss/topic.scss

@@ -1,3 +1,5 @@
+@use "lib/viewport";
+
 .post-stream {
   .contents {
     font-size: var(--font-up-1);
@@ -13,7 +15,7 @@
     border-left: 1px solid var(--accent-color);
 
     .timeline-scroller {
-      @include breakpoint("medium", $rule: min-width) {
+      @include viewport.from(lg) {
         margin-left: -4.5px;
         background: var(--d-content-background);
         height: 40px !important; // height is coming from element style have no other choice
@@ -28,7 +30,7 @@
     .timeline-handle {
       background-color: var(--accent-color);
 
-      @include breakpoint("medium", $rule: min-width) {
+      @include viewport.from(lg) {
         width: 8px;
         border-radius: 10px;
         height: calc(100% - 6px);
@@ -39,7 +41,7 @@
 
 // should probably get rid of this extra specificity class in core?
 .timeline-container.timeline-fullscreen {
-  @include breakpoint("medium", $rule: max-width) {
+  @include viewport.until(lg) {
     .topic-timeline
       .timeline-scrollarea
       .timeline-scroller
@@ -52,7 +54,7 @@
 .container.posts {
   grid-template-columns: auto 8em;
 
-  @media screen and (max-width: 924px) {
+  @media screen and (width <= 924px) {
     grid-template-columns: auto auto;
   }
 

scss/welcome-banner.scss

@@ -1,3 +1,5 @@
+@use "lib/viewport";
+
 .welcome-banner {
   &__wrap {
     display: grid;
@@ -9,11 +11,11 @@
     padding: 1.5em 0 2.5em;
     margin-bottom: 0;
 
-    @media screen and (max-width: 768px) {
+    @media screen and (width <= 768px) {
       padding: 1em;
     }
 
-    @include breakpoint("mobile-extra-large") {
+    @include viewport.until(sm) {
       display: block;
       padding: 0.5em;
       margin-top: 0;
@@ -25,22 +27,22 @@
       width: 100%;
       align-self: center;
 
-      @media screen and (max-width: 1028px) {
+      @media screen and (width <= 1028px) {
         grid-row: 2/-1;
         grid-column: 1/-1;
       }
 
-      @media screen and (max-width: 768px) {
+      @media screen and (width <= 768px) {
         grid-column: 2/-1;
         grid-row: 1/-1;
       }
 
-      @media screen and (max-width: 600px) {
+      @media screen and (width <= 600px) {
         grid-row: 2/-1;
         grid-column: 1/-1;
       }
 
-      @include breakpoint("mobile-extra-large") {
+      @include viewport.until(sm) {
         display: none;
       }
     }
@@ -54,7 +56,7 @@
   .search-menu-container .search-input {
     background: var(--d-content-background);
     border: 1px solid var(--search-color);
-    box-shadow: 0 4px 10px rgba(52, 6, 121, 15%);
+    box-shadow: 0 4px 10px rgb(52, 6, 121, 15%);
   }
 
   .search-menu .search-input:focus-within,
@@ -86,7 +88,7 @@
     font-weight: 400;
     color: var(--search-color);
 
-    @media screen and (max-width: 1028px) {
+    @media screen and (width <= 1028px) {
       font-size: var(--font-up-4);
       grid-column: 1/-1;
       grid-row: 1;
@@ -94,21 +96,21 @@
       margin-bottom: 0.5em;
     }
 
-    @media screen and (max-width: 768px) {
+    @media screen and (width <= 768px) {
       text-align: left;
       grid-column: 1/2;
       grid-row: 1/-1;
       font-size: var(--font-up-3);
     }
 
-    @media screen and (max-width: 600px) {
+    @media screen and (width <= 600px) {
       grid-column: 1/-1;
       grid-row: 1;
       text-align: center;
       margin-bottom: 0.5em;
     }
 
-    @include breakpoint("mobile-extra-large") {
+    @include viewport.until(sm) {
       font-size: var(--font-up-2);
     }
   }