Javi/saborflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Constrain layout for ultra-wide screens

Browse Source 
Add --sf-max-w (1280px) and --sf-pad (40px) tokens. Full-bleed sections
(topbar, footer) use max() padding to keep backgrounds edge-to-edge while
centering content. Content sections (hero, pillars, coming, cta, page)
use max-width + margin-inline: auto. Mobile/tablet breakpoints unchanged.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Javier Blanco
2026-05-01 09:49:10 +07:00
parent 3d353ed00f
commit 461bea46cc
1 changed files with 21 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
css/style.css
View File

@@ -11,6 +11,8 @@
--sf-ink: #0E0B0E;
--sf-ink-2: #15101A;
--sf-paper: #F7EFE3;
--sf-max-w: 1280px;
--sf-pad: 40px;
}
/* ── Reset ── */
@@ -61,7 +63,7 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 18px 40px;
padding: 18px max(var(--sf-pad), calc((100% - var(--sf-max-w)) / 2));
border-bottom: 1px solid rgba(255,246,232,0.06);
position: sticky;
top: 0;
@@ -221,7 +223,9 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
/* ── Hero ── */
.sfB-hero {
padding: 48px 40px 30px;
padding: 48px var(--sf-pad) 30px;
max-width: var(--sf-max-w);
margin-inline: auto;
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 40px;
@@ -471,7 +475,9 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
/* ── Pillars trio ── */
.sfB-pillars {
padding: 60px 40px 30px;
padding: 60px var(--sf-pad) 30px;
max-width: var(--sf-max-w);
margin-inline: auto;
}
.sfB-pillars .head {
display: flex;
@@ -552,7 +558,9 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
/* ── Schedule teaser ── */
.sfB-coming {
padding: 30px 40px 60px;
padding: 30px var(--sf-pad) 60px;
max-width: var(--sf-max-w);
margin-inline: auto;
}
.sfB-coming .head {
display: flex;
@@ -646,7 +654,8 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
/* ── CTA block ── */
.sfB-cta {
position: relative;
margin: 0 40px 50px;
max-width: calc(var(--sf-max-w) - 2 * var(--sf-pad));
margin: 0 auto 50px;
padding: 40px;
border-radius: 28px;
background:
@@ -713,7 +722,7 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
/* ── Footer ── */
.sfB-foot {
padding: 28px 40px;
padding: 28px max(var(--sf-pad), calc((100% - var(--sf-max-w)) / 2));
display: flex;
justify-content: space-between;
align-items: center;
@@ -732,7 +741,9 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
/* ── Page head (inner pages) ── */
.sfB-page {
padding: 28px 40px 40px;
padding: 28px var(--sf-pad) 40px;
max-width: var(--sf-max-w);
margin-inline: auto;
}
.sfB-page-head {
margin-top: 28px;
@@ -1265,6 +1276,8 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
/* ── Responsive: tablet ── */
@media (max-width: 960px) {
:root { --sf-pad: 20px; }
.sfB-topbar {
grid-template-columns: 1fr auto;
padding: 14px 20px;
@@ -1294,7 +1307,7 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
.sfB-coming .head h2 { font-size: 38px; }
.sfB-coming-row { grid-template-columns: 1fr 1fr; }
.sfB-cta { margin: 0 20px 36px; padding: 28px; grid-template-columns: 1fr; }
.sfB-cta { max-width: none; margin: 0 20px 36px; padding: 28px; grid-template-columns: 1fr; }
.sfB-cta .quote { font-size: 26px; }
.sfB-foot { padding: 20px; flex-direction: column; text-align: center; font-size: 10px; }