Stylament 0.25.1

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)

nav.var-foldable

scss 
nav.var-foldable {
  display: flex;
  flex-direction: row;
  align-items: flex-start;

  // Hide toggle controls.
  & > :is(#{$anyToggle}) {
    display: none;
  }

  & > menu {
    flex-grow: 1;
  }

  // Do not act as popover on wide screen. Stay visible in regular document flow.
  & > #{$popOff} {
    display: flex;
    position: static;
  }
}

Foldable navigation menu: Initial setup.

Modal menu on narrow screen

scss 
nav.var-foldable {
  @media (width < menubar.$nav-wide) {
    @include menu-foldable;
    @include backdrop;
  }
}

Default behavior: Folding is only applied on narrow screen.

Modifier: +end

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

  & > #{$popOn} {
    margin-inline: auto var(---toggle-size);
  }
}

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

Foldable Navigation Menu

@mixin toggle()

Toggle.

Requires

@function svar()

Used By

@mixin menu-foldable()

@mixin toggle-off()

Toggle when folded.

Used By

@mixin menu-foldable()

@mixin menu-foldable()

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

Requires

@mixin toggle()

@mixin toggle-off()

@function svar()

Modifier: +always

scss 
nav.var-foldable:where(.\+always) {
  @include menu-foldable;
}

Apply folding also to leveled menu. (The backdrop is kept transparent in this case.) This module is optional and can be included on demand.

nav.var-sticky

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

Sticky navigation. 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.