westra/questions
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
hero.js
+8 -25
View File
@@ -151,8 +151,8 @@ const CSS = `
stack over it. The height is a floor, frozen to a measured pixel 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 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, 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) so a copy that needs more than a screen (a phone) grows the header
grows rather than clips, and the cards start under it. */ rather than being clipped, and the cards start under it. */
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 0; z-index: 0;
@@ -167,8 +167,10 @@ const CSS = `
/* The piece is whatever the header has left above the copy, not /* The piece is whatever the header has left above the copy, not
portal's 55svh reservation; the name centres in it. It keeps a 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 quarter of the screen at least, so a long copy cannot squeeze the
squeeze the name out. */ 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 { .hero-module .hero-piece {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
@@ -176,25 +178,6 @@ const CSS = `
min-height: 26svh; 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 /* 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 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, 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 // The canvas covers the header's real box, which is the screen
// unless the strip and the copy need more; measured, since the // unless the copy needs more; measured, since the copy's height
// copy's height is the fonts' and the strip's is its own. // is the fonts'.
fit() { fit() {
this.boxHeight = Math.max(1, this.hero ? this.hero.offsetHeight : this.height); this.boxHeight = Math.max(1, this.hero ? this.hero.offsetHeight : this.height);
const dpr = window.devicePixelRatio || 1; const dpr = window.devicePixelRatio || 1;