Increase font weight of Noto Serif SC, adjust the style of snackbar

Author: apqx

npm/src/component/dialog/SearchDialog.scss

@@ -16,6 +16,10 @@
     color: var(--list-secondary-ink);
     line-break: normal;
     font-weight: var(--font-weight-light);
+
+    strong, b {
+        font-weight: var(--font-weight-normal);
+    }
 }
 
 .mdc-text-field {

npm/src/component/font/font.scss

@@ -11,10 +11,10 @@
 @use "MaterialSymbols";
 
 // @font-face {
-//     font-family: "Demo";
-//     src: url("https://apqx-host.oss-cn-hangzhou.aliyuncs.com/blog/fonts/JetBrainsMono/v2.304/JetBrainsMono%5Bwght%5D.ttf") format('truetype');
+//     font-family: "Iosevka";
+//     src: url("https://apqx-host.oss-cn-hangzhou.aliyuncs.com/blog/fonts/Iosevka/v33.2.9/Iosevka-Extended.woff2") format('woff2');
 //     font-style: normal;
-//     font-weight: 200 900;
+//     font-weight: 400;
 //     font-display: swap;
 // }
 

npm/src/component/react/IndexList.scss

@@ -5,8 +5,8 @@
 // @use "../animation/HeightAnimationContainer";
 
 body {
-    --index-card-padding-vertical: 1.3rem;
-    --index-card-padding-horizontal: 2.7rem;
+    --index-card-padding-vertical: 1.25rem;
+    --index-card-padding-horizontal: 2.5rem;
 }
 
 .mdc-card.index-top-card {
@@ -68,7 +68,7 @@ body {
 /* 索引署名 */
 .index-author {
     color: var(--mdc-theme-text-secondary-on-background);
-    font-size: calc(var(--mdc-typography-body1-font-size) - 0.1rem);
+    font-size: calc(var(--mdc-typography-body1-font-size) - 0.2rem);
     line-height: var(--mdc-typography-body1-line-height);
     line-height: 1.5rem;
     text-align: right;
@@ -79,7 +79,7 @@ body {
 /* 索引日期 */
 .index-date {
     color: var(--mdc-theme-text-secondary-on-background);
-    font-size: calc(var(--mdc-typography-body1-font-size) - 0.1rem);
+    font-size: calc(var(--mdc-typography-body1-font-size) - 0.2rem);
     line-height: var(--mdc-typography-body1-line-height);
     line-height: 1.5rem;
     text-align: right;

npm/src/component/react/Snackbar.scss

@@ -15,13 +15,13 @@
     padding-right: 0;
     min-width: 0;
 
-    background-color: var(--mdc-theme-secondary);
+    background-color: var(--snackbar-bg);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
 }
 
 .mdc-snackbar__label {
-    color: var(--mdc-theme-on-surface);
+    color: var(--snackbar-ink);
     padding-left: 1rem;
     padding-right: 1rem;
 }

npm/src/component/react/Snackbar.tsx

@@ -17,7 +17,7 @@ export class Snackbar extends React.Component<props, any> {
     componentDidMount(): void {
         const rootE = this.containerRef.current as Element
         this.snackbar = new MDCSnackbar(rootE)
-        // 自动关闭时间
+        // 自动关闭时间，-1 表示不自动关闭
         // this.snackbar.timeoutMs = -1
         this.snackbar.open()
     }

npm/src/component/text.scss

@@ -71,7 +71,6 @@ p {
 
 code {
     @include basicText();
-    // font-family: base.$code-block-font;
     margin: 0;
 }
 

npm/src/component/theme.scss

@@ -66,6 +66,9 @@
         --surface-block-border: #{map.get(base.$surface-block-border-dashed, "light")};
         --surface-block-bg: #{map.get(base.$surface-block-bg, "light")};
         --surface-block-ink-strong: #{map.get(base.$surface-block-ink-strong, "light")};
+
+        --snackbar-bg: #{map.get(base.$snackbar-bg, "light")};
+        --snackbar-ink: #{map.get(base.$snackbar-ink, "light")};
 }
 
 @mixin dark {
@@ -118,6 +121,9 @@
         --surface-block-border: #{map.get(base.$surface-block-border-dashed, "dark")};
         --surface-block-bg: #{map.get(base.$surface-block-bg, "dark")};
         --surface-block-ink-strong: #{map.get(base.$surface-block-ink-strong, "dark")};
+
+        --snackbar-bg: #{map.get(base.$snackbar-bg, "dark")};
+        --snackbar-ink: #{map.get(base.$snackbar-ink, "dark")};
 }
 
 body {

npm/src/page/index.scss

@@ -1,5 +1,5 @@
 @use "../style/global" as base;
-// 如果放到组件中加载时可能出现样式闪烁
+// 如果放到组件中加载时可能出现样式闪烁，放到这里有时候也会出现，因为这里也是根据页面类型动态加载的
 @use "../component/react/IndexList";
 @use "../component/react/GridIndexList";
 

npm/src/page/post.scss

@@ -34,6 +34,7 @@
     border-radius: var(--post-inner-shape-round);
     background: var(--surface-block-bg);
     padding: 1rem;
+    font-weight: var(--font-weight-light);
 }
 
 .line-divider {

npm/src/style/_variables.scss

@@ -23,12 +23,12 @@ $ripple-gap-percent: 25%;
 
 // 思源黑体和思源宋体都是可变字体，但与其配合的西文字体不一定是可变的，应调整自重与之匹配
 $font-weight-light-noto-sans: 320;
-$font-weight-normal-noto-sans: 360;
-$font-weight-medium-noto-sans: 400;
+$font-weight-normal-noto-sans: 380;
+$font-weight-medium-noto-sans: 480;
 
-$font-weight-light-noto-serif: 300;
-$font-weight-normal-noto-serif: 430;
-$font-weight-medium-noto-serif: 560;
+$font-weight-light-noto-serif: 350;
+$font-weight-normal-noto-serif: 450;
+$font-weight-medium-noto-serif: 550;
 
 $font-weight-extra-light-default: 200;
 $font-weight-light-default: 300;