From 0db5ab19edc424732c625060c9e6a8ca75c03d71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anders=20Engl=C3=B6f=20Ytterstr=C3=B6m?= <yttan@fastmail.se>
Date: Thu, 20 Mar 2025 23:55:03 +0100
Subject: [PATCH] Fix progress bar bug in Chrome

Unfixed since 2015. FUCK OFF, Chrome.
---
 src/lib/Info.svelte    | 47 ++++++++++++-----------
 src/lib/Summary.svelte | 85 ++++++++++++++++++++++++++++++------------
 2 files changed, 85 insertions(+), 47 deletions(-)

diff --git a/src/lib/Info.svelte b/src/lib/Info.svelte
index ce294e9..39690f6 100644
--- a/src/lib/Info.svelte
+++ b/src/lib/Info.svelte
@@ -5,28 +5,26 @@
     };
 </script>
 
+<header>
+    <button class="clickable back" onclick={() => back()}>←</button>
+    <h1>Va?</h1>
+</header>
 <main>
-    <div class="top-button">
-      <button class="clickable" on:click={() => back()}>
-        Tillbaka
-      </button>
-    </div>
-
 <div class="infobox">
-  <h1>Hej, Jag har en 40-årskris xD</h1>
+  <h2>Hej, Anders har en 40-årskris xD</h2>
   <p><em>Dessutom hägrar en vecka på Sweden rock festival.</em>
     Ryggen och benen behöver vara i form.</p>
   <p>
-    För att göra träningen litet mer belönande skapades denna app för att ge mig
-    möjlighet att bocka i allt jag gör.
+    För att göra träningen litet mer belönande skapades denna app för att ge honom
+    möjlighet att bocka i allt han gör.
   </p>
   <h2>Börja löpträna</h2>
-  <p>Jag har tidigare löptränat, men inte gjort det kontinuerligt sedan 2017.</p>
+  <p>Anders har tidigare löptränat, men inte gjort det kontinuerligt sedan 2017.</p>
   <p><b>Metod:</b> löpträning 3 gånger per vecka: 2 pass med 2 intervaller, ett långpass. Linjär
   progression med 60&ndash;120 sekunders ökning per pass.</p>
   <strong>Mål: 5km löpning efter 7 veckor.</strong>
   <h2>Återuppta styrkelyft</h2>
-  <p>Jag föredrar baslyft med frivikter. Mina PB slogs senast januari 2023.</p>
+  <p>Anders föredrar baslyft med frivikter. Hans PB slogs senast januari 2023.</p>
   <p>
     <b>Metod</b>: styrketräning 3 gånger per vecka. 4 veckor grundträning (A-blocket),
      4 veckor specialiserad träning (B-blocket), 3 veckor toppning (C-blocket).
@@ -35,12 +33,12 @@
       styrkelyftstotal.</strong>
   <h2>Inleda diet</h2>
   <p>
-  Jag har ett uppskattat BMI på 28-32 vid start av denna utmaning.
+  Anders har ett uppskattat BMI på 28-32 vid start av denna utmaning.
   </p>
   <p>
   <b>Metod</b>: Följa
   <a href="https://www.youtube.com/watch?v=fB_ESE2XwOU">Alan Thralls tips</a>, som listas nedan.
-  Mina cheat meals: Semla på semmeldagen, fika på födelsedagen, liten godispåse på lördagar.
+  Anders cheat meals: Semla på semmeldagen, fika på födelsedagen, liten godispåse på lördagar.
   </p>
     <blockquote>
     <ul>
@@ -62,32 +60,33 @@
     </ul>
     </blockquote>
     <p><strong>Mål: Följa ovan kostråd 16 veckor, med fördefinierade cheat meals.</strong></p>
+    <h2>Vem?</h2>
+    <p>
+        Anders skapade denna PWA. Han är en webbutvecklare som är pappa, älskar hårdrock och föredrar att
+        betrakta sina datorer som byggsatser.
+    </p>
 </div>
 </main>
 
 <style>
