tweak media attachment styles so mixed video/image appear side by side

Author: danieldickison

package.json

@@ -1,6 +1,6 @@
 {
   "name": "embedodon",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "A simple client-side script to render an Activity Stream (like from Mastodon)",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/Embedodon.ts

@@ -47,20 +47,22 @@ export class Embedodon {
     .media {
       display: flex;
       flex-flow: row nowrap;
-      justify-content: space-around;
+      justify-content: center;
       align-items: center;
       gap: 0.5rem;
     }
-    .media img,
-    .media video {
-      max-width: 100%;
-    }
-    .media a {
-      display: inline-block;
+    .media > a {
+      flex: 1 1;
+      min-width: 0;
+      display: block;
+      position: relative;
     }
-    .media a:hover {
+    .media > a:hover {
       outline: solid 2px var(--link);
     }
+    .media > a > * {
+      width: 100%;
+    }
     
     footer {
       text-align: end;
@@ -167,11 +169,13 @@ export class Embedodon {
       `
     } else if (attachment.type === 'gifv' && attachment.preview_url && attachment.url) {
       return html`
-        <video autoplay loop playsinline
-          part="video"
-          poster="${attachment.preview_url}"
-          src="${attachment.url}"
-        >
+        <a href="${attachment.url}">
+          <video autoplay loop playsinline
+            part="video"
+            poster="${attachment.preview_url}"
+            src="${attachment.url}"
+          ></video>
+        </a>
       `
     } else {
       return ''