<commit_before>/*doc
---
title: Typesetting
name: typesetting
category: Core
---
TK - notes about UI text vs. body text

```html_example
<h1 class="text--display">Heading 1 Display</h1>
<h1>Heading 1 (white by default for use in navbar)</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Body text</p>
<p class="text--heading">Fake heading</p>
<p class="text--hint">Hint text</p>
<p class="text--small">Small text</p>
<p class="text--caption">Caption text</p>
```
*/


/*
  Further Reading:
  http:/csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/
  http://alistapart.com/article/more-meaningful-typography
*/

// H1
// Main header, in the header bar
h1 {
	color: $C_textPrimaryInverted;
	font-size: $font-size;
	font-weight: 700;
	line-height: 1.25;
}


// H2
// Used to divide sections
h2 {
	color: $C_accent;
	font-size: $font-size;
	font-weight: 700;
	line-height: 1.5;
	text-transform: uppercase;
}


/*doc
---
title: Heading class
---
Apply a `.text--heading` class to any element
to give it the appearance of an h3-h6 element.

```html_example
<p class="text--heading">It's usually better to use the real heading tag</p>
```
*/
// H3 - H6
// We're sticking to limited visual hierarchy
h3, h4, h5, h6,
.text--heading {
// ----------------------------------------- //
	color: $C_textPrimary;
	font-size: $font-size;
	font-weight: 700;
	line-height: 1.5;
	.inverted &{
		color: $C_textPrimaryInverted;
	}
}


/*doc
---
title: Display text
name: displayText
parent: typesetting
---
Display text for header hero elements.

```html_example
<h1 class="text--display">The hero gotham deserves</h1>
```
*/
.text--display {
	color: $C_textPrimary;
	font-size: $font-size-display1;
	font-weight: normal;
	line-height: 1.25;
	.inverted &{
		color: $C_textPrimaryInverted;
	}
}

@include atMediaDown(small) {
	.text--display {
		font-size: $font-size-display2;
	}
}<commit_msg>text--display<commit_after>/*doc
---
title: Typesetting
name: typesetting
category: Core
---
TK - notes about UI text vs. body text

```html_example
<h1 class="text--display">Heading 1 Display</h1>
<h1>Heading 1 (white by default for use in navbar)</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Body text</p>
<p class="text--heading">Fake heading</p>
<p class="text--hint">Hint text</p>
<p class="text--small">Small text</p>
<p class="text--caption">Caption text</p>
```
*/


/*
  Further Reading:
  http:/csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/
  http://alistapart.com/article/more-meaningful-typography
*/

// H1
// Main header, in the header bar
h1 {
	color: $C_textPrimaryInverted;
	font-size: $font-size;
	font-weight: 700;
	line-height: 1.25;
}


// H2
// Used to divide sections
h2 {
	color: $C_accent;
	font-size: $font-size;
	font-weight: 700;
	line-height: 1.5;
	text-transform: uppercase;
}


/*doc
---
title: Heading class
---
Apply a `.text--heading` class to any element
to give it the appearance of an h3-h6 element.

```html_example
<p class="text--heading">It's usually better to use the real heading tag</p>
```
*/
// H3 - H6
// We're sticking to limited visual hierarchy
h3, h4, h5, h6,
.text--heading {
// ----------------------------------------- //
	color: $C_textPrimary;
	font-size: $font-size;
	font-weight: 700;
	line-height: 1.5;
	.inverted &{
		color: $C_textPrimaryInverted;
	}
}


/*doc
---
title: Display text
name: displayText
parent: typesetting
---
Display text for header hero elements.

```html_example
<h1 class="text--display">The hero gotham deserves</h1>
```
*/
.text--display {
	color: $C_textPrimary;
	font-size: $font-size-display1;
	font-weight: normal;
	line-height: 1.25;
	.inverted &{
		color: $C_textPrimaryInverted;
	}
}

@include atMediaUp(medium) {
	.text--display {
		font-size: $font-size-display2;
	}
}
{'fraction_non_alphanumeric': 0.19303225806451613, 'fraction_numerical': 0.032, 'mean_word_length': 3.359955005624297, 'pattern_counts': {'":': 0, '<': 59, '<?xml version=': 0, '>': 59, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7024714', 'n_tokens_mistral': 1593, 'n_tokens_neox': 1493, 'n_words': 362}