Skip to content

Stop the frame jumping when a reader switches page #50

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
oblomov-dev merged 1 commit into from
Aug 19, 2026
+78 −55
Merged

Stop the frame jumping when a reader switches page #50

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 78 additions & 55 deletions web/stack.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,13 @@
--warn-soft: #fdf1de;
--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
--radius: 10px;
--wide: 64rem;

/* The three measurements the shared family blocks at the end of this file
* read. They are the only thing about those blocks that is allowed to differ
* between the three sample repositories, because the three pages are built
* around containers of different widths. */
--family-width: var(--wide); /* what .masthead and main centre in */
--family-gutter: 0rem; /* those have no side padding of their own */
--family-bleed: 1.25rem; /* <body> has this much, and the bar undoes it */
/* The container every one of the three sample pages centres in, and its
* gutter. Identical in all three - a reader switching page must not see the
* column move. The shared blocks at the end of this file hard-code the same
* two numbers; these are here for the rules above. */
--wide: 1180px;
--gutter: 24px;
}

@media (prefers-color-scheme: dark) {
Expand All @@ -62,7 +60,9 @@

body {
margin: 0;
padding: 0 1.25rem 4rem;
/* No side padding: the gutter belongs to the containers, so the masthead and
the bar above it can run to the edge of the window like the sibling pages. */
padding: 0 0 4rem;
background: var(--bg);
color: var(--ink);
font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
Expand All @@ -86,34 +86,12 @@ code {

/* ------------------------------------------------------------- masthead */

.masthead {
max-width: var(--wide);
margin: 0 auto;
padding: 2.5rem 0 1.5rem;
}
/* .masthead, .brand, h1 and .lede are shared with the two sibling pages and
live at the end of this file. What follows is this page's own: the smaller
lede the packages section uses, and the note about the missing playground
button, which neither of the others has. */

.brand {
margin: 0 0 .35rem;
font: 600 .8rem/1 var(--mono);
letter-spacing: .04em;
text-transform: uppercase;
}
.brand a { color: var(--ink-faint); text-decoration: none; }
.brand a:hover { color: var(--accent); }

.masthead h1 {
margin: 0 0 .5rem;
font-size: clamp(1.7rem, 4vw, 2.4rem);
line-height: 1.15;
letter-spacing: -.02em;
}

.lede {
max-width: 46rem;
margin: 0;
color: var(--ink-soft);
}
.lede.small { font-size: .9rem; }
.lede.small { font-size: .9rem; max-width: 46rem; }

.masthead .note {
max-width: 46rem;
Expand All @@ -124,7 +102,7 @@ code {

/* --------------------------------------------------------------- panel */

main { max-width: var(--wide); margin: 0 auto; }
main { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }

.panel {
position: sticky;
Expand Down Expand Up @@ -256,7 +234,7 @@ main { max-width: var(--wide); margin: 0 auto; }

#results {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
grid-template-columns: repeat(auto-fill, minmax(min(23rem, 100%), 1fr));
gap: .9rem;
}

Expand Down Expand Up @@ -452,7 +430,7 @@ mark {

#pkgcards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
gap: .7rem;
margin-top: 1rem;
}
Expand Down Expand Up @@ -498,7 +476,7 @@ mark {
footer {
max-width: var(--wide);
margin: 3rem auto 0;
padding-top: 1.2rem;
padding: 1.2rem var(--gutter) 0;
border-top: 1px solid var(--line);
font-size: .82rem;
color: var(--ink-faint);
Expand All @@ -515,25 +493,28 @@ footer p { margin: .4rem 0; }

/* family-nav:start
*
* The bar that ties the three sample pages together, and the card strip at the
* end of the page that says why you would go next door. Both are IDENTICAL in
* The frame the three sample pages share: the bar that ties them together, the
* masthead they all sit under, and the card strip at the end. IDENTICAL in
* abap2UI5/samples, abap2UI5/samples-controls and abap2UI5/samples-stack -
* change them in all three repositories or in none. `npm run check:family-nav`
* change it in all three repositories or in none. `npm run check:family-nav`
* fails when a copy drifts.
*
* They read three tokens each page sets for itself in :root and nothing else
* of their own: --family-width (the container the rest of the page centres
* in), --family-gutter (that container's own side padding) and --family-bleed
* (the side padding on <body>, which the bar breaks out of to reach the edge).
* Every colour comes from the palette above, so light and dark come free.
* It is self-contained: two constants of its own (1180px, the container every
* page centres in, and its 24px gutter - so the content column is 1132px
* everywhere) and otherwise nothing but the palette above, so light and dark
* come free. Every page therefore has to leave <body> unpadded and give its own
* containers the same 1180px/24px, or the bar and the page under it will not
* line up.
*
* That alignment is the whole point. Three pages centring in three different
* widths made the brand, the heading and the first card jump sideways on every
* switch, which reads as three sites rather than one.
*
* The bar is deliberately NOT sticky: two of the three pages already stick
* their filter panel to the top, and a second sticky strip above it would eat
* a phone screen twice over. */

.family {
margin: 0 calc(var(--family-bleed) * -1);
padding: 0 var(--family-bleed);
background: var(--panel);
border-bottom: 1px solid var(--line);
}
Expand All @@ -543,9 +524,9 @@ footer p { margin: .4rem 0; }
flex-wrap: wrap;
align-items: center;
gap: .1rem;
max-width: var(--family-width);
max-width: 1180px;
margin: 0 auto;
padding: .35rem var(--family-gutter);
padding: .35rem 24px;
}

.family-brand {
Expand Down Expand Up @@ -615,19 +596,61 @@ footer p { margin: .4rem 0; }
.family-brand { margin-right: .35rem; }
}

/* ------------------------------------------------------------- masthead */

/* Shared for the same reason as the bar: a reader switching pages should see
* the words change and nothing else. Each page fills the frame with its own
* title, lede and actions - what sits BELOW the lede is the page's own
* business and is styled in its own stylesheet. */

.masthead {
background: linear-gradient(160deg, var(--accent-soft), transparent 70%), var(--panel);
border-bottom: 1px solid var(--line);
}
.masthead .inner {
max-width: 1180px;
margin: 0 auto;
padding: 34px 24px 30px;
}

/* NOT uppercased. The product is written abap2UI5, and an eyebrow that
* shouts ABAP2UI5 is the one place on the page that gets its own name wrong. */
.brand {
margin: 0 0 14px;
font: 600 .8rem/1 var(--mono);
letter-spacing: .04em;
}
.brand a { color: var(--ink-faint); text-decoration: none; }
.brand a:hover { color: var(--accent); }

.masthead h1 {
margin: 0 0 10px;
font-size: clamp(1.7rem, 3.6vw, 2.5rem);
line-height: 1.15;
letter-spacing: -.02em;
}

.lede {
max-width: 62ch;
margin: 0;
color: var(--ink-soft);
font-size: 1.03rem;
}
.lede strong { color: var(--ink); }

/* --------------------------------------------------------- three pages */

/* The bar at the top answers "where am I". This answers "why would I go
* anywhere else", and it sits at the end because that is where a reader who
* is done with this page arrives. */

.three {
max-width: var(--family-width);
max-width: 1180px;
margin: 3rem auto 0;
/* A rule above it, because on one of the three pages this lands directly
* under another prose section that has one, and without it the strip reads
* as that section's tail rather than as its own thing. */
padding: 1.4rem var(--family-gutter) 0;
padding: 1.4rem 24px 0;
border-top: 1px solid var(--line);
}
.three > h2 { margin: 0 0 .3rem; font-size: 1.15rem; }
Expand All @@ -640,7 +663,7 @@ footer p { margin: .4rem 0; }

.three-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
gap: .7rem;
}

Expand Down