increase trigger for media query

assets/stylesheets/common/activity-calendar.scss

@@ -2,14 +2,14 @@
   margin-bottom: 5em;
   .rewind-card {
     @include rewind-border;
-    @media screen and (width <= 425px) {
+    @media screen and (width <= 475px) {
       padding: 0.5em;
     }
   }
   .rewind-calendar {
     border-collapse: unset;
     border-spacing: 3px;
-    @media screen and (width <= 425px) {
+    @media screen and (width <= 475px) {
       border-spacing: 1px;
     }
     tr {
@@ -26,7 +26,7 @@
   .rewind-calendar-cell {
     height: 10px;
     width: 10px;
-    @media screen and (width <= 425px) {
+    @media screen and (width <= 475px) {
       height: 5px;
       width: 5px;
     }

assets/stylesheets/common/best-posts.scss

@@ -51,7 +51,7 @@
     }
   }
   .best-posts__post {
-    @media screen and (max-width: 425px) {
+    @media screen and (max-width: 475px) {
       max-height: 300px;
       text-overflow: ellipsis;
       overflow: hidden;
@@ -70,7 +70,7 @@
     width: 100%;
     text-align: left;
     color: var(--primary-800);
-    @media screen and (max-width: 425px) {
+    @media screen and (max-width: 475px) {
       font-size: var(--font-down-2);
     }
   }

assets/stylesheets/common/best-topics.scss

@@ -77,7 +77,7 @@
     font-weight: 400;
     color: var(--primary-800);
     text-align: left;
-    @media screen and (max-width: 425px) {
+    @media screen and (max-width: 475px) {
       max-width: 100%;
       overflow: hidden;
       font-size: var(--font-down-2);

assets/stylesheets/common/card.scss

@@ -30,7 +30,7 @@
     @media screen and (max-width: 525px) {
       font-size: var(--font-up-2);
     }
-    @media screen and (max-width: 425px) {
+    @media screen and (max-width: 475px) {
       font-size: var(--font-up-0);
     }
   }
@@ -40,86 +40,3 @@
     -webkit-font-smoothing: antialiased;
   }
 }
-
-.pixel-corners,
-.pixel-corners--wrapper {
-  clip-path: polygon(
-    0px calc(100% - 20px),
-    4px calc(100% - 20px),
-    4px calc(100% - 12px),
-    8px calc(100% - 12px),
-    8px calc(100% - 8px),
-    12px calc(100% - 8px),
-    12px calc(100% - 4px),
-    20px calc(100% - 4px),
-    20px 100%,
-    calc(100% - 20px) 100%,
-    calc(100% - 20px) calc(100% - 4px),
-    calc(100% - 12px) calc(100% - 4px),
-    calc(100% - 12px) calc(100% - 8px),
-    calc(100% - 8px) calc(100% - 8px),
-    calc(100% - 8px) calc(100% - 12px),
-    calc(100% - 4px) calc(100% - 12px),
-    calc(100% - 4px) calc(100% - 20px),
-    100% calc(100% - 20px),
-    100% 20px,
-    calc(100% - 4px) 20px,
-    calc(100% - 4px) 12px,
-    calc(100% - 8px) 12px,
-    calc(100% - 8px) 8px,
-    calc(100% - 12px) 8px,
-    calc(100% - 12px) 4px,
-    calc(100% - 20px) 4px,
-    calc(100% - 20px) 0px,
-    20px 0px,
-    20px 4px,
-    12px 4px,
-    12px 8px,
-    8px 8px,
-    8px 12px,
-    4px 12px,
-    4px 20px,
-    0px 20px
-  );
-  position: relative;
-}
-.pixel-corners {
-  border: 4px solid transparent;
-}
-.pixel-corners--wrapper {
-  width: fit-content;
-  height: fit-content;
-}
-.pixel-corners--wrapper .pixel-corners {
-  display: block;
-  clip-path: polygon(
-    4px 20px,
-    8px 20px,
-    8px 12px,
-    12px 12px,
-    12px 8px,
-    20px 8px,
-    20px 4px,
-    calc(100% - 20px) 4px,
-    calc(100% - 20px) 8px,
-    calc(100% - 12px) 8px,
-    calc(100% - 12px) 12px,
-    calc(100% - 8px) 12px,
-    calc(100% - 8px) 20px,
-    calc(100% - 4px) 20px,
-    calc(100% - 4px) calc(100% - 20px),
-    calc(100% - 8px) calc(100% - 20px),
-    calc(100% - 8px) calc(100% - 12px),
-    calc(100% - 12px) calc(100% - 12px),
-    calc(100% - 12px) calc(100% - 8px),
-    calc(100% - 20px) calc(100% - 8px),
-    calc(100% - 20px) calc(100% - 4px),
-    20px calc(100% - 4px),
-    20px calc(100% - 8px),
-    12px calc(100% - 8px),
-    12px calc(100% - 12px),
-    8px calc(100% - 12px),
-    8px calc(100% - 20px),
-    4px calc(100% - 20px)
-  );
-}

assets/stylesheets/common/fbff.scss

@@ -13,7 +13,7 @@
   @media screen and (width <= 768px) {
     --border-size: 4px;
   }
-  @media screen and (width <= 425px) {
+  @media screen and (width <= 475px) {
     --border-size: 3px;
   }
   .fbff-gif-container {
@@ -51,7 +51,7 @@
       width: 50px;
       height: 50px;
     }
-    @media screen and (width <= 425px) {
+    @media screen and (width <= 475px) {
       width: 25px;
       height: 25px;
     }
@@ -69,7 +69,7 @@
     height: min-content;
     font-size: var(--font-down-1);
     font-family: Pixelify Sans;
-    @media screen and (width <= 425px) {
+    @media screen and (width <= 475px) {
       font-size: var(--font-down-3);
     }
   }

assets/stylesheets/common/post-received-reactions.scss

@@ -3,7 +3,7 @@
     align-items: center;
     justify-content: space-between;
     gap: 0.5em;
-    @media screen and (width <= 425px) {
+    @media screen and (width <= 475px) {
       gap: 0.125em;
     }
   }
@@ -87,7 +87,7 @@
       padding: 0.65em;
     }
   }
-  @media screen and (width <= 425px) {
+  @media screen and (width <= 475px) {
     .scale {
       width: min-content;
     }

assets/stylesheets/common/reading-time.scss

@@ -8,7 +8,7 @@
 .book {
   width: 150px;
   height: 200px;
-  @media screen and (width <= 425px) {
+  @media screen and (width <= 475px) {
     width: 100px;
     height: 133px;
   }
@@ -31,7 +31,7 @@ p.reading-time__text {
   left: 0;
   width: 150px;
   height: 200px;
-  @media screen and (width <= 425px) {
+  @media screen and (width <= 475px) {
     width: 100px;
     height: 133px;
   }
@@ -49,7 +49,7 @@ p.reading-time__text {
   top: 4px;
   width: 33px;
   height: 192px;
-  @media screen and (width <= 425px) {
+  @media screen and (width <= 475px) {
     left: -43px;
     width: 22px;
     height: 125px;
@@ -91,7 +91,7 @@ p.reading-time__text {
   transform: translateZ(-17.5px);
   background-color: var(--book-color);
   border-radius: 0 5px 5px 0;
-  @media screen and (width <= 425px) {
+  @media screen and (width <= 475px) {
     width: 100px;
     height: 133px;
   }
@@ -100,7 +100,7 @@ p.reading-time__text {
 .reading-time__text {
   font-weight: normal;
   width: 50%;
-  @media screen and (width <= 425px) {
+  @media screen and (width <= 475px) {
     font-size: var(--font-down-2);
   }
 }
@@ -108,7 +108,7 @@ p.reading-time__text {
 .reading-time .rewind-card {
   gap: 1em;
   padding: 1.5em;
-  @media screen and (width <= 425px) {
+  @media screen and (width <= 475px) {
     padding: 0.75em;
   }
   flex-direction: row;

assets/stylesheets/common/top-words.scss

@@ -45,7 +45,7 @@
   @media screen and (width <= 625px) {
     width: 115px;
   }
-  @media screen and (width <= 425px) {
+  @media screen and (width <= 475px) {
     width: 100px;
     height: 125px;
   }
@@ -145,7 +145,7 @@
     img {
       width: 20px;
       height: 20px;
-      @media screen and (width <= 425px) {
+      @media screen and (width <= 475px) {
         height: 15px;
         width: 15px;
       }
@@ -156,7 +156,7 @@
     img {
       width: 50px;
       height: 50px;
-      @media screen and (width <= 425px) {
+      @media screen and (width <= 475px) {
         height: 30px;
         width: 30px;
       }
@@ -168,7 +168,7 @@
       width: 20px;
       height: 20px;
       transform: rotate(180deg);
-      @media screen and (width <= 425px) {
+      @media screen and (width <= 475px) {
         height: 15px;
         width: 15px;
       }