Stylament 0.23.2

Elementary Variants

These are classes for marking up variants of specific types of elements.

Naming Convention

Elementary variants classes carry the var- prefix, e. g. var-standard-table.

figure.var-feature

scss 
figure.var-feature {
  @include coloring.set-colors("feature", "alternate");
  @include coloring.use-colors;
  margin-inline: 0;
  padding: svar(spacing-block-lg);

  blockquote {
    ---no-stroke: true;
    ---indent: 0ch;
    ---marker-outdent: 1ch;
    font-size: svar(font-size-4);
    line-height: svar(line-3);
    font-family: svar(font-family-display, svar(font-family-body));
  }

  > * {
    max-inline-size: 85.7%;
    margin-inline-start: auto;

    @media (min-width: map.get(container.$sizes, "sm")) {
      // Occupy bigger golden ratio part.
      max-inline-size: 61.8%;
    }
    @media (min-width: map.get(container.$sizes, "lg")) {
      // Occupy smaller golden ratio part.
      max-inline-size: 38.2%;
    }
  }
}

Requires

$sizes@container (Map)

Rather opinonated styling for the first nav.var-menu.

body > nav.var-menu:first-of-type

scss 
body > nav.var-menu:first-of-type {
  $size: svar(length-2);
  ---flow-space: 0em;
  ---item-block-size: #{$size};
  ---item-line-height: #{svar(length-1dim)};
  ---item-padding: #{svar(length-1dim)};
  ---toggle-size: #{$size};
  ---toggle-padding: #{svar(length-0½)};
  ---toggle-shadow: #{svar(shadow-sm)};
  ---toggle-folded-shadow: #{svar(shadow-lg)};

  & > menu {
    box-shadow: svar(shadow-sm);

    & > li {
      @include coloring.set-colors("nav", "alternate");
      @include coloring.use-colors;
      transition: all 0.3s svar(easing-default);
      &:hover {
        @include coloring.use-colors-inverse;
      }

      & > a {
        color: inherit;
        background-color: transparent;
        font-weight: svar(font-weight-emphasis);
        text-decoration: none;
      }
    }
  }
}

The first nav.var-menu is implicitly considered the main menu.

Common patterns for navigation menus. Separated into several aspects.

$nav-wide

scss 
$nav-wide: map.get(container.$sizes, "sm");

Breakpoint for switching to wide layout.

Requires

$sizes@container (Map)

$size (menu)

scss 
$size: 2em;

Size factor of the menu.

nav.var-menu

scss 
nav.var-menu {
  ---item-block-size: #{$size};
  display: flex;
  flex-direction: row;
  align-items: flex-start;

  & > input[id^="-toggle-state"],
  & > label[for^="-toggle-state"] {
    display: none;
  }

  & > menu {
    flex-grow: 1;
  }
}

General navigation menu. This is the basic selector with the basic rules applied.

Modifier: +levelable

scss 
nav.var-menu.\+levelable {
  & > menu {
    // Horizontal nav as long as items have enough space.
    ---threshold: #{$nav-wide};
    @extend .lyo-switcher;
    & > li {
      display: block;
      text-align: center;
    }
  }
}

Levelable menu. Places items on a horizontal level if enough space is available.

@mixin menu-folded()

Menu when folded.

@mixin toggle-folded()

Toggle when folded.

@mixin menu-foldable()

Common traits of foldable menu. Allows to toggle the display of the menu.

Requires

@function svar()

Modifier: +foldable

scss 
nav.var-menu.\+foldable,
nav.var-menu.\+foldable-when-stacked:where(:not(.\+levelable)) {
  @include menu-foldable;

  // Folded state on wide screen. (Only when explicitly toggled.)
  @media (min-width: $nav-wide) {
    & > input[id^="-toggle-state"]:checked {
      & ~ menu {
        @include menu-folded;
      }

      & ~ label[for^="-toggle-state"] > :first-child,
      & ~ label[for^="-toggle-state"]:empty::after {
        @include toggle-folded;
      }
    }
  }
}

Always foldable menu.

Modifier: +foldable-when-stacked

scss 
nav.var-menu.\+foldable-when-stacked {
  @media (max-width: $nav-wide) {
    @include menu-foldable;
  }
}

Menu foldable only when stacked.

Modal menu on narrow screen

scss 
nav.var-menu.\+foldable,
nav.var-menu.\+foldable-when-stacked {
  @media (max-width: $nav-wide) {
    & > input[id^="-toggle-state"] {
      // Unfolded state on narrow screen.
      &:checked {
        // Use `label` as backdrop. Clicking on it toggles the state.
        & ~ label[for^="-toggle-state"]::before {
          content: "";
          position: absolute;
          inset: 0;
          block-size: 100vh;
          background: rgba(0, 0, 0, 0.5);
        }
      }

      // Folded state on narrow screen. (This is the default, as in not checked.)
      &:not(:checked) {
        & ~ menu {
          @include menu-folded;
        }

        & ~ label[for^="-toggle-state"] > :first-child,
        & ~ label[for^="-toggle-state"]:empty::after {
          @include toggle-folded;
        }
      }
    }

    & > menu {
      position: relative; // Place over backdrop.
    }
  }
}

Special behavior on narrow screen: Act as overlay with backdrop.

Modifier: +end

scss 
nav.var-menu.\+end {
  flex-direction: row-reverse;
}

Places toggle to the inline end (rhs in Latin). This only has an effect if the menu is foldable.

Modifier: +sticky

scss 
nav.var-menu.\+sticky {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
}

Sticky menu. Makes navbar stick to the top of the viewport.

table.var-standard-table

scss 
table.var-standard-table {
  ---table-border-width: #{svar(stroke-width-table, svar(stroke-width-default))};
  ---table-border-style: #{svar(stroke-style-table, svar(stroke-style-default))};
  ---table-border-color: #{svar(stroke-color-table, svar(stroke-color-default))};

  thead {
    background-color: var(---background-heavy, svar(color-mark-contra));
  }

  tr:nth-child(2n) {
    background-color: var(---background-light, svar(color-alternate-contra));
  }

  // Do not center `th` in vertical tables.
  thead + tbody {
    th:first-child {
      text-align: start;
    }
  }
}

Standard table style. In contrast to the neutral styles applied to the bare table element this adds some borders and stripes.