floor-typography-css/doc/Styling.md

Vanilla CSS normalizer and the extra minimum for an intuitive default CSS for typography and web-apps.

# Styling

*Floor Typography CSS is the floor for your base/theme style, and does not contain much styling. An excerpt below of the quite minimal CSS for this site.*

## Headings

<p class="h1">Heading One (h1)</p>

<p class="h2">Heading Two (h2)</p>

<p class="h3">Heading Three (h3)</p>

<p class="h4">Heading Four (h4)</p>

<p class="h5">Heading Five (h5)</p>

<p class="h6">Sixth Heading (h6)</p>

---

## Lists

- item
- item
	1. Item
	1. Item
		- Item
		- Item
		- Item
	1. Item
- item

----

```css
@import 'floor-typography-css/src/floor.css';
@import 'floor-typography-css/src/headings.css';
@import 'floor-typography-css/src/headings-md.css';

:root {
	--body-gap-x: max(6vw, var(--spacer, 1rem));
	--logo-height: .25ex;
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}

@media (min-width: 900px) {
	:root { --body-gap-x: 15vw; }
}

body {
	margin: 0;
	padding: 0 var(--body-gap-x) var(--spacer, 1rem);
}

/** Site width */

article > *,
.site-footer {
	max-width: 50rem;
}

/** Headings */

h1, .h1 {
	margin-block-start: calc(3.5 * var(--spacer, 1rem));
	margin-block-end: calc(2.5 * var(--spacer, 1rem));
}

h2, .h2 {
	margin-block-start: calc(var(--spacer, 1rem) * 3);
	margin-block-end: calc(var(--spacer, 1rem) * 2);
}

h3, .h3 {
	margin-block-start: calc(var(--spacer, 1rem) * 1.5);
	margin-block-end: calc(var(--spacer, 1rem) * .5);
}

h4, .h4,
h5, .h5,
h6, .h6 {
	margin-block-end: 0;
}

:is(
	h3, .h3,
	h4, .h4,
	h5, .h5,
	h6, .h6
) + :not(hr) {
	margin-block-start: 0;
}
```