From ef133b7dcad62f8004770fd4286bfade19cd7f66 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Thu, 28 Nov 2024 20:43:06 -0800
Subject: [PATCH] fix: 404 + dry up styles

---
 public/_redirects          |  3 ++-
 src/styles/pages/books.css | 17 ++++++++++-------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/public/_redirects b/public/_redirects
index 1e13263..7ed0a61 100644
--- a/public/_redirects
+++ b/public/_redirects
@@ -82,4 +82,5 @@
 /posts/2022/simple-api-fetch-hooks-with-swr/ /posts/2022/simple-data-fetching-with-custom-react-hooks-and-swr/ 301
 /posts/2023/drying-up-now-page-templates-eleventy/ /posts/2023/drying-up-now-page-templates-and-normalizing-data-in-eleventy/ 301
 /posts/2023/hacking-together-a-tweeklyfm-replacement.html /posts/2023/hacking-together-a-tweeklyfm-replacement/ 301
-/posts/2024/setting-up-image-transforms-in-eleventy.html /posts/2024/setting-up-image-transforms-in-eleventy 301
\ No newline at end of file
+/posts/2024/setting-up-image-transforms-in-eleventy.html /posts/2024/setting-up-image-transforms-in-eleventy 301
+/posts/2023/displaying-listening-data-from-apple-music-using-musickitjs.html /posts/2023/displaying-listening-data-from-apple-music-using-musickitjs 301
diff --git a/src/styles/pages/books.css b/src/styles/pages/books.css
index f298595..0649df8 100644
--- a/src/styles/pages/books.css
+++ b/src/styles/pages/books.css
@@ -1,3 +1,11 @@
+:root {
+  --progress-bar-width: 50%;
+
+  @media screen and (min-width: 768px) {
+    --progress-bar-width: 75%;
+  }
+}
+
 :is(.book-entry, .book-focus) img {
   height: auto;
   aspect-ratio: var(--aspect-ratio-vertical);
@@ -38,12 +46,11 @@
     }
 
     & .progress-bar-wrapper {
-      max-width: 75%;
+      max-width: var(--progress-bar-width);
       margin-bottom: 0;
 
       @media screen and (min-width: 768px) {
         margin-top: 0;
-        max-width: 50%;
       }
     }
   }
@@ -76,11 +83,7 @@
       }
 
       & .progress-bar-wrapper {
-        max-width: 50%;
-
-        @media screen and (min-width: 768px) {
-          max-width: 75%;
-        }
+        max-width: var(--progress-bar-width);
       }
     }
   }