Skip to content

Commit a99e026

Browse files
josevalimjosevalim
committed
Use default OS font for content whenever possible
This makes it loader faster and gives a more unified experience.
1 parent 4be053c commit a99e026

28 files changed

+113
-121
lines changed

‎assets/css/_html.css

Lines changed: 36 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,42 @@
1-
@import '@fontsource/lato/300.css';
2-
@import '@fontsource/lato/400.css';
3-
@import '@fontsource/lato/700.css';
4-
@import '@fontsource/merriweather/300.css';
5-
@import '@fontsource/merriweather/300-italic.css';
6-
@import '@fontsource/inconsolata/400.css';
7-
@import '@fontsource/inconsolata/700.css';
1+
@import "@fontsource/lato/300.css";
2+
@import "@fontsource/lato/400.css";
3+
@import "@fontsource/lato/700.css";
4+
@import "@fontsource/inconsolata/400.css";
5+
@import "@fontsource/inconsolata/700.css";
86

9-
@import 'custom-props/common.css';
10-
@import 'custom-props/theme-light.css';
11-
@import 'custom-props/theme-dark.css';
7+
@import "custom-props/common.css";
8+
@import "custom-props/theme-light.css";
9+
@import "custom-props/theme-dark.css";
1210

13-
@import 'normalize.css/normalize.css';
11+
@import "normalize.css/normalize.css";
1412

15-
@import 'icons.css';
16-
@import 'layout.css';
17-
@import 'sidebar.css';
18-
@import 'search-bar.css';
19-
@import 'focus.css';
20-
@import 'content/general.css';
21-
@import 'content/admonition.css';
22-
@import 'content/summary.css';
23-
@import 'content/code.css';
24-
@import 'content/functions.css';
25-
@import 'content/footer.css';
26-
@import 'content/bottom-actions.css';
27-
@import 'content/cheatsheet.css';
28-
@import 'search.css';
29-
@import 'modal.css';
30-
@import 'keyboard-shortcuts.css';
31-
@import 'quick-switch.css';
32-
@import 'autocomplete.css';
33-
@import 'tooltips.css';
34-
@import 'copy-button.css';
35-
@import 'settings.css';
36-
@import 'toast.css';
37-
@import 'screen-reader.css';
38-
@import 'print.css';
39-
@import 'print-cheatsheet.css';
40-
@import 'makeup.css';
41-
@import 'tabset.css';
13+
@import "icons.css";
14+
@import "layout.css";
15+
@import "sidebar.css";
16+
@import "search-bar.css";
17+
@import "focus.css";
18+
@import "content/general.css";
19+
@import "content/admonition.css";
20+
@import "content/summary.css";
21+
@import "content/code.css";
22+
@import "content/functions.css";
23+
@import "content/footer.css";
24+
@import "content/bottom-actions.css";
25+
@import "content/cheatsheet.css";
26+
@import "search.css";
27+
@import "modal.css";
28+
@import "keyboard-shortcuts.css";
29+
@import "quick-switch.css";
30+
@import "autocomplete.css";
31+
@import "tooltips.css";
32+
@import "copy-button.css";
33+
@import "settings.css";
34+
@import "toast.css";
35+
@import "screen-reader.css";
36+
@import "print.css";
37+
@import "print-cheatsheet.css";
38+
@import "makeup.css";
39+
@import "tabset.css";
4240

4341
body:not(.dark) .content-inner img[src*="#gh-dark-mode-only"],
4442
body.dark .content-inner img[src*="#gh-light-mode-only"] {

‎assets/css/content/cheatsheet.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -198,6 +198,7 @@
198198
vertical-align: middle;
199199
background-color: var(--codeBackground);
200200
border-bottom: 1px solid var(--codeBorder);
201+
margin-top: 0;
201202
}
202203

