Fix #22, fix #23. Display posts as grid instead of flexbox, add song info

src/lib/components/PostComponent.svelte

@@ -24,34 +24,139 @@
 
 <div class="wrapper">
   <div class="avatar"><AvatarComponent account={post.account} /></div>
-  <div class="post">
-    <div class="meta">
-      <AccountComponent account={post.account} />
-      <small><a href={post.url} target="_blank" title={absoluteDate}>{dateCreated}</a></small>
-    </div>
-    <div class="content">{@html post.content}</div>
+  <div class="account"><AccountComponent account={post.account} /></div>
+  <div class="meta">
+    <small><a href={post.url} target="_blank" title={absoluteDate}>{dateCreated}</a></small>
+  </div>
+  <div class="content">{@html post.content}</div>
+  <div class="song">
+    {#if post.songs}
+      {#each post.songs as song (song.pageUrl)}
+        <div class="info-wrapper">
+          <div class="bgimage" style="background-image: url({song.thumbnailUrl});" />
+          <a href={song.pageUrl ?? song.postedUrl} target="_blank">
+            <div class="info">
+              <img
+                src={song.thumbnailUrl}
+                class="cover"
+                alt="Cover for {song.artistName} - {song.title}"
+              />
+              <span class="text">{song.artistName} - {song.title}</span>
+            </div>
+          </a>
+        </div>
+      {/each}
+    {/if}
   </div>
 </div>
 
 <style>
   .wrapper {
-    display: flex;
-  }
-  .post {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 2;
-    word-break: break-word;
-  }
-  .meta {
-    display: flex;
-    justify-content: space-between;
+    display: grid;
+    grid-template-columns: 50px 1fr auto auto;
+    grid-template-rows: auto 1fr auto;
+    grid-template-areas:
+      'avatar account account meta'
+      'avatar content content song'
+      '. content content song';
+    grid-column-gap: 6px;
+    column-gap: 6px;
+    grid-row-gap: 6px;
+    row-gap: 6px;
   }
   .avatar {
-    margin-right: 1em;
+    grid-area: avatar;
+    max-width: 50px;
+    max-height: 50px;
+  }
+  .account {
+    grid-area: account;
+  }
+  .meta {
+    grid-area: meta;
+    justify-self: end;
   }
   .content {
-    max-width: calc(600px - 1em - 50px);
-    overflow-x: auto;
+    grid-area: content;
+    word-break: break-word;
+    translate: 0 -0.5em;
+  }
+  .song {
+    grid-area: song;
+    align-self: center;
+    justify-self: center;
+    max-width: 200px;
+  }
+  .cover {
+    max-width: 200px;
+    display: block;
+    border-radius: 3px;
+    margin-bottom: 3px;
+  }
+  .bgimage {
+    display: none;
+    background-color: var(--color-bg);
+  }
+  .info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5em;
+    z-index: 1;
+  }
+  .info * {
+    z-index: inherit;
+  }
+  @media only screen and (max-width: 650px) {
+    .wrapper {
+      grid-template-areas:
+        'avatar account account meta'
+        'content content content content'
+        'song song song song';
+      grid-row-gap: 3px;
+      row-gap: 3px;
+    }
+    .song {
+      width: 100%;
+    }
+    .song,
+    .cover {
+      max-width: 100%;
+    }
+    .cover {
+      height: 60px;
+    }
+    .cover:not(.background) {
+      z-index: 1;
+      width: 60px;
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+    }
+    .bgimage {
+      display: block;
+      width: 100%;
+      height: 60px;
+      z-index: 0;
+      filter: blur(10px);
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: center;
+    }
+    .info {
+      position: relative;
+      top: -60px;
+      flex-direction: row;
+    }
+    .info-wrapper {
+      margin-bottom: -50px;
+    }
+    .text {
+      padding: 3px;
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+      border-radius: 3px;
+      background-color: var(--color-bg-translucent);
+      color: var(--color-text);
+    }
   }
 </style>