_general.scss

base/_general.scss

@use "../abstracts/" as *;

body {
  min-block-size: 100svh;
  background-color: $body-background-color;
  font-family: $body-font-family;
  font-weight: $body-font-weight;
  font-size: $body-font-size;
  color: $body-text-color;
  line-height: $body-line-height;
  @media (width < $tweakpoint-30) {
    line-height: $body-line-height-mobile;
  }
}

// links
@layer default {
    a:not([class]):not([data-toplink]) {
    color: currentColor;
    text-decoration-color: currentColor;
    text-underline-offset: 0.3ex;

    &:visited {
      color: currentColor;
      text-decoration-color: currentColor;
    }
    &:hover {
      color: $color-accent-600;
      text-decoration-color: $color-accent-600;
      text-decoration-thickness: 3px;
    }
    &:active {
      background-color: $color-accent-600;
      color: $color-neutral-000;
      transform: scale(0.95);
    }
  }
  a.btn {
    @include button;
    transition: background-color 0.5s ease-in-out,
                border-color 0.25s ease-in-out,
                color 0.5s ease-in-out;
    &:hover {
      --button-bg: #{$color-neutral-800};
      --button-color: #{$color-neutral-100};
    }
    &:active {
      transform: scale(0.97);
    }
  }
} // @layer default end

@layer theme {
  a:not([class]) {
    &:hover {
      // color: $color-accent-600;
      // text-decoration-color: $color-accent-600;
    }
    &:active {
      // background-color: $color-accent-600;
      // color: $color-neutral-000;
    }
  }

  a.btn {
    // --button-bg: #{$color-accent-800};
    // --button-border-color: #{$color-accent-800};
    // --button-color: #{$color-accent-100};
    &:hover {
      // --button-bg: #{$color-accent-100};
      // --button-color: #{$color-accent-800};
    }
  }
} // @layer theme end

// paragraphs
// https://12daysofweb.dev/2024/css-margin-trim-line-height-units/
p {
  max-inline-size: $paragraph-max-ch;
  text-wrap: pretty;

  .text-align-center & {
    margin-inline: auto;
    max-inline-size: unset;
  }
}

// paragraphs with simple links
p {
  &.info,
  &.more,
  &.back {
    a {
      font-size: $font-size-smaller;
      text-decoration: none;
      &:hover {

      }
    }
  }
  &.back {
    padding-block: 1.5lh;
  }
}

// Lists
:where(.content-text) ul,
:where(.content-text) ol {
  padding-inline-start: 1rem;
  line-height: $body-line-height;
  li {
    max-inline-size: $paragraph-max-ch;
    overflow-wrap: break-word;
  }
}

// headlines
:where(h1, h2, h3, h4, h5, h6) {
  font-family: $font-family-headline;
  font-weight: $font-weight-bold;
  text-wrap: balance;
}
h1 {
  //max-inline-size: 30ch;
  font-size: $font-size-h1;
  text-transform: uppercase;
  line-height: 1;
}
h2 {
  //max-inline-size: 30ch;
  font-size: $font-size-h2;
  line-height: 1.2;
}
h3 {
  //max-inline-size: 60ch;
  font-size: $font-size-h3;
  line-height: 1.2;
}
h4, h5, h6 {
  line-height: 1.2;
}

// FIXME das ist kein best practice für diesen Anwendungsfall
// <hgroup> wäre besser für Taglines (siehe auch rsce-Templates)
// aber für eine spezielle Formatierung in der h1 ist das ok
h1 .smaller {
  margin-block-start: 0.25lh;
  font-size: $font-size-400;
}

// Überschriften und Kombinationen
// h1-h6 als separates Inhaltselement
.headline {
  margin-block-end: 0.5lh;
}
// Überschrift innerhalb eines .rte bzw. eines content-elements
.rte :where(h1, h2, h3, h4, h5, h6),
[class^="content-"] > .headline,
[class^="ce_rsce_"] > .headline {
  margin-block-end: 0.5lh;
}
// Überschriften, die keine .headline-Klasse haben, hier ergänzen:
.mod_customnav :where(h1, h2, h3, h4, h5, h6) {
  margin-block-end: 0.5lh;
}

// Abstand zwischen Absätzen
// und zwischen Absatz und nachfolgender Überschrift ohne separates Headline-Element
// https://12daysofweb.dev/2024/css-margin-trim-line-height-units/
.rte {
  p + p {
    margin-block-start: $paragraph-space;
  }
  p + :where(h1, h2, h3, h4, h5, h6) {
    margin-block-start: 0.75lh;
  }
  // mehr Abstand für Link-Buttons
  p + p a:where([class]),
  ul + p a:where([class]) {
    margin-block-start: 0.5lh;
  }
}

// global tinyMCE-styles
.intro {
  font-size: $font-size-500;
}
.alert {
  font-weight: $font-weight-bold;
  color: $color-alert;
}