Text styles

This post shows how several text elements are styled by default in Zonelots.

Lists

Ordered and unordered lists have coloured markers:

item
item
item

item
item
item

Code

Inline code, e.g. index.html, is shrunken slightly to fit in better with the default font. Code-blocks are code elements with the code-block class:

<code class="code-block">const max = 100;

for (let i = 1; i < max; i++) {
	let output = ``;
	if (i % 3 === 0) output += `fizz`;
	if (i % 5 === 0) output += `buzz`;
	console.log(output === `` ? i.toString() : output);
}</code>

Text in code-blocks is pre-formatted and tabs are 4 spaces wide.

Blockquotes

Blockquotes are indented:

Inline code, e.g. index.html, is shrunken slightly to fit in better with the default font. Code-blocks are code elements with the code-block class:

A blockquote with a citation should be put inside a figure element, with the citation in a figcaption element:

<figure>
	<blockquote>
		<p>I have only a short time to live, only one death to die, and I will die fighting for this cause. There will be no peace in this land until slavery is done for.</p>
	</blockquote>
	<figcaption>John Brown, 1856</figcaption>
</figure>

The citation will automatically include an em dash:

I have only a short time to live, only one death to die, and I will die fighting for this cause. There will be no peace in this land until slavery is done for.

John Brown, 1856

Disclosure/details-summary widgets

The summary element has a coloured marker and the hidden content is indented:

Click me

I'm the hidden content.

Upper- and lowercase

If you want to force some text to appear in all uppercase or LOWERCASE for visual effect, try using the uppercase or lowercase classes on the parent element. If you want text inside an all-uppercase/lowercase element to revert back to the case you wrote it in, use the undo-case class: this text appears in uppercase despite being written in lowercase, while THIS text aPpEaRs in its Original Written Case despite being inside the uppercase-styled text.

<span class="uppercase">this text appears in uppercase despite being written in lowercase,
<span class="undo-case">while THIS text aPpEaRs in its Original Written Case</span>
despite being inside the uppercase-styled text</span>