DEV: Update linting (#15)

Gemfile.lock

@@ -1,80 +1,93 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    activesupport (7.1.3.3)
+    activesupport (8.0.2)
       base64
+      benchmark (>= 0.3)
       bigdecimal
-      concurrent-ruby (~> 1.0, >= 1.0.2)
+      concurrent-ruby (~> 1.0, >= 1.3.1)
       connection_pool (>= 2.2.5)
       drb
       i18n (>= 1.6, < 2)
+      logger (>= 1.4.2)
       minitest (>= 5.1)
-      mutex_m
+      securerandom (>= 0.3)
-      tzinfo (~> 2.0)
+      tzinfo (~> 2.0, >= 2.0.5)
+      uri (>= 0.13.1)
     ast (2.4.2)
     base64 (0.2.0)
-    bigdecimal (3.1.8)
+    benchmark (0.4.0)
-    concurrent-ruby (1.2.3)
+    bigdecimal (3.1.9)
-    connection_pool (2.4.1)
+    concurrent-ruby (1.3.5)
+    connection_pool (2.5.0)
     drb (2.2.1)
-    i18n (1.14.5)
+    i18n (1.14.7)
       concurrent-ruby (~> 1.0)
-    json (2.7.2)
+    json (2.10.2)
-    language_server-protocol (3.17.0.3)
+    language_server-protocol (3.17.0.4)
-    minitest (5.23.1)
+    lint_roller (1.1.0)
-    mutex_m (0.2.0)
+    logger (1.6.6)
-    parallel (1.24.0)
+    minitest (5.25.5)
-    parser (3.3.1.0)
+    parallel (1.26.3)
+    parser (3.3.7.1)
       ast (~> 2.4.1)
       racc
     prettier_print (1.2.1)
-    racc (1.8.0)
+    racc (1.8.1)
-    rack (3.0.12)
+    rack (3.1.12)
     rainbow (3.1.1)
-    regexp_parser (2.9.2)
+    regexp_parser (2.10.0)
-    rexml (3.3.9)
+    rubocop (1.74.0)
-    rubocop (1.64.0)
       json (~> 2.3)
-      language_server-protocol (>= 3.17.0)
+      language_server-protocol (~> 3.17.0.2)
+      lint_roller (~> 1.1.0)
       parallel (~> 1.10)
       parser (>= 3.3.0.2)
       rainbow (>= 2.2.2, < 4.0)
-      regexp_parser (>= 1.8, < 3.0)
+      regexp_parser (>= 2.9.3, < 3.0)
-      rexml (>= 3.2.5, < 4.0)
+      rubocop-ast (>= 1.38.0, < 2.0)
-      rubocop-ast (>= 1.31.1, < 2.0)
       ruby-progressbar (~> 1.7)
-      unicode-display_width (>= 2.4.0, < 3.0)
+      unicode-display_width (>= 2.4.0, < 4.0)
-    rubocop-ast (1.31.3)
+    rubocop-ast (1.38.1)
       parser (>= 3.3.1.0)
-    rubocop-capybara (2.20.0)
+    rubocop-capybara (2.22.1)
-      rubocop (~> 1.41)
+      lint_roller (~> 1.1)
-    rubocop-discourse (3.8.0)
+      rubocop (~> 1.72, >= 1.72.1)
+    rubocop-discourse (3.12.1)
       activesupport (>= 6.1)
-      rubocop (>= 1.59.0)
+      lint_roller (>= 1.1.0)
-      rubocop-capybara (>= 2.0.0)
+      rubocop (>= 1.73.2)
-      rubocop-factory_bot (>= 2.0.0)
+      rubocop-capybara (>= 2.22.0)
-      rubocop-rails (>= 2.25.0)
+      rubocop-factory_bot (>= 2.27.0)
-      rubocop-rspec (>= 2.25.0)
+      rubocop-rails (>= 2.30.3)
-    rubocop-factory_bot (2.25.1)
+      rubocop-rspec (>= 3.0.1)
-      rubocop (~> 1.41)
+      rubocop-rspec_rails (>= 2.31.0)
-    rubocop-rails (2.25.0)
+    rubocop-factory_bot (2.27.1)
+      lint_roller (~> 1.1)
+      rubocop (~> 1.72, >= 1.72.1)
+    rubocop-rails (2.30.3)
       activesupport (>= 4.2.0)
+      lint_roller (~> 1.1)
       rack (>= 1.1)
-      rubocop (>= 1.33.0, < 2.0)
+      rubocop (>= 1.72.1, < 2.0)
-      rubocop-ast (>= 1.31.1, < 2.0)
+      rubocop-ast (>= 1.38.0, < 2.0)
-    rubocop-rspec (2.29.2)
+    rubocop-rspec (3.5.0)
-      rubocop (~> 1.40)
+      lint_roller (~> 1.1)
-      rubocop-capybara (~> 2.17)
+      rubocop (~> 1.72, >= 1.72.1)
-      rubocop-factory_bot (~> 2.22)
+    rubocop-rspec_rails (2.31.0)
-      rubocop-rspec_rails (~> 2.28)
+      lint_roller (~> 1.1)
-    rubocop-rspec_rails (2.28.3)
+      rubocop (~> 1.72, >= 1.72.1)
-      rubocop (~> 1.40)
+      rubocop-rspec (~> 3.5)
     ruby-progressbar (1.13.0)
+    securerandom (0.4.1)
     syntax_tree (6.2.0)
       prettier_print (>= 1.2.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
-    unicode-display_width (2.5.0)
+    unicode-display_width (3.1.4)
+      unicode-emoji (~> 4.0, >= 4.0.4)
+    unicode-emoji (4.0.4)
+    uri (1.0.3)
 
 PLATFORMS
   ruby
@@ -84,4 +97,4 @@ DEPENDENCIES
   syntax_tree
 
 BUNDLED WITH
-   2.5.10
+   2.6.6

app/services/discourse_rewind/action/fbff.rb

@@ -5,9 +5,9 @@
 module DiscourseRewind
   module Action
     class Fbff < BaseReport
-      MAX_SUMMARY_RESULTS ||= 50
+      MAX_SUMMARY_RESULTS = 50
-      LIKE_SCORE ||= 1
+      LIKE_SCORE = 1
-      REPLY_SCORE ||= 10
+      REPLY_SCORE = 10
 
       def call
         most_liked_users =

assets/stylesheets/common/activity-calendar.scss

@@ -1,17 +1,22 @@
 .-activity-calendar {
   margin-bottom: 5em;
+
   .rewind-card {
     @include rewind-border;
-    @media screen and (width <= 475px) {
+
+    @media screen and (max-width: 475px) {
       padding: 0.5em;
     }
   }
+
   .rewind-calendar {
     border-collapse: unset;
     border-spacing: 3px;
-    @media screen and (width <= 475px) {
+
+    @media screen and (max-width: 475px) {
       border-spacing: 1px;
     }
+
     tr {
       border: none;
     }
@@ -26,21 +31,26 @@
   .rewind-calendar-cell {
     height: 10px;
     width: 10px;
-    @media screen and (width <= 475px) {
+    border-radius: calc(var(--rewind-border-radius) / 2);
+    border: 1px solid rgba(var(--primary-rgb), 0.2);
+
+    @media screen and (max-width: 475px) {
       height: 5px;
       width: 5px;
     }
-    border-radius: calc(var(--rewind-border-radius) / 2);
+
-    border: 1px solid rgba(var(--primary-rgb), 0.2);
     &.-empty {
       background: var(--primary-low);
     }
+
     &.-low {
       background: var(--tertiary-low);
     }
+
     &.-medium {
       background: var(--tertiary-medium);
     }
+
     &.-high {
       background: var(--tertiary-high);
     }

assets/stylesheets/common/best-posts.scss

@@ -3,45 +3,52 @@
     flex-direction: column;
     gap: 1em;
   }
+
   .rewind-card {
     max-width: 700px;
     text-align: left;
     align-items: unset;
     position: relative;
+
     @include rewind-border;
+
     &.rank-1 {
       --background: #ffe46a;
       --border-color: #ffd82a;
     }
+
     &.rank-2 {
       --background: #d6d6d6;
       --border-color: #c4c4c4;
     }
+
     &.rank-3 {
       --background: #dca570;
       --border-color: #cd7f32;
     }
   }
+
   .best-posts.-rank {
     z-index: -1;
     position: absolute;
     top: 8px;
     left: -20px;
-    width: 0px;
+    width: 0;
-    height: 0px;
+    height: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: none;
     border-right: 28px solid var(--border-color);
     border-top: 28px solid transparent;
+
     &:nth-child(2) {
       z-index: -1;
       position: absolute;
       top: 8px;
       left: -20px;
-      width: 0px;
+      width: 0;
-      height: 0px;
+      height: 0;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -50,12 +57,14 @@
       transform: rotate(180deg);
     }
   }
+
   .best-posts__post {
     @media screen and (max-width: 475px) {
       max-height: 300px;
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
+
       p {
         text-overflow: ellipsis;
         overflow: hidden;
@@ -63,6 +72,7 @@
       }
     }
   }
+
   .best-posts__post p {
     font-family: var(--pixel-text) !important;
     font-weight: normal;
@@ -70,39 +80,47 @@
     width: 100%;
     text-align: left;
     color: var(--primary-800);
+
     @media screen and (max-width: 475px) {
       font-size: var(--font-down-2);
     }
   }
+
   .best-posts__post h1,
   .best-posts__post h2 {
     font-family: var(--jersey-heading);
     font-size: 32px;
     line-height: 22px;
   }
+
   .best-post__post h5 {
     font-family: var(--jersey-heading);
   }
+
   .best-posts__post table {
     font-family: var(--pixel-text) !important;
     font-weight: normal;
     font-size: var(--font-down-1);
   }
+
   .best-posts__post img {
     max-width: 100%;
     height: auto;
   }
+
   .best-posts__post code,
   .best-posts__post pre {
     font-family: var(--pixel-text);
     font-weight: normal;
     font-size: var(--font-down-1);
   }
+
   .best-posts__metadata a {
     font-family: var(--pixel-text);
     text-transform: uppercase;
     color: var(--primary);
   }
+
   .best-posts__metadata {
     font-weight: normal;
     font-size: 12px;
@@ -111,6 +129,7 @@
     color: var(--primary-700);
     align-items: center;
   }
+
   .best-posts__likes,
   .best-posts__replies {
     font-family: var(--pixel-text);
@@ -120,6 +139,7 @@
     display: flex;
     gap: 5px;
     align-items: center;
+
     svg {
       color: var(--primary-700);
     }

assets/stylesheets/common/best-topics.scss

@@ -3,9 +3,11 @@
     flex-direction: column;
     gap: 1em;
   }
+
   .best-topics__title {
     color: var(--primary);
   }
+
   .rewind-card {
     gap: 1em;
     align-items: flex-start;
@@ -14,12 +16,14 @@
     border: none;
     padding: 0;
   }
+
   .best-topics__header {
     font-family: var(--jersey-heading);
     margin: 0;
     font-size: var(--font-up-3);
     line-height: var(--font-0);
   }
+
   .best-topics__topic {
     padding: 0.5em;
     position: relative;
@@ -28,41 +32,47 @@
     flex-direction: column;
     text-align: left;
     max-width: 700px;
+
     @include rewind-border;
+
     &.rank-1 {
       --background: #ffe46a;
       --border-color: #ffd82a;
     }
+
     &.rank-2 {
       --background: #d6d6d6;
       --border-color: #c4c4c4;
     }
+
     &.rank-3 {
       --background: #dca570;
       --border-color: #cd7f32;
     }
     background: var(--secondary);
   }
+
   .best-topics.-rank {
     z-index: -1;
     position: absolute;
     top: 8px;
     left: -20px;
-    width: 0px;
+    width: 0;
-    height: 0px;
+    height: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: none;
     border-right: 28px solid var(--border-color);
     border-top: 28px solid transparent;
+
     &:nth-child(2) {
       z-index: -1;
       position: absolute;
       top: 8px;
       left: -20px;
-      width: 0px;
+      width: 0;
-      height: 0px;
+      height: 0;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -71,17 +81,20 @@
       transform: rotate(180deg);
     }
   }
+
   .best-topics__excerpt {
     font-family: var(--pixel-text);
     font-size: var(--font-down-1);
     font-weight: 400;
     color: var(--primary-800);
     text-align: left;
+
     @media screen and (max-width: 475px) {
       max-width: 100%;
       overflow: hidden;
       font-size: var(--font-down-2);
     }
+
     &:empty {
       display: none;
     }

assets/stylesheets/common/card.scss

@@ -1,5 +1,6 @@
 .rewind-report-container {
   perspective: 1000px;
+
   --ambientAmount: 0.1;
   --easeAmount: 0;
   animation: ambientMovement;
@@ -22,18 +23,22 @@
   justify-content: center;
   width: 100%;
   max-width: 700px;
+
   &__title {
     font-family: var(--jersey-heading) !important;
     font-weight: 600;
     font-size: var(--font-up-3);
     -webkit-font-smoothing: antialiased;
+
     @media screen and (max-width: 525px) {
       font-size: var(--font-up-2);
     }
+
     @media screen and (max-width: 475px) {
       font-size: var(--font-up-0);
     }
   }
+
   &__data {
     font-weight: normal;
     font-size: 16px;

assets/stylesheets/common/favorite-categories.scss

@@ -4,10 +4,12 @@
     gap: 0.5em;
     flex-wrap: wrap;
   }
+
   .rewind-card {
     @include rewind-border;
     width: max-content;
     flex-grow: 1;
+
     &:hover {
       background-color: var(--secondary-very-high);
     }

assets/stylesheets/common/favorite-tags.scss

@@ -4,10 +4,12 @@
     gap: 0.5em;
     flex-wrap: wrap;
   }
+
   .rewind-card {
     @include rewind-border;
     width: max-content;
     flex-grow: 1;
+
     &:hover {
       background-color: var(--secondary-very-high);
     }

assets/stylesheets/common/fbff.scss

@@ -1,23 +1,27 @@
 .-fbff {
+  --border-size: 6px;
+
+  @media screen and (max-width: 768px) {
+    --border-size: 4px;
+  }
+
+  @media screen and (max-width: 475px) {
+    --border-size: 3px;
+  }
+
   .rewind-card {
-    @include rewind-border;
     display: grid;
     grid-template-columns: 1fr 400px 1fr;
-    @media screen and (width <= 625px) {
+
+    @include rewind-border;
+
+    @media screen and (max-width: 625px) {
       grid-template-columns: 1fr 1fr 1fr;
       grid-template-rows: min-content min-content;
       grid-template-areas: "gif gif gif" "friend nothing you";
     }
   }
 
-  --border-size: 6px;
-  @media screen and (width <= 768px) {
-    --border-size: 4px;
-  }
-  @media screen and (width <= 475px) {
-    --border-size: 3px;
-  }
-
   .fbff-gif-container {
     position: relative;
     width: 90%;
@@ -25,7 +29,8 @@
     align-self: center;
     justify-self: center;
     z-index: 10;
-    @media screen and (width <= 625px) {
+
+    @media screen and (max-width: 625px) {
       grid-area: gif;
     }
   }
@@ -37,7 +42,11 @@
 
   .fbff-avatar-container {
     z-index: 10;
-    @media screen and (width <= 625px) {
+    display: grid;
+    grid-template-rows: 1fr min-content;
+    flex-direction: column;
+
+    @media screen and (max-width: 625px) {
       &:first-of-type {
         grid-area: friend;
       }
@@ -46,27 +55,23 @@
         grid-area: you;
       }
     }
-  }
 
-  .fbff-avatar-container img.avatar {
+    img.avatar {
-    align-self: center;
+      align-self: center;
-    justify-self: center;
+      justify-self: center;
-    width: 75px;
+      width: 75px;
-    height: 75px;
+      height: 75px;
-    @media screen and (width <= 768px) {
-      width: 50px;
-      height: 50px;
-    }
-    @media screen and (width <= 475px) {
-      width: 25px;
-      height: 25px;
-    }
-  }
 
-  .fbff-avatar-container {
+      @media screen and (max-width: 768px) {
-    display: grid;
+        width: 50px;
-    grid-template-rows: 1fr min-content;
+        height: 50px;
-    flex-direction: column;
+      }
+
+      @media screen and (max-width: 475px) {
+        width: 25px;
+        height: 25px;
+      }
+    }
   }
 
   .fbff-avatar-name {
@@ -76,8 +81,9 @@
     margin-top: auto;
     height: min-content;
     font-size: var(--font-down-1);
-    font-family: "Pixelify Sans";
+    font-family: "Pixelify Sans", sans-serif;
-    @media screen and (width <= 475px) {
+
+    @media screen and (max-width: 475px) {
       font-size: var(--font-down-3);
     }
   }

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

@@ -3,20 +3,17 @@
     align-items: center;
     justify-content: space-between;
     gap: 0.5em;
-    @media screen and (width <= 475px) {
+
+    @media screen and (max-width: 475px) {
       gap: 0.125em;
     }
   }
+
   .rewind-card {
     background: var(--secondary);
     flex-direction: row;
     gap: 0.5em;
     height: min-content;
-    @include rewind-border;
-    .emoji {
-      width: 30px;
-      height: 30px;
-    }
     perspective: 1000px;
     will-change: transform;
     transform-style: preserve-3d;
@@ -28,87 +25,115 @@
     animation-iteration-count: infinite;
     animation-timing-function: ease-in-out;
     z-index: 1;
+
+    @include rewind-border;
+
+    .emoji {
+      width: 30px;
+      height: 30px;
+    }
   }
+
   .rewind-card__emoji {
     font-size: 12px;
   }
+
   .scale:nth-child(1) {
     padding: 0.25em;
     transform: rotateZ(calc(var(--ambientAmount) * 12deg));
+
     .emoji {
       width: 20px;
       height: 20px;
     }
   }
+
   .scale:nth-child(2) {
     padding: 0.35em;
     transform: rotateZ(calc(var(--ambientAmount) * 11.2deg));
+
     .emoji {
       width: 22px;
       height: 22px;
     }
   }
+
   .scale:nth-child(3) {
     transform: rotateZ(calc(var(--ambientAmount) * 10deg));
     padding: 0.5em;
+
     .emoji {
       width: 24px;
       height: 24px;
     }
   }
+
   .scale:nth-child(4) {
     transform: rotateZ(calc(var(--ambientAmount) * 8deg));
     padding: 0.75em;
+
     .emoji {
       width: 26px;
       height: 26px;
     }
   }
+
   .scale:nth-child(5) {
     transform: rotateZ(calc(var(--ambientAmount) * 13deg));
   }
-  @media screen and (width <= 625px) {
+
+  @media screen and (max-width: 625px) {
     .scale {
       width: min-content;
     }
+
     .scale:nth-child(1) {
       padding: 0.15em;
     }
+
     .scale:nth-child(2) {
       padding: 0.25em;
     }
+
     .scale:nth-child(3) {
       padding: 0.35em;
     }
+
     .scale:nth-child(4) {
       padding: 0.45em;
     }
+
     .scale:nth-child(5) {
       padding: 0.65em;
     }
   }
-  @media screen and (width <= 475px) {
+
+  @media screen and (max-width: 475px) {
     .scale {
       width: min-content;
     }
+
     .scale:nth-child(1) {
       padding: 0.15em;
       display: none;
     }
+
     .scale:nth-child(2) {
       padding: 0.2em;
       margin-top: 10px;
     }
+
     .scale:nth-child(3) {
       padding: 0.2em;
       margin-top: 20px;
     }
+
     .scale:nth-child(4) {
       padding: 0.2em;
     }
+
     .scale:nth-child(5) {
       padding: 0.2em;
-
       margin-top: 20px;
     }
   }

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

@@ -2,6 +2,7 @@
   .rewind-card {
     @include rewind-border;
   }
+
   .rewind-reactions-chart {
     display: flex;
     flex-direction: column;

assets/stylesheets/common/reading-time.scss

@@ -8,14 +8,15 @@
 .book {
   width: 150px;
   height: 200px;
-  @media screen and (width <= 475px) {
-    width: 100px;
-    height: 133px;
-  }
   position: relative;
   transform-style: preserve-3d;
   transform: rotateY(-20deg);
   z-index: 2;
+
+  @media screen and (max-width: 475px) {
+    width: 100px;
+    height: 133px;
+  }
 }
 
 p.reading-time__text {
@@ -32,29 +33,24 @@ p.reading-time__text {
   left: 0;
   width: 150px;
   height: 200px;
-  @media screen and (width <= 475px) {
-    width: 100px;
-    height: 133px;
-  }
   transform: translateZ(17.5px);
   background-color: #01060f;
   border-radius: 0 5px 5px 0;
   box-shadow: 5px 5px 20px rgba(var(--primary-rgb), 0.05);
+
+  @media screen and (max-width: 475px) {
+    width: 100px;
+    height: 133px;
+  }
 }
 
 .book::before {
   position: absolute;
   content: " ";
-  background-color: blue;
   left: 0;
   top: 4px;
   width: 33px;
   height: 192px;
-  @media screen and (width <= 475px) {
-    left: -43px;
-    width: 22px;
-    height: 125px;
-  }
   transform: translateX(128.5px) rotateY(90deg);
   background: linear-gradient(
     90deg,
@@ -80,6 +76,12 @@ p.reading-time__text {
     #b6b6b6 95%,
     #b6b6b6 100%
   );
+
+  @media screen and (max-width: 475px) {
+    left: -43px;
+    width: 22px;
+    height: 125px;
+  }
 }
 
 .book::after {
@@ -92,8 +94,9 @@ p.reading-time__text {
   transform: translateZ(-17.5px);
   background-color: var(--book-color);
   border-radius: 0 5px 5px 0;
-  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25);
-  @media screen and (width <= 475px) {
+
+  @media screen and (max-width: 475px) {
     width: 100px;
     height: 133px;
   }
@@ -102,7 +105,8 @@ p.reading-time__text {
 .reading-time__text {
   font-weight: normal;
   width: 50%;
-  @media screen and (width <= 475px) {
+
+  @media screen and (max-width: 475px) {
     font-size: var(--font-down-2);
   }
 }
@@ -110,45 +114,43 @@ p.reading-time__text {
 .reading-time .rewind-card {
   gap: 1em;
   padding: 1.5em;
-  @media screen and (width <= 475px) {
-    padding: 0.75em;
-  }
   flex-direction: row;
   justify-content: space-around;
   align-items: center;
   background-color: var(--secondary);
+
   --book-color: var(--primary-very-high);
+
   @include rewind-border;
+
+  @media screen and (max-width: 475px) {
+    padding: 0.75em;
+  }
 }
 
 .book-series {
   width: 150px;
   height: 200px;
-  @media screen and (width <= 475px) {
-    width: 100px;
-    height: 133px;
-  }
-  position: relative;
   transform-style: preserve-3d;
   transform: rotateY(-20deg);
   position: absolute;
   background-color: var(--book-color);
   border-radius: 0 5px 5px 0;
-  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25);
   z-index: 1;
+
+  @media screen and (max-width: 475px) {
+    width: 100px;
+    height: 133px;
+  }
+
   &::before {
     position: absolute;
     content: " ";
-    background-color: blue;
     left: 0;
     top: 4px;
     width: 33px;
     height: 192px;
-    @media screen and (width <= 475px) {
-      left: -43px;
-      width: 22px;
-      height: 125px;
-    }
     transform: translateX(128.5px) rotateY(90deg);
     background: linear-gradient(
       90deg,
@@ -174,29 +176,41 @@ p.reading-time__text {
       #b6b6b6 95%,
       #b6b6b6 100%
     );
+
+    @media screen and (max-width: 475px) {
+      left: -43px;
+      width: 22px;
+      height: 125px;
+    }
   }
+
   &.one {
     top: 3px;
     left: 14px;
-    @media screen and (width <= 475px) {
+
+    @media screen and (max-width: 475px) {
       top: 3px;
       left: 11px;
     }
   }
+
   &.two {
     top: 5px;
     left: 22px;
     z-index: -1;
-    @media screen and (width <= 475px) {
+
+    @media screen and (max-width: 475px) {
       top: 5px;
       left: 17px;
     }
   }
+
   &.three {
     top: 7px;
     left: 31px;
     z-index: -2;
-    @media screen and (width <= 475px) {
+
+    @media screen and (max-width: 475px) {
       display: none;
     }
   }

assets/stylesheets/common/report.scss

@@ -8,7 +8,8 @@
   max-width: 700px;
   margin: 0 auto;
   flex-direction: column;
-  @media (width <= 768px) {
+
+  @media (max-width: 768px) {
     padding: 0.75em;
   }
 }

assets/stylesheets/common/rewind-callout.scss

@@ -1,7 +1,6 @@
 .rewind-callout {
   background: var(--primary);
   padding: 12px;
-  margin-bottom: 0.5em;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -13,21 +12,26 @@
   transition: box-shadow;
   transition-duration: 0.5s;
   transition-timing-function: ease-in-out;
-  .rewind-logo {
-    height: 30px;
-  }
 
   &:hover,
   &:focus {
     background: var(--primary) !important;
-    box-shadow: 0 0 0 2px rgba(var(--d-blue), 1),
+    box-shadow:
-      0 0 0 4px rgba(var(--d-green), 1), 0 0 0 6px rgba(var(--d-orange), 1),
+      0 0 0 2px rgba(var(--d-blue), 1),
+      0 0 0 4px rgba(var(--d-green), 1),
+      0 0 0 6px rgba(var(--d-orange), 1),
       0 0 0 8px rgba(var(--d-red), 1);
+
     @if color-scheme-is-light {
-      box-shadow: 0 0 0 2px rgba(var(--d-blue-dark), 1),
+      box-shadow:
+        0 0 0 2px rgba(var(--d-blue-dark), 1),
         0 0 0 4px rgba(var(--d-green-dark), 1),
         0 0 0 6px rgba(var(--d-orange-dark), 1),
         0 0 0 8px rgba(var(--d-red-dark), 1);
     }
   }
+
+  .rewind-logo {
+    height: 30px;
+  }
 }

assets/stylesheets/common/rewind-header.scss

@@ -23,6 +23,7 @@
     &.-dark {
       display: none;
     }
+
     &.-light {
       display: block;
     }
@@ -35,6 +36,7 @@
   position: sticky;
   top: 0;
   z-index: 1;
+
   .rewind-logo {
     margin-bottom: 5px;
   }

assets/stylesheets/common/rewind.scss

@@ -23,8 +23,8 @@
     position: fixed;
     background: rgba(var(--secondary-rgb), 0.5);
     backdrop-filter: blur(4.9px);
-    -webkit-backdrop-filter: blur(4.9px);
+
-    @media (width <= 768px) {
+    @media (max-width: 768px) {
       padding: 0;
     }
   }
@@ -35,16 +35,16 @@
   height: 100vh;
   max-height: 100%;
   max-width: 960px;
-  background-color: var(--secondary);
   border: 1px solid var(--primary);
   border-radius: var(--rewind-border-radius);
   container-type: size;
   position: relative;
   overflow: hidden;
   background: var(--secondary);
-  @media (width <= 768px) {
+
+  @media (max-width: 768px) {
     border: none;
-    border-radius: 0px;
+    border-radius: 0;
   }
 }
 
@@ -52,16 +52,18 @@
   background: absolute-image-url(
     "/plugins/discourse-rewind/images/blur-bg.png"
   );
-  @if is-dark-color-scheme() {
-    opacity: 0.15;
-  }
   background-size: contain;
   position: absolute;
-  transform: translateY(0px);
+  transform: translateY(0);
   width: 100%;
   height: 1000%;
   opacity: 0.45;
+
+  @if is-dark-color-scheme() {
+    opacity: 0.15;
+  }
 }
+
 .rewind__scroll-wrapper {
   overflow-y: auto;
   overflow-x: hidden;

assets/stylesheets/common/top-words.scss

@@ -7,6 +7,7 @@
 
 .cards-container {
   display: flex;
+
   @media (max-width: 525px) {
     display: grid;
     grid-template:
@@ -21,18 +22,23 @@
       ".  .  .  d  d  c  c  .  .  . " auto
       ".  .  .  d  d  c  c  .  .  . " auto
       / auto auto auto auto auto auto auto auto;
+
     .rewind-card__wrapper:nth-child(1) {
       grid-area: w;
     }
+
     .rewind-card__wrapper:nth-child(2) {
       grid-area: a;
     }
+
     .rewind-card__wrapper:nth-child(3) {
       grid-area: z;
     }
+
     .rewind-card__wrapper:nth-child(4) {
       grid-area: d;
     }
+
     .rewind-card__wrapper:nth-child(5) {
       grid-area: c;
     }
@@ -42,17 +48,6 @@
 .rewind-card__wrapper {
   width: 150px;
   height: 175px;
-  @media screen and (width <= 625px) {
-    width: 115px;
-  }
-  @media screen and (width <= 475px) {
-    width: 100px;
-    height: 125px;
-  }
-  @media screen and (width <= 350px) {
-    width: 80px;
-    height: 125px;
-  }
   perspective: 1000px;
   will-change: transform;
   transform-style: preserve-3d;
@@ -65,14 +60,31 @@
   animation-timing-function: ease-in-out;
   transform: rotateZ(calc(var(--ambientAmount) * 10deg));
   z-index: 1;
+
+  @media screen and (max-width: 625px) {
+    width: 115px;
+  }
+
+  @media screen and (max-width: 475px) {
+    width: 100px;
+    height: 125px;
+  }
+
+  @media screen and (max-width: 350px) {
+    width: 80px;
+    height: 125px;
+  }
+
   .rewind-card {
     box-shadow: 0 0 0 4px rgba(var(--mystery-color-light), 1);
     border: none;
+
     @if is-dark-color-scheme() {
       background-color: var(--primary-200);
       box-shadow: 0 0 0 4px rgba(var(--mystery-color-dark), 1);
     }
   }
+
   .rewind-card__inner {
     position: relative;
     width: 100%;
@@ -82,42 +94,48 @@
     transition: transform, box-shadow;
     transition-duration: 0.35s;
     transition-timing-function: cubic-bezier(0.73, 0.42, 0.03, 0.78);
+    box-shadow: 0 0 6px 2px rgba(var(--primary-rgb), 0.25);
+
+    @if is-dark-color-scheme() {
+      box-shadow: 0 0 6px 2px rgba(var(--secondary-rgb), 0.9);
+    }
   }
+
   &.mouseleave {
     animation: flip-shrink 0.35s cubic-bezier(0.73, 0.42, 0.03, 0.78) 0s
       forwards;
     z-index: 999;
   }
+
   &.flipped .rewind-card__inner {
     transform: rotateY(180deg);
   }
+
   &:hover {
     animation: flip-zoom 0.35s cubic-bezier(0.73, 0.42, 0.03, 0.78) 0s forwards;
     z-index: 999;
   }
+
   &:hover .rewind-card__inner {
-    box-shadow: 0px 3px 8px 2px rgba(var(--primary-rgb), 0.25);
+    box-shadow: 0 3px 8px 2px rgba(var(--primary-rgb), 0.25);
+
     @if is-dark-color-scheme() {
-      box-shadow: 0px 3px 8px 2px rgba(var(--primary-rgb), 0.25);
+      box-shadow: 0 3px 8px 2px rgba(var(--primary-rgb), 0.25);
-    }
-  }
-  .rewind-card__inner {
-    box-shadow: 0px 0px 6px 2px rgba(var(--primary-rgb), 0.25);
-    @if is-dark-color-scheme() {
-      box-shadow: 0px 0px 6px 2px rgba(var(--secondary-rgb), 0.9);
     }
   }
+
   .rewind-card.-back {
     transform: rotateY(180deg);
   }
+
   .rewind-card.-front,
   .rewind-card.-back {
     position: absolute;
     width: 100%;
-    height: 100%;
+    height: 100%; /* Safari */
-    -webkit-backface-visibility: hidden; /* Safari */
     backface-visibility: hidden;
   }
+
   .rewind-card.-front {
     padding: 0.5em;
     display: grid;
@@ -128,7 +146,8 @@
       ".  .  . " 1fr
       ".  .  br" 1fr
       / 1fr 3fr 1fr;
-    background: radial-gradient(
+    background:
+      radial-gradient(
           circle at 4px 4px,
           var(--primary-100) 1px,
           var(--secondary) 1px,
@@ -137,48 +156,61 @@
         0 0 / 6px 6px,
       var(--secondary-low);
   }
+
   &.-long-word .rewind-card__title {
     font-size: var(--font-0);
   }
+
   &.-long-word .rewind-card {
     padding: 2px;
   }
+
   .rewind-card__title {
     overflow-wrap: anywhere;
     hyphens: auto;
   }
+
   .rewind-card__image {
     image-rendering: pixelated;
   }
+
   .rewind-card__image.tl {
     grid-area: tl;
+
     img {
       width: 20px;
       height: 20px;
-      @media screen and (width <= 475px) {
+
+      @media screen and (max-width: 475px) {
         height: 15px;
         width: 15px;
       }
     }
   }
+
   .rewind-card__image.cr {
     grid-area: cr;
+
     img {
       width: 50px;
       height: 50px;
-      @media screen and (width <= 475px) {
+
+      @media screen and (max-width: 475px) {
         height: 30px;
         width: 30px;
       }
     }
   }
+
   .rewind-card__image.br {
     grid-area: br;
+
     img {
       width: 20px;
       height: 20px;
       transform: rotate(180deg);
-      @media screen and (width <= 475px) {
+
+      @media screen and (max-width: 475px) {
         height: 15px;
         width: 15px;
       }
@@ -190,9 +222,11 @@
   0% {
     transform: scale(1);
   }
+
   50% {
     transform: scale(0.9);
   }
+
   100% {
     transform: scale(1.25);
   }
@@ -202,9 +236,11 @@
   0% {
     transform: scale(1.25);
   }
+
   50% {
     transform: scale(0.9);
   }
+
   100% {
     transform: scale(1);
   }
@@ -214,9 +250,11 @@
   0% {
     --ambientAmount: 0.1;
   }
+
   50% {
     --ambientAmount: -0.1;
   }
+
   100% {
     --ambientAmount: 0.1;
   }

assets/stylesheets/common/variables.scss

@@ -9,7 +9,6 @@
   --d-green-dark: 17, 138, 68;
   --d-orange-dark: 188, 105, 65;
   --d-red-dark: 183, 64, 70;
-
   --rewind-border-radius: 4px;
 }
 
@@ -17,6 +16,7 @@
   border: 2px solid var(--primary);
   border-radius: var(--rewind-border-radius);
   box-shadow: 4px 4px 0 0 rgba(var(--primary-rgb), 0.25);
+
   @if is-dark-color-scheme() {
     box-shadow: 0 4px 5px -2px rgba(var(--secondary-rgb), 0.5);
   }

package.json

@@ -1,10 +1,11 @@
 {
   "private": true,
   "devDependencies": {
-    "@discourse/lint-configs": "2.4.0",
+    "@discourse/lint-configs": "2.11.1",
-    "ember-template-lint": "6.1.0",
+    "ember-template-lint": "7.0.1",
-    "eslint": "9.19.0",
+    "eslint": "9.22.0",
-    "prettier": "2.8.8"
+    "prettier": "3.5.3",
+    "stylelint": "16.16.0"
   },
   "engines": {
     "node": ">= 22",

stylelint.config.mjs

@@ -0,0 +1,3 @@
+export default {
+  extends: ["@discourse/lint-configs/stylelint"],
+};