Optimize primary text style

Author: apqx

404.html

@@ -16,7 +16,7 @@
 <section class="container-404">
     <h1 class="title">404</h1>
     <p style="text-align: center;">目标页面不存在或已被迁移到新地址</p>
-    <P style="text-align: center;">博客更新有时会调整URL结构</P>
+    <P style="text-align: center;">博客更新有时会调整 URL 结构</P>
     <P style="text-align: center;">早期链接可能失效</P>
     <picture>
         <source srcset="https://apqx-host.oss-cn-hangzhou.aliyuncs.com/blog/emojis/noto-animated-emoji/think-face/512.webp"

npm/dist/assets/blog-post.css

@@ -61,13 +61,20 @@ input {
 
 .search-result-item-type {
     font-size: calc(var(--mdc-typography-body1-font-size) - 0.2rem);
-    padding: 0.06rem 0.5rem;
-    border-radius: 0.5rem;
+    padding: 0.2rem 0.5rem;
+    border-radius: calc(var(--mdc-typography-body1-font-size) - 0.5rem);
     margin-right: 0.2rem;
+    
     color: var(--list-chip-1-ink);
     background: var(--list-chip-1-bg);
 }
 
+.font-noto-serif-sc {
+    .search-result-item-type {
+        padding: 0.15rem 0.5rem;
+    }
+}
+
 .search-result-item-snippet {
     text-align: justify;
     line-break: anywhere;

npm/dist/assets/blog-scaffold.css

@@ -8,12 +8,11 @@
 .tag-list-item__secondary-container {
     display: flex;
     white-space: nowrap;
+    align-items: center;
 }
 
 .tag-list-item__block-container {
     overflow-x: auto;
-    padding-left: 0.1rem;
-    padding-right: 0.1rem;
 }
 
 // 移动端Chrome的scrollBar一直显示，需要消除，其它浏览器scrollBar都会自动隐藏
@@ -52,7 +51,7 @@
     .tag-list-item__post-type,
     .tag-list-item__post-block1,
     .tag-list-item__post-block2 {
-        padding: 0.18rem 0.5rem;
+        padding: 0.15rem 0.5rem;
     }
 }
 

npm/dist/blog-scaffold.js

@@ -250,9 +250,11 @@ class PostItem extends React.Component<PostItemProps, any> {
                     <span className="mdc-deprecated-list-item__text">
                         <span className="list-item__primary-text one-line">{this.props.data.title}</span>
                         <div className="list-item__secondary-text tag-list-item__secondary-container">
-                            <span>{this.props.data.date}</span>
+                            {/* <span>{this.props.data.date}</span> */}
+                            <span>
+                                <span className="tag-list-item__post-type">{this.props.data.date}｜{this.props.data.type}</span>
+                            </span>
                             <span className="tag-list-item__block-container">
-                                <span className="tag-list-item__post-type">{this.props.data.type}</span>
                                 {this.props.data.block1Array.map(block =>
                                     <span
                                         key={block}

npm/src/component/dialog/SearchDialog.scss

@@ -72,6 +72,7 @@ p {
 code {
     @include basicText();
     font-family: var(--text-code-font-family);
+    // 段落中的代码块字重与段落字体匹配
     font-weight: var(--text-code-font-weight);
     margin: 0;
 }
@@ -82,6 +83,8 @@ pre code.hljs {
     display: block;
     overflow-x: scroll;
     line-height: calc(var(--mdc-typography-body1-font-size) + 0.5rem);
+    // 独立代码块字重为 normal
+    font-weight: base.$font-weight-normal-default;
     border-radius: var(--post-inner-shape-round);
     padding: 1rem;
     background: var(--pre-code-bg);

npm/src/component/dialog/TagDialog.scss

@@ -8,6 +8,7 @@ import { showSnackbar } from "./react/Snackbar"
 export const darkClass = "dark"
 
 export function initTheme() {
+    checkColorfulToolbar()
     checkUserTheme()
     // 监听系统级主题变化，即系统和导航栏都可以控制主题变化
     window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => {
@@ -26,35 +27,28 @@ export function initTheme() {
 }
 
 const metaThemeColor = {
+    colorful: "#556a3b",
     light: "#ffffff",
-    lightMobile: "#ffffff",
-    lightChrome: "#ffffff",
-    dark: "#1d1d1d",
-    darkMobile: "#1d1d1d",
-    darkChrome: "#1d1d1d",
+    dark: "#1d1d1d"
 }
 
 const topbarBlur = {
     default: true,
     mobile: false,
 }
 
+// 是否启用彩色标题栏
+// 在使用 Material You 的 Android Chrome 上，浅色主题的主题色不会影响 Chrome 工具栏和状态栏颜色，需要设置更深的主题色才会生效
+// 暗黑模式下则完全不影响，所以不必设置
+const colorfulToolbar = false
+
 function checkMetaThemeColor(dark: boolean, show: boolean) {
-    // 黑配色
     if (show) {
         if (dark) {
-            if (isChrome()) {
-                setMetaThemeColor(metaThemeColor.darkChrome)
-            } else if (isMobileOrTablet()) {
-                setMetaThemeColor(metaThemeColor.darkMobile)
-            } else {
-                setMetaThemeColor(metaThemeColor.dark)
-            }
+            setMetaThemeColor(metaThemeColor.dark)
         } else {
-            if (isChrome()) {
-                setMetaThemeColor(metaThemeColor.lightChrome)
-            } else if (isMobileOrTablet()) {
-                setMetaThemeColor(metaThemeColor.lightMobile)
+            if (document.querySelector(".colorful") != null) {
+                setMetaThemeColor(metaThemeColor.colorful)
             } else {
                 setMetaThemeColor(metaThemeColor.light)
             }
@@ -69,6 +63,12 @@ function checkMetaThemeColor(dark: boolean, show: boolean) {
     }
 }
 
+function checkColorfulToolbar() {
+    if (colorfulToolbar && isChrome() && isMobileOrTablet()) {
+        toggleClassWithEnable(document.querySelector(".mdc-top-app-bar"), "colorful", true)
+    }
+}
+
 /**
  * 设置浏览器的theme-color属性
  * @param {String} color 如果为null则删除属性

npm/src/component/dialog/TagDialog.tsx

@@ -14,9 +14,23 @@ body {
     --top-bar-slid-translateY : calc(0px - var(--top-bar-height) - 10px)
 }
 
+.mdc-top-app-bar.colorful {
+    background-color: #556a3b;
+    * {
+        color: white;
+    }
+}
+
+.dark .mdc-top-app-bar.colorful {
+    background-color: var(--mdc-theme-primary);
+    * {
+        color: var(--mdc-theme-on-primary);
+    }
+}
+
 .mdc-top-app-bar {
     // 颜色，默认为 primary
-    @include top-app-bar.fill-color(var(--mdc-theme-primary));
+    background-color: var(--mdc-theme-primary);
     // 阴影
     @include elevation.elevation(map.get(base.$top-bar-elevation, "elevation"), map.get(base.$top-bar-elevation, "shadow-light"), 0);
     // border-bottom: 1px solid color.adjust(map.get(base.$top-bar, "bg-light"), $lightness: - 3%);