chore: better English font in Chinese context

the code is also linted and styled automatically by Zed


Former-commit-id: 48e1d09d155450658c78a6a5a8bb3e518c4835ef

2 files changed, 60 insertions, 44 deletions

diff --git a/assets/css/components/_variables.scss b/assets/css/components/_variables.scss
index 98168e5c..371b8179 100644
--- a/assets/css/components/_variables.scss
+++ b/assets/css/components/_variables.scss
@@ -1,29 +1,29 @@
-
-
 :root {
-  /* colors */
-  --background-color: #F5F5F7;
-  --block-background-color: rgb(var(--block-background-color-rgb));
-  --block-background-color-rgb: 233, 232, 237;
-  --border-color: #d0d7de;
-  --text-color: #1D1D1F;
-  --secondary-text-color: #6E6E73;
-  --link-color: #277BD9;
-  --bright-background-color: #FAFAFA;
-
-  /* fonts */
-  --mono-font-family: "Courier New", Courier, "Menlo", "Monaco", Consolas, "Liberation Mono", "Lucida Console", monospace;
-  --serif-font-family:  "Noto Serif SC", serif;
-  --content-font-size: 20px;
-
-  --page-width: 700px;
-
-  /* pagefind custom css */
-  --pagefind-ui-primary: var(--text-color);
-  --pagefind-ui-text: var(--text-color);
-  --pagefind-ui-background: var(--background-color);
-  --pagefind-ui-border: var(--border-color);
-  --pagefind-ui-tag: var(--border-color);
+    /* colors */
+    --background-color: #f5f5f7;
+    --block-background-color: rgb(var(--block-background-color-rgb));
+    --block-background-color-rgb: 233, 232, 237;
+    --border-color: #d0d7de;
+    --text-color: #1d1d1f;
+    --secondary-text-color: #6e6e73;
+    --link-color: #277bd9;
+    --bright-background-color: #fafafa;
+
+    /* fonts */
+    --mono-font-family:
+        "Courier New", Courier, "Menlo", "Monaco", Consolas, "Liberation Mono",
+        "Lucida Console", monospace;
+    --serif-font-family: "Noto Serif", "Noto Serif SC", serif;
+    --content-font-size: 20px;
+
+    --page-width: 700px;
+
+    /* pagefind custom css */
+    --pagefind-ui-primary: var(--text-color);
+    --pagefind-ui-text: var(--text-color);
+    --pagefind-ui-background: var(--background-color);
+    --pagefind-ui-border: var(--border-color);
+    --pagefind-ui-tag: var(--border-color);
 }
 
 html[lang="en-US"] {
@@ -31,27 +31,27 @@ html[lang="en-US"] {
 }
 
 @mixin variablesInDarkMode {
-    --background-color: #1D2021;
+    --background-color: #1d2021;
     --block-background-color: rgb(var(--block-background-color-rgb));
     --block-background-color-rgb: 24, 26, 27;
-    --border-color: rgba(255,255,255,0.2);
-    --text-color: #D2CEC9;
-    --secondary-text-color: #A1998D;
-    --link-color: #277BD9;
+    --border-color: rgba(255, 255, 255, 0.2);
+    --text-color: #d2cec9;
+    --secondary-text-color: #a1998d;
+    --link-color: #277bd9;
     --bright-background-color: #666;
 }
 
 .dark {
-  @include variablesInDarkMode;
+    @include variablesInDarkMode;
 }
 
 @media (prefers-color-scheme: dark) {
-  :root {
-    @include variablesInDarkMode;
-  }
+    :root {
+        @include variablesInDarkMode;
+    }
 }
 
 @mixin bordered {
-    border-radius: .5rem;
+    border-radius: 0.5rem;
     border: 1px solid var(--border-color);
 }
diff --git a/layouts/partials/head/css.html b/layouts/partials/head/css.html
index bdb2c351..def65db6 100644
--- a/layouts/partials/head/css.html
+++ b/layouts/partials/head/css.html
@@ -1,18 +1,34 @@
 <!-- Google Fonts -->
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@200..900&display=swap" rel="stylesheet">
-<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+    href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap"
+    rel="stylesheet"
+/>
+<link
+    href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@200..900&display=swap"
+    rel="stylesheet"
+/>
+<link
+    href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap"
+    rel="stylesheet"
+/>
 
 <!-- Extra -->
 {{ range .Site.Params.extraCSSFiles -}}
-<link rel="stylesheet" href="{{ $.Site.Params.staticPrefix }}{{ . | relURL }}">
+<link
+    rel="stylesheet"
+    href="{{ $.Site.Params.staticPrefix }}{{ . | relURL }}"
+/>
 {{- end }}
 
 <!-- theme css -->
 {{ with resources.Get "css/flexbox.css" | minify }}
-<style>{{ .Content | safeCSS }}</style>
-{{ end }}
-{{ with resources.Get "css/index.scss" | css.Sass | minify }}
-<style>{{ .Content | safeCSS }}</style>
+<style>
+    {{ .Content | safeCSS }}
+</style>
+{{ end }} {{ with resources.Get "css/index.scss" | css.Sass | minify }}
+<style>
+    {{ .Content | safeCSS }}
+</style>
 {{ end }}