fonts

assets/javascripts/discourse/components/rewind.gjs

@@ -29,9 +29,6 @@ export default class Rewind extends Component {
   @tracked fullScreen = true;
   @tracked loadingRewind = false;
 
-  imageIndex = 1;
-  frameCount = 11;
-
   @action
   registerScrollWrapper(element) {
     this.scrollWrapper = element;
@@ -69,20 +66,6 @@ export default class Rewind extends Component {
       children[i].style.transform = `translateY(-${
         (target.scrollTop * (i + 1)) / 5
       }px)`;
-      // if (
-      //   children[i].classList.contains("background-2") &&
-      //   target.scrollTop % 6 === 0
-      // ) {
-      //   children[i].style.setProperty(
-      //     "--frame",
-      //     `var(--frame-${this.imageIndex})`
-      //   );
-      //   if (this.imageIndex === 10) {
-      //     this.imageIndex = 1;
-      //   } else {
-      //     this.imageIndex++;
-      //   }
-      // }
     }
   }
 

assets/stylesheets/common/card.scss

@@ -9,7 +9,6 @@ body {
 
 .rewind-report-container {
   perspective: 1000px;
-  transform-style: preserve-3d;
   gap: 0.5em;
 }
 
@@ -72,7 +71,7 @@ body {
 
 .rewind-card {
   background-color: var(--secondary);
-  box-shadow: 0 0 0 1px var(--primary-200);
+  box-shadow: 0 0 0 1px var(--primary-300), 0 0 0 3px var(--primary-100);
   border-radius: var(--d-border-radius);
   display: flex;
   flex-direction: column;
@@ -82,12 +81,14 @@ body {
   align-items: center;
   justify-content: center;
   &__title {
+    font-family: var(--heading-font) !important;
     font-weight: 600;
+    -webkit-font-smoothing: antialiased;
   }
   &__data {
-    font-family: monospace;
     font-weight: normal;
     font-size: 14px;
+    -webkit-font-smoothing: antialiased;
   }
 }
 
@@ -103,57 +104,6 @@ body {
   }
 }
 
-@keyframes card-hover {
-  0% {
-    transform: translateY(0) rotate(0);
-  }
-  25% {
-    transform: translateY(-2px) rotate(2deg);
-  }
-  50% {
-    transform: translateY(-4px) rotate(-1deg);
-  }
-  75% {
-    transform: translateY(2px) rotate(-2deg);
-  }
-  100% {
-    transform: translateY(0) rotate(0);
-  }
-}
-
-@keyframes easeOutElastic {
-  0% {
-    --easeAmount: 0;
-  }
-  16% {
-    --easeAmount: 1.3227;
-  }
-  28% {
-    --easeAmount: 0.8688;
-  }
-  44% {
-    --easeAmount: 1.0463;
-  }
-  59% {
-    --easeAmount: 0.9836;
-  }
-  73% {
-    --easeAmount: 1.0058;
-  }
-  88% {
-    --easeAmount: 0.998;
-  }
-  100% {
-    --easeAmount: 1;
-  }
-}
-
-@property --easeAmount {
-  syntax: "<number>";
-  inherits: true;
-  initial-value: 0;
-}
-
 @property --ambientAmount {
   syntax: "<number>";
   inherits: true;

assets/stylesheets/common/fonts.scss

@@ -0,0 +1,19 @@
+@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");
+
+.rewind {
+  --heading-font: "Rubik", Helvetica, Arial, sans-serif;
+  --regular-font: "Open Sans", Helvetica, Arial, sans-serif;
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    font-family: var(--heading-font);
+  }
+
+  p,
+  span {
+    font-family: var(--regular-font);
+  }
+}

assets/stylesheets/common/index.scss

@@ -9,11 +9,4 @@
 @import "word-cloud";
 @import "favorite-tags";
 @import "favorite-categories";
-
-h1,
-h2,
-h3,
-h4,
-h5 {
-  font-family: "Rubik", Helvetica, Arial, sans-serif;
-}
+@import "fonts";

assets/stylesheets/common/rewind.scss

@@ -44,6 +44,7 @@
   transform: translateY(0px);
   width: 100%;
   height: 1000%;
+  opacity: 0.45;
 }
 
 .background-2 {
@@ -53,6 +54,7 @@
   background: url(/plugins/discourse-rewind/images/bg-2.png);
   background-size: contain;
   transform: translateY(0px);
+  opacity: 0.85;
 }
 
 .rewind__scroll-wrapper {