import { Meta, Unstyled } from '@storybook/blocks';

<Meta title="Grundelemente/Typographie" />

# Typographie

In diesem Dokument wird der SCSS-Code für die Typografie im Projekt
dokumentiert.

## Überschriften-Stile-Beispiele

Die folgende Tabelle zeigt beispielhaft die verfügbaren Überschriften von `h1`
bis `h6`. In der Preview-Spalte werden die CSS-Klassen direkt auf das jeweilige
HTML-Element angewendet. Jede Klasse kann auf jede beliebige Überschrift `h1`
bis `h6` angewendet werden.

<Unstyled>
  <table className="table table-striped table-bordered align-middle">
    <thead>
      <tr>
        <th>Überschrift</th>
        <th>Preview</th>
        <th>CSS-Klassen</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><code>h1</code></td>
        <td><h1 className="xxxl bold">H1 Überschrift</h1></td>
        <td><code>h1.xxxl.bold</code></td>
      </tr>
      <tr>
        <td><code>h2</code></td>
        <td><h2 className="xxl bold">H2 Überschrift</h2></td>
        <td><code>h2.xxl.bold</code></td>
      </tr>
      <tr>
        <td><code>h3</code></td>
        <td><h3 className="xl">H3 Überschrift</h3></td>
        <td><code>h3.xl</code></td>
      </tr>
      <tr>
        <td><code>h4</code></td>
        <td><h4 className="l">H4 Überschrift</h4></td>
        <td><code>h4.l</code></td>
      </tr>
      <tr>
        <td><code>h5</code></td>
        <td><h5 className="m">H5 Überschrift</h5></td>
        <td><code>h5.m</code></td>
      </tr>
      <tr>
        <td><code>h6</code></td>
        <td><h6 className="s">H6 Überschrift</h6></td>
        <td><code>h6.s</code></td>
      </tr>
    </tbody>
  </table>
</Unstyled>

## SCSS-Dokumentation

Quelle: `src/foundations/typography/headings.scss`

```scss
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0;
  line-height: 1.2;
  font-weight: 400;

  &.bold {
    font-weight: 600;
  }

  &.xxxl {
    font-size: calc(1.375rem + 1.5vw);

    @include media-breakpoint-up(xl) {
      font-size: 2.5rem;
    }
  }

  &.xxl {
    font-size: calc(1.325rem + 0.9vw);

    @include media-breakpoint-up(xl) {
      font-size: 2rem;
    }
  }

  &.xl {
    font-size: calc(1.3rem + 0.6vw);

    @include media-breakpoint-up(xl) {
      font-size: 1.75rem;
    }
  }

  &.l {
    font-size: calc(1.275rem + 0.3vw);

    @include media-breakpoint-up(xl) {
      font-size: 1.5rem;
    }
  }

  &.m {
    font-size: 1rem;
  }

  &.s {
    font-size: 0.875rem;
  }

  &.xs {
    font-size: 0.8125rem;
  }

  &.xxs {
    font-size: 0.75rem;
  }

  &.xxxs {
    font-size: 0.688rem;
  }
}
```

