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

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%);