Typography
Basic typographic styles for the site.
ul, ol
scss
ul,
ol {
margin-bottom: var(--newline);
margin-top: 0;
padding-left: var(--list-padding, var(--list-padding--default, 0));
& & {
--list-padding--default: 1em;
}
@include config.below('wide-page') {
--list-padding--default: 1em;
}
}
Apply spacing after lists.
::marker
scss
::marker {
color: var(--marker-color, var(--text-light));
font-size: var(--marker-size, 1em);
ul & {
--marker-size: 0.75em;
}
}
Lighter markers and smaller bullet points…
[data-block='fancy-list']
scss
[data-block='fancy-list'] {
::marker {
--marker-color: var(--icon);
--marker-size: var(--h2);
}
li {
padding-bottom: var(--newline);
}
strong {
@include config.font-family('alt');
font-size: var(--h3);
}
}
Larger markers w/spaced out list items like on bottom of design/dev services page
::selection
scss
::selection {
background-color: var(--ccs-accent--fg5);
color: var(--bg);
}
Selected text is inverted, with a hint of the accent hue.
.wf-loading
scss
.wf-loading {
@include config.is-hidden;
}
Hide the page visually while fonts are loading, to avoid a flash of unstyled text.
.amp
scss
.amp {
@include config.font-family('amp');
font-style: italic; // needed for Safari
}
All ampersands default to the fancy baskerville italic.
span:where(.h-card):not(.p-org)
scss
span:where(.h-card):not(.p-org) {
font-weight: bold;
}
By default, non-link/non-org inline h-cards are bold.
p
scss
p {
margin-bottom: var(--newline);
margin-top: 0;
text-wrap: pretty;
&:empty {
display: none;
}
}
Apply spacing after paragraphs
summary
scss
summary {
cursor: pointer;
color: var(--open, var(--action));
&:hover,
&:focus,
&:active,
[open] > & {
--open: var(--active);
}
}
Provide basic interaction styles for detail summary
elements.