Organize elsewhere/interviews, and add podrocket

content/blog/podcasts/f-word-11.md → content/blog/elsewhere/interview/podcast/f-word-11.md

@@ -15,7 +15,6 @@ tags:
   - F-Word
   - Cascade Layers
   - Container Queries
-  - Podcast
 summary: |
   I chat with Bruce Lawson & Vadim Makeev
   about Sass & Susy,

content/blog/podcasts/fe-nerdery-10.md → content/blog/elsewhere/interview/podcast/fe-nerdery-10.md

@@ -16,7 +16,6 @@ tags:
   - Cascade Layers
   - CSS Scope
   - Container Queries
-  - Podcast
   - Video
 summary: |
   A podcast focusing on front end development

content/blog/podcasts/igalia-6.md → content/blog/elsewhere/interview/podcast/igalia-6.md

@@ -11,7 +11,6 @@ tags:
   - CSS
   - CSSWG
   - Igalia Chats
-  - Podcast
 summary: |
   Igalia's Brian Kardell
   sits down to chat with Miriam and Rachel Andrew

content/blog/podcasts/js-party-166.md → content/blog/elsewhere/interview/podcast/js-party-166.md

@@ -11,15 +11,20 @@ tags:
   - CSS
   - JavaScript
   - CSS-Tricks
-  - Podcast
+  - Video
 summary: |
   I joined some other folks behind CSS-Tricks
   (maybe you’ve heard of it?)
   to face off in the much beloved
   don’t-call-it-jeopardy game show.
   Play along while you listen (or watch).
   It’s JS Danger time, y’all!
+media:
+  - iframe: https://youtu.be/qDox5IVw74E
 audio: https://cdn.changelog.com/uploads/jsparty/166/js-party-166.mp3
 ---
 
-<audio data-theme="night" data-src="https://changelog.com/jsparty/166/embed" src="https://cdn.changelog.com/uploads/jsparty/166/js-party-166.mp3" preload="none" class="changelog-episode" controls></audio><p><a href="https://changelog.com/jsparty/166">JS Party 166: JS Danger: CSS-Tricks Edition</a> – Listen on <a href="https://changelog.com/">Changelog.com</a></p><script async src="//cdn.changelog.com/embed.js"></script>
+{% import "embed.macros.njk" as embed %}
+
+{{ embed.figure(media) }}
+{{ embed.audio(audio) }}

content/blog/podcasts/object-oriented-ux.md → content/blog/elsewhere/interview/podcast/object-oriented-ux.md

@@ -14,7 +14,6 @@ tags:
   - ORCA
   - Design
   - User Experience
-  - Podcast
 summary: |
   Sondra and Miriam chat with Sophia
   about using her ORCA methodology

content/blog/podcasts/party-corgi.md → content/blog/elsewhere/interview/podcast/party-corgi.md

@@ -10,7 +10,6 @@ image:
 tags:
   - CSS
   - Sass
-  - Podcast
 summary: |
   A spinoff of the Party Corgi Network discord.
   I chat with Chris Biscardi about

content/blog/elsewhere/interview/podcast/podcast.11tydata.yaml

@@ -0,0 +1,2 @@
+tags:
+  - Podcast

content/blog/elsewhere/interview/podcast/podrocket/podrocket-cqs.md

@@ -0,0 +1,21 @@
+---
+title: CSS Containers
+date: 2023-09-28
+canonical: https://podrocket.logrocket.com/css-containers
+author: miriam
+tags:
+  - CSS
+  - CSSWG
+  - Container Queries
+summary: |
+  I talk with Noel Minchow
+  about CSS Container Queries,
+  why they took so long,
+  how they work,
+  and what to watch out for.
+audio: https://chrt.fm/track/7F1212/aphid.fireside.fm/d/1437767933/3911462c-bca2-48c2-9103-610ba304c673/1b1432d3-6c73-41fc-a461-a6f47e3a8e77.mp3
+---
+
+{% import "embed.macros.njk" as embed %}
+
+{{ embed.audio(audio) }}

content/blog/podcasts/podrocket-s2.md → content/blog/elsewhere/interview/podcast/podrocket/podrocket-s2.md

