feat(playlist): subscribe nav markup and styling

- remove material icons font
- add svg icons

_includes/components/button-link.html

@@ -3,7 +3,8 @@
   class="btn {{ include.color }}"
 >
   {%- if include.icon -%}
-    <span class="material-icons" aria-label="{{ include.aria-label }}">{{ include.icon }}</span>
+    {%- capture icon_path %}svg/icons/{{ include.icon }}.svg{% endcapture -%}
+    {% include {{ icon_path }} %}
   {%- endif -%}
   {%- if include.label -%}
     <span class="label">{{ include.label }}</span>

_includes/components/button.html

@@ -1,3 +1,4 @@
 <button id="{{ include.id }}" class="btn {{ include.color }}">
-  <span class="material-icons">{{ include.icon }}</span>
+  {%- capture icon_path %}svg/icons/{{ include.icon }}.svg{% endcapture -%}
+  {% include {{ icon_path }} %}
 </button>

_includes/components/menu-item.html

@@ -1,16 +1,12 @@
 <li class="menu-item">
-  {%- if include.icon -%}
     <a
       href="{{ include.href }}"
       class="menu-link icon {{ include.color }}"
     >
-      <span class="material-icons" aria-label="{{ include.aria-label }}">{{ include.icon }}</span>
+      {%- if include.icon -%}
+        {%- capture icon_path %}svg/icons/{{ include.icon }}.svg{% endcapture -%}
+        {% include {{ icon_path }} %}
+      {%- endif -%}
       <span>{{ include.label }}</span>
     </a>
-  {%- else -%}
-    <a
-      href="{{ include.href }}"
-      class="menu-link {{ include.color }}"
-    >{{ include.label }}</a>
-  {%- endif -%}
 </li>

_includes/navbar/navbar.html

@@ -1,7 +1,7 @@
 <header class="navbar">
     <nav>
       <button popovertarget="navDrawerPopover" class="btn white">
-        <span class="material-icons">menu</span>
+        {% include svg/icons/menu.svg %}
       </button>
       <a href="#top" class="prx-logo" aria-label="Back to the top of the Annual Report">
         {% include svg/prx-logo-color.svg %}

_includes/page-types/playlist.html

@@ -2,19 +2,18 @@
   {% include components/show-tiles.html %}
   <div class="content-wrapper">
     <h2>Listen to the 2024 PRX Annual Report podcast playlist</h2>
-    <p>Each show featured in this year&rsquo;s report includes an audio clip representing some of the best work we wanted you to hear this year. We have compiled these episodes into a podcast playlist. <strong><em>Subscribe wherever you get your podcasts.</em></strong></p>
+    <p>Each show featured in this year&rsquo;s report includes an audio clip representing some of the best work we wanted you to hear this year. We have compiled these episodes into a podcast playlist.</p>
 
-    <div class="flex justify-center">
-      <ul class="subscribe-list list-inline">
-        {% for link in site.data.subscribe_links %}
-        <li>
-          <a href="{{ link.url }}" title="{{ link.label }}">
-            <img class="subscribe--link" src="/assets/img/icons/{{ link.svg }}" alt="{{ link.label }}" />
-          </a>
-        </li>
-        {% endfor %}
-      </ul>
-    </div>
+    <nav class="subscribe--nav">
+      <h3>Subscribe wherever you get your podcasts.</h3>
+      <div class="subscribe--list">
+      {% for link in site.data.subscribe_links %}
+        <a href="{{ link.url }}" title="{{ link.label }}" class="subscribe--link">
+          <img src="/assets/img/icons/{{ link.svg }}" alt="{{ link.label }}" />
+        </a>
+      {% endfor %}
+      </div>
+    </nav>
 
     <div class="playlist-wrapper">
       <iframe

_sass/_buttons.scss

@@ -6,19 +6,22 @@
 
   display: flex;
   align-items: center;
-  gap: 0.25rem; 
+  gap: 0.25rem;
   padding: 0.5rem;
   border-radius: 10px;
 
   background-color: var(--_btn-background-color);
-  
+
   color: var(--_btn-text-color);
 
   font-weight: bold;
   text-transform: uppercase;
   text-decoration: none;
   border: 0;
 
+  svg {
+    fill: currentColor;
+  }
 
   &:link,
   &:visited {

_sass/_fonts.scss

@@ -105,28 +105,3 @@
   font-style: italic;
   font-display: swap;
 }
-
-@font-face {
-  font-family: "Material Icons";
-  font-style: normal;
-  font-weight: 400;
-  src: url("/assets/fonts/material-icons.woff2") format("woff2");
-  font-display: swap;
-}
-
-.material-icons {
-  font-family: "Material Icons";
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: "liga";
-  -webkit-font-smoothing: antialiased;
-}
-

_sass/_layout.scss

@@ -112,12 +112,6 @@ p {
   margin-bottom: 1.5rem;
 }
 
-.subscribe-list {
-  text-align: center;
-  justify-content: center;
-  width: 100%;
-}
-
 blockquote {
   margin: 0;
   padding: 0;

_sass/_menu-item.scss

@@ -7,23 +7,27 @@
   justify-content: space-between;
   border-bottom: 1px solid $border-color;
   list-style: none;
+
+  svg {
+    fill: currentColor;
+  }
 }
 
 .menu-link {
   --_menu-link-background-color: var(--menu-link-background-color, #{$white});
   --_menu-link-background-color--hover: var(--menu-link-background-color--hover, #{mix(white, $cyan, 10%)});
   --_menu-link-text-color: var(--menu-link-text-color, #{$navy});
   --_menu-link-text-color--hover: var(--menu-link-text-color--hover, var(--_menu-link-text-color));
-  
+
   display: flex;
   align-items: center;
   width: 100%;
   gap: 0.25rem;
   padding: 0.5rem 1rem;
-  
+
   background-color: var(--_menu-link-background-color);
   color: var(--_menu-link-text-color);
-  
+
   text-decoration: none;
 
   &:link,
@@ -50,7 +54,7 @@
     --menu-link-background-color: #{$yellow};
     --menu-link-background-color--hover: #{mix(white, $yellow, 25%)};
   }
-  
+
 
   &.light-blue {
     --menu-link-background-color: #{$cyan-a-10};

_sass/_playlist.scss

@@ -1,12 +1,55 @@
+#playlist {
+  text-wrap: balance;
+
+  .subscribe--nav {
+    display: inline-grid;
+    row-gap: 1.5rem;
+
+    margin: 2rem auto 4rem;
+    padding: 2rem 3rem;
+
+    background-color: #{'hsl('}0 100% 100% / 20%#{')'};
+    backdrop-filter: blur(6px);
+
+    border-radius: 20px;
+
+    h3 {
+      width: 100%;
+      margin: 0;
+    }
+  }
+
+  .subscribe--list {
+    display: inline-flex;
+    gap: 0.5rem;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  .subscribe--link {
+    transition: background-color 200ms linear;
+
+    padding: 0.5rem;
+
+    border-radius: 1rem;
+
+    &:where(:hover, :focus-visible) {
+      background-color: #{'hsl('}0 100% 100% / 20%#{')'};
+      outline: none;
+    }
+
+    img {
+      width: 40px;
+      height: 40px;
+    }
+  }
+
+}
+
 .playlist-wrapper {
   overflow: hidden;
 
   iframe {
     border-radius: 20px;
   }
 }
-
-.subscribe--link {
-  width: 40px;
-  height: 40px;
-}