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