_typography.scss

/*
---
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>

```yaml
100: Thin
200: Extra Light (Ultra Light)
300: Light
400: Normal
500: Medium
600: Semi Bold (Demi Bold)
700: Bold
800: Extra Bold (Ultra Bold)
900: Black (Heavy)
```

[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">The quick brown fox jumps over the lazy dog.</h1>
<h2 class="h2">Pack my box with five dozen liquor jugs.</h2>
<h3 class="h3">Jackdaws love my big sphinx of quartz.</h3>
<h4 class="h4">Five quacking Zephyrs jolt my wax bed.</h4>
<h5 class="h5">The five boxing wizards jump quickly.</h5>
```
*/
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);
}

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

Use `p`-Tags in order to create a paragraph.

```html
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio dolor, odio velit dolores hic quia, repellendus culpa itaque tenetur totam, nesciunt aliquam quas ut possimus! Nemo fuga distinctio qui. Magni!</p>
```
*/