Scope-defining Classes

These are classes that define specific scopes. They potentially affect the children of the classified element, e. g. the header inside body.scp-homepage might have scope-specific styles applied.

Naming Convention

Scope classes carry the scp- prefix, e. g. scp-homepage.

Homepage Header, alternative

body.scp-homepage > header.\+alt

scss

body.scp-homepage > header.\+alt {
  ---box-radius: #{svar(radius-xl)};
  ---box-border: #{svar(stroke-width-8) dashed svar(color-grey-300)};
  ---box-space: #{svar(spacing-block-lg)};

  & > * {
    @extend .lyo-box;
  }
}

Special homepage header styles.

Homepage Header

body.scp-homepage > header

scss

body.scp-homepage > header {
  ---cover-space: #{svar(spacing-block-lg) var(---container-gutter)};
  @extend .lyo-cover;

  h1 {
    font-size: clamp(svar(font-size-3), 8vmin, svar(font-size-9));
    line-height: 1;
  }

  & > * {
    @extend %lyo-center--intrinsic;
  }

  // Any image alone in an hgroup row is considered a logo.
  // NB: `:only-child` does not guarantee the absence of sibling text nodes.
  hgroup > * > :is(img, picture, svg):only-child {
    // Size it so that it nicely fits the viewport.
    max-inline-size: min(66vmin, 100%);
    max-block-size: 66vmin;
    margin-inline: auto;
  }
}

Special homepage header styles.