feat: #1 代码块样式优化-webfont

README.md

@@ -10,12 +10,8 @@
 
 - 主题灵感源自于知乎但不限于知乎风格，外观优化包括不限于：
 
-  - 字体样式美化，以 `落霞孤鹜` 和 `JetBrains Mono` 为主
-    ![](https://static.terwergreen.com/test/202302261359269.png)
-
+  - 字体样式美化，以 `落霞孤鹜` 和 `Times New Roman` 为主
   - 代码块美化，类似 `Mac` 窗口风格
-    - 浅色模式
-      ![](https://static.terwergreen.com/test/202302261357568.png)
 
 - 整合热门挂件以及其他小工具，提供统一的入口
 - 天生支持插件系统，插件系统由社区开发者提供支持

src/styles/common/vars/vars-blog.styl

@@ -1,50 +1,5 @@
-// 根路径
-_zhi-base-url = "@/"
-
-// 字体
-_font-family-mono = "JetBrains Mono", "LXGW WenKai", "-apple-system", "Microsoft YaHei", "Times New Roman", "方正北魏楷书_GBK"
-_font-size-mini = 12px
-_font-size-small = 14px
-_font-size-normal = 16px
-_font-size-bg = 24px
-
-// 间距
-_padding-zero = 0
-_margin-zero = 0
-
-// 边框
-_border-radius-round = 50%
+// 通用变量
+@require "vars-common"
 
-// 颜色
-_body-bg-light = #f4f4f4
-_main-bg-light = #fff
-_sidebar-bg-light = hsla(0, 0%, 100%, 0.8)
-_blur-bg-light = hsla(0, 0%, 100%, 0.9)
-_custom-block-bg-light = #f1f1f1
-_text-color-light = #00323c
-_text-lighten-color-light = #0085ad
-_border-color-light = rgba(0, 0, 0, 0.12)
-_code-bg-light = #f6f6f6
-_code-color-light = #525252
-
-_body-bg-dark = #27272b
-_main-bg-dark = #1e1e22
-_sidebar-bg-dark = rgba(30, 30, 34, 0.8)
-_blur-bg-dark = rgba(30, 30, 34, 0.8)
-_custom-block-bg-dark = #27272b
-_text-color-dark = #9b9baa
-_text-lighten-color-dark = #0085ad
-_border-color-dark = #30363d
-_code-bg-dark = #252526
-_code-color-dark = #fff
-
-_body-bg-green = #ececcc
-_main-bg-green = #f5f5d5
-_sidebar-bg-green = rgba(245, 245, 213, 0.8)
-_blur-bg-green = rgba(245, 245, 213, 0.9)
-_custom-block-bg-green = #ececcc
-_text-color-green = #704214
-_text-lighten-color-green = #963
-_border-color-green = rgba(0, 0, 0, 0.15)
-_code-bg-green = #282c34
-_code-color-green = #fff
+// 根路径
+_zhi-base-url = "@/"

src/styles/common/vars/vars-common.styl

@@ -0,0 +1,47 @@
+// 字体
+_font-family-mono = "Times New Roman", "LXGW WenKai", "JetBrains Mono", "-apple-system", "Microsoft YaHei",  "方正北魏楷书_GBK"
+_font-size-mini = 12px
+_font-size-small = 14px
+_font-size-normal = 16px
+_font-size-bg = 24px
+
+// 间距
+_padding-zero = 0
+_margin-zero = 0
+
+// 边框
+_border-radius-round = 50%
+
+// 颜色
+_body-bg-light = #f4f4f4
+_main-bg-light = #fff
+_sidebar-bg-light = hsla(0, 0%, 100%, 0.8)
+_blur-bg-light = hsla(0, 0%, 100%, 0.9)
+_custom-block-bg-light = #f1f1f1
+_text-color-light = #00323c
+_text-lighten-color-light = #0085ad
+_border-color-light = rgba(0, 0, 0, 0.12)
+_code-bg-light = #f6f6f6
+_code-color-light = #525252
+
+_body-bg-dark = #27272b
+_main-bg-dark = #1e1e22
+_sidebar-bg-dark = rgba(30, 30, 34, 0.8)
+_blur-bg-dark = rgba(30, 30, 34, 0.8)
+_custom-block-bg-dark = #27272b
+_text-color-dark = #9b9baa
+_text-lighten-color-dark = #0085ad
+_border-color-dark = #30363d
+_code-bg-dark = #252526
+_code-color-dark = #fff
+
+_body-bg-green = #ececcc
+_main-bg-green = #f5f5d5
+_sidebar-bg-green = rgba(245, 245, 213, 0.8)
+_blur-bg-green = rgba(245, 245, 213, 0.9)
+_custom-block-bg-green = #ececcc
+_text-color-green = #704214
+_text-lighten-color-green = #963
+_border-color-green = rgba(0, 0, 0, 0.15)
+_code-bg-green = #282c34
+_code-color-green = #fff

src/styles/common/vars/vars-zhi.styl

@@ -1,51 +1,6 @@
+// 通用变量
+@require "vars-common"
+
 // 根路径
 _zhi-base-url = "/appearance/themes/zhi/dist/"
 
-// 字体
-_font-family-mono = "JetBrains Mono", "LXGW WenKai", "-apple-system", "Microsoft YaHei", "Times New Roman", "方正北魏楷书_GBK"
-_font-size-mini = 12px
-_font-size-small = 14px
-_font-size-normal = 16px
-_font-size-bg = 24px
-
-// 间距
-_padding-zero = 0
-_margin-zero = 0
-
-// 边框
-_border-radius-round = 50%
-
-// 颜色
-_body-bg-light = #f4f4f4
-_main-bg-light = #fff
-_sidebar-bg-light = hsla(0, 0%, 100%, 0.8)
-_blur-bg-light = hsla(0, 0%, 100%, 0.9)
-_custom-block-bg-light = #f1f1f1
-_text-color-light = #00323c
-_text-lighten-color-light = #0085ad
-_border-color-light = rgba(0, 0, 0, 0.12)
-_code-bg-light = #f6f6f6
-_code-color-light = #525252
-
-_body-bg-dark = #27272b
-_main-bg-dark = #1e1e22
-_sidebar-bg-dark = rgba(30, 30, 34, 0.8)
-_blur-bg-dark = rgba(30, 30, 34, 0.8)
-_custom-block-bg-dark = #27272b
-_text-color-dark = #9b9baa
-_text-lighten-color-dark = #0085ad
-_border-color-dark = #30363d
-_code-bg-dark = #252526
-_code-color-dark = #fff
-
-_body-bg-green = #ececcc
-_main-bg-green = #f5f5d5
-_sidebar-bg-green = rgba(245, 245, 213, 0.8)
-_blur-bg-green = rgba(245, 245, 213, 0.9)
-_custom-block-bg-green = #ececcc
-_text-color-green = #704214
-_text-lighten-color-green = #963
-_border-color-green = rgba(0, 0, 0, 0.15)
-_code-bg-green = #282c34
-_code-color-green = #fff
-