ihk24/gfi-ihk-2024/stories/_global/styles/typography.scss

@import 'mixins';

html {
  --font-size-copy: 22px;
  --font-size-small: 18px;
  --font-size-xs: 14px;
  --font-size-h1: 64px;
  --font-size-h2: 42px;
  --font-size-h3: 36px;
  --font-size-h4: 28px;
  --font-source-sans: 'Source Sans Pro', sans-serif;
  --font-korb: 'Korb', sans-serif;

  font-family: var(--font-source-sans);
  font-size: var(--font-size-copy);
  line-height: 1.5;
  color: var(--theme-color-primary);

  @media(max-width: 1339px) {
    --font-size-copy: 20px;
    --font-size-small: 17px;
    --font-size-h1: 54px;
    --font-size-h2: 36px;
    --font-size-h3: 32px;
    --font-size-h4: 24px;
  }
  @media(max-width: 999px) {
    --font-size-copy: 18px;
    --font-size-small: 16px;
    --font-size-h1: 46px;
    --font-size-h2: 32px;
    --font-size-h3: 28px;
    --font-size-h4: 22px;
  }
  @media(max-width: 767px) {
    --font-size-xs: 12px;
    --font-size-h1: 36px;
    --font-size-h2: 28px;
    --font-size-h3: 24px;
    --font-size-h4: 20px;
  }
}

body {
  margin: 0;
}

.sidebar {
  @media (min-width: 1000px) {
    --font-size-h1: 54px;
    --font-size-h2: 36px;
    --font-size-h3: 32px;
    --font-size-h4: 24px;
  }
}

h1, .like-h1 {
  @include h1;
}

h2, .like-h2 {
  @include h2;
}

h3, .like-h3 {
  @include h3;
}

h4, .like-h4 {
  @include h4;
}

h5, .like-h5 {
  @include h5;
}

h6, .like-h6 {
  @include h6;
}

h1 + h2 {
  margin-top: 0;
}

a {
  color: var(--theme-color-link);
  transition: 0.2s ease;

  &:hover {
    color: var(--theme-color-link-hover);
  }
}

p, .text, ul.nobreaks {
  margin: 0 0 0.8em;
}

.kicker {
  @include kicker;
}

.initial {
  font-weight: 600;
  margin: 12px 0 1em;
  min-height: 3.8em;

  &.strong {
    font-weight: 600;
  }

  &::first-letter {
    float: left;
    font-size: 3.4em;
    line-height: 1;
    margin: -0.04em 0.08em -0.2em -0.05em;
    font-weight: 400;
  }

  &.text:after {
    content: "";
    display: table;
    clear: both;
  }

  @media(max-width: 767px) {
    margin: 24px 0;

    &::first-letter {
      margin-top: -0.05em;
    }
  }
}

[data-browser="firefox"] {
  .initial::first-letter {
    margin-top: 0.113em;
  }
}