shiran/discourse_theme_ran
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jarek Radosz
2025-06-06 13:15:57 +02:00
committed by GitHub
parent 31249c4f27
commit bf9fe07f67
22 changed files with 444 additions and 975 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.discourse-compatibility
+2
View File
@@ -0,0 +1,2 @@
< 3.5.0.beta5-dev: 31249c4f27d93e83c6b83d42d93974522a9a612e
Gemfile.lock
+13 -13
View File
@@ -15,16 +15,16 @@ GEM
tzinfo (~> 2.0, >= 2.0.5)
uri (>= 0.13.1)
ast (2.4.3)
base64 (0.2.0)
benchmark (0.4.0)
bigdecimal (3.1.9)
base64 (0.3.0)
benchmark (0.4.1)
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)
language_server-protocol (3.17.0.4)
json (2.12.2)
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
+1 -3
View File
@@ -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": [
"fire"
],
"svg_icons": ["fire"],
"serialize_topic_is_hot": true
},
"color_schemes": {
common/head_tag.html
+3 -2
View File
@@ -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>
javascripts/discourse/components/card/topic-replies-column.gjs
+1 -1
View File
@@ -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
+1 -2
View File
@@ -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
+4 -4
View File
@@ -1,11 +1,11 @@
{
"private": true,
"devDependencies": {
"@discourse/lint-configs": "2.11.1",
"ember-template-lint": "7.0.1",
"eslint": "9.22.0",
"@discourse/lint-configs": "2.25.0",
"ember-template-lint": "7.8.1",
"eslint": "9.28.0",
"prettier": "3.5.3",
"stylelint": "16.16.0"
"stylelint": "16.20.0"
},
"engines": {
"node": ">= 22",
pnpm-lock.yaml
Generated
+325 -872
View File
File diff suppressed because it is too large Load Diff
scss/box-view.scss
+14 -12
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+3 -1
View File
@@ -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
+11 -9
View File
@@ -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
+1 -1
View File
@@ -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
+3 -1
View File
@@ -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
+12 -10
View File
@@ -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
+1 -1
View File
@@ -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
+14 -12
View File
@@ -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
+4 -4
View File
@@ -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
+9 -9
View File
@@ -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
+6 -4
View File
@@ -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
+13 -11
View File
@@ -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);
}
}