refactor(scss): add css variables for font families

This commit is contained in:
Jimmy Cai 2020-08-24 11:52:12 +02:00
parent da3589d068
commit 2ec4cd3f69
3 changed files with 15 additions and 5 deletions

View file

@ -10,7 +10,7 @@ html {
body {
background: var(--body-background);
margin: 0;
font-family: $base-font-family;
font-family: var(--base-font-family);
font-size: 1.6rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

View file

@ -204,8 +204,7 @@
}
.article-content {
font-family: -apple-system, BlinkMacSystemFont, "noto-sans", "Segoe UI", "Droid Sans", "Helvetica Neue",
"PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif;
font-family: var(--article-font-family);
p {
margin: 1.5em 0;
@ -243,7 +242,7 @@
padding: 1px 2px;
border: 1px solid #eee;
border-radius: 3px;
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
font-family: var(--code-font-family);
word-wrap: break-word;
}
@ -272,7 +271,7 @@
display: block;
background-color: #fafafa;
color: #999;
font-family: Consolas, monospace;
font-family: var(--code-font-family);
line-height: 1.428571429;
word-break: break-all;
padding: 20px;

View file

@ -3,6 +3,12 @@ $fallback-font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica,
"Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp",
sans-serif;
$base-font-family: "Lato", $fallback-font-family;
$article-font-family: -apple-system, BlinkMacSystemFont, "noto-sans", "Segoe UI", "Droid Sans", "Helvetica Neue",
"PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif;
$code-font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
$container-width: 1200px;
$container-padding: 15px;
@ -55,6 +61,11 @@ $tag-border-radius: 4px;
--body-text-color: #{$body-text-color};
--tag-border-radius: #{$tag-border-radius};
--base-font-family: #{$base-font-family};
--fallback-font-family: #{$fallback-font-family};
--article-font-family: #{$article-font-family};
--code-font-family: #{$code-font-family};
}
@media (prefers-color-scheme: dark) {