Changeset 65a0697 in Klonkt

Timestamp:

06/30/2026 08:57:01 PM (2 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

e3a5aed

Parents:

f2943c1

Message:

fix(video-cover): size the swapped <video> like the cover <img> (post + list)

The iOS swap replaces the cover <img> with a <video>, but the post-page and list-cover CSS target
.post-cover img / .post-list-cover img (the element), so the <video> inherited no sizing and
rendered at its intrinsic height — too tall for the width. Add video to those selectors. Grid +
related covers already work (the img's class travels to the video, and those rules are class-based).

Co-Authored-By: Claude <noreply@…>

Location:

src/views

Files:

• pages/post.ejs (modified) (1 diff)
• partials/post-card.ejs (modified) (1 diff)

src/views/pages/post.ejs

@@ -201 +201 @@
 .post-page { max-width: 720px; margin: 0.5rem auto 2rem; padding: 0 1rem; }
 .post-cover { margin: 0 0 2rem; border-radius: 8px; overflow: hidden; }
-.post-cover img { width: 100%; height: auto; display: block; }
+.post-cover img, .post-cover video { width: 100%; height: auto; display: block; }
 .post-header { margin-bottom: 2rem; }
 .post-title { font-family: var(--font-display, serif); font-size: 2.5rem; line-height: 1.1; margin: 0 0 1rem; }

src/views/partials/post-card.ejs

@@ -146 +146 @@
         color-mix(in srgb, var(--accent, #888) 6%, var(--paper-2)) 100%);
   }
-  .post-list-cover img {
+  .post-list-cover img, .post-list-cover video {
     width: 100%; height: 100%;
     object-fit: cover;