<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/assets/reset.css" rel="stylesheet">
<link href="setup.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<section>
<h2>Default</h2>
<p>This is just a paragraph, so we have text to overflow our container. Some more text, and another line. It is probably just now a long enough example, but I’m just getting in the groove of typing it out here so let’s continue going longer. Let’s have a little bit extra, for good measure. Just for one more line!</p>
</section>
<section>
<h2>“Ragged”</h2>
<p>This is just <nobr>a paragraph</nobr>, so we have text <nobr>to overflow</nobr> our container. Some more text, <nobr>and another</nobr> line. <nobr>It is</nobr> probably just now <nobr>a long</nobr> enough example, but I’m just getting in the groove of typing it out here so let’s continue going longer. Let’s have a little bit extra, for good measure. Just for one more line!</p>
</section>
</body>
</html>
body {
--base: 20px;
display: grid;
font-family: 'Helvetica', sans-serif;
gap: var(--base);
padding: var(--base);
}
section {
background-color: gold;
padding: calc(var(--base) / 2);
}
h2 { font-size: calc(var(--base) * 3); }