Experiment different card preview style

src/components/status.css

@@ -1899,6 +1899,26 @@ a.card:is(:hover, :focus):visited {
   width: 100%;
   height: 100%;
 }
+.card.card-post {
+  flex-direction: row-reverse;
+
+  .title {
+    font-weight: 500;
+  }
+
+  .meta {
+    -webkit-line-clamp: 5;
+    line-clamp: 5;
+    opacity: 1;
+    font-size: inherit;
+  }
+}
+.status.large .card.large.card-post,
+.status-carousel
+  .content-container[data-content-text-weight='1']
+  .card.large.card-post {
+  flex-direction: column-reverse;
+}
 
 /* POLLS */
 

src/components/status.jsx

@@ -2532,12 +2532,21 @@ function Card({ card, selfReferential, instance }) {
       ctx.putImageData(imageData, 0, 0);
       blurhashImage = canvas.toDataURL();
     }
+
+    // "Post": Quote post + card link preview combo
+    // Assume all links from these domains are "posts"
+    // Mastodon links are "posts" too but they are converted to real quote posts and there's too many domains to check
+    // This is just "Progressive Enhancement"
+    const isPost = ['x.com', 'twitter.com', 'threads.net'].includes(domain);
+
     return (
       <a
         href={cardStatusURL || url}
         target={cardStatusURL ? null : '_blank'}
         rel="nofollow noopener noreferrer"
-        class={`card link ${blurhashImage ? '' : size}`}
+        class={`card link ${isPost ? 'card-post' : ''} ${
+          blurhashImage ? '' : size
+        }`}
         lang={language}
         dir="auto"
         style={{