Font
body {
font-family: sans-serif;
line-height: 1.5;
}TODO
Use fonts that users will have on their computer to avoid external dependencies.
Site name
.site-name {
height: 2rem;
font-size: 1.5rem;
}Headers
Page title
.page-title {
font-size: 2.5rem;
}Formatted text
Formatted text content can use H2 - H6.
Header 1
Paragraph of text.
Header 2
Paragraph of text.
Header 3
Paragraph of text.
Header 4
Paragraph of text.
Header 5
Paragraph of text.
Header 6
Paragraph of text.
Blocks
Block titles are H2, but could be H2 - H6 if nested in a layout.
Link
Remember to override all link state styles, not just the a tag.
| Click my Link. |
a {
color: var(--link-color, black);
text-decoration-style: dotted;
}
a:hover,
a:focus,
a:active {
text-decoration-style: solid;
}
a:focus {
outline: 2px dotted black;
outline-offset: 2px;
}