/*
---
name: Typography
tag:
  - typography
category:
  - shared
  - shared/typography
sourcePath: /shared/_typography.scss
---

The base *font-family* is `#{$base-font-family}` and the base *font-size* is
`#{$base-font-size}`. The base *line-height*, which is also the *vertical
rhythm* base<sup>[1]</sup> unit, is `#{$base-line-height}`.

The best way to implement a responsive typography is by adjusting the
`font-size` within the `:root` element. This will also make sure that the
vertical rhythm adapts to the new font-size.

For your information the following `font-weight` values roughly correspond to
the commonly used weight names below.<sup>[2]</sup>

```html
100: <span style="font-weight: 100">Thin</span><br>
200: <span style="font-weight: 200">Extra Light (Ultra Light)</span><br>
300: <span style="font-weight: 300">Light</span><br>
400: <span style="font-weight: 400">Normal</span><br>
500: <span style="font-weight: 500">Medium</span><br>
600: <span style="font-weight: 600">Semi Bold (Demi Bold)</span><br>
700: <span style="font-weight: 700">Bold</span><br>
800: <span style="font-weight: 800">Extra Bold (Ultra Bold)</span><br>
900: <span style="font-weight: 900">Black (Heavy)</span>
```

[1]: https://zellwk.com/blog/why-vertical-rhythms/
[2]: http://www.w3.org/TR/css3-fonts/#font-weight-prop
*/

/*
---
name: Vertical rhythm
tag:
  - typography
  - vertical-rhythm
category:
  - shared
  - shared/typography
  - shared/typography/vertical-rhythm
sourcePath: /shared/_typography.scss
---

There is a Sass function available called `vertical-base(x)`, which you can use to
get the vertical base value or a factor of it.

**Recommendation**: Try to avoid too tiny fractures. Quarters (¼) or larger are a
good way to go.

```scss
.my-element {
    margin-bottom: vertical-base(0.5); // Half of vertical base. ⇒ #{$base-line-height * 0.5}
    margin-top: vertical-base(2); // Double… ⇒ #{$base-line-height * 2}
}
```

*/
:root {
    font-family: $base-font-family;
    font-size: $base-font-size;

    // Use responsive typography and adjust vertical rhythm at the same time
    // @include media(">=medium") {
    //     font-size: $base-font-size * 1.25;
    // }
}

body {
    color: $color-black;
    line-height: vertical-base();
}

/*
---
name: Headlines
tag:
  - typography
category:
  - shared
  - shared/typography
  - shared/typography/headlines
sourcePath: /shared/_typography.scss
---

The font-family for headlines is `#{$base-headline-family}`. All `h{1..6}`-Tags
are formatted and ready for usage. Use the `h{1..6}` classes if you need to
style non-headline markup as headlines.

```html
<h1 class="h1">h1: The quick brown fox jumps over the lazy dog.</h1>
<h2 class="h2">h2: Pack my box with five dozen liquor jugs.</h2>
<h3 class="h3">h3: Jackdaws love my big sphinx of quartz.</h3>
<h4 class="h4">h4: Five quacking Zephyrs jolt my wax bed.</h4>
<h5 class="h5">h5: The five boxing wizards jump quickly.</h5>
<h6 class="h6">h6: Sphinx of black quartz judge my vow.</h6>
```

*/
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-family: $base-headline-family;
    font-weight: normal;
    margin-bottom: 0;
    margin-top: 0;
    text-rendering: $base-headline-rendering;
}

h1, .h1 {
    font-size: 2.25rem;
    line-height: vertical-base(2.5);
}

h2, .h2 {
    font-size: 2rem;
    line-height: vertical-base(2);
}

h3, .h3 {
    font-size: 1.5rem;
    line-height: vertical-base(1.5);
}

h4, .h4 {
    font-size: 1.25rem;
    line-height: vertical-base(1.25);
}

h5, .h5 {
    font-size: 1.125rem;
    line-height: vertical-base(1);
}