refactor(scss): add css variables for font families
This commit is contained in:
parent
da3589d068
commit
2ec4cd3f69
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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) {
|
||||
|
Loading…
Reference in New Issue
Block a user