Updated the playlist to list descriptions, and changed the styling a bit

index.html

@@ -171,7 +171,8 @@
       <li class="playlist-item">
         <a>
           <img/>
-          <span></span>
+          <span class="title"></span>
+          <span class="desc"></span>
         </a>
       </li>
     </template>

player.js

@@ -472,7 +472,8 @@ function setupPlaylist(body, playlistfile) {
             }
             node.querySelector('img').src = item.thumb
             node.querySelector('a').href = item.link
-            node.querySelector('span').textContent = item.title
+            node.querySelector('span.title').textContent = item.title
+            node.querySelector('span.desc').textContent = item.description
             parent.appendChild(node)
         })
 

style.css

@@ -108,20 +108,34 @@ body {
     /*padding-right: calc(var(--gap) * 10);*/
     /*border: var(--gap) solid var(--fade);*/
     color: var(--foreground);
-    display: flex;
-    align-items: center;
+    display: grid;
+    grid-template-areas: "thumb title" "thumb description";
+    grid-template-columns: 290px auto;
+    justify-items: start;
+    /*display: flex;*/
+    /*align-items: center;*/
     text-decoration: none;
 }
 .playlist-item img {
-    width: 150px;
+    width: 100%;
     height: auto;
     margin: var(--gap);
     border: 1px solid var(--fade);
+    grid-area: thumb;
 }
 .playlist-item span {
     margin: calc(var(--gap) * 3);
     max-width: 30vw;
 }
+.playlist-item span.title {
+    grid-area: title;
+    align-self: end;
+    font-size: 110%;
+}
+.playlist-item span.desc {
+    grid-area: description;
+    align-self: start;
+}
 .current a {
     background-color: var(--background-other);
     /*color: var(--fade-other);*/
@@ -470,4 +484,4 @@ svg:focus,
 
 ::-webkit-scrollbar-thumb {
     border-radius: 8px;
-}
+}