diff --git a/index.html b/index.html index cd2bffd..43aa7d4 100644 --- a/index.html +++ b/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> diff --git a/player.js b/player.js index 79e3ef5..a487554 100644 --- a/player.js +++ b/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) }) diff --git a/style.css b/style.css index 342f056..2f4a0b5 100644 --- a/style.css +++ b/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; -} \ No newline at end of file +}