feat: #1 代码块样式优化-整体css结构调整

src/styles/common/basic/basic-dark.styl

@@ -0,0 +1,20 @@
+/* -------------------------------------------------颜色定义-暗黑模式--------------------------------------------------- */
+html[data-theme-mode="dark"]
+  --zhi-font-family: _font-family-mono
+  --zhi-font-size: _font-size-normal
+
+  --zhi-p-zero: _padding-zero
+  --zhi-m-zero: _margin-zero
+
+  --zhi-border-radius-round: _border-radius-round
+
+  --zhi-body-bg: _body-bg-dark
+  --zhi-main-bg = _main-bg-dark
+  --zhi-sidebar-bg = _sidebar-bg-dark
+  --zhi-blur-bg = _blur-bg-dark
+  --zhi-custom-block-bg = _custom-block-bg-dark
+  --zhi-text-color: _text-color-dark
+  --zhi-text-lighten-color = _text-lighten-color-dark
+  --zhi-border-color = _border-color-dark
+  --zhi-code-bg = _code-bg-dark
+  --zhi-code-color = _code-color-dark

src/styles/common/basic/basic-green.styl

@@ -0,0 +1,20 @@
+/* -------------------------------------------------颜色定义-阅读模式--------------------------------------------------- */
+html[data-theme-mode="green"]
+  --zhi-font-family: _font-family-mono
+  --zhi-font-size: _font-size-normal
+
+  --zhi-p-zero: _padding-zero
+  --zhi-m-zero: _margin-zero
+
+  --zhi-border-radius-round: _border-radius-round
+
+  --zhi-body-bg: _body-bg-green
+  --zhi-main-bg = _main-bg-green
+  --zhi-sidebar-bg = _sidebar-bg-green
+  --zhi-blur-bg = _blur-bg-green
+  --zhi-custom-block-bg = _custom-block-bg-green
+  --zhi-text-color: _text-color-green
+  --zhi-text-lighten-color = _text-lighten-color-green
+  --zhi-border-color = _border-color-green
+  --zhi-code-bg = _code-bg-green
+  --zhi-code-color = _code-color-green

src/styles/common/basic/basic-light.styl

@@ -0,0 +1,20 @@
+/* -------------------------------------------------颜色定义-浅色模式--------------------------------------------------- */
+html[data-theme-mode="light"]
+  --zhi-font-family: _font-family-mono
+  --zhi-font-size: _font-size-normal
+
+  --zhi-p-zero: _padding-zero
+  --zhi-m-zero: _margin-zero
+
+  --zhi-border-radius-round: _border-radius-round
+
+  --zhi-body-bg: _body-bg-light
+  --zhi-main-bg = _main-bg-light
+  --zhi-sidebar-bg = _sidebar-bg-light
+  --zhi-blur-bg = _blur-bg-light
+  --zhi-custom-block-bg = _custom-block-bg-light
+  --zhi-text-color: _text-color-light
+  --zhi-text-lighten-color = _text-lighten-color-light
+  --zhi-border-color = _border-color-light
+  --zhi-code-bg = _code-bg-light
+  --zhi-code-color = _code-color-light

src/styles/common/basic/index.styl

@@ -1,38 +1,25 @@
 @require "../fonts"
 
-/* 颜色定义 */
-$body-bg = #f4f4f4
-$main-bg = #fff
-$sidebar-bg = hsla(0, 0%, 100%, 0.8)
-$blur-bg = hsla(0, 0%, 100%, 0.9)
-$custom-block-bg = #f1f1f1
-$text-color = #00323c
-$text-lighten-color = #0085ad
-$border-color = rgba(0, 0, 0, 0.12)
-$code-bg = #f6f6f6
-$code-color = #525252
-
-body
-  --zhi-text-color: $text-color
-  --zhi-body-bg: $body-bg
+@require "basic-light"
+@require "basic-dark"
+@require "basic-green"
 
 // 基础样式
 \:root
-  --b3-font-family: $font-family-mono
-  --b3-font-family-code: var(--b3-font-family)
-  --b3-font-family-graph: var(--b3-font-family)
-  --b3-font-family-emoji: var(--b3-font-family)
-  --b3-font-family-math: var(--b3-font-family)
-  --b3-border-radius-round: 50%
+  --b3-font-family: var(--zhi-font-family)
+  --b3-font-family-code: var(--zhi-font-family)
+  --b3-font-family-graph: var(--zhi-font-family)
+  --b3-font-family-emoji: var(--zhi-font-family)
+  --b3-font-family-math: var(--zhi-font-family)
+  --b3-border-radius-round: var(--zhi-border-radius-round)
+  --b3-theme-background: var(--zhi-body-bg)
+  --b3-theme-surface: var(--zhi-sidebar-bg)
 
 // 整体背景、字体颜色
 body
-  margin: 0
-  padding: 0
-  font-family: var(--b3-font-family)
-  -webkit-font-smoothing: antialiased
-  -moz-osx-font-smoothing: grayscale
-  -webkit-tap-highlight-color: transparent
-  font-size: 16px
+  font-family: var(--zhi-font-family)
+  font-size: var(--zhi-font-size)
+  margin: var(--zhi-m-zero)
+  padding: var(--zhi-p-zero)
   color: var(--zhi-text-color)
   background: var(--zhi-body-bg)

src/styles/common/fonts/font.styl

@@ -1,3 +1,2 @@
 /* 字体定义 */
-@require "webfont"
-$font-family-mono = "JetBrains Mono", "LXGW WenKai", "-apple-system", "Microsoft YaHei", "Times New Roman", "方正北魏楷书_GBK"
+@require "webfont"

src/styles/common/fonts/webfont.styl

@@ -1,8 +1,7 @@
 // 网页字体
 /* JetBrains Mono */
-$jb-mono-url = $zhi-base-url + "fonts/JetBrainsMono-2.304/JetBrainsMono-Regular.woff2"
 @font-face
   font-family: "JetBrains Mono"
-  src: url($jb-mono-url) format("woff2")
+  src: url(_zhi-base-url + "fonts/JetBrainsMono-2.304/JetBrainsMono-Regular.woff2") format("woff2")
   font-weight: 400
   font-style: normal

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

@@ -1 +1,50 @@
-$zhi-base-url = "@/"
+// 根路径
+_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%
+
+// 颜色
+_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 +1,51 @@
-$zhi-base-url = "/appearance/themes/zhi/dist/"
+// 根路径
+_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
+

src/styles/zhi/zhi-theme.styl

@@ -1,13 +1,8 @@
 // 基本样式
 @require "../common/basic"
 
-// 代码块
-@require "./widgets/code-block"
+//// 代码块
+//@require "./widgets/code-block"
 
-// 打印页面适配
-@require "./widgets/print-page"
-
-// 浅色、暗黑、护眼适配
-@require "./zhi-light"
-@require "./zhi-dark"
-@require "./zhi-green"
+//// 打印页面适配
+//@require "./widgets/print-page"