# first.items[].content
We ensure there's always a scrollbar by making the body taller than the viewport.

We give the text container `position: fixed` so it doesn't scroll with the page.

Within this, we wrap the entire text in a `span` (in an `inline` element). This is important for the next step...

#CSS #pureCSS #noJS #scroll #scrollAnimation #text #textEffect #revealEffect #code #coding #frontend #webDev #web #webDevelopment #dev

# first.items[].contentMap.en
We ensure there's always a scrollbar by making the body taller than the viewport.

We give the text container `position: fixed` so it doesn't scroll with the page.

Within this, we wrap the entire text in a `span` (in an `inline` element). This is important for the next step...

#CSS #pureCSS #noJS #scroll #scrollAnimation #text #textEffect #revealEffect #code #coding #frontend #webDev #web #webDevelopment #dev

# first.items[].attachment[].name
/* ensure we always have a scrollbar by making 
 * the body taller than the viewport height */
body { height: 500vh }

h1 {
	/* ensure it doesn't move with scroll */
	position: fixed;
	/* and that it's in the middle */
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	/* and doesn't exceed a certain width */
	width: min(90%, 23em);
	/* and font scales with viewport, but within limits */
	font: clamp(.625em, 5vw, 4em) fira code, monospace
}