📐 Saffron Demo

Heading 2

Saffron is a set of useful CSS variables and reasonable defaults, based on √2.

Saffron works for light and dark themes, depending on the users' browser preferences.
🌒 Force dark theme ☀️ Force light theme 🔄 Reset theme

This demo uses the following CSS for basic page layout in addition to Saffron:

body {
	display: grid;
	grid-template: auto 1fr auto
		/ 1fr [main-start] minmax(0, 72ch) [main-end] 1fr;
	gap: var(--md-rem);
	margin-inline: var(--md-rem);
	height: 100lvh;
}
main, header, footer { grid-column: main }
header, footer { text-align: center }

Heading 3

you're only going to remember what you can hold in your hand, and you're only going to use what you remember.

Was It Likely? — give me less

Heading 4

1. Anchor element
2. Strong element
3. Emphasis element
4. Idiomatic text element
5. Unarticulated annotation element
6. Code element
7. Inserted text element
8. Deleted text element

Heading 5

• Strikethrough element
• Side comment element
• Superscript ^element
• Subscript _element
• Abbr.
• Alt+F4 (keyboard input element)
• Mark text element

Heading 6

Be kind to each other.