Use Noto Serif quotation marks to improve CJK full-width punctuation spacing

Author: apqx

_includes/footer.html

@@ -1,4 +1,4 @@
-<footer>
+<footer class="card-fade-in">
   <div class="foot-header"></div>
   <div class="foot-container">
     <div class="copyright" style="display: flex; flex-direction: column; align-items: start;">
@@ -11,12 +11,6 @@
     </div>
   </div>
 </footer>
-<script>
-  // 默认先隐藏footer，渐进动画显示
-  // 用JS隐藏的原因是避免未启用JS的浏览器不显示页脚
-  const footerE = document.querySelector("footer")
-  footerE.classList.add("card-fade-in")
-</script>
 
 <!-- Floating Action Button -->
 <div class="mdc-touch-target-wrapper">

npm/dist/assets/blog-font.css

@@ -59,7 +59,7 @@
     // border: 2px solid map.get(base.$dialog, "border-light");
     // border: 1px dashed var(--divider-dashed-color);
     // surface不滚动，content滚动
-    overflow: clip;
+    overflow-x: hidden;
 }
 
 .dark .mdc-dialog__surface {
@@ -103,16 +103,13 @@
     height: 3.2rem;
     padding: 0;
     border-radius: 0;
-}
-
-.mdc-button.basic-dialog_btn_action {
+    
     @include button.container-fill-color(var(--dialog-action-btn-bg));
     @include button.ink-color(var(--dialog-action-btn-ink));
-
-    @include ripple.surface;
-    // 如果为bounded则宽度可能有问题，导致横向溢出，滚动🤔
-    // Dialog的surface的尺寸异常导致滚动，已设置设置其overflow为clip
+    // 启用Ripple的radius-bounded可能导致某些东西溢出元素，导致整个页面宽度不正常可以横向滚动
+    // 加上这个则可以解决🤔
     overflow: hidden;
+    @include ripple.surface;
     @include ripple.radius-bounded;
     @include ripple.states-base-color(map.get(base.$dialog-action-btn-ripple, "light"));
     @include ripple.states-opacities((hover: .0, focus: .0, press: .1));

npm/dist/assets/blog-post.css

@@ -18,19 +18,19 @@
 }
 
 .mdc-text-field {
+    display: flex;
+    align-items: center;
+    padding: 0 0 0 1rem;
+    margin-left: auto;
+    margin-right: auto;
+
     @include textfield.ink-color(var(--mdc-theme-on-surface));
     @include textfield.caret-color(var(--mdc-theme-on-surface));
     @include textfield.placeholder-color(var(--mdc-theme-text-secondary-on-background));
     @include textfield.label-color(var(--mdc-theme-text-secondary-on-background));
     @include textfield.outline-color(var(--divider-color));
     @include textfield.hover-outline-color(var(--divider-color));
     @include textfield.focused-outline-color(var(--divider-color));
-
-    display: flex;
-    align-items: center;
-    padding: 0 0 0 1rem;
-    margin-left: auto;
-    margin-right: auto;
 }
 
 #btn-search {

npm/dist/assets/blog-scaffold.css

@@ -73,6 +73,7 @@
 
 .nav-list {
     .mdc-deprecated-list-item {
+        overflow: hidden;
         @include ripple.surface;
         @include ripple.radius-bounded;
         @include ripple.states-base-color(map.get(base.$drawer-nav-ripple, "light"));

npm/src/component/dialog/BasicDialog.scss

@@ -0,0 +1,27 @@
+// Noto Serif 的省略号 … 和引号 “” ‘’ 字符，注意比正常自重大一级，这里的Regular是源字体的Light
+@font-face {
+    font-family: "Noto Serif Sub";
+    src: url("https://apqx-host.oss-cn-hangzhou.aliyuncs.com/blog/fonts/NotoSerif/NotoSerif-ExtraLight-Ellipsis-Quotation/39b0e1e8024e5698dcc3c2411d0b33e1.woff2") format("woff2");
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    unicode-range: U+2018-2019, U+201c-201d, U+2026;
+}
+
+@font-face {
+    font-family: "Noto Serif Sub";
+    src: url("https://apqx-host.oss-cn-hangzhou.aliyuncs.com/blog/fonts/NotoSerif/NotoSerif-Light-Ellipsis-Quotation/6a794c8ad38390c6e23e3adbc6d19186.woff2") format("woff2");
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    unicode-range: U+2018-2019, U+201c-201d, U+2026;
+}
+
+@font-face {
+    font-family: "Noto Serif Sub";
+    src: url("https://apqx-host.oss-cn-hangzhou.aliyuncs.com/blog/fonts/NotoSerif/NotoSerif-Regular-Ellipsis-Quotation/f34a43b2b879093842cb30be1d30c73c.woff2") format("woff2");
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    unicode-range: U+2018-2019, U+201c-201d, U+2026;
+}