diff --git a/hero.js b/hero.js index fc55dbc..3ff6389 100644 --- a/hero.js +++ b/hero.js @@ -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;