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

hr

scss

hr {
  margin: var(--spacer) 0;
}

Horizontal rules also provide spacing between sections.

::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.