css

Author: satoshinotdead

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 (width <= 1400px) {
+        @media screen and (max-width: 1400px) {
           grid-template-columns:
             calc(var(--d-sidebar-width) - 11px)
             1fr
@@ -138,7 +138,7 @@ $sidebar-width: 17em;
             auto;
         }
 
-        @media screen and (width <= 1000px) {
+        @media screen and (max-width: 1000px) {
           gap: 0.5em;
         }
 
@@ -210,7 +210,7 @@ body.has-sidebar-page {
     padding: 0;
   }
 
-  @media screen and (width >= calc($reply-area-max-width + ($sidebar-width * 2))) {
+  @media screen and (min-width: calc($reply-area-max-width + ($sidebar-width * 2))) {
     #reply-control.show-preview {
       margin-left: auto;
       margin-right: auto;
@@ -221,7 +221,7 @@ body.has-sidebar-page {
     }
   }
 
-  @media screen and (width <= calc($reply-area-max-width + ($sidebar-width * 2))) and (width >= calc($reply-area-max-width + calc($sidebar-width / 2))) {
+  @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;
@@ -237,7 +237,7 @@ body.has-sidebar-page {
   }
 
   // overruling new core composer changes
-  @media screen and (width >= $reply-area-max-width) {
+  @media screen and (min-width: $reply-area-max-width) {
     #reply-control.show-preview:not(.fullscreen) {
       max-width: $reply-area-max-width;
       transform: none;
@@ -267,7 +267,7 @@ body.sidebar-animate {
 }
 
 // provides some extra space for login buttons
-@media screen and (width >= 1400px) {
+@media screen and (min-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 (width <= 576px) {
+    @media screen and (max-width: 576px) {
       margin-top: 0;
 
       label {

scss/main.scss

@@ -509,6 +509,15 @@ img.emoji {
   box-sizing: border-box;
   padding: 0.5em 0.65em;
   border: var(--d-button-border);
+  background-color: var(--accent-color);
+  color: var(--accent-text-color);
+}
+
+[data-wrap="button"] a:hover {
+  background: light-dark(
+    oklch(from var(--accent-color) 40% c h),
+    oklch(from var(--accent-color) 50% c h)
+  );
 }
 
 // Centered videos

scss/topic.scss

@@ -53,7 +53,7 @@
 .container.posts {
   grid-template-columns: auto 8em;
 
-  @media screen and (width <= 924px) {
+  @media screen and (max-width: 924px) {
     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 (width <= 768px) {
+    @media screen and (max-width: 768px) {
       padding: 1em;
     }
 
@@ -27,17 +27,17 @@
       width: 100%;
       align-self: center;
 
-      @media screen and (width <= 1028px) {
+      @media screen and (max-width: 1028px) {
         grid-row: 2/-1;
         grid-column: 1/-1;
       }
 
-      @media screen and (width <= 768px) {
+      @media screen and (max-width: 768px) {
         grid-column: 2/-1;
         grid-row: 1/-1;
       }
 
-      @media screen and (width <= 600px) {
+      @media screen and (max-width: 600px) {
         grid-row: 2/-1;
         grid-column: 1/-1;
       }
@@ -88,22 +88,22 @@
     font-weight: 400;
     color: var(--search-color);
 
-    @media screen and (width <= 1028px) {
+    @media screen and (max-width: 1028px) {
       font-size: var(--font-up-4);
       grid-column: 1/-1;
       grid-row: 1;
       text-align: center;
       margin-bottom: 0.5em;
     }
 
-    @media screen and (width <= 768px) {
+    @media screen and (max-width: 768px) {
       text-align: left;
       grid-column: 1/2;
       grid-row: 1/-1;
       font-size: var(--font-up-3);
     }
 
-    @media screen and (width <= 600px) {
+    @media screen and (max-width: 600px) {
       grid-column: 1/-1;
       grid-row: 1;
       text-align: center;