designslife/dlStack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Videos: 2-per-row default, featured opt-in to wide layout

Browse Source 
Reverted the global youtube wide treatment per user direction.
Videos default to span 6 (pair layout) at 600px+ again. Items with
`featured: true` in JSON get a new `card--wide` class that opts
them into the same 78%-centered + vertical-breathing layout
portfolio uses — meant to promote a hero video without making
every video imposing.
This commit is contained in:
Joel Brock
2026-05-18 20:13:12 -07:00
parent bb0f0ec13a
commit 89d7e8d8ca
3 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@@ -214,10 +214,11 @@ only loads when clicked, so the page stays fast even with many videos.
} }
``` ```
| field | required? | notes | | field | required? | notes |
|---------|-----------|-------| |------------|-----------|-------|
| `id` | yes | YouTube video ID (the `v=` parameter from the URL). | | `id` | yes | YouTube video ID (the `v=` parameter from the URL). |
| `title` | yes | Shown over the thumbnail and as the iframe's accessible title. | | `title` | yes | Shown over the thumbnail and as the iframe's accessible title. |
| `featured` | no | When `true`, the video card spans the full row at 78% max-width centered (like a portfolio plate). Default layout is 2-per-row on tablet+. Use sparingly to promote a hero video. |
#### `type: "client"` — logo tile #### `type: "client"` — logo tile

14
assets/css/styles.css
View File

@@ -270,22 +270,28 @@ main > .section:first-child { margin-top: var(--space-3xl); }
@media (min-width: 600px) { @media (min-width: 600px) {
.grid > .card--link { grid-column: span 6; } .grid > .card--link { grid-column: span 6; }
.grid > .card--project { grid-column: span 6; } .grid > .card--project { grid-column: span 6; }
.grid > .card--youtube { grid-column: span 6; }
} }
@media (min-width: 960px) { @media (min-width: 960px) {
.grid > .card--link { grid-column: span 4; } .grid > .card--link { grid-column: span 4; }
.grid > .card--project { grid-column: span 6; } .grid > .card--project { grid-column: span 6; }
.grid > .card--youtube { grid-column: span 6; }
.grid > .card--featured{ grid-column: span 8; } .grid > .card--featured{ grid-column: span 8; }
} }
/* portfolio + video items — full row on mobile, ~78% centered with extra breathing */ /* portfolio item — always full row, capped at 78% with breathing room */
.grid > .card--portfolio, .grid > .card--portfolio {
.grid > .card--youtube { grid-column: span 12;
margin-block: clamp(0.5rem, 1.5vw, 1.25rem);
}
/* featured/wide youtube — opt-in via `featured: true` in JSON */
.grid > .card--youtube.card--wide {
grid-column: span 12; grid-column: span 12;
margin-block: clamp(0.5rem, 1.5vw, 1.25rem); margin-block: clamp(0.5rem, 1.5vw, 1.25rem);
} }
@media (min-width: 700px) { @media (min-width: 700px) {
.grid > .card--portfolio, .grid > .card--portfolio,
.grid > .card--youtube { .grid > .card--youtube.card--wide {
width: 100%; width: 100%;
max-width: 78%; max-width: 78%;
justify-self: center; justify-self: center;

3
assets/js/app.js
View File

@@ -60,8 +60,9 @@
} }
function renderYouTube(it) { function renderYouTube(it) {
const wide = it.featured ? " card--wide" : "";
return ` return `
<div class="card card--youtube reveal"> <div class="card card--youtube${wide} reveal">
<div class="yt" role="button" tabindex="0" aria-label="Play: ${esc(it.title)}" data-yt="${esc(it.id)}" style="background-image:url('${esc(ytThumb(it.id))}')"> <div class="yt" role="button" tabindex="0" aria-label="Play: ${esc(it.title)}" data-yt="${esc(it.id)}" style="background-image:url('${esc(ytThumb(it.id))}')">
<div class="yt__play" aria-hidden="true"> <div class="yt__play" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z" fill="currentColor"/></svg> <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z" fill="currentColor"/></svg>