Skip to content

Commit 98c3855

Browse files
authored
Cleanup font configuration and fix some inconsistencies (#5028)
- Avoid manually specifying fonts when we have a SCSS variable - Avoid duplicate specifying of font configuration variables - Use Google Sans consistently in footer - Use `$site-font-family-base` over `$site-font-family-roboto` to allow for easier future changes away from Roboto
1 parent eacf200 commit 98c3855

File tree

8 files changed

+21
-18
lines changed

8 files changed

+21
-18
lines changed

src/_sass/_dash.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ $dash-max-width: 1330px;
2222
}
2323

2424
.dash-header-callout {
25-
font-family: "Google Sans", "Roboto", sans-serif;
25+
font-family: $site-font-family-alt;
2626
background-color: $dash-callout;
2727
text-align: center;
2828
padding: 64px 0 64px 0 !important;
@@ -108,7 +108,7 @@ $dash-max-width: 1330px;
108108
}
109109

110110
.dash-dart-features {
111-
font-family: "Google Sans", "Roboto", sans-serif;
111+
font-family: $site-font-family-alt;
112112
padding-bottom: 80px !important;
113113
background-color: $dark-darker-black;
114114

@@ -207,7 +207,7 @@ $dash-max-width: 1330px;
207207
}
208208

209209
.content-desc {
210-
font-family: Roboto, Arial, sans-serif;
210+
font-family: $site-font-family-base;
211211
font-weight: lighter;
212212
font-size: 17px;
213213
line-height: 24px;
@@ -372,7 +372,7 @@ $dash-max-width: 1330px;
372372
}
373373

374374
.dart-dash-details {
375-
font-family: "Google Sans", "Roboto", sans-serif;
375+
font-family: $site-font-family-alt;
376376

377377
a {
378378
text-decoration: underline;

src/_sass/components/_banner.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
z-index: 1000;
99

1010
&__text {
11-
font-family: $site-font-family-roboto;
11+
font-family: $site-font-family-base;
1212
font-size: 16px;
1313
font-weight: 300;
1414

src/_sass/components/_sidebar.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@
136136
}
137137

138138
.nav-link {
139-
font-family: $site-font-family-roboto;
139+
font-family: $site-font-family-base;
140140
font-weight: 400;
141141
color: $site-color-body;
142142
font-size: $font-size-small;

src/_sass/core/_base.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
@use '../core/bootstrap';
44

55
body {
6-
font-family: $font-family-base;
6+
font-family: $site-font-family-base;
77
font-size: $font-size-base;
88
font-weight: 400;
99
color: $site-color-body;
@@ -56,7 +56,7 @@ dt {
5656
a, button {
5757
text-decoration: none;
5858
color: $brand-primary;
59-
font-family: $site-font-family-roboto;
59+
font-family: $site-font-family-base;
6060
font-weight: 400;
6161

6262
&:visited {

src/_sass/core/_bootstrap.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use '../core/variables' as *;
2+
@use '../core/colors';
23

34
// Import from NPM library directly
45
@forward '../../../node_modules/bootstrap-scss/bootstrap' with (
@@ -82,7 +83,7 @@
8283
$nav-tabs-link-active-color: $site-color-body,
8384
$nav-tabs-link-active-border-color: transparent transparent $site-color-primary,
8485

85-
$tooltip-bg: #343a40, // $gray-800; // So we can see against black terminal bg
86+
$tooltip-bg: colors.$grey-800,
8687

8788
$enable-shadows: true,
8889

src/_sass/core/_colors.scss

+1
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ $cyan-A700: #00B8D4;
6464

6565
$grey-400: #BDBDBD;
6666
$grey-500: #9E9E9E;
67+
$grey-800: #343a40;
6768
$grey-900: #212121;
6869

6970
$green-50: #E8F5E9;

src/_sass/core/_variables.scss

+7-8
Original file line numberDiff line numberDiff line change
@@ -62,13 +62,6 @@ $site-font-size-header: 16px;
6262
$site-color-primary: $brand-primary;
6363
$site-color-sidebar-active: #1389FD;
6464

65-
// Typography
66-
$font-size-base: 1.0rem; // 16px
67-
$font-size-base-weight: 400;
68-
$font-family-base: Roboto, sans-serif;
69-
$font-family-monospace: "Google Sans Mono", "Roboto Mono", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
70-
$google-font-family: "Product Sans", $font-family-base;
71-
7265
// Sidenav, toc, and footer
7366
$font-size-small: 14px;
7467

@@ -84,9 +77,15 @@ $site-font-family-gsans-display: 'Google Sans Display', 'Google Sans', 'Roboto',
8477
$site-font-family-base: $site-font-family-roboto;
8578
$site-font-family-alt: $site-font-family-gsans;
8679
$site-font-family-icon: 'Material Icons';
87-
$site-font-family-monospace: 'Google Sans Mono', 'Roboto Mono', monospace;
80+
$site-font-family-monospace: 'Google Sans Mono', 'Roboto Mono', Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
8881
$site-font-icon: 24px/1 $site-font-family-icon;
8982

83+
// Typography
84+
$font-size-base: 1.0rem; // 16px
85+
$font-size-base-weight: 400;
86+
$font-family-base: $site-font-family-base;
87+
$font-family-monospace: $site-font-family-monospace;
88+
9089
// Layout
9190
$site-header-height: 50px;
9291
$site-header-with-banner-height: 98px; // 50 + 48

src/_sass/site.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ i.fa-external-link-alt {
100100

101101
color: $site-color-light-grey;
102102
font-weight: 400;
103-
font-family: $site-font-family-gsans;
103+
font-family: $site-font-family-alt;
104104
font-size: $font-size-small;
105105

106106
.footer-section {
@@ -173,6 +173,7 @@ i.fa-external-link-alt {
173173

174174
a {
175175
color: $site-color-light-grey;
176+
font-family: $site-font-family-alt;
176177

177178
&:hover, &:focus, &:active {
178179
color: $site-color-white;
@@ -220,6 +221,7 @@ i.fa-external-link-alt {
220221
padding: 0 6px;
221222
font-size: $site-font-size-header;
222223
font-weight: 400;
224+
font-family: $site-font-family-alt;
223225

224226
&:hover, &:active {
225227
color: $site-color-card-link;

0 commit comments

Comments
 (0)