Long-Read Text
Use the .t-long-read block wrapper utility class around text that you want to be larger on large screens, for ease of reading. For example, use on the <article> tag for blog post templates.
On narrow viewports (small devices), the text within the example .t-long-read wrapper below will be the Codebase default size (1rem, i.e. 16px). On wider viewports, the text is scaled up using a CSS clamp to a comfortable maximum.
Default sizes:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus provident sint totam minus nisi, ab dolore. Velit ullam consequatur qui nihil omnis temporibus sequi quia asperiores, sit obcaecati quae veritatis eum deleniti labore est aut fugit, provident cum. Provident mollitia neque perferendis alias accusamus quae, aut ullam quo totam nostrum!
.t-long-read sizes:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus provident sint totam minus nisi, ab dolore. Velit ullam consequatur qui nihil omnis temporibus sequi quia asperiores, sit obcaecati quae veritatis eum deleniti labore est aut fugit, provident cum. Provident mollitia neque perferendis alias accusamus quae, aut ullam quo totam nostrum!
<div class="t-long-read">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet ...</p>
</div>