Combined Article Hero

What this page combines

vh + dvh background-size contrast overlay Flexbox axes flex ratios + basis align-self font inheritance circular image text shadow nth-child stripes sticky navigation sticky resources

The first min-height is a `vh` fallback; `dvh` follows the visible mobile viewport. The navigation and resources use sticky positioning, while the overlay—not text shadow alone—provides reliable contrast.

Start with the shape of the water

A river records the slope and material of the land around it. Fast, narrow sections often indicate a steeper channel, while wider bends allow sediment to settle.

Look beyond the bank

Vegetation, exposed roots, and high-water marks show how conditions change through the year. A useful observation combines what is visible now with signs of earlier flow.

Keep notes comparable

Record location, weather, water colour, and recent rainfall in the same order each time. A repeated structure makes differences easier to notice later.

Why these choices?

The hero uses a photo as presentation, while the meaningful author portrait remains an img with concise alt text. The article uses flex: 2 1 32rem and the aside uses flex: 1 1 15rem; their ratios and bases create a readable split that can wrap. The sticky aside keeps align-self: flex-start, its normal-flow space, and a small z-index; no ancestor clips the layout with overflow.