Skip to content

Commit fe06a37

Browse files
committedMay 23, 2024
fix: improve the docs typography
Tweaks our markdown typography to make it look better and be more readable. The main issue was around the uneven spacing between headers.
1 parent b584257 commit fe06a37

File tree

3 files changed

+29
-12
lines changed

3 files changed

+29
-12
lines changed
 

‎material.angular.io/src/app/shared/example-viewer/example-viewer.scss

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55

66
.docs-example-viewer-wrapper {
77
border-radius: 12px;
8-
margin: 16px 0;
98

109
h3 {
1110
margin-top: 10px;

‎material.angular.io/src/styles/_markdown.scss

+28-10
Original file line numberDiff line numberDiff line change
@@ -5,40 +5,62 @@
55

66
h1 {
77
display: inline-block;
8-
font-size: 34px;
8+
font-size: 32px;
99
font-weight: 400;
10+
margin: 32px 0 16px;
1011
}
1112

1213
h2 {
13-
font-size: 24px;
14+
font-size: 28px;
15+
margin: 32px 0 16px;
16+
font-weight: 400;
1417
}
1518

1619
h3 {
17-
font-size: 20px;
20+
font-size: 24px;
1821
font-weight: 500;
22+
margin: 32px 0 16px;
23+
font-weight: 400;
1924
}
2025

21-
h2, h4 {
22-
margin-top: 40px;
26+
h4 {
27+
font-size: 22px;
28+
margin: 24px 0 12px;
29+
font-weight: 400;
2330
}
2431

2532
h5 {
2633
font-size: 18px;
34+
margin: 20px 0 10px;
35+
font-weight: 400;
2736
}
2837

2938
p, ul, ol {
3039
font-size: 16px;
3140
line-height: 28px;
3241
}
3342

43+
p {
44+
margin: 0 0 1em;
45+
46+
// In case the docs generator produces an empty paragraph.
47+
&:empty {
48+
display: none;
49+
}
50+
}
51+
3452
a {
3553
text-decoration: none;
3654
}
3755

56+
strong {
57+
font-weight: 700;
58+
}
59+
3860
pre {
3961
border-radius: 5px;
4062
display: block;
41-
margin: 16px auto;
63+
margin: 24px auto;
4264
overflow-x: auto;
4365
padding: 20px;
4466
white-space: pre-wrap;
@@ -55,10 +77,6 @@
5577
}
5678

5779
.docs-header-link {
58-
// padding to prevent the site header from headbutting the headers when navigating using fragment links
59-
padding-top: 20px;
60-
margin-top: -20px;
61-
6280
header-link {
6381
// deduct -30px so the anchor icon will be positioned outside the content
6482
margin-left: -30px;

‎material.angular.io/tools/audit-docs.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const MIN_SCORES_PER_PAGE = [
5454
minScores: {
5555
pwa: 75,
5656
performance: 25, // Intentionally low because Ligthouse is flaky.
57-
seo: 100,
57+
seo: 90,
5858
'best-practices': 90,
5959
accessibility: 92,
6060
},

0 commit comments

Comments
 (0)
Please sign in to comment.