203204
.page-cheatmd .content-inner .h2 :is(ul, ol) + pre code {

‎assets/css/content/general.css

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.content-inner {
2-
font-family: var(--serifFontFamily);
2+
font-family: var(--defaultFontFamily);
33
font-size: 1em;
44
line-height: 1.6875em;
55
position: relative;
@@ -17,15 +17,15 @@
1717

1818
.content-inner h1 {
1919
font-size: 2em;
20-
margin: .8em 0 .5em;
20+
margin: 0.8em 0 0.5em;
2121
}
2222

2323
.content-inner h1.signature {
2424
margin: 0;
2525
}
2626

2727
.content-inner h1.section-heading {
28-
margin: 1.5em 0 .5em;
28+
margin: 1.5em 0 0.5em;
2929
}
3030

3131
.content-inner h1 small {
@@ -39,16 +39,20 @@
3939

4040
.content-inner h2 {
4141
font-size: 1.6em;
42-
margin: 1em 0 .5em;
42+
margin: 1em 0 0.5em;
4343
font-weight: 700;
4444
}
4545

4646
.content-inner h3 {
4747
font-size: 1.375em;
48-
margin: 1em 0 .5em;
48+
margin: 1em 0 0.5em;
4949
font-weight: 700;
5050
}
5151

52+
.content-inner li + li {
53+
margin-top: 0.25em;
54+
}
55+
5256
.content-inner :is(a, .a-main) {
5357
color: var(--links);
5458
text-decoration: underline;
@@ -64,7 +68,7 @@
6468
color: var(--iconAction);
6569
text-decoration: none;
6670
border: none;
67-
transition: color .3s ease-in-out;
71+
transition: color 0.3s ease-in-out;
6872
background-color: transparent;
6973
cursor: pointer;
7074
}
@@ -117,7 +121,7 @@
117121
font-family: var(--sansFontFamily);
118122
text-transform: uppercase;
119123
font-weight: 700;
120-
padding-bottom: .5em;
124+
padding-bottom: 0.5em;
121125
}
122126

123127
.content-inner thead tr {
@@ -129,7 +133,7 @@
129133
}
130134

131135
.content-inner tbody tr:last-child {
132-
border-bottom: none
136+
border-bottom: none;
133137
}
134138

135139
.content-inner tr {
@@ -162,7 +166,7 @@
162166

163167
.content-inner .section-heading i {
164168
font-size: var(--icon-size);
165-
margin-top: .1em;
169+
margin-top: 0.1em;
166170
margin-left: calc(-1 * (var(--icon-size) + var(--icon-spacing)));
167171
padding-right: var(--icon-spacing); /* Avoids gap in hover area */
168172
opacity: 0;
@@ -192,7 +196,7 @@
192196

193197
.content-inner .app-vsn {
194198
display: none !important;
195-
font-size: .6em;
199+
font-size: 0.6em;
196200
line-height: 1.5em;
197201
}
198202

‎assets/css/content/summary.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,10 @@
2424
}
2525

2626
.content-inner .summary .summary-row .summary-synopsis {
27-
font-family: var(--serifFontFamily);
27+
font-family: var(--defaultFontFamily);
2828
font-style: italic;
2929
padding: 0 1.2em;
30-
margin: 0 0 .5em;
30+
margin: 0 0 0.5em;
3131
}
3232

3333
.content-inner .summary .summary-row .summary-synopsis p {

‎assets/css/copy-button.css

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ pre {
22
position: relative;
33
}
44

5-
pre:hover .copy-button, pre .copy-button:focus {
5+
pre:hover .copy-button,
6+
pre .copy-button:focus {
67
opacity: 1;
78
}
89

@@ -17,18 +18,19 @@ pre:hover .copy-button, pre .copy-button:focus {
1718
border: none;
1819
cursor: pointer;
1920
transition: all 150ms;
20-
font-family: var(--serifFontFamily);
21+
font-family: var(--defaultFontFamily);
2122
font-size: 14px;
2223
line-height: 24px;
2324
color: currentColor;
2425
}
2526

2627
.copy-button svg {
27-
opacity: .5;
28+
opacity: 0.5;
2829
transition: all 150ms;
2930
}
3031

31-
pre .copy-button:hover svg, pre .copy-button:focus-visible svg {
32+
pre .copy-button:hover svg,
33+
pre .copy-button:focus-visible svg {
3234
opacity: 1;
3335
}
3436

‎assets/css/custom-props/common.css

Lines changed: 40 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -6,51 +6,52 @@
66
--navTabBorderWidth: 4px;
77

88
/* Font Families */
9-
--serifFontFamily: 'Merriweather', 'Book Antiqua', Georgia, 'Century Schoolbook', serif;
10-
--sansFontFamily: 'Lato', sans-serif;
11-
--monoFontFamily: 'Inconsolata', Menlo, Courier, monospace;
9+
--defaultFontFamily: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif,
10+
"Apple Color Emoji", "Segoe UI Emoji";
11+
--sansFontFamily: "Lato", sans-serif;
12+
--monoFontFamily: "Inconsolata", Menlo, Courier, monospace;
1213

1314
/* Typography */
1415
--baseFontSize: 18px;
1516
--baseLineHeight: 1.5em;
1617

1718
/* Colours */
18-
--gray25: hsl(207, 43%, 98% );
19-
--gray50: hsl(207, 43%, 96% );
20-
--gray100: hsl(212, 33%, 91% );
21-
--gray200: hsl(210, 29%, 88% );
22-
--gray300: hsl(210, 26%, 84% );
23-
--gray400: hsl(210, 21%, 64% );
24-
--gray450: hsl(210, 21%, 49% );
25-
--gray500: hsl(210, 21%, 34% );
26-
--gray600: hsl(210, 27%, 26% );
27-
--gray700: hsl(212, 35%, 17% );
28-
--gray750: hsl(214, 46%, 14% );
29-
--gray800: hsl(216, 52%, 11% );
30-
--gray800-opacity-0: hsla(216, 52%, 11%, 0%);
31-
--gray850: hsl(216, 63%, 8% );
32-
--gray900: hsl(218, 73%, 4% );
33-
--gray900-opacity-50: hsla(218, 73%, 4%, 50%);
34-
--gray900-opacity-0: hsla(218, 73%, 4%, 0%);
35-
--coldGrayFaint: hsl(240, 5%, 97% );
36-
--coldGrayLight: hsl(240, 5%, 88% );
37-
--coldGray-lightened-10: hsl(240, 5%, 56% );
38-
--coldGray: hsl(240, 5%, 46% );
39-
--coldGray-opacity-10: hsla(240, 5%, 46%, 10%);
40-
--coldGrayDark: hsl(240, 5%, 28% );
41-
--coldGrayDim: hsl(240, 5%, 18% );
42-
--yellowLight: hsl( 60, 100%, 81% );
43-
--yellowDark: hsl( 60, 100%, 43%, 62%);
44-
--yellow: hsl( 60, 100%, 43% );
45-
--green-lightened-10: hsl( 90, 100%, 45% );
46-
--green: hsl( 90, 100%, 35% );
47-
--white: hsl( 0, 0%, 100% );
48-
--white-opacity-50: hsla( 0, 0%, 100%, 50%);
49-
--white-opacity-10: hsla( 0, 0%, 100%, 10%);
50-
--white-opacity-0: hsla( 0, 0%, 100%, 0%);
51-
--black: hsl( 0, 0%, 0% );
52-
--black-opacity-10: hsla( 0, 0%, 0%, 10%);
53-
--black-opacity-50: hsla( 0, 0%, 0%, 50%);
19+
--gray25: hsl(207, 43%, 98%);
20+
--gray50: hsl(207, 43%, 96%);
21+
--gray100: hsl(212, 33%, 91%);
22+
--gray200: hsl(210, 29%, 88%);
23+
--gray300: hsl(210, 26%, 84%);
24+
--gray400: hsl(210, 21%, 64%);
25+
--gray450: hsl(210, 21%, 49%);
26+
--gray500: hsl(210, 21%, 34%);
27+
--gray600: hsl(210, 27%, 26%);
28+
--gray700: hsl(212, 35%, 17%);
29+
--gray750: hsl(214, 46%, 14%);
30+
--gray800: hsl(216, 52%, 11%);
31+
--gray800-opacity-0: hsla(216, 52%, 11%, 0%);
32+
--gray850: hsl(216, 63%, 8%);
33+
--gray900: hsl(218, 73%, 4%);
34+
--gray900-opacity-50: hsla(218, 73%, 4%, 50%);
35+
--gray900-opacity-0: hsla(218, 73%, 4%, 0%);
36+
--coldGrayFaint: hsl(240, 5%, 97%);
37+
--coldGrayLight: hsl(240, 5%, 88%);
38+
--coldGray-lightened-10: hsl(240, 5%, 56%);
39+
--coldGray: hsl(240, 5%, 46%);
40+
--coldGray-opacity-10: hsla(240, 5%, 46%, 10%);
41+
--coldGrayDark: hsl(240, 5%, 28%);
42+
--coldGrayDim: hsl(240, 5%, 18%);
43+
--yellowLight: hsl(60, 100%, 81%);
44+
--yellowDark: hsl(60, 100%, 43%, 62%);
45+
--yellow: hsl(60, 100%, 43%);
46+
--green-lightened-10: hsl(90, 100%, 45%);
47+
--green: hsl(90, 100%, 35%);
48+
--white: hsl(0, 0%, 100%);
49+
--white-opacity-50: hsla(0, 0%, 100%, 50%);
50+
--white-opacity-10: hsla(0, 0%, 100%, 10%);
51+
--white-opacity-0: hsla(0, 0%, 100%, 0%);
52+
--black: hsl(0, 0%, 0%);
53+
--black-opacity-10: hsla(0, 0%, 0%, 10%);
54+
--black-opacity-50: hsla(0, 0%, 0%, 50%);
5455
}
5556

5657
@media screen and (max-width: 768px) {

‎assets/package-lock.json

Lines changed: 0 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@
2929
"devDependencies": {
3030
"@fontsource/inconsolata": "^4.5.9",
3131
"@fontsource/lato": "^4.5.10",
32-
"@fontsource/merriweather": "^4.5.14",
3332
"esbuild": "^0.16.16",
3433
"eslint": "^8.31.0",
3534
"eslint-config-standard": "^17.0.0",

0 commit comments

Comments
 (0)