feat: add forge streak symbol to widgets

Author: Yannam-Builds

app-demo.js

@@ -246,6 +246,12 @@ document.querySelectorAll("[data-demo-tab]").forEach((button) => {
   button.addEventListener("click", () => setTab(button.dataset.demoTab));
 });
 
+if (window.location.hash) {
+  window.setTimeout(() => {
+    document.querySelector(window.location.hash)?.scrollIntoView();
+  }, 80);
+}
+
 document.querySelectorAll("[data-quick-action]").forEach((button) => {
   button.addEventListener("click", () => {
     const action = button.dataset.quickAction;

assets/site/forge_streak_dumbbell.png

@@ -214,17 +214,26 @@ <h2 id="widgets-title">Forge Fox keeps the streak visible.</h2>
         </div>
         <div class="widget-grid">
           <article class="fox-widget widget-hot reveal">
-            <span class="widget-score">7</span>
+            <span class="widget-score">
+              <img src="assets/site/forge_streak_dumbbell.png" alt="" />
+              <span>7</span>
+            </span>
             <p>Keep it going.</p>
             <img src="assets/site/forgefox_streak.png" alt="Forge Fox streak widget pose" />
           </article>
           <article class="fox-widget widget-calm reveal">
-            <span class="widget-score">92</span>
+            <span class="widget-score">
+              <img src="assets/site/forge_streak_dumbbell.png" alt="" />
+              <span>92</span>
+            </span>
             <p>Train today.</p>
             <img src="assets/site/forgefox_dumbbell.png" alt="Forge Fox dumbbell widget pose" />
           </article>
           <article class="fox-widget widget-alert reveal">
-            <span class="widget-score">1h</span>
+            <span class="widget-score">
+              <img src="assets/site/forge_streak_dumbbell.png" alt="" />
+              <span>1h</span>
+            </span>
             <p>Proof window closing.</p>
             <img src="assets/site/forgefox_watch.png" alt="Forge Fox watch widget pose" />
           </article>

index.html

@@ -844,11 +844,22 @@ input[type="range"] {
 }
 
 .widget-score {
-  display: block;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
   color: rgba(255, 255, 255, 0.86);
   font-size: 52px;
   line-height: 0.95;
   font-weight: 950;
+  min-height: 58px;
+}
+
+.widget-score img {
+  width: 42px;
+  height: 42px;
+  object-fit: contain;
+  flex: 0 0 42px;
+  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.18));
 }
 
 .fox-widget p {