-  h1 {
-    padding-left: 0;
-    margin: .5em 0;
-  }
   h2 {
     margin-bottom: 0;
+
+    &:first-child {
+        margin-top: 0.66rem;
+    }
   }
 
   main {
     background-color: #ff0;
+    border-top: 4px solid rgba(0, 0, 0, 0.2)
   }
 
   .infobox {
     margin: 0.1em;
     background-color: #fff;
-    border: 2px solid #aaa;
-    border-radius: 8px;
+    border: 3px solid #aaa;
+    border-radius: 1rem;
     padding: 0.5em 1em;
   }
-
-  button {
-    padding: 1em;
-    margin: 2em auto;
-  }
 </style>
diff --git a/src/lib/Summary.svelte b/src/lib/Summary.svelte
index 1194a39..0e6036b 100644
--- a/src/lib/Summary.svelte
+++ b/src/lib/Summary.svelte
@@ -37,37 +37,22 @@
     Va?
   </button>
 </div>
+<p class="madeby">Skapad av <a href="https://madr.se">Anders</a></p>
 </main>
 
 <style>
+    .madeby {
+        text-align: center;
+        font-size: 0.75em;
+    }
+
     main {
         background: #222;
         color: #fff;
     }
-  progress {
-      --pcolor: #f00;
-      --h: 1.5rem;
-      --br: calc(var(--h) / 2);
-      --webkit-appearance: none;
-      appearance: none;
-      height: var(--h);
-      display: block;
-      width: calc(100% - 2rem);
-      border: none;
-      background-color: rgba(128, 128, 128, 0.25);
-      margin: 0 1rem;
-      border-radius: var(--br);
 
-      &::-webkit-progress-value,
-      &::-moz-progress-bar {
-          background-color: var(--pcolor);
-          background-image: linear-gradient(rgba(255,255,255,0.25) 0, rgba(255,255,255,0.25) 4px, var(--pcolor) 4px, var(--pcolor));
-          border: 0.25rem solid var(--pcolor);
-          border-width: 0.25rem 0.5rem;
-          border-radius: var(--br);
-      }
-
-      &.cardio {
+    progress {
+            &.cardio {
           --pcolor: #5dc5f8;
       }
 
@@ -80,7 +65,61 @@
       }
   }
 
+  progress,
+  ::-webkit-progress-bar {
+    -webkit-appearance: none;
+    appearance: none;
+    height: var(--h);
+    display: block;
+    width: calc(100% - 2rem);
+    border: none;
+    padding: 0;
+    background-color: rgba(128, 128, 128, 0.25);
+    margin: 0 1rem;
+    border-radius: var(--br);
+  }
+
+  ::-webkit-progress-bar {
+      margin-right: 0;
+      margin-left: 0;
+      width: 100%;
+  }
+
+  /*
+  Nope, cannot comma separate selector like this:
+
+  ::-moz-progress-bar,
+  ::-webkit-progress-value { ... }
+
+  or even like this:
+
+  progress::-webkit-progress-value { ... }
+
+  Bug, closed with wontfix in 2015:
+  https://issues.chromium.org/issues/40564916
+
+  Sincerely, FUCK YOU, Chrome dev team.
+  */
+  ::-moz-progress-bar {
+      background-color: var(--pcolor);
+      background-image: linear-gradient(rgba(255,255,255,0.25) 0, rgba(255,255,255,0.25) 4px, var(--pcolor) 4px, var(--pcolor));
+      border: 0.25rem solid var(--pcolor);
+      border-width: 0.25rem 0.5rem;
+      border-radius: var(--br);
+  }
+
+  ::-webkit-progress-value {
+      background-color: var(--pcolor);
+      background-image: linear-gradient(rgba(255,255,255,0.25) 0, rgba(255,255,255,0.25) 4px, var(--pcolor) 4px, var(--pcolor));
+      border: 0.25rem solid var(--pcolor);
+      border-width: 0.25rem 0.5rem;
+      border-radius: var(--br);
+  }
+
   .progress {
+      --pcolor: #f00;
+      --h: 1.66rem;
+      --br: calc(var(--h) / 2);
       --mg: 0.75rem;
       --border: 3px solid #444;
       margin: 2rem 0;