Improve participants lists

src/css/sections/podcast.css

@@ -82,8 +82,8 @@
 
 .avatar {
   display: block;
-  height: 2rem;
-  width: 2rem;
+  height: var(--avatar-size, 2rem);
+  width: var(--avatar-size, 2rem);
   border-radius: 50%;
 }
 
@@ -101,13 +101,14 @@
 }
 
 .episodeItem {
+  --avatar-size: 1rem;
   margin: 0;
   border-radius: var(--space-l);
   background-color: var(--color-card-bg);
   transition-property: background-color;
   transition-duration: var(--transition-duration-fast);
 
-  & a {
+  & a.plain {
     display: flex;
 
     &:hover .meta {
@@ -146,18 +147,25 @@
 
   & .content {
     flex: 1;
-
-    @media (--up_to_M) {
-      padding: var(--space-m) var(--space-l);
-    }
-    @media (--M_and_up) {
-      padding: var(--space-l);
-    }
+    padding: var(--space-m) var(--space-l);
 
     & > *:last-child {
       margin-bottom: 0;
     }
   }
+
+  & .participants {
+    margin-top: var(--space-m);
+  }
+}
+
+.player .participants,
+.episodeItem .participants {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-m);
+  list-style: none;
 }
 
 .player {
@@ -166,6 +174,7 @@
 
   display: flex;
   border-radius: var(--border-radius);
+  background-color: var(--color-card-bg);
   overflow: hidden;
 
   @media (--up_to_M) {
@@ -173,6 +182,10 @@
     min-width: 300px;
     max-width: 400px;
   }
+
+  & .participants {
+    margin: var(--space-m) var(--space-l) var(--space-m) calc(var(--player-button-size) + var(--player-button-margin) + var(--space-l));
+  }
 }
 
 .player__coverlink {
@@ -194,7 +207,6 @@
   flex-direction: column;
   flex: 1;
   color: var(--color-body-text);
-  background-color: var(--color-card-bg);
   transition-property: color, background-color;
   transition-duration: var(--transition-duration-fast);
 }
@@ -231,15 +243,7 @@
   content: '2.0x';
 }
 
-.player__participants {
-  flex-wrap: wrap;
-  gap: var(--space-m);
-  margin: 0 0 0 calc(var(--player-button-size) + var(--player-button-margin));
-  list-style: none;
-}
-
-.player__controls,
-.player__participants {
+.player__controls {
   display: flex;
   align-items: center;
   padding: var(--space-m) var(--space-l);

src/includes/mixins.pug

@@ -125,6 +125,19 @@ mixin spende(d, trunc = false)
         else if d.info
           p.info= d.info
 
+mixin participants(ps, link)
+  .participants
+    for participant in ps
+      - const member = team[participant.toLowerCase()]
+      if member
+        if link
+          a(href=memberUrl(member))
+            img.avatar(src=assetPath(member.image || "/img/avatar.svg") alt=member.name)
+        else
+          img.avatar(src=assetPath(member.image || "/img/avatar.svg") alt=member.name)
+      else
+        img.avatar(src=assetPath("/img/avatar.svg") alt=participant)
+
 mixin episodeItem(e)
   article.episodeItem&attributes(attributes)
     a.plain(href=`/podcast/${e.slug}/`)
@@ -135,6 +148,8 @@ mixin episodeItem(e)
           span= e.categoryName + (e.number ? ` #${e.number}` : '')
           time(datetime=e.date)= e.block || formatDate(e.date)
         .title=e.titlePlain
+        if e.participants.length
+          +participants(e.participants, false)
 
 mixin episodePlayer(e)
   .player.player--single&attributes(attributes)
@@ -167,15 +182,7 @@ mixin episodePlayer(e)
             .player__name(data-amplitude-song-info="name" data-amplitude-main-song-info="true")
 
       if e.participants.length
-        ul.player__participants
-          for participant in e.participants
-            - const member = team[participant.toLowerCase()]
-            li
-              if member
-                a(href=memberUrl(member))
-                  img.avatar(src=assetPath(member.image || "/img/avatar.svg") alt=member.name)
-              else
-                img.avatar(src=assetPath("/img/avatar.svg") alt=participant)
+        +participants(e.participants, true)
 
       .player__links
         a.player__download(href=e.enclosure.url)