hand off to joffrey

assets/javascripts/discourse/components/reports/best-topics.gjs

@@ -19,7 +19,7 @@ export default class BestTopics extends Component {
             >
               <span class="best-topics -rank"></span>
               <span class="best-topics -rank"></span>
-              <h2>{{topic.title}}</h2>
+              <h2 class="best-topics__header">{{topic.title}}</h2>
               <span class="best-topics__excerpt">{{htmlSafe
                   topic.excerpt
                 }}</span>

assets/javascripts/discourse/components/reports/word-card.gjs

@@ -86,7 +86,7 @@ export default class WordCard extends Component {
         </div>
         <div class="rewind-card -back">
           <span class="rewind-card__title">{{@word}}</span>
-          <span class="rewind-card__data">used {{@count}} times</span>
+          <span class="rewind-card__data">{{@count}}x</span>
         </div>
       </div>
     </div>

assets/stylesheets/common/activity-calendar.scss

@@ -1,5 +1,5 @@
 .rewind-report-page.-activity-calendar {
-  margin-bottom: 1em;
+  margin-bottom: 5em;
   .rewind-card {
     @include rewind-border;
   }
@@ -20,7 +20,7 @@
   .rewind-calendar-cell {
     height: 10px;
     width: 10px;
-    border-radius: var(--rewind-border-radius);
+    border-radius: calc(var(--rewind-border-radius) / 2);
     border: 1px solid rgba(var(--primary-rgb), 0.2);
     &.-empty {
       background: var(--primary-low);

assets/stylesheets/common/best-posts.scss

@@ -51,10 +51,47 @@
     }
   }
   .best-posts__post {
+    @media screen and (max-width: 425px) {
+      max-height: 300px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      p {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+    }
+  }
+  .best-posts__post p {
+    font-family: var(--pixel-text) !important;
     font-weight: normal;
-    font-size: 16px;
+    font-size: var(--font-down-);
     width: 100%;
     text-align: left;
+    color: var(--primary-800);
+    @media screen and (max-width: 425px) {
+      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__metadata a {
+    font-family: var(--pixel-text);
+    text-transform: uppercase;
+    color: var(--primary);
   }
   .best-posts__metadata {
     font-weight: normal;
@@ -66,6 +103,7 @@
   }
   .best-posts__likes,
   .best-posts__replies {
+    font-family: var(--pixel-text);
     border: 1px solid var(--primary-200);
     padding: 3px 8px;
     border-radius: var(--rewind-border-radius);

assets/stylesheets/common/best-topics.scss

@@ -14,14 +14,23 @@
     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: 1em;
+    padding: 0.5em;
     position: relative;
     color: var(--primary);
     display: flex;
     flex-direction: column;
     text-align: left;
     max-width: 700px;
+    @media screen and (max-width: 425px) {
+      max-width: 90%;
+    }
     @include rewind-border;
     &.rank-1 {
       --background: #ffe46a;
@@ -66,10 +75,16 @@
     }
   }
   .best-topics__excerpt {
-    font-size: var(--font-down-2);
+    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: 425px) {
+      max-width: 100%;
+      overflow: hidden;
+      font-size: var(--font-down-2);
+    }
     &:empty {
       display: none;
     }

assets/stylesheets/common/bff.scss

@@ -68,6 +68,7 @@
     margin-top: auto;
     height: min-content;
     font-size: var(--font-down-1);
+    font-family: Pixelify Sans;
     @media screen and (width <= 425px) {
       font-size: var(--font-down-3);
     }

assets/stylesheets/common/card.scss

@@ -26,13 +26,14 @@ body {
   width: 100%;
   max-width: 700px;
   &__title {
-    font-family: var(--heading-font) !important;
+    font-family: var(--jersey-heading) !important;
     font-weight: 600;
+    font-size: var(--font-up-3);
     -webkit-font-smoothing: antialiased;
   }
   &__data {
     font-weight: normal;
-    font-size: 14px;
+    font-size: 16px;
     -webkit-font-smoothing: antialiased;
   }
 }

assets/stylesheets/common/fonts.scss

@@ -1,26 +1,33 @@
 @import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Jersey+20&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap");
+@import url("https://use.typekit.net/ony6yef.css");
 
 .rewind {
   --heading-font: "Rubik", Helvetica, Arial, sans-serif;
   --regular-font: "Open Sans", Helvetica, Arial, sans-serif;
+  --jersey-heading: "Jersey 20", Helvetica, Arial, sans-serif;
+  --pixel-text: "receipt-narrow", sans-serif;
   h1,
   h2,
   h3,
   h4,
   h5 {
-    font-family: roboto;
+    font-family: var(--jersey-heading);
     -webkit-font-smoothing: antialiased;
   }
 
   p,
-  span {
+  span,
-    font-family: var(--regular-font);
+  table,
+  td,
+  tr {
+    font-family: var(--pixel-text);
     -webkit-font-smoothing: antialiased;
   }
 }
 
 h2.rewind-report-title {
-  font-size: var(--font-down-2);
   text-transform: uppercase;
 }

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

@@ -1,7 +1,11 @@
 .-post-received-reactions {
   .rewind-report-container {
     align-items: center;
+    justify-content: space-between;
     gap: 0.5em;
+    @media screen and (width <= 425px) {
+      gap: 0.125em;
+    }
   }
   .rewind-card {
     background: var(--secondary);
@@ -45,4 +49,49 @@
       height: 26px;
     }
   }
+  @media screen and (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 <= 425px) {
+    .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

@@ -23,7 +23,7 @@
 
   .percentage {
     font-weight: normal;
-    font-family: monospace;
+    font-display: var(--pixel-text);
     font-size: 16px;
   }
 

assets/stylesheets/common/reading-time.scss

@@ -17,6 +17,10 @@
   transform: rotateY(-20deg);
 }
 
+p.reading-time__text {
+  font-family: var(--pixel-text);
+}
+
 .reading-time code {
   background-color: rgba(var(--primary-rgb), 0.15);
 }

assets/stylesheets/common/rewind.scss

@@ -34,7 +34,7 @@
   width: 100vw;
   height: 100vh;
   max-height: 100%;
-  max-width: 100%;
+  max-width: 960px;
   background-color: var(--secondary);
   border: 1px solid var(--primary);
   border-radius: var(--rewind-border-radius);

assets/stylesheets/common/word-card.scss

@@ -7,11 +7,53 @@
 
 .cards-container {
   display: flex;
+  @media (max-width: 525px) {
+    display: grid;
+    grid-template:
+      ".  .  .  .  w  w  .  .  .  . " auto
+      ".  .  .  .  w  w  .  .  .  . " auto
+      ".  .  a  a  w  w  z  z  .  . " auto
+      ".  .  a  a  w  w  z  z  .  . " auto
+      ".  .  a  a  .  .  z  z  .  . " auto
+      ".  .  a  a  .  .  z  z  .  . " auto
+      ".  .  .  d  d  c  c  .  .  . " auto
+      ".  .  .  d  d  c  c  .  .  . " auto
+      ".  .  .  d  d  c  c  .  .  . " auto
+      ".  .  .  d  d  c  c  .  .  . " auto
+      / auto auto auto auto auto auto auto auto;
+    // grid-gap: 0.5em;
+    .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;
+    }
+  }
 }
 
 .rewind-card__wrapper {
   width: 150px;
   height: 175px;
+  @media screen and (width <= 625px) {
+    width: 115px;
+  }
+  @media screen and (width <= 425px) {
+    width: 100px;
+    height: 125px;
+  }
+  @media screen and (width <= 350px) {
+    width: 80px;
+    height: 125px;
+  }
   perspective: 1000px;
   will-change: transform;
   transform-style: preserve-3d;
@@ -56,6 +98,9 @@
   }
   &:hover .rewind-card__inner {
     box-shadow: 0px 3px 8px 2px rgba(var(--primary-rgb), 0.25);
+    @media (prefers-color-scheme: dark) {
+      box-shadow: 0px 3px 8px 2px rgba(var(--secondary-rgb), 0.9);
+    }
   }
   .rewind-card.-back {
     transform: rotateY(180deg);
@@ -92,6 +137,10 @@
     img {
       width: 20px;
       height: 20px;
+      @media screen and (width <= 425px) {
+        height: 15px;
+        width: 15px;
+      }
     }
   }
   .rewind-card__image.cr {
@@ -99,6 +148,10 @@
     img {
       width: 50px;
       height: 50px;
+      @media screen and (width <= 425px) {
+        height: 30px;
+        width: 30px;
+      }
     }
   }
   .rewind-card__image.br {
@@ -107,6 +160,10 @@
       width: 20px;
       height: 20px;
       transform: rotate(180deg);
+      @media screen and (width <= 425px) {
+        height: 15px;
+        width: 15px;
+      }
     }
   }
 }