fix: duplicate css + cleanup

src/_includes/now.liquid

@@ -3,6 +3,8 @@ layout: default
 ---
 {% capture css %}
   {% render "../assets/styles/pages/now.css" %}
+  {% render "../assets/styles/widgets/media-grid.css" %}
+  {% render "../assets/styles/widgets/progress-bar.css" %}
 {% endcapture %}
 <style>
   {{ css | cssmin }}

src/_includes/partials/now/media-grid.liquid

@@ -1,10 +1,13 @@
 {% if data.size > 0 %}
+  {% if embeddedStyles == true %}
   {% capture css %}
     {% render "../../../assets/styles/widgets/media-grid.css" %}
+    {% render "../../../assets/styles/widgets/progress-bar.css" %}
   {% endcapture %}
   <style>
     {{ css | cssmin }}
   </style>
+  {% endif %}
   {% assign media = data | normalizeMedia %}
   <h2 class="now__section--header flex--centered">
     {% tablericon icon title %}

src/_includes/partials/now/progress-bar.liquid

@@ -1,10 +1,4 @@
 {% if percentage %}
-{% capture css %}
-  {% render "../../../assets/styles/widgets/progress-bar.css" %}
-{% endcapture %}
-<style>
-  {{ css | cssmin }}
-</style>
 <div class="progress-bar__wrapper">
   <div style="width:{{ percentage }}" class="progress-bar"></div>
 </div>

src/assets/styles/widgets/forms.css

@@ -5,6 +5,7 @@ textarea {
   background-color: var(--white);
   width: 100%;
   border: 1px solid var(--blue-600);
+  outline: none;
   padding: .5rem;
   margin-bottom: 1.5rem;
   font-weight: 400 !important;
@@ -15,12 +16,6 @@ textarea {
   transition-duration: 300ms;
 }
 
-input[type="text"],
-input[type="email"],
-textarea {
-  outline: none;
-}
-
 input[type="text"]:focus,
 input[type="email"]:focus,
 textarea:focus {

src/assets/styles/widgets/media-grid.css

@@ -61,11 +61,7 @@
   color: var(--white);
   font-size: var(--font-size-xs);
   line-height: var(--line-height-xs);
-  overflow: visible;
-  display: -webkit-box;
   text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
 }
 
 .media__grid .item__image,

src/assets/styles/widgets/post-graph.css

@@ -4,7 +4,6 @@
 }
 
 .post-graph__wrapper {
-  position: relative;
   display: flex;
   align-items: center;
   height: 2rem;

src/assets/styles/widgets/progress-bar.css

@@ -5,15 +5,10 @@
   overflow: hidden;
   height: 1rem;
   width: 100%;
-  margin-top: .25rem;
   margin-bottom: .25rem;
 }
 
 .progress-bar {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  white-space: nowrap;
   background-color: var(--blue-600);
 }
 

src/posts/2023/2023-in-review.html

@@ -16,7 +16,7 @@ tags: ['books', 'music', 'development', 'Eleventy']
   <li><a href="https://trakt.tv/users/cdransf">I watched a bunch of movies and TV</a>, but picking favorites feels weird when so much of that consisted of catching up on "classics" and things I'd either ignored or never seen.</li>
 </ul>
 
-{% render "partials/now/media-grid.liquid", data:roundups['2023'].books, icon: "books", title: "Favorite books", shape: "vertical", count: 6 %}
+{% render "partials/now/media-grid.liquid", data:roundups['2023'].books, icon: "books", title: "Favorite books", shape: "vertical", count: 6, embeddedStyles: true %}
 {% render "partials/now/media-grid.liquid", data:roundups['2023'].albums, icon: "vinyl", title: "Favorite albums", shape: "square", count: 8 %}
 
 <p><strong><a href="https://coryd.dev">I wrote some things:</a></strong></p>