@@ -1,21 +1,14 @@
 ---
 title: Styling the intrinsic web
-sub: A web development podcast from LogRocket
-venue: PodRocket
 date: 2022-08-16
 canonical: https://podrocket.logrocket.com/intrinsic-web-styling
 author: miriam
-image:
-  src: blog/elsewhere/podrocket.jpg
-  alt: Grainy art-deco illustration of a rocket launch
 tags:
   - CSS
   - CSSWG
-  - PodRocket
   - Container Queries
   - Cascade Layers
   - CSS Scope
-  - Podcast
 summary: |
   I talk with Noel Minchow
   about how to style the intrinsic web,

content/blog/elsewhere/interview/podcast/podrocket/podrocket.11tydata.yaml

@@ -0,0 +1,7 @@
+venue: PodRocket
+image:
+  src: blog/elsewhere/podrocket.jpg
+  alt: Grainy art-deco illustration of a rocket launch
+sub: A web development podcast from LogRocket
+tags:
+  - PodRocket

content/blog/podcasts/shop-talk19.md → content/blog/elsewhere/interview/podcast/shop-talk19.md

@@ -11,7 +11,6 @@ image:
 tags:
   - CSS
   - Sass
-  - Podcast
 summary: |
   I drop by the show to talk about Sass in 2019,
   design tokens, OddBird, unused CSS, new CSS properties,

content/blog/podcasts/smashing-36.md → content/blog/elsewhere/interview/podcast/smashing-36.md

@@ -18,7 +18,6 @@ tags:
   - Cascade Layers
   - CSSWG
   - Smashing Magazine
-  - Podcast
 summary: |
   Starting a new season of the Smashing Podcast
   with a look at the future of CSS.

content/blog/podcasts/syntaxfm-362.md → content/blog/elsewhere/interview/podcast/syntaxfm-362.md

@@ -15,7 +15,6 @@ tags:
   - Cascade Layers
   - CSSWG
   - Syntax.fm
-  - Podcast
 summary: |
   In this episode of Syntax,
   Scott and Wes talk with Miriam

content/blog/podcasts/talkscript.md → content/blog/elsewhere/interview/podcast/talkscript.md

@@ -8,7 +8,6 @@ tags:
   - JavaScript
   - CSS
   - Ethics
-  - Podcast
 summary: |
   On Episode 18,
   the TalkScript team continues the live-ish at JSConfUS podcast series

content/blog/podcasts/versioning.md → content/blog/elsewhere/interview/podcast/versioning.md

@@ -7,7 +7,6 @@ tags:
   - SitePoint
   - Sass
   - CSS
-  - Podcast
 canonical: https://www.sitepoint.com/versioning-show-episode-8-miriam-suzanne/
 venue: SitePoint
 image:

content/blog/podcasts/enjoy-the-vue-44.md → content/blog/elsewhere/interview/podcast/vue/enjoy-the-vue-44.md

@@ -10,9 +10,7 @@ image:
 tags:
   - CSS
   - Sass
-  - Vue
   - Enjoy The Vue
-  - Podcast
 summary: |
   I join Ari, Ben, and Tessa to talk about
   getting into CSS from other languages,

content/blog/podcasts/thunder-nerds.md → content/blog/elsewhere/interview/podcast/vue/thunder-nerds.md

@@ -9,8 +9,6 @@ image:
   src: talks/miriam.jpg
   alt: Miriam Suzanne speaking at a conference
 tags:
-  - Vue
-  - Podcast
   - Video
 summary: |
   Thunder Nerds interview me

content/blog/podcasts/vov-040.md → content/blog/elsewhere/interview/podcast/vue/vov-040.md

@@ -11,10 +11,8 @@ tags:
   - CSS
   - Sass
   - Fonts
-  - Vue
   - Design
   - Views on Vue
-  - Podcast
 summary: |
   Miriam talks with the [Views on Vue] panel about design, tools, fonts,
   and more.

content/blog/podcasts/vov-068.md → content/blog/elsewhere/interview/podcast/vue/vov-068.md

@@ -13,10 +13,8 @@ tags:
   - Style Guides
   - Design
   - CSS
-  - Vue
   - JavaScript
   - Views on Vue
