_html-elements.scss

base/_html-elements.scss

@use 'sass:meta';
@use "../abstracts/" as *;

@layer default {

  // typography
  b,
  strong {
    @if meta.variable-exists(font-family-bold) {
      font-family: $font-family-bold;
      font-weight: $font-weight-body;
    } @else {
      font-family: $font-family-body;
      font-weight: $font-weight-bold;
    }
  }

  i,
  em {
    @if meta.variable-exists(font-family-italic) {
      font-family: $font-family-italic;
      font-style: normal;
    } @else {
      font-family: $font-family-body;
      font-style: italic;
    }
  }

  ::selection {
    background-color: $selection-background-color;
    color: $selection-color;
  }

  // represents side-comments and small print (copyright, legal text, ...)
  small {
    font-size: $font-size-small;
  }

  sub,
  sup {
    display: inline-block;
    line-height: 1;
    font-size: 0.625em;
  }
  sub {
    transform: translateY(0.25ex);
  }
  sup {
    transform: translateY(-0.25ex);
  }

  // elements
  code {
    :has(> pre &) {
      max-width: 80ch;
    }
    padding-block: 0.125rem;
    padding-inline: 0.25em;
    border-radius: 0.25em;
    background-color: $color-neutral-700;
    color: $color-neutral-000;
    font-family: monospace;
    font-size: $font-size-200;
    white-space: nowrap;
  }

  // https://jeffbridgforth.com/having-figure-match-width-of-contained-image/
  // Don't factor in the figcaption in determining the intrinsic inline-size
  // of the parent – or, in other words: size a parent element based on the
  // size of a child element, but choose which child element
  figure {
    inline-size: fit-content; // [1]
    // margin-inline: auto;
  }

  figcaption {
    contain: inline-size; // [2]
    font-size: $font-size-200;
    @if meta.variable-exists(font-family-italic) {
      font-family: $font-family-italic;
      font-style: normal;
    } @else {
      font-family: $font-family-body;
      font-style: italic;
    }
  }

  // horizontal line: represents a thematic break between paragraph-level elements:
  // for example, a change of scene in a story, or a shift of topic within a section.
  // https://css-tricks.com/examples/hrs/ simple styles for hr
  hr {
    height: 1px;
    margin: 2em auto;
    margin-block-start: 2em;
    border: 0;
    background: $color-neutral-200;
  }

}