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

Videos: same portfolio treatment — 78% centered, stacked, breathing

Browse Source 
YouTube cards now follow the portfolio pattern: full-bleed on
mobile, 78% max-width centered on 700px+, with margin-block to keep
neighbors at distance. Dropped the old span 6 (2-up pair) rules at
the 600/960px breakpoints — videos read better as deliberate single
plates than as a grid wall now that they take up real space.
This commit is contained in:
Joel Brock
2026-05-18 17:28:35 -07:00
parent f9cb18bd74
commit d357eba65f
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
assets/css/styles.css
View File

@@ -270,22 +270,22 @@ 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 item — full row on mobile, ~78% centered with breathing room above */ /* portfolio + video items — full row on mobile, ~78% centered with extra breathing */
.grid > .card--portfolio { .grid > .card--portfolio,
.grid > .card--youtube {
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 {
max-width: 78%; max-width: 78%;
justify-self: center; justify-self: center;
} }