hero.js: ingen bildeserie i den klebrige headeren
lint-and-reload / lint (push) Successful in 3s

Stilene som la en serie inn under navnet er tatt ut: serien skal ikke
være klebrig med heroen, den hører til /prosjekter.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
blandClaude Fable 5.1 committed 2026-10-21 14:58:19 +02:00
1 parent ecd4f01f4d
commit 1f2f184d8f
1 file changed
+8 -25
+8 -25
View File
@@ -151,8 +151,8 @@ const CSS = `
stack over it. The height is a floor, frozen to a measured pixel
value by the module once it runs (see size()); the svh ladder is
the first paint and the no-JS fallback. A floor and not a height,
so a page whose strip and copy need more than a screen (a phone)
grows rather than clips, and the cards start under it. */
so a copy that needs more than a screen (a phone) grows the header
rather than being clipped, and the cards start under it. */
position: sticky;
top: 0;
z-index: 0;
@@ -167,8 +167,10 @@ const CSS = `
/* The piece is whatever the header has left above the copy, not
portal's 55svh reservation; the name centres in it. It keeps a
quarter of the screen at least, so a strip and a long copy cannot
squeeze the name out. */
quarter of the screen at least, so a long copy cannot squeeze the
name out. (A picture strip does not belong in this header: it would
be pinned under the name for the whole page. It lives on the pages
without the module, /prosjekter.) */
.hero-module .hero-piece {
position: relative;
flex: 1 1 auto;
@@ -176,25 +178,6 @@ const CSS = `
min-height: 26svh;
}
/* With a picture strip (slideshow): the name and the line take the
top, the strip runs the width under them, the question under that,
all in the one sticky header. The wordmark's bar is empty here (who
is here went to the corner), so it takes no room; the strip keeps
to its own height but never more than two fifths of the screen. */
.hero-module .hero-bar {
padding: 0;
}
.hero-module .slideshow {
flex: none;
margin: 0 0 1.25rem;
max-height: 40svh;
}
.hero-module.hero-slides .hero-copy {
padding-bottom: 2.5rem;
}
/* The name drawn below is the wordmark here. Who is here (portal
0.6: on the wordmark's own line, .hero-top, which would sit level
with the mark) goes to the top right corner of the header instead,
@@ -463,8 +446,8 @@ class WestraHero {
}
// The canvas covers the header's real box, which is the screen
// unless the strip and the copy need more; measured, since the
// copy's height is the fonts' and the strip's is its own.
// unless the copy needs more; measured, since the copy's height
// is the fonts'.
fit() {
this.boxHeight = Math.max(1, this.hero ? this.hero.offsetHeight : this.height);
const dpr = window.devicePixelRatio || 1;