-  - Podcast
 summary: |
   We start by talking about
   design systems and design tooling --

content/blog/elsewhere/interview/podcast/vue/vue.11tydata.yaml

@@ -0,0 +1,2 @@
+tags:
+  - Vue

content/blog/podcasts/wix.md → content/blog/elsewhere/interview/podcast/wix.md

@@ -11,7 +11,6 @@ tags:
   - CSS
   - CSSWG
   - Diversity
-  - Podcast
 summary: |
   Miriam talks to _Now What?_
   about why the internet looks the way it does,

content/blog/podcasts/word-wrap-11.md → content/blog/elsewhere/interview/podcast/word-wrap/word-wrap-11.md

@@ -1,21 +1,17 @@
 ---
 title: CSSWG, Container Queries, Scope, and Layers
-venue: Word Wrap Show
 date: 2021-05-17
 canonical: https://wordwrap.dev/episodes/s1/011/
 author: miriam
 image:
   src: blog/elsewhere/wordwrap.jpg
   alt: Word Wrap Show
 tags:
-  - CSS
   - Sass
   - CSSWG
-  - Word Wrap Show
   - Container Queries
   - Cascade Layers
   - CSS Scope
-  - Podcast
 summary: |
   I talk with Claire and Steph
   about my journey into webdev and onto the CSSWG,

content/blog/podcasts/word-wrap-17.md → content/blog/elsewhere/interview/podcast/word-wrap/word-wrap-17.md

@@ -1,19 +1,15 @@
 ---
 title: Teleportation, PapayaWhip, and Cookies
 sub: This episode went a little off the rails…
-venue: Word Wrap Show
 date: 2022-05-30
 canonical: https://wordwrap.dev/episodes/s2/017/
 author: miriam
 image:
   src: blog/elsewhere/wordwrap.jpg
   alt: Word Wrap Show
 tags:
-  - CSS
   - CSSWG
-  - Word Wrap Show
   - Container Queries
-  - Podcast
 summary: |
   I talk with Claire and Steph
   about changes to the Container Query syntax,

content/blog/elsewhere/interview/podcast/word-wrap/word-wrap.11tydata.yaml

@@ -0,0 +1,4 @@
+tags:
+  - CSS
+  - Word Wrap Show
+venue: Word Wrap Show

content/blog/podcasts/jina-ama.md → content/blog/elsewhere/interview/video/jina-ama.md

@@ -10,7 +10,6 @@ tags:
   - CSS
   - Sass
   - Design Systems
-  - Video
 summary: |
   Jina and I answer questions about CSS, Sass, Design Systems, and more!
 media:

content/blog/podcasts/linkedin.md → content/blog/elsewhere/interview/video/linkedin.md

@@ -12,7 +12,6 @@ tags:
   - Cascade Layers
   - Container Queries
   - CSS Scope
-  - Video
 summary: |
   CSS is evolving rapidly
   and new features come online all the time.
@@ -26,7 +25,4 @@ media:
 
 {% import "embed.macros.njk" as embed %}
 
-{{ embed.figure(
-  data=media,
-  caption='Recorded live event…'
-) }}
+{{ embed.figure(data=media) }}

content/blog/podcasts/pencilandpaper.md → content/blog/elsewhere/interview/video/pencilandpaper.md

@@ -15,7 +15,6 @@ tags:
   - Design
   - CSS
   - Process
-  - Video
 summary: |
   There are often tall walls
   between designers and developers,

content/blog/podcasts/state-of-frameworks.md → content/blog/elsewhere/interview/video/state-of-frameworks.md

@@ -12,7 +12,6 @@ image:
     October 2022
 tags:
   - CSS
-  - Video
 summary: |
   A panel conversation with
   library and methodology authors

content/blog/elsewhere/interview/video/video.11tydata.yaml

@@ -0,0 +1,2 @@
+tags:
+  - Video

src/scss/initial/_media.scss

@@ -41,7 +41,8 @@ source {
 // -----
 /// Audio is full-width by default.
 /// @group init-media
-audio {
+audio[controls] {
+  filter: drop-shadow(0 0 var(--half-shim) var(--shadow));
   width: 100%;
 }