From 535aeba9fa373858224f2ef7c9bc83387874dbc6 Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <jordan@jordanvidrine.com>
Date: Mon, 13 Jan 2025 10:48:23 -0600
Subject: [PATCH] more

---
 .../components/reports/favorite-tags.gjs      |  4 +-
 .../reports/{introduction.gjs => header.gjs}  |  6 +-
 .../discourse/components/rewind.gjs           |  4 +-
 assets/stylesheets/common/_index.scss         |  2 +-
 assets/stylesheets/common/card.scss           | 83 +++++++++++++++++++
 assets/stylesheets/common/favorite-tags.scss  |  8 ++
 assets/stylesheets/common/rewind-header.scss  | 38 +++++++++
 assets/stylesheets/common/rewind-logo.scss    | 16 ----
 assets/stylesheets/common/rewind.scss         | 19 -----
 assets/stylesheets/common/top-words.scss      | 11 ++-
 10 files changed, 147 insertions(+), 44 deletions(-)
 rename assets/javascripts/discourse/components/reports/{introduction.gjs => header.gjs} (73%)
 create mode 100644 assets/stylesheets/common/rewind-header.scss
 delete mode 100644 assets/stylesheets/common/rewind-logo.scss

diff --git a/assets/javascripts/discourse/components/reports/favorite-tags.gjs b/assets/javascripts/discourse/components/reports/favorite-tags.gjs
index 9d60bfd..35ecf70 100644
--- a/assets/javascripts/discourse/components/reports/favorite-tags.gjs
+++ b/assets/javascripts/discourse/components/reports/favorite-tags.gjs
@@ -10,12 +10,12 @@ const FavoriteTags = <template>
         }}</h2>
       <div class="rewind-report-container">
         {{#each @report.data as |data|}}
-          <div class="rewind-card">
+          <a class="rewind-card" href={{concat "/tag/" data.name}}>
             <a
               class="favorite-tags__tag"
               href={{concat "/tag/" data.name}}
             >#{{data.name}}</a>
-          </div>
+          </a>
         {{/each}}
       </div>
     </div>
diff --git a/assets/javascripts/discourse/components/reports/introduction.gjs b/assets/javascripts/discourse/components/reports/header.gjs
similarity index 73%
rename from assets/javascripts/discourse/components/reports/introduction.gjs
rename to assets/javascripts/discourse/components/reports/header.gjs
index 7def98e..55ad458 100644
--- a/assets/javascripts/discourse/components/reports/introduction.gjs
+++ b/assets/javascripts/discourse/components/reports/header.gjs
@@ -1,5 +1,5 @@
-const Introduction = <template>
-  <div class="rewind__introduction">
+const RewindHeader = <template>
+  <div class="rewind__header">
     <img
       class="rewind-logo -light"
       src="/plugins/discourse-rewind/images/discourse-rewind-logo.png"
@@ -11,4 +11,4 @@ const Introduction = <template>
   </div>
 </template>;
 
-export default Introduction;
+export default RewindHeader;
diff --git a/assets/javascripts/discourse/components/rewind.gjs b/assets/javascripts/discourse/components/rewind.gjs
index 5a41bed..c0fbb84 100644
--- a/assets/javascripts/discourse/components/rewind.gjs
+++ b/assets/javascripts/discourse/components/rewind.gjs
@@ -15,7 +15,7 @@ import BestTopics from "discourse/plugins/discourse-rewind/discourse/components/
 import FavoriteCategories from "discourse/plugins/discourse-rewind/discourse/components/reports/favorite-categories";
 import FavoriteTags from "discourse/plugins/discourse-rewind/discourse/components/reports/favorite-tags";
 import FBFF from "discourse/plugins/discourse-rewind/discourse/components/reports/fbff";
-import Introduction from "discourse/plugins/discourse-rewind/discourse/components/reports/introduction";
+import RewindHeader from "discourse/plugins/discourse-rewind/discourse/components/reports/header";
 import Reactions from "discourse/plugins/discourse-rewind/discourse/components/reports/reactions";
 import ReadingTime from "discourse/plugins/discourse-rewind/discourse/components/reports/reading-time";
 import TopWords from "discourse/plugins/discourse-rewind/discourse/components/reports/top-words";
@@ -86,7 +86,7 @@ export default class Rewind extends Component {
       tabindex="0"
     >
       <div class="rewind">
-        <Introduction />
+        <RewindHeader />
         <div class="background-1 parallax-bg"></div>
         {{#if this.loadingRewind}}
           <div class="rewind-loader">
diff --git a/assets/stylesheets/common/_index.scss b/assets/stylesheets/common/_index.scss
index 6fa33a6..96bdeb6 100644
--- a/assets/stylesheets/common/_index.scss
+++ b/assets/stylesheets/common/_index.scss
@@ -13,5 +13,5 @@
 @import "fonts";
 @import "reading-time";
 @import "fbff";
-@import "rewind-logo";
+@import "rewind-header";
 @import "rewind-callout";
diff --git a/assets/stylesheets/common/card.scss b/assets/stylesheets/common/card.scss
index 0dcac5f..0ee22b8 100644
--- a/assets/stylesheets/common/card.scss
+++ b/assets/stylesheets/common/card.scss
@@ -43,3 +43,86 @@ body {
     -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)
+  );
+}
diff --git a/assets/stylesheets/common/favorite-tags.scss b/assets/stylesheets/common/favorite-tags.scss
index 5b432f6..ab13ffd 100644
--- a/assets/stylesheets/common/favorite-tags.scss
+++ b/assets/stylesheets/common/favorite-tags.scss
@@ -4,6 +4,14 @@
     gap: 0.5em;
     flex-wrap: wrap;
   }
+  .rewind-card {
+    @include rewind-border;
+    width: max-content;
+    flex-grow: 1;
+    &:hover {
+      background-color: var(--secondary-very-high);
+    }
+  }
 }
 
 .favorite-tags__tag {
diff --git a/assets/stylesheets/common/rewind-header.scss b/assets/stylesheets/common/rewind-header.scss
new file mode 100644
index 0000000..3396251
--- /dev/null
+++ b/assets/stylesheets/common/rewind-header.scss
@@ -0,0 +1,38 @@
+.rewind-logo {
+  height: 40px;
+
+  &.-light {
+    display: none;
+  }
+
+  &.-dark {
+    display: block;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    &.-dark {
+      display: none;
+    }
+    &.-light {
+      display: block;
+    }
+  }
+}
+
+.rewind__header {
+  padding: 1em 0 1em 1em;
+  background-color: var(--primary);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  box-shadow: 1px 0px 0px 1px var(--primary);
+  .rewind-logo {
+    margin-bottom: 5px;
+  }
+
+  p {
+    margin: 0 0.5em 0 0;
+    text-transform: uppercase;
+    font-size: var(--font-up-1);
+  }
+}
diff --git a/assets/stylesheets/common/rewind-logo.scss b/assets/stylesheets/common/rewind-logo.scss
deleted file mode 100644
index 430d0fb..0000000
--- a/assets/stylesheets/common/rewind-logo.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.rewind-logo {
-  height: 50px;
-
-  &.-dark {
-    display: none;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    &.-dark {
-      display: block;
-    }
-    &.-light {
-      display: none;
-    }
-  }
-}
diff --git a/assets/stylesheets/common/rewind.scss b/assets/stylesheets/common/rewind.scss
index 75df61e..10ba69e 100644
--- a/assets/stylesheets/common/rewind.scss
+++ b/assets/stylesheets/common/rewind.scss
@@ -69,25 +69,6 @@
   flex-direction: column;
 }
 
-.rewind__introduction {
-  padding: 1em 0 1em 1em;
-  background-color: var(--primary);
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  box-shadow: 1px 0px 0px 1px var(--primary);
-
-  .rewind-logo {
-    margin-bottom: 5px;
-  }
-
-  p {
-    margin: 0 0.5em 0 0;
-    text-transform: uppercase;
-    font-size: var(--font-up-1);
-  }
-}
-
 .rewind__exit-fullscreen-btn {
   position: absolute;
   top: 20px;
diff --git a/assets/stylesheets/common/top-words.scss b/assets/stylesheets/common/top-words.scss
index 464edec..87ee1b8 100644
--- a/assets/stylesheets/common/top-words.scss
+++ b/assets/stylesheets/common/top-words.scss
@@ -101,6 +101,12 @@
       box-shadow: 0px 3px 8px 2px rgba(var(--secondary-rgb), 0.9);
     }
   }
+  .rewind-card__inner {
+    box-shadow: 0px 0px 6px 2px rgba(var(--primary-rgb), 0.25);
+    @media (prefers-color-scheme: dark) {
+      box-shadow: 0px 0px 6px 2px rgba(var(--secondary-rgb), 0.9);
+    }
+  }
   .rewind-card.-back {
     transform: rotateY(180deg);
   }
@@ -124,13 +130,16 @@
       / 1fr 3fr 1fr;
     background: radial-gradient(
           circle at 4px 4px,
-          var(--primary-200) 1px,
+          var(--primary-100) 1px,
           var(--secondary) 1px,
           var(--secondary) 6px
         )
         0 0 / 6px 6px,
       var(--secondary-low);
   }
+  .rewind-card__image {
+    image-rendering: pixelated;
+  }
   .rewind-card__image.tl {
     grid-area: tl;
     img {