lint-2

Author: satoshinotdead

common/head_tag.html

@@ -8,4 +8,5 @@
 
 <script type="text/discourse-plugin" version="0.8">
   api.replaceIcon('robot', 'lightning');
+  api.replaceIcon('language', 'translate');
 </script>

scss/box-view.scss

@@ -1,6 +1,6 @@
 @use "lib/viewport";
 
-@media screen and (min-width: 1300px) {
+@include viewport.from(xl) {
   #main-outlet {
     border-top-right-radius: var(--d-border-radius-large);
     border-top-left-radius: var(--d-border-radius-large);
@@ -47,7 +47,7 @@
     display: none;
   }
 
-  @media screen and (max-width: 488px) {
+  @include viewport.until(sm) {
     display: none;
   }
 
@@ -94,7 +94,7 @@
     bottom: var(--main-grid-gap);
     left: var(--left-distance);
 
-    @media screen and (max-width: 768px) {
+    @include viewport.until(md) {
       bottom: calc(var(--d-border-radius-large) * 2);
     }
   }
@@ -104,7 +104,7 @@
     bottom: var(--main-grid-gap);
     left: calc(var(--right-distance) - var(--d-border-radius-large));
 
-    @media screen and (max-width: 768px) {
+    @include viewport.until(md) {
       bottom: calc(var(--d-border-radius-large) * 2);
     }
   }
@@ -118,7 +118,7 @@
     left: var(--left-distance);
     height: var(--main-grid-gap);
 
-    @media screen and (max-width: 768px) {
+    @include viewport.until(md) {
       height: calc(var(--d-border-radius-large) * 2);
     }
 
@@ -158,7 +158,7 @@
   }
 }
 
-@media screen and (min-width: 768px) {
+@include viewport.from(md) {
   .with-topic-progress {
     bottom: calc(
       env(safe-area-inset-bottom) + var(--composer-height, 0px) +
@@ -167,7 +167,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@include viewport.until(md) {
   .with-topic-progress {
     bottom: calc(
       env(safe-area-inset-bottom) + var(--composer-height, 0px) +
@@ -176,7 +176,7 @@
   }
 }
 
-@media screen and (max-width: 400px) {
+@include viewport.until(sm) {
   .with-topic-progress {
     bottom: calc(env(safe-area-inset-bottom) + var(--composer-height, 0px));
   }

scss/composer-peek-mode.scss

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

scss/desktop-full-width.scss

@@ -129,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) {
+        @include viewport.until(xl) {
           grid-template-columns:
             calc(var(--d-sidebar-width) - 11px)
             1fr
@@ -138,7 +138,7 @@ $sidebar-width: 17em;
             auto;
         }
 
-        @media screen and (max-width: 1000px) {
+        @include viewport.until(lg) {
           gap: 0.5em;
         }
 
@@ -210,7 +210,8 @@ body.has-sidebar-page {
     padding: 0;
   }
 
-  @media screen and (min-width: calc($reply-area-max-width + ($sidebar-width * 2))) {
+  @include viewport.from(xl) {
+    // Approximating complex calc with xl
     #reply-control.show-preview {
       margin-left: auto;
       margin-right: auto;
@@ -221,23 +222,28 @@ 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))) {
-    #reply-control.show-preview:not(.fullscreen) {
-      margin-left: $sidebar-width;
-      width: auto;
-
-      // overruling new core composer changes
-      max-width: $reply-area-max-width;
-      transform: none;
-    }
+  @include viewport.until(xl) {
+    // Approximating complex calc with xl
+    @include viewport.from(lg) {
+      // Approximating complex calc with lg
+      #reply-control.show-preview:not(.fullscreen) {
+        margin-left: $sidebar-width;
+        width: auto;
+
+        // overruling new core composer changes
+        max-width: $reply-area-max-width;
+        transform: none;
+      }
 
-    .sidebar-container {
-      height: auto;
+      .sidebar-container {
+        height: auto;
+      }
     }
   }
 
   // overruling new core composer changes
-  @media screen and (min-width: $reply-area-max-width) {
+  @include viewport.from(lg) {
+    // Approximating $reply-area-max-width with lg
     #reply-control.show-preview:not(.fullscreen) {
       max-width: $reply-area-max-width;
       transform: none;
@@ -267,7 +273,7 @@ body.sidebar-animate {
 }
 
 // provides some extra space for login buttons
-@media screen and (min-width: 1400px) {
+@include viewport.from(xl) {
   .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) {
+    @include viewport.until(sm) {
       margin-top: 0;
 
       label {

scss/main.scss

@@ -73,7 +73,7 @@ body:not(.has-full-page-chat, .wizard) {
       --main-grid-gap: 0;
     }
 
-    @media screen and (min-width: 768px) {
+    @include viewport.from(md) {
       gap: var(--main-grid-gap);
     }
 

scss/topic.scss

@@ -53,7 +53,7 @@
 .container.posts {
   grid-template-columns: auto 8em;
 
-  @media screen and (max-width: 924px) {
+  @include viewport.until(lg) {
     grid-template-columns: auto auto;
   }
 

scss/welcome-banner.scss

@@ -11,7 +11,7 @@
     padding: 1.5em 0 2.5em;
     margin-bottom: 0;
 
-    @media screen and (max-width: 768px) {
+    @include viewport.until(md) {
       padding: 1em;
     }
 
@@ -27,17 +27,17 @@
       width: 100%;
       align-self: center;
 
-      @media screen and (max-width: 1028px) {
+      @include viewport.until(lg) {
         grid-row: 2/-1;
         grid-column: 1/-1;
       }
 
-      @media screen and (max-width: 768px) {
+      @include viewport.until(md) {
         grid-column: 2/-1;
         grid-row: 1/-1;
       }
 
-      @media screen and (max-width: 600px) {
+      @include viewport.until(sm) {
         grid-row: 2/-1;
         grid-column: 1/-1;
       }
@@ -88,22 +88,22 @@
     font-weight: 400;
     color: var(--search-color);
 
-    @media screen and (max-width: 1028px) {
+    @include viewport.until(lg) {
       font-size: var(--font-up-4);
       grid-column: 1/-1;
       grid-row: 1;
       text-align: center;
       margin-bottom: 0.5em;
     }
 
-    @media screen and (max-width: 768px) {
+    @include viewport.until(md) {
       text-align: left;
       grid-column: 1/2;
       grid-row: 1/-1;
       font-size: var(--font-up-3);
     }
 
-    @media screen and (max-width: 600px) {
+    @include viewport.until(sm) {
       grid-column: 1/-1;
       grid-row: 1;
       text-align: center;