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

14
assets/css/styles.css
View File

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