docs/src/styles/typography.css at main · Mergifyio/docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
/*
  Typography utilities. Apply by class on custom-built pages.
  MDX-rendered headings inherit the same properties via #main-content
  selectors in index.css (kept in sync — see DESIGN.md).
*/

.heading-hero {
  font-size: clamp(3rem, 5.5vw, 3.75rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.heading-page {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.heading-section {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.heading-subsection {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.heading-detail {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.4;
}

.heading-minor {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}

.text-subtitle {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  text-wrap: balance;
}

.text-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}