二〇二六年四月二十一日

72 files changed, 3133 insertions, 0 deletions

diff --git a/themes/theme/source/css/animation.styl b/themes/theme/source/css/animation.styl
new file mode 100644
index 00000000..ef22c6f9
--- /dev/null
+++ b/themes/theme/source/css/animation.styl
@@ -0,0 +1,14 @@
+@keyframes fadeIn
+    from
+        opacity 0
+    to
+        opacity 1
+
+.fade-in
+    animation fadeIn 0.6s ease
+
+.post-list-item, .post-gallery-item
+    transition opacity $transition-duration ease
+    
+    &:hover
+        opacity 0.85
\ No newline at end of file
diff --git a/themes/theme/source/css/base.styl b/themes/theme/source/css/base.styl
new file mode 100644
index 00000000..02dc0bb7
--- /dev/null
+++ b/themes/theme/source/css/base.styl
@@ -0,0 +1,38 @@
+div
+  display block
+  padding 0
+  margin 0
+
+ul 
+  list-style none
+  padding 0
+  margin 0
+
+*, *::before, *::after
+  box-sizing border-box
+
+a
+  text-decoration: none
+  color: $color-text-primary
+
+input
+  outline none
+  border none
+
+body
+  text-style(body-default)
+  background-color $color-background
+
+/* clears the 'X' from Internet Explorer */
+input[type=search]::-ms-clear
+  display none
+  width 0
+  height 0
+input[type=search]::-ms-reveal
+  display none
+  width 0
+  height 0
+
+/* clears the 'X' from Chrome */
+input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration
+  display: none
diff --git a/themes/theme/source/css/color.styl b/themes/theme/source/css/color.styl
new file mode 100644
index 00000000..c7cf2c25
--- /dev/null
+++ b/themes/theme/source/css/color.styl
@@ -0,0 +1,10 @@
+$color_path = 'color_mode/default.styl'
+
+if hexo-config("color_mode") == 'default'
+    $color_path = 'color_mode/default.styl'
+else if hexo-config("color_mode") == 'dark'
+    $color_path = 'color_mode/dark.styl'
+else if hexo-config("color_mode") == 'classic'
+    $color_path = 'color_mode/classic.styl'
+
+@import $color_path
diff --git a/themes/theme/source/css/color_mode/classic.styl b/themes/theme/source/css/color_mode/classic.styl
new file mode 100644
index 00000000..cd3f6413
--- /dev/null
+++ b/themes/theme/source/css/color_mode/classic.styl
@@ -0,0 +1,19 @@
+$color-text-primary = #1C1917
+$color-text-secondary = #78716C
+$color-text-third = #A8A29E
+$color-text-fourth = #E7E5E4
+$color-background = #FFFBEB
+
+$color-accent = #2563EB
+$color-border = #E7E5E4
+
+$color-code-background = #FEF3C7
+$color-code-highlight = #2563EB
+$color-code-default = #57534E
+$color-code-marker = #A8A29E
+
+$color-search-marker = #FDE68A
+$color-overlay = rgba(0, 0, 0, 0.4)
+$color-glass = rgba(255, 251, 235, 0.85)
+
+@import "../highlight/github.styl"
\ No newline at end of file
diff --git a/themes/theme/source/css/color_mode/dark.styl b/themes/theme/source/css/color_mode/dark.styl
new file mode 100644
index 00000000..67a9aaa6
--- /dev/null
+++ b/themes/theme/source/css/color_mode/dark.styl
@@ -0,0 +1,20 @@
+// COLOR
+$color-text-primary = #FAFAFA
+$color-text-secondary = #A1A1AA
+$color-text-third = #71717A
+$color-text-fourth = #3F3F46
+$color-background = #18181B
+
+$color-accent = #3B82F6
+$color-border = #3F3F46
+
+$color-code-background = #27272A
+$color-code-highlight = #3B82F6
+$color-code-default = #D4D4D8
+$color-code-marker = #71717A
+
+$color-search-marker = #854D0E
+$color-overlay = rgba(0, 0, 0, 0.6)
+$color-glass = rgba(24, 24, 27, 0.85)
+
+@import "../highlight/github-gist.styl"
\ No newline at end of file
diff --git a/themes/theme/source/css/color_mode/default.styl b/themes/theme/source/css/color_mode/default.styl
new file mode 100644
index 00000000..15f8a292
--- /dev/null
+++ b/themes/theme/source/css/color_mode/default.styl
@@ -0,0 +1,20 @@
+// COLOR
+$color-text-primary = #09090B
+$color-text-secondary = #71717A
+$color-text-third = #A1A1AA
+$color-text-fourth = #E4E4E7
+$color-background = #FFFFFF
+
+$color-accent = #2563EB
+$color-border = #E4E4E7
+
+$color-code-background = #F4F4F5
+$color-code-highlight = #2563EB
+$color-code-default = #52525B
+$color-code-marker = #A1A1AA
+
+$color-search-marker = #FDE68A
+$color-overlay = rgba(0, 0, 0, 0.4)
+$color-glass = rgba(255, 255, 255, 0.92)
+
+@import "../highlight/github.styl"
\ No newline at end of file
diff --git a/themes/theme/source/css/component/button.styl b/themes/theme/source/css/component/button.styl
new file mode 100644
index 00000000..6c6520db
--- /dev/null
+++ b/themes/theme/source/css/component/button.styl
@@ -0,0 +1,64 @@
+.btn
+    display inline-flex
+    align-items center
+    justify-content center
+    white-space nowrap
+    border-radius $margin-m-2
+    font-size $font-size-header
+    font-weight 400
+    transition all $transition-duration ease
+    cursor pointer
+    border none
+    text-decoration none
+    user-select none
+    outline none
+    padding $margin-m-0 $margin-l-0
+    
+    &:focus-visible
+        outline 2px solid $color-accent
+        outline-offset 2px
+        
+    &:disabled
+        pointer-events none
+        opacity 0.5
+
+.btn-default
+    background-color $color-text-primary
+    color $color-background
+    
+    &:hover
+        opacity 0.9
+        
+    &:active
+        opacity 0.95
+
+.btn-outline
+    border 1px solid $color-border
+    background-color transparent
+    color $color-text-primary
+    
+    &:hover
+        border-color $color-accent
+        color $color-accent
+
+.btn-ghost
+    background-color transparent
+    color $color-text-primary
+    
+    &:hover
+        background-color $color-text-fourth
+
+.btn-link
+    background-color transparent
+    color $color-accent
+    text-decoration underline
+    text-underline-offset 4px
+    
+    &:hover
+        text-decoration none
+
+@keyframes spin
+    0%
+        transform rotate(0deg)
+    100%
+        transform rotate(360deg)
\ No newline at end of file
diff --git a/themes/theme/source/css/component/component.styl b/themes/theme/source/css/component/component.styl
new file mode 100644
index 00000000..b203aecc
--- /dev/null
+++ b/themes/theme/source/css/component/component.styl
@@ -0,0 +1,44 @@
+.h-line-primary
+  background-color $color-text-primary
+  height $line-third
+
+.h-line-secondary
+  background-color $color-border
+  height $line-third
+
+hr 
+  background-color $color-border
+  height $line-third
+  border 0
+
+.tag-list
+  display flex
+  flex-wrap wrap
+  margin-bottom $margin-m-0
+
+.tag-title
+  margin $margin-m-1 0 
+  color $color-text-secondary
+  font-size $font-size-header
+
+  a 
+      color @color
+
+.post-tag
+  text-style(post-tag)
+  border 1px solid $color-border
+  margin-right $margin-s-2
+  margin-bottom $margin-s-2
+  padding $margin-s-2 $margin-m-0 $margin-s-2 $margin-m-0
+  border-radius $margin-m-2
+  transition all $transition-duration ease
+
+  a 
+    background-image none!important
+
+  &:hover
+    border-color $color-accent
+    background-color $color-accent
+
+    a 
+      color #fff
diff --git a/themes/theme/source/css/component/icon.styl b/themes/theme/source/css/component/icon.styl
new file mode 100644
index 00000000..8a6c0511
--- /dev/null
+++ b/themes/theme/source/css/component/icon.styl
@@ -0,0 +1,21 @@
+.icon
+    display block
+    background-color $color-text-primary
+    width $icon-size
+    height $icon-size
+
+.arrow-up
+    -webkit-mask-image url('../icon/arrow-up.svg')
+    mask-image url('../icon/arrow-up.svg')
+
+.arrow-left
+    -webkit-mask-image url('../icon/arrow-left.svg')
+    mask-image url('../icon/arrow-left.svg')
+
+.arrow-right
+    -webkit-mask-image url('../icon/arrow-right.svg')
+    mask-image url('../icon/arrow-right.svg')
+
+.close-btn
+    -webkit-mask-image url('../icon/close-btn.svg')
+    mask-image url('../icon/close-btn.svg')
\ No newline at end of file
diff --git a/themes/theme/source/css/font-slices.styl b/themes/theme/source/css/font-slices.styl
new file mode 100644
index 00000000..97b9b47b
--- /dev/null
+++ b/themes/theme/source/css/font-slices.styl
@@ -0,0 +1,47 @@
+// FONT SLICES - GoogleSansCode 分段字体定义
+// 自动生成，包含 5 个 Unicode 范围切片
+
+// Latin 基础字符集（ASCII + 基本拉丁 + 常用标点）
+@font-face
+  font-family 'GoogleSansCode'
+  font-style normal
+  font-weight 400
+  font-display swap
+  src url('/fonts/latin-base.woff2') format('woff2')
+  unicode-range U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F
+
+// Latin 扩展（拉丁扩展 A/B + 货币符号 + 特殊字符）
+@font-face
+  font-family 'GoogleSansCode'
+  font-style normal
+  font-weight 400
+  font-display swap
+  src url('/fonts/latin-ext.woff2') format('woff2')
+  unicode-range U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
+
+// CJK 常用汉字（约 3500 字，覆盖 99% 中文内容）
+@font-face
+  font-family 'GoogleSansCode'
+  font-style normal
+  font-weight 400
+  font-display swap
+  src url('/fonts/cjk-common.woff2') format('woff2')
+  unicode-range U+4E00-62FF
+
+// CJK 扩展汉字（次常用汉字 + 扩展 A）
+@font-face
+  font-family 'GoogleSansCode'
+  font-style normal
+  font-weight 400
+  font-display swap
+  src url('/fonts/cjk-ext.woff2') format('woff2')
+  unicode-range U+6300-9FFF, U+3400-4DBF
+
+// 符号（CJK 标点 + 全角字符）
+@font-face
+  font-family 'GoogleSansCode'
+  font-style normal
+  font-weight 400
+  font-display swap
+  src url('/fonts/symbols.woff2') format('woff2')
+  unicode-range U+3000-303F, U+FF00-FFEF
diff --git a/themes/theme/source/css/font.styl b/themes/theme/source/css/font.styl
new file mode 100644
index 00000000..4ca10b78
--- /dev/null
+++ b/themes/theme/source/css/font.styl
@@ -0,0 +1,105 @@
+text-style(n)
+  font-family $font-family
+  font-weight 400
+
+  if n == 'body-default'
+    font-size $font-size-body
+    line-height $line-height-body
+    color $color-text-primary
+
+  else if n == 'body-bold'
+    font-size $font-size-body
+    line-height $line-height-body
+    color $color-text-primary
+
+  else if n == 'body-italic'
+    font-size $font-size-body
+    font-style italic
+    line-height $line-height-body
+    color $color-text-primary
+
+  else if n == 'body-delete'
+    font-size $font-size-body
+    line-height $line-height-body
+    text-decoration line-through
+    color $color-text-primary
+
+  else if n == 'code-default'
+    font-family $font-family
+    font-size $font-size-code
+    line-height $line-height-code
+    color $color-code-default
+
+  else if n == 'code-highlight'
+    font-family $font-family
+    font-size $font-size-code
+    line-height $line-height-code
+    color $color-code-highlight
+
+  else if n == 'code-marker'
+    font-family $font-family
+    font-size $font-size-code
+    line-height $line-height-code
+    color $color-code-marker
+
+  else if n == 'heading-h1'
+    font-size $font-size-heading-h1
+    line-height $line-height-heading-h1
+    color $color-text-primary
+
+  else if n == 'heading-h2'
+    font-size $font-size-heading-h2
+    line-height $line-height-heading-h2
+    color $color-text-primary
+
+  else if n == 'heading-h3'
+    font-size $font-size-heading-h3
+    line-height $line-height-heading-h3
+    color $color-text-primary
+
+  else if n == 'heading-h4'
+    font-size $font-size-heading-h4
+    line-height $line-height-heading-h4
+    color $color-text-primary
+
+  else if n == 'heading-h5'
+    font-size $font-size-heading-h5
+    line-height $line-height-heading-h5
+    color $color-text-primary
+
+  else if n == 'heading-h6'
+    font-size $font-size-heading-h6
+    line-height $line-height-heading-h6
+    color $color-text-primary
+
+  else if n == 'footer'
+    font-size $font-size-footer
+    line-height $line-height-footer
+    color $color-text-secondary
+
+  else if n == 'header'
+    font-size $font-size-header
+    line-height $line-height-header
+    color $color-text-primary
+
+  else if n == 'post-date'
+    font-size $font-size-post-date
+    line-height $line-height-post-date
+    color $color-text-secondary
+
+  else if n == 'year-title'
+    font-size $font-size-year-title
+    line-height $line-height-year-title
+    color $color-text-third
+
+  else if n == 'post-tag'
+    font-size $font-size-post-tag
+    line-height $line-height-post-tag
+    color $color-text-secondary
+
+  else if n == 'search-result-message'
+    font-family $font-family
+    font-size $font-size-code
+    line-height $line-height-code
+    color $color-text-third
+    text-transform lowercase
diff --git a/themes/theme/source/css/highlight/ascetic.styl b/themes/theme/source/css/highlight/ascetic.styl
new file mode 100644
index 00000000..19d1eff3
--- /dev/null
+++ b/themes/theme/source/css/highlight/ascetic.styl
@@ -0,0 +1,37 @@
+/*
+
+Original style from softwaremaniacs.org (c) Ivan Sagalaev <[email protected]>
+
+*/
+
+.highlight
+    color: black
+    background: white
+    .code
+        .string,
+        .variable,
+        .template-variable,
+        .symbol,
+        .bullet,
+        .section,
+        .addition,
+        .attribute,
+        .link
+            color: #888
+
+        .comment,
+        .quote,
+        .meta,
+        .deletion
+            color: #ccc
+
+        .keyword,
+        .selector-tag,
+        .section,
+        .name,
+        .type,
+        .strong
+            font-weight: normal
+
+        .emphasis
+            font-style: italic
diff --git a/themes/theme/source/css/highlight/brown-paper.styl b/themes/theme/source/css/highlight/brown-paper.styl
new file mode 100644
index 00000000..a81bd2d7
--- /dev/null
+++ b/themes/theme/source/css/highlight/brown-paper.styl
@@ -0,0 +1,55 @@
+/*
+
+Brown Paper style from goldblog.com.ua (c) Zaripov Yura <[email protected]>
+
+*/
+
+.highlight
+    color: #363c69
+    background:#b7a68e url(brown-papersq.png)
+    .code
+        .keyword,
+        .selector-tag,
+        .literal
+            color:#005599
+            font-weight:normal
+
+        .highlight,
+        .subst
+            color: #363c69
+
+        .string,
+        .title,
+        .section,
+        .type,
+        .attribute,
+        .symbol,
+        .bullet,
+        .built_in,
+        .addition,
+        .variable,
+        .template-tag,
+        .template-variable,
+        .link,
+        .name
+            color: #2c009f
+
+        .comment,
+        .quote,
+        .meta,
+        .deletion
+            color: #802022
+
+        .keyword,
+        .selector-tag,
+        .literal,
+        .doctag,
+        .title,
+        .section,
+        .type,
+        .name,
+        .strong
+            font-weight: normal
+
+        .emphasis
+            font-style: italic
diff --git a/themes/theme/source/css/highlight/dark.styl b/themes/theme/source/css/highlight/dark.styl
new file mode 100644
index 00000000..1cdbc9b0
--- /dev/null
+++ b/themes/theme/source/css/highlight/dark.styl
@@ -0,0 +1,27 @@
+/*
+   
+   Dark style from softwaremaniacs.org (c) Ivan Sagalaev <[email protected]>
+   
+*/
+.highlight
+  background: #444
+  color: #ddd
+
+  .code
+    .keyword, .selector-tag, .literal, .section, .link
+      color: white
+
+    .subst
+      color: #ddd
+
+    .string, .title, .name, .type, .attribute, .symbol, .bullet, .built_in, .addition, .variable, .template-tag, .template-variable
+      color: #d88
+
+    .comment, .quote, .deletion, .meta
+      color: #777
+
+    .keyword, .selector-tag, .literal, .title, .section, .doctag, .type, .name, .strong
+      font-weight: normal
+
+    .emphasis
+      font-style: italic
diff --git a/themes/theme/source/css/highlight/darkula.styl b/themes/theme/source/css/highlight/darkula.styl
new file mode 100644
index 00000000..0295887d
--- /dev/null
+++ b/themes/theme/source/css/highlight/darkula.styl
@@ -0,0 +1,33 @@
+/*
+   
+   Darkula color scheme from the JetBrains family of IDEs
+   
+*/
+.highlight
+  background: #2b2b2b
+  color: #bababa
+
+  .code
+    .strong, .emphasis
+      color: #a8a8a2
+
+    .bullet, .quote, .link, .number, .regexp, .literal
+      color: #6896ba
+
+    .code, .selector-class
+      color: #a6e22e
+
+    .emphasis
+      font-style: italic
+
+    .keyword, .selector-tag, .section, .attribute, .name, .variable
+      color: #cb7832
+
+    .params
+      color: #b9b9b9
+
+    .string, .subst, .type, .built_in, .builtin-name, .symbol, .selector-id, .selector-attr, .selector-pseudo, .template-tag, .template-variable, .addition
+      color: #e0c46c
+
+    .comment, .deletion, .meta
+      color: #7f7f7f
diff --git a/themes/theme/source/css/highlight/foundation.styl b/themes/theme/source/css/highlight/foundation.styl
new file mode 100644
index 00000000..8c52a5ae
--- /dev/null
+++ b/themes/theme/source/css/highlight/foundation.styl
@@ -0,0 +1,71 @@
+/*
+Description: Foundation 4 docs style for highlight.js
+Author: Dan Allen <[email protected]>
+Website: http://foundation.zurb.com/docs/
+Version: 1.0
+Date: 2013-04-02
+*/
+
+.highlight
+    color: black
+    background: #eee
+    .code
+        .link,
+        .emphasis,
+        .attribute,
+        .addition
+            color: #070
+
+        .emphasis
+            font-style: italic
+
+        .strong,
+        .string,
+        .deletion
+            color: #d14
+
+        .strong
+            font-weight: normal
+
+        .quote,
+        .comment
+            color: #998
+            font-style: italic
+
+        .section,
+        .title
+            color: #900
+
+        .class .title,
+        .type
+            color: #458
+
+        .variable,
+        .template-variable
+            color: #336699
+
+        .bullet
+            color: #997700
+
+        .meta
+            color: #3344bb
+
+        .code,
+        .number,
+        .literal,
+        .keyword,
+        .selector-tag
+            color: #099
+
+        .regexp
+            background-color: #fff0ff
+            color: #880088
+
+        .symbol
+            color: #990073
+
+        .tag,
+        .name,
+        .selector-id,
+        .selector-class
+            color: #007700
diff --git a/themes/theme/source/css/highlight/github-gist.styl b/themes/theme/source/css/highlight/github-gist.styl
new file mode 100644
index 00000000..e3a81ce3
--- /dev/null
+++ b/themes/theme/source/css/highlight/github-gist.styl
@@ -0,0 +1,57 @@
+/**
+ * GitHub Gist Theme
+ * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro
+ */
+
+.highlight
+    padding: 0.5em
+    color: #333333
+    .code
+        .comment,
+        .meta
+            color: #969896
+
+        .string,
+        .variable,
+        .template-variable,
+        .strong,
+        .emphasis,
+        .quote
+            color: #df5000
+
+        .keyword,
+        .selector-tag,
+        .type
+            color: #a71d5d
+
+        .literal,
+        .symbol,
+        .bullet,
+        .attribute
+            color: #0086b3
+
+        .section,
+        .name
+            color: #63a35c
+
+        .tag
+            color: #333333
+
+        .title,
+        .attr,
+        .selector-id,
+        .selector-class,
+        .selector-attr,
+        .selector-pseudo
+            color: #795da3
+
+        .addition
+            color: #55a532
+            background-color: #eaffea
+
+        .deletion
+            color: #bd2c00
+            background-color: #ffecec
+
+        .link
+            text-decoration: underline
diff --git a/themes/theme/source/css/highlight/github.styl b/themes/theme/source/css/highlight/github.styl
new file mode 100644
index 00000000..f06484fd
--- /dev/null
+++ b/themes/theme/source/css/highlight/github.styl
@@ -0,0 +1,79 @@
+/*
+
+github.com style (c) Vasily Polovnyov <[email protected]>
+
+*/
+
+.highlight
+    color: #333
+    background: #f8f8f8
+    .code
+        .comment,
+        .quote
+            color: #998
+            font-style: italic
+
+        .keyword,
+        .selector-tag,
+        .subst
+            color: #333
+            font-weight: normal
+
+        .number,
+        .literal,
+        .variable,
+        .template-variable,
+        .tag .attr
+            color: #008080
+
+        .string,
+        .doctag
+            color: #d14
+
+        .title,
+        .section,
+        .selector-id
+            color: #900
+            font-weight: normal
+
+        .subst
+            font-weight: normal
+
+        .type,
+        .class .title
+            color: #458
+            font-weight: normal
+
+        .tag,
+        .name,
+        .attribute
+            color: #000080
+            font-weight: normal
+
+        .regexp,
+        .link
+            color: #009926
+
+        .symbol,
+        .bullet
+            color: #990073
+
+        .built_in,
+        .builtin-name
+            color: #0086b3
+
+        .meta
+            color: #999
+            font-weight: normal
+
+        .deletion
+            background: #fdd
+
+        .addition
+            background: #dfd
+
+        .emphasis
+            font-style: italic
+
+        .strong
+            font-weight: normal
diff --git a/themes/theme/source/css/highlight/googlecode.styl b/themes/theme/source/css/highlight/googlecode.styl
new file mode 100644
index 00000000..c25bb01c
--- /dev/null
+++ b/themes/theme/source/css/highlight/googlecode.styl
@@ -0,0 +1,72 @@
+/*
+
+Google Code style (c) Aahan Krish <[email protected]>
+
+*/
+
+.highlight
+    color: black
+    background: white
+    .code
+        .comment,
+        .quote
+            color: #800
+
+        .keyword,
+        .selector-tag,
+        .section,
+        .title,
+        .name
+            color: #008
+
+        .variable,
+        .template-variable
+            color: #660
+
+        .string,
+        .selector-attr,
+        .selector-pseudo,
+        .regexp
+            color: #080
+
+        .literal,
+        .symbol,
+        .bullet,
+        .meta,
+        .number,
+        .link
+            color: #066
+
+        .title,
+        .doctag,
+        .type,
+        .attr,
+        .built_in,
+        .builtin-name,
+        .params
+            color: #606
+
+        .attribute,
+        .subst
+            color: #000
+
+        .formula
+            background-color: #eee
+            font-style: italic
+
+        .selector-id,
+        .selector-class
+            color: #9B703F
+
+        .addition
+            background-color: #baeeba
+
+        .deletion
+            background-color: #ffc8bd
+
+        .doctag,
+        .strong
+            font-weight: normal
+
+        .emphasis
+            font-style: italic
diff --git a/themes/theme/source/css/highlight/idea.styl b/themes/theme/source/css/highlight/idea.styl
new file mode 100644
index 00000000..cc009c4a
--- /dev/null
+++ b/themes/theme/source/css/highlight/idea.styl
@@ -0,0 +1,78 @@
+/*
+
+Intellij Idea-like styling (c) Vasily Polovnyov <[email protected]>
+
+*/
+
+.highlight
+    color: #000
+    background: #fff
+    .code
+        .subst,
+        .title
+            font-weight: normal
+            color: #000
+
+        .comment,
+        .quote
+            color: #808080
+            font-style: italic
+
+        .meta
+            color: #808000
+
+        .tag
+            background: #efefef
+
+        .section,
+        .name,
+        .literal,
+        .keyword,
+        .selector-tag,
+        .type,
+        .selector-id,
+        .selector-class
+            font-weight: normal
+            color: #000080
+
+        .attribute,
+        .number,
+        .regexp,
+        .link
+            font-weight: normal
+            color: #0000ff
+
+        .number,
+        .regexp,
+        .link
+            font-weight: normal
+
+        .string
+            color: #008000
+            font-weight: normal
+
+        .symbol,
+        .bullet,
+        .formula
+            color: #000
+            background: #d0eded
+            font-style: italic
+
+        .doctag
+            text-decoration: underline
+
+        .variable,
+        .template-variable
+            color: #660e7a
+
+        .addition
+            background: #baeeba
+
+        .deletion
+            background: #ffc8bd
+
+        .emphasis
+            font-style: italic
+
+        .strong
+            font-weight: normal
diff --git a/themes/theme/source/css/highlight/rainbow.styl b/themes/theme/source/css/highlight/rainbow.styl
new file mode 100644
index 00000000..88930970
--- /dev/null
+++ b/themes/theme/source/css/highlight/rainbow.styl
@@ -0,0 +1,46 @@
+/*
+   
+   Style with support for rainbow parens
+   
+*/
+.highlight
+  background: #474949
+  color: #d1d9e1
+
+  .code
+    .comment, .quote
+      color: #969896
+      font-style: italic
+
+    .keyword, .selector-tag, .literal, .type, .addition
+      color: #cc99cc
+
+    .number, .selector-attr, .selector-pseudo
+      color: #f99157
+
+    .string, .doctag, .regexp
+      color: #8abeb7
+
+    .title, .name, .section, .built_in
+      color: #b5bd68
+
+    .variable, .template-variable, .selector-id, .class .title
+      color: #ffcc66
+
+    .section, .name, .strong
+      font-weight: normal
+
+    .symbol, .bullet, .subst, .meta, .link
+      color: #f99157
+
+    .deletion
+      color: #dc322f
+
+    .formula
+      background: #eee8d5
+
+    .attr, .attribute
+      color: #81a2be
+
+    .emphasis
+      font-style: italic
diff --git a/themes/theme/source/css/highlight/school-book.styl b/themes/theme/source/css/highlight/school-book.styl
new file mode 100644
index 00000000..eebfa821
--- /dev/null
+++ b/themes/theme/source/css/highlight/school-book.styl
@@ -0,0 +1,57 @@
+/*
+
+School Book style from goldblog.com.ua (c) Zaripov Yura <[email protected]>
+
+*/
+
+.highlight
+    background:#f6f6ae url(school-book.png)
+    border-top: solid 2px #d2e8b9
+    border-bottom: solid 1px #d2e8b9
+    .code
+        .keyword,
+        .selector-tag,
+        .literal
+            color:#005599
+            font-weight:normal
+
+        .highlight,
+        .subst
+            color: #3e5915
+
+        .string,
+        .title,
+        .section,
+        .type,
+        .symbol,
+        .bullet,
+        .attribute,
+        .built_in,
+        .builtin-name,
+        .addition,
+        .variable,
+        .template-tag,
+        .template-variable,
+        .link
+            color: #2c009f
+
+        .comment,
+        .quote,
+        .deletion,
+        .meta
+            color: #e60415
+
+        .keyword,
+        .selector-tag,
+        .literal,
+        .doctag,
+        .title,
+        .section,
+        .type,
+        .name,
+        .selector-id,
+        .strong
+            font-weight: normal
+
+        .emphasis
+            font-style: italic
diff --git a/themes/theme/source/css/highlight/solarized-dark.styl b/themes/theme/source/css/highlight/solarized-dark.styl
new file mode 100644
index 00000000..a4b3ff4a
--- /dev/null
+++ b/themes/theme/source/css/highlight/solarized-dark.styl
@@ -0,0 +1,45 @@
+/*
+   
+   Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <[email protected]>
+   
+*/
+.highlight
+  background: #002b36
+  color: #839496
+
+  .code
+    .comment, .quote
+      color: #586e75
+
+    /* Solarized Green */
+    .keyword, .selector-tag, .addition
+      color: #859900
+
+    /* Solarized Cyan */
+    .number, .string, .meta .meta-string, .literal, .doctag, .regexp
+      color: #2aa198
+
+    /* Solarized Blue */
+    .title, .section, .name, .selector-id, .selector-class
+      color: #268bd2
+
+    /* Solarized Yellow */
+    .attribute, .attr, .variable, .template-variable, .class .title, .type
+      color: #b58900
+
+    /* Solarized Orange */
+    .symbol, .bullet, .subst, .meta, .meta .keyword, .selector-attr, .selector-pseudo, .link
+      color: #cb4b16
+
+    /* Solarized Red */
+    .built_in, .deletion
+      color: #dc322f
+
+    .formula
+      background: #073642
+
+    .emphasis
+      font-style: italic
+
+    .strong
+      font-weight: normal
diff --git a/themes/theme/source/css/highlight/solarized-light.styl b/themes/theme/source/css/highlight/solarized-light.styl
new file mode 100644
index 00000000..3b8abdad
--- /dev/null
+++ b/themes/theme/source/css/highlight/solarized-light.styl
@@ -0,0 +1,71 @@
+/*
+
+Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <[email protected]>
+
+*/
+
+.highlight
+    color: #657b83
+    table
+        background: #fdf6e3
+    .code
+        .comment,
+        .quote
+            color: #93a1a1
+
+        /* Solarized Green */
+        .keyword,
+        .selector-tag,
+        .addition
+            color: #859900
+
+        /* Solarized Cyan */
+        .number,
+        .string,
+        .meta .meta-string,
+        .literal,
+        .doctag,
+        .regexp
+            color: #2aa198
+
+        /* Solarized Blue */
+        .title,
+        .section,
+        .name,
+        .selector-id,
+        .selector-class
+            color: #268bd2
+
+        /* Solarized Yellow */
+        .attribute,
+        .attr,
+        .variable,
+        .template-variable,
+        .class .title,
+        .type
+            color: #b58900
+
+        /* Solarized Orange */
+        .symbol,
+        .bullet,
+        .subst,
+        .meta,
+        .meta .keyword,
+        .selector-attr,
+        .selector-pseudo,
+        .link
+            color: #cb4b16
+
+        /* Solarized Red */
+        .built_in,
+        .deletion
+            color: #dc322f
+
+        .formula
+            background: #eee8d5
+
+        .emphasis
+            font-style: italic
+
+        .strong
+            font-weight: normal
diff --git a/themes/theme/source/css/highlight/tomorrow.styl b/themes/theme/source/css/highlight/tomorrow.styl
new file mode 100644
index 00000000..f83057aa
--- /dev/null
+++ b/themes/theme/source/css/highlight/tomorrow.styl
@@ -0,0 +1,56 @@
+.highlight
+    color: #4d4d4c
+    background: white
+    .code
+        /* Tomorrow Comment */
+        .comment,
+        .quote
+            color: #8e908c
+
+        /* Tomorrow Red */
+        .variable,
+        .template-variable,
+        .tag,
+        .name,
+        .selector-id,
+        .selector-class,
+        .regexp,
+        .deletion
+            color: #c82829
+
+        /* Tomorrow Orange */
+        .number,
+        .built_in,
+        .builtin-name,
+        .literal,
+        .type,
+        .params,
+        .meta,
+        .link
+            color: #f5871f
+
+        /* Tomorrow Yellow */
+        .attribute
+            color: #eab700
+
+        /* Tomorrow Green */
+        .string,
+        .symbol,
+        .bullet,
+        .addition
+            color: #718c00
+
+        /* Tomorrow Blue */
+        .title,
+        .section
+            color: #4271ae
+
+        /* Tomorrow Purple */
+        .keyword,
+        .selector-tag
+            color: #8959a8
+        .emphasis
+            font-style: italic
+
+        .strong
+            font-weight: normal
\ No newline at end of file
diff --git a/themes/theme/source/css/highlight/vs.styl b/themes/theme/source/css/highlight/vs.styl
new file mode 100644
index 00000000..940ec690
--- /dev/null
+++ b/themes/theme/source/css/highlight/vs.styl
@@ -0,0 +1,58 @@
+/*
+
+Visual Studio-like style based on original C# coloring by Jason Diamond <[email protected]>
+
+*/
+.highlight
+    display: block
+    overflow-x: auto
+    padding: 0.5em
+    background: white
+    color: black
+    .code
+        .comment,
+        .quote,
+        .variable
+            color: #008000
+
+        .keyword,
+        .selector-tag,
+        .built_in,
+        .name,
+        .tag
+            color: #00f
+
+        .string,
+        .title,
+        .section,
+        .attribute,
+        .literal,
+        .template-tag,
+        .template-variable,
+        .type,
+        .addition
+            color: #a31515
+
+        .deletion,
+        .selector-attr,
+        .selector-pseudo,
+        .meta
+            color: #2b91af
+
+        .doctag
+            color: #808080
+
+        .attr
+            color: #f00
+
+        .symbol,
+        .bullet,
+        .link
+            color: #00b0e8
+
+
+        .emphasis
+            font-style: italic
+
+        .strong
+            font-weight: normal
diff --git a/themes/theme/source/css/highlight/xcode.styl b/themes/theme/source/css/highlight/xcode.styl
new file mode 100644
index 00000000..94290cd7
--- /dev/null
+++ b/themes/theme/source/css/highlight/xcode.styl
@@ -0,0 +1,74 @@
+/*
+
+XCode style (c) Angel Garcia <[email protected]>
+
+*/
+
+.highlight
+    color: black
+    background: #fff
+    .code
+        .comment,
+        .quote
+            color: #006a00
+
+        .keyword,
+        .selector-tag,
+        .literal
+            color: #aa0d91
+
+        .name
+            color: #008
+
+        .variable,
+        .template-variable
+            color: #660
+
+        .string
+            color: #c41a16
+
+        .regexp,
+        .link
+            color: #080
+
+        .title,
+        .tag,
+        .symbol,
+        .bullet,
+        .number,
+        .meta
+            color: #1c00cf
+
+        .section,
+        .class .title,
+        .type,
+        .attr,
+        .built_in,
+        .builtin-name,
+        .params
+            color: #5c2699
+
+        .attribute,
+        .subst
+            color: #000
+
+        .formula
+            background-color: #eee
+            font-style: italic
+
+        .addition
+            background-color: #baeeba
+
+        .deletion
+            background-color: #ffc8bd
+
+        .selector-id,
+        .selector-class
+            color: #9b703f
+
+        .doctag,
+        .strong
+            font-weight: normal
+
+        .emphasis
+            font-style: italic
diff --git a/themes/theme/source/css/highlight/zenburn.styl b/themes/theme/source/css/highlight/zenburn.styl
new file mode 100644
index 00000000..941cd1f4
--- /dev/null
+++ b/themes/theme/source/css/highlight/zenburn.styl
@@ -0,0 +1,46 @@
+/*
+   
+   Zenburn style from voldmar.ru (c) Vladimir Epifanov <[email protected]>
+   based on dark.css by Ivan Sagalaev
+   
+*/
+.highlight
+  background: #3f3f3f
+  color: #dcdcdc
+
+  .code
+    .keyword, .selector-tag, .tag
+      color: #e3ceab
+
+    .template-tag
+      color: #dcdcdc
+
+    .number
+      color: #8cd0d3
+
+    .variable, .template-variable, .attribute
+      color: #efdcbc
+
+    .literal
+      color: #efefaf
+
+    .subst
+      color: #8f8f8f
+
+    .title, .name, .selector-id, .selector-class, .section, .type
+      color: #efef8f
+
+    .symbol, .bullet, .link
+      color: #dca3a3
+
+    .deletion, .string, .built_in, .builtin-name
+      color: #cc9393
+
+    .addition, .comment, .quote, .meta
+      color: #7f9f7f
+
+    .emphasis
+      font-style: italic
+
+    .strong
+      font-weight: normal
diff --git a/themes/theme/source/css/layout.styl b/themes/theme/source/css/layout.styl
new file mode 100644
index 00000000..9da0e03d
--- /dev/null
+++ b/themes/theme/source/css/layout.styl
@@ -0,0 +1,13 @@
+body
+  margin 0
+
+.wrapper
+  display flex
+  flex-direction column
+  min-height 100vh
+  padding-top $header-height
+
+.main 
+  flex-grow 1
+  margin 0
+  padding 0
\ No newline at end of file
diff --git a/themes/theme/source/css/media.styl b/themes/theme/source/css/media.styl
new file mode 100644
index 00000000..c0bd3879
--- /dev/null
+++ b/themes/theme/source/css/media.styl
@@ -0,0 +1,28 @@
+.flex-container
+    width 720px
+    margin 0 auto
+
+html
+    font-size 18px
+
+@media (max-width: 1600px)
+    html
+        font-size 18px
+    .flex-container
+        width 720px
+
+@media (max-width: 1200px)
+    html
+        font-size 18px
+    .flex-container
+        width 640px
+
+@media (max-width: 688px)
+    html
+        font-size 16px
+    
+    .flex-container
+        display block
+        width calc(100% - 32px)
+        padding-left 16px
+        padding-right 16px
diff --git a/themes/theme/source/css/motion.styl b/themes/theme/source/css/motion.styl
new file mode 100644
index 00000000..c6599e1f
--- /dev/null
+++ b/themes/theme/source/css/motion.styl
@@ -0,0 +1,34 @@
+underline-motion(n)
+    if n == 'link'
+        background-image linear-gradient($color-background, $color-background), linear-gradient($color-accent, $color-accent)
+        background-size 100% $line-third, 0% $line-third
+        background-position 100% 100%, 0 100%
+        background-repeat no-repeat, no-repeat
+        transition background-size $transition-duration ease
+
+        &:hover 
+            background-size 0 $line-third, 100% $line-third
+
+    else if n == 'underline-link'
+        padding-bottom $line-secondary
+        background-image linear-gradient($color-text-primary, $color-text-primary), linear-gradient($color-accent, $color-accent)
+        background-size 100% $line-third, 0 $line-secondary
+        background-position 100% 100%, 0 100%
+        background-repeat no-repeat, no-repeat
+        transition background-size $transition-duration ease
+
+        &:hover 
+            background-size 100% $line-third, 100% $line-secondary
+
+    else if n == 'header'
+        &:after
+            content ""
+            transition width $transition-duration ease
+            position absolute
+            left 0
+            bottom 0
+            width 0
+            border-bottom solid $line-third $color-accent
+
+        &:hover:after
+            width 100%
\ No newline at end of file
diff --git a/themes/theme/source/css/normalize.styl b/themes/theme/source/css/normalize.styl
new file mode 100644
index 00000000..a4d01c37
--- /dev/null
+++ b/themes/theme/source/css/normalize.styl
@@ -0,0 +1,308 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html
+  line-height 1.15 /* 1 */
+  -webkit-text-size-adjust 100% /* 2 */
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body
+  margin 0
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1
+  font-size 2em
+  margin 0.67em 0
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr
+  box-sizing content-box /* 1 */
+  height 0 /* 1 */
+  overflow visible /* 2 */
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre
+  font-family monospace, monospace /* 1 */
+  font-size 1em /* 2 */
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a
+  background-color transparent
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title]
+  border-bottom none /* 1 */
+  text-decoration underline /* 2 */
+  text-decoration underline dotted /* 2 */
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong
+  font-weight 400
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp
+  font-family monospace, monospace /* 1 */
+  font-size 1em /* 2 */
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small
+  font-size 80%
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup
+  font-size 75%
+  line-height 0
+  position relative
+  vertical-align baseline
+
+sub
+  bottom -0.25em
+
+sup
+  top -0.5em
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img
+  border-style none
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea
+  font-family inherit /* 1 */
+  font-size 100% /* 1 */
+  line-height 1.15 /* 1 */
+  margin 0 /* 2 */
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input /* 1 */
+  overflow visible
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select /* 1 */
+  text-transform none
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"]
+  -webkit-appearance button
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner
+  border-style none
+  padding 0
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]-moz-focusring,
+[type="reset"]-moz-focusring,
+[type="submit"]-moz-focusring
+  outline 1px dotted ButtonText
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset
+  padding 0.35em 0.75em 0.625em
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend
+  box-sizing border-box /* 1 */
+  color inherit /* 2 */
+  display table /* 1 */
+  max-width 100% /* 1 */
+  padding 0 /* 3 */
+  white-space normal /* 1 */
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress
+  vertical-align baseline
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea
+  overflow auto
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"]
+  box-sizing border-box /* 1 */
+  padding 0 /* 2 */
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button
+  height auto
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"]
+  -webkit-appearance textfield /* 1 */
+  outline-offset -2px /* 2 */
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration
+  -webkit-appearance none
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button
+  -webkit-appearance button /* 1 */
+  font inherit /* 2 */
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details
+  display block
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary
+  display list-item
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template
+  display none
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden]
+  display none
\ No newline at end of file
diff --git a/themes/theme/source/css/page/search.styl b/themes/theme/source/css/page/search.styl
new file mode 100644
index 00000000..88233cef
--- /dev/null
+++ b/themes/theme/source/css/page/search.styl
@@ -0,0 +1,65 @@
+// Search page styles
+
+.search-page
+  max-width 720px
+  margin 0 auto
+  padding $margin-l-0 $margin-m-1
+
+.search-input-container
+  margin-bottom $margin-l-0
+
+.search-input
+  width 100%
+  padding $margin-m-1 $margin-m-2
+  font-size $font-size-body
+  border $line-third solid $color-border
+  border-radius $margin-s-2
+  background $color-background
+  font-family $font-family
+  font-weight 400
+
+  &:focus
+    outline none
+    border-color $color-accent
+
+.search-result-container
+  min-height 200px
+
+.search-result-message
+  color $color-text-secondary
+  padding $margin-l-0 0
+  text-align center
+
+.search-result-list
+  list-style none
+  padding 0
+  margin 0
+
+.search-result-item
+  padding $margin-m-1 0
+  border-bottom $line-third solid $color-border
+
+  &:last-child
+    border-bottom none
+
+  // LocalSearch generates HTML with these classes
+  .search-result-title
+    margin-bottom $margin-s-2
+    font-size $font-size-heading-h4
+
+    a
+      color $color-accent
+      text-decoration none
+
+      &:hover
+        text-decoration underline
+
+  .search-result
+    text-style(body-default)
+    color $color-text-primary
+    margin-top $margin-s-2
+    margin-bottom 0
+
+  mark
+    color $color-text-primary
+    background-color $color-search-marker
diff --git a/themes/theme/source/css/partials/footer.styl b/themes/theme/source/css/partials/footer.styl
new file mode 100644
index 00000000..5819da88
--- /dev/null
+++ b/themes/theme/source/css/partials/footer.styl
@@ -0,0 +1,20 @@
+.footer
+    margin-top auto
+    border-top 1px solid $color-border
+    text-style(footer)
+
+    .footer-text
+        margin-top $margin-m-0
+        margin-bottom $margin-m-0
+
+@media (max-width: 688px)
+    .footer
+        margin-top $margin-l-0
+        
+        .footer-text
+            font-size 10*$px
+            margin-top $margin-s-1
+            margin-bottom $margin-s-1
+        
+
+
diff --git a/themes/theme/source/css/partials/header.styl b/themes/theme/source/css/partials/header.styl
new file mode 100644
index 00000000..545743f3
--- /dev/null
+++ b/themes/theme/source/css/partials/header.styl
@@ -0,0 +1,121 @@
+.header
+    position fixed
+    top 0
+    left 0
+    right 0
+    z-index 100
+    background $color-glass
+    backdrop-filter blur(12px)
+    -webkit-backdrop-filter blur(12px)
+    border-bottom 1px solid $color-border
+    text-style(header)
+
+@supports not (backdrop-filter: blur(12px))
+    .header
+        background $color-background
+
+@media (max-width: 688px)
+    @supports not (backdrop-filter: blur(12px))
+        .header-inner .site-nav .menu-list
+            background $color-background
+
+.header-inner
+    display flex
+    flex-wrap nowrap
+    align-items center
+    height $header-height
+
+    #menu-btn
+        display none
+
+    .site-nav
+        flex-grow 1
+        overflow-x auto
+
+.site-brand-container
+    a
+        font-weight 400
+        color $color-text-primary
+
+.menu-list
+    text-align right
+    display flex
+    
+    &:before
+        content ""
+        flex-grow 1
+
+.menu-item
+    position relative
+    margin-left $margin-l-0
+    underline-motion(header)
+
+.menu-item-active:after
+    border-bottom solid $line-secondary $color-accent
+    width 100%
+
+.logo-img
+    max-height $line-height-heading-h1
+    width auto
+    max-width 100%
+    display flex
+
+@media (max-width: 688px)
+    .header
+        overflow visible
+    
+    .header-inner
+        flex-wrap wrap
+        align-items center
+        height $header-height
+        padding-top 0
+        padding-bottom 0
+        
+        #menu-btn
+            display flex !important
+            align-items center
+            justify-content flex-end
+            width 50%
+            height 100%
+            cursor pointer
+            color $color-text-primary
+            transition color $transition-duration ease
+            
+            &:hover
+                color $color-accent
+
+        .site-brand-container
+            display flex
+            align-items center
+            width 50%
+            height 100%
+            
+        .site-nav
+            width 100%
+            
+            .menu-list
+                display flex
+                flex-direction column
+                max-height 0
+                overflow hidden
+                margin-top 0
+                background $color-glass
+                backdrop-filter blur(12px)
+                -webkit-backdrop-filter blur(12px)
+                border-top 1px solid $color-border
+                transition max-height 300ms ease-out
+                text-align left
+                
+                &.active
+                    max-height 400px
+                
+                .menu-item
+                    margin 0
+                    padding $margin-m-0 $margin-m-1
+                    border-bottom 1px solid $color-border
+                    
+                    &:last-child
+                        border-bottom none
+                    
+                    a
+                        display block
\ No newline at end of file
diff --git a/themes/theme/source/css/partials/paginator.styl b/themes/theme/source/css/partials/paginator.styl
new file mode 100644
index 00000000..08009372
--- /dev/null
+++ b/themes/theme/source/css/partials/paginator.styl
@@ -0,0 +1,28 @@
+.paginator
+    margin-top $margin-l-1
+
+.pagination
+    margin-top $margin-m-1
+    text-style(header)
+    display flex
+
+    &:before
+        content ""
+        flex-grow 1
+
+.page-number
+    position relative
+    margin-left $margin-l-0
+    underline-motion(header)
+
+.pagination .current:after
+    border-bottom solid $line-secondary $color-accent
+    width 100%
+
+.pagination .space
+    margin-left $margin-l-0
+
+@media (max-width: 688px)
+    .paginator
+        margin-top $margin-m-1
+        margin-bottom $margin-m-1
\ No newline at end of file
diff --git a/themes/theme/source/css/partials/post_gallery.styl b/themes/theme/source/css/partials/post_gallery.styl
new file mode 100644
index 00000000..ca953848
--- /dev/null
+++ b/themes/theme/source/css/partials/post_gallery.styl
@@ -0,0 +1,39 @@
+.post-gallery-list
+    .h-line-secondary
+        margin-top $margin-m-1
+
+    .h-line-secondary:last-child
+        display none
+
+.post-gallery-item
+    display flex
+    margin-top $margin-l-1
+    margin-bottom $margin-m-0
+    .post-info
+        margin-right $margin-l-0
+        width 50%
+        display flex
+        flex-direction column
+
+        .post-title
+            margin-bottom $margin-m-1
+            text-style(heading-h1)
+
+        .post-date
+            text-style(post-date)
+
+    .post-img
+        width 50%
+
+    a 
+        underline-motion(link)
+    
+@media (max-width: 480px)
+    .post-gallery-item
+        flex-wrap wrap
+        .post-info
+            width 100%
+        .post-img
+            width 100%
+            margin-top $margin-m-1
+
diff --git a/themes/theme/source/css/partials/post_list.styl b/themes/theme/source/css/partials/post_list.styl
new file mode 100644
index 00000000..c5ea22cc
--- /dev/null
+++ b/themes/theme/source/css/partials/post_list.styl
@@ -0,0 +1,39 @@
+.post-list
+
+    a 
+        underline-motion(link)
+
+.year-title
+    margin-top $margin-l-1
+    margin-bottom $margin-m-1
+    text-style(year-title)
+
+.post-list-item
+    display flex
+    flex-wrap nowrap
+    margin-top $margin-m-0
+    align-items top
+
+    .post-title
+        flex-grow 1
+        text-style(body-default)
+
+    .post-date
+        margin-left $margin-l-0
+        min-width 8rem
+        text-align right
+        text-style(post-date)
+        line-height $line-height-body
+        color $color-text-secondary
+
+@media (max-width: 480px)
+    .post-list-item
+        flex-wrap wrap
+        .post-title
+            width 100%
+
+        .post-date
+            margin-left 0
+            width 100%
+            text-align left
+
diff --git a/themes/theme/source/css/partials/profile.styl b/themes/theme/source/css/partials/profile.styl
new file mode 100644
index 00000000..44025cdb
--- /dev/null
+++ b/themes/theme/source/css/partials/profile.styl
@@ -0,0 +1,69 @@
+.profile 
+    margin-top 20vh
+    display flex
+    flex-direction row-reverse
+    align-items center
+    
+    .profile-content 
+        width 50%
+        margin 0 $margin-l-0 0 0
+
+        .profile-title
+            margin-top 0
+            margin-bottom $margin-m-0
+            
+        .profile-body
+            margin-top 0
+            margin-bottom $margin-m-1
+            color $color-text-secondary
+
+        .profile-title
+            text-style(heading-h1)
+
+        .profile-body
+            text-style(body-default)
+
+        .profile-link
+            margin-top 0
+            margin-bottom $margin-m-1
+            font-size 15*$px
+            
+            a
+                text-decoration underline
+                text-underline-offset 3px
+                transition color $transition-duration ease
+                
+                &:hover
+                    color $color-accent
+            
+
+    .profile-image
+        width 50%
+        display flex
+        align-items center
+        justify-content center
+        
+        img
+            max-width 100%
+            max-height 35vh
+            object-fit contain
+
+@media (max-width: 480px)
+    .profile
+        flex-wrap wrap
+        align-items flex-start
+        margin-top $margin-l-0
+        
+        .profile-content
+            width 100%
+            margin-top $margin-m-0
+            
+            .profile-link
+                font-size 14*$px
+            
+        .profile-image
+            width 100%
+            
+            img
+                max-height 25vh
+            
\ No newline at end of file
diff --git a/themes/theme/source/css/post/code.styl b/themes/theme/source/css/post/code.styl
new file mode 100644
index 00000000..f641f8d2
--- /dev/null
+++ b/themes/theme/source/css/post/code.styl
@@ -0,0 +1,97 @@
+// 统一字体权重
+font-weight-normal()
+    font-weight 400
+
+// 代码块基础样式
+code
+    text-style(code-highlight)
+    font-weight 400
+
+.code
+    pre
+        span
+            text-style(code-default)
+            font-weight 400
+
+// 代码高亮区域 - 设置整体背景色
+.highlight
+    margin 0 0 $margin-m-2 0
+    overflow-x auto
+    border 1px solid $color-border
+    border-radius $margin-s-1
+    // 代码块背景色
+    background-color $color-code-background
+
+    .line
+        width $margin-l-2
+
+    table
+        margin 0
+        border-spacing 0
+        border none
+        // 表格继承背景色
+        background-color transparent
+
+    td.code
+        padding 0 $margin-s-1 0 $margin-m-0
+
+    pre
+        font-weight 400
+        background-color transparent
+
+// 行号列 - 与代码块背景色保持一致
+td.gutter
+    width $margin-l-0
+    padding 0 $margin-m-0
+    vertical-align top
+    position -webkit-sticky
+    position sticky
+    left 0
+    // 与代码块背景色一致
+    background-color $color-code-background
+    // 添加右边框分隔
+    border-right 1px solid $color-border
+    // 确保层级正确
+    z-index 1
+
+    pre
+        margin 0
+        color $color-code-marker
+        font-size $font-size-code
+        font-weight 400
+        background-color transparent
+
+// 代码列
+td.code
+    vertical-align top
+    background-color transparent
+
+    pre
+        margin 0
+        font-weight 400
+        background-color transparent
+
+// 所有 pre 标签
+pre
+    margin 0
+    overflow-x auto
+    font-weight 400
+
+// 移除内联代码背景（在代码块中不需要）
+.highlight code
+    background-color transparent
+    padding 0
+
+@media (max-width: 688px)
+    code
+        font-size 12*$px
+
+    .highlight
+        pre
+            font-size 12*$px
+
+        td.gutter
+            width $margin-m-2
+            padding-right $margin-s-2
+            font-size 11*$px
+            background-color $color-code-background
diff --git a/themes/theme/source/css/post/media.styl b/themes/theme/source/css/post/media.styl
new file mode 100644
index 00000000..3d49010f
--- /dev/null
+++ b/themes/theme/source/css/post/media.styl
@@ -0,0 +1,17 @@
+img
+    width 100%
+    height auto
+
+// fix 16:9 ratio
+.video-container 
+    width 100%
+    padding-top 56.25%
+    position relative
+
+.video-container>iframe
+    position absolute
+    top 0
+    left 0
+    width 100%
+    height 100%
+
diff --git a/themes/theme/source/css/post/mermaid.styl b/themes/theme/source/css/post/mermaid.styl
new file mode 100644
index 00000000..aae47ec5
--- /dev/null
+++ b/themes/theme/source/css/post/mermaid.styl
@@ -0,0 +1,96 @@
+// Mermaid 图表样式
+
+// 基础容器样式
+.mermaid
+    display flex
+    justify-content center
+    align-items center
+    margin $margin-l-0 auto
+    padding $margin-m-2
+    background $color-text-fourth
+    border $line-third solid $color-border
+    border-radius $margin-s-2
+    cursor pointer
+    transition all $transition-duration ease
+    max-width 100%
+    overflow auto
+    position relative
+
+    // 悬停效果
+    &:hover
+        border-color $color-accent
+        box-shadow 0 4*$px 12*$px rgba(0, 0, 0, 0.1)
+
+    // 提示文字
+    &::after
+        content "点击放大"
+        position absolute
+        bottom $margin-s-2
+        right $margin-s-2
+        font-size $font-size-post-tag
+        color $color-text-secondary
+        opacity 0
+        transition opacity $transition-duration
+
+    &:hover::after
+        opacity 1
+
+    // SVG 图表样式
+    svg
+        max-width 100%
+        height auto
+
+// Mermaid 放大模态框
+.mermaid-modal
+    display none
+    position fixed
+    top 0
+    left 0
+    width 100%
+    height 100%
+    background $color-overlay
+    z-index 10000
+    justify-content center
+    align-items center
+    padding $margin-primary
+
+    &.active
+        display flex
+
+    // 关闭按钮
+    .mermaid-close
+        position absolute
+        top $margin-m-2
+        right $margin-m-2
+        width 48*$px
+        height 48*$px
+        background $color-background
+        border $line-third solid $color-border
+        border-radius 50%
+        cursor pointer
+        display flex
+        justify-content center
+        align-items center
+        font-size 24*$px
+        color $color-text-primary
+        transition all $transition-duration
+
+        &:hover
+            background $color-accent
+            color $color-background
+            border-color $color-accent
+
+    // 放大后的图表容器
+    .mermaid-content
+        max-width 95vw
+        max-height 90vh
+        overflow auto
+        background $color-background
+        padding $margin-l-0
+        border-radius $margin-s-2
+        box-shadow 0 8*$px 32*$px rgba(0, 0, 0, 0.3)
+
+        svg
+            display block
+            max-width none
+            max-height none
diff --git a/themes/theme/source/css/post/post_comment.styl b/themes/theme/source/css/post/post_comment.styl
new file mode 100644
index 00000000..b027897a
--- /dev/null
+++ b/themes/theme/source/css/post/post_comment.styl
@@ -0,0 +1,12 @@
+.post-comment
+    margin-top $margin-l-1
+
+.v[data-class="v"] .vsys
+    display none!important
+
+.vcontent
+    p
+        margin-top 0!important
+        font-size $font-size-comment!important
+        color $color-text-primary!important
+
diff --git a/themes/theme/source/css/post/post_content.styl b/themes/theme/source/css/post/post_content.styl
new file mode 100644
index 00000000..701f19e3
--- /dev/null
+++ b/themes/theme/source/css/post/post_content.styl
@@ -0,0 +1,104 @@
+.post-content 
+    margin-top $margin-l-1
+
+h1, h2, h3, h4, h5, h6
+    margin-top $margin-l-0
+    margin-bottom $margin-m-1
+
+h1
+    text-style(heading-h1)
+
+h2
+    text-style(heading-h2)
+
+h3
+    text-style(heading-h3)
+
+h4
+    text-style(heading-h4)
+
+h5
+    text-style(heading-h5)
+
+h6
+    text-style(heading-h6)
+    
+p
+    text-style(body-default)
+
+strong
+    text-style(body-bold)
+
+em
+    text-style(body-italic)
+
+del 
+    text-style(body-delete)
+
+.post-content
+    a 
+        underline-motion(underline-link)
+
+blockquote
+    margin-left 0
+    margin-right 0
+    margin-top $margin-m-2
+    border-left $margin-s-2 solid $color-text-secondary
+
+    p
+        margin-left $margin-m-2
+        margin-top 0
+        margin-bottom 0
+        margin-right $margin-m-2
+        padding-top $margin-m-0
+        padding-bottom $margin-m-0
+
+    blockquote
+        margin-left $margin-m-2
+        margin-top 0
+        margin-bottom 0
+
+.post-content
+    li
+        text-style(body-default)
+        margin-top $margin-m-0
+
+    ol 
+        padding-left $margin-l-0
+        margin-left $margin-m-1
+        margin-right $margin-m-1
+        margin-top $margin-m-2
+
+        ol
+            margin-top $margin-m-0
+
+    ul 
+        padding-left $margin-l-0
+        margin-left $margin-m-1
+        margin-right $margin-m-1
+        margin-top $margin-m-2
+
+        ul 
+            margin-top $margin-m-0
+
+        li 
+            list-style-type disc
+            
+
+    .task-list
+        padding-left 0
+        .task-list-item 
+            list-style none
+    
+dl 
+    dt 
+        padding $margin-m-0 0
+        text-style(body-bold)
+
+    dt::after
+        content " :"
+
+    dd 
+        margin 0
+
+            
diff --git a/themes/theme/source/css/post/post_footer.styl b/themes/theme/source/css/post/post_footer.styl
new file mode 100644
index 00000000..65782aec
--- /dev/null
+++ b/themes/theme/source/css/post/post_footer.styl
@@ -0,0 +1,29 @@
+.post-footer
+    margin-top $margin-l-1
+
+    a 
+        underline-motion(link)
+
+.post-nav
+    margin-top $margin-m-1
+    display flex
+    flex-wrap wrap
+    text-style(header)
+
+    .prev-item
+        display flex
+        text-align left
+        min-width 50%
+        align-items center
+        .arrow-left
+            margin-right $margin-s-2
+
+    .next-item
+        display flex
+        flex-direction row-reverse
+        text-align right
+        min-width 50%
+        align-items center
+        .arrow-right
+            margin-left $margin-s-2
+        
\ No newline at end of file
diff --git a/themes/theme/source/css/post/post_head.styl b/themes/theme/source/css/post/post_head.styl
new file mode 100644
index 00000000..32f4b47b
--- /dev/null
+++ b/themes/theme/source/css/post/post_head.styl
@@ -0,0 +1,18 @@
+.post-head
+    margin-top $margin-l-1
+    
+    .post-info
+        width 100%
+        display flex
+        flex-direction column
+
+        .post-title
+            margin-bottom $margin-m-1
+            text-style(heading-h1)
+
+        .post-date
+            text-style(post-date)
+    
+    .post-img
+        margin-top $margin-l-1
+
diff --git a/themes/theme/source/css/post/table.styl b/themes/theme/source/css/post/table.styl
new file mode 100644
index 00000000..405e2433
--- /dev/null
+++ b/themes/theme/source/css/post/table.styl
@@ -0,0 +1,36 @@
+.post-content
+    table
+        border $color-text-primary solid $line-third 
+        width 100%
+        text-align left
+        border-collapse collapse
+        table-layout fixed
+
+        td, th
+            padding $margin-m-1
+
+        th
+            font-weight 400
+
+        td
+            font-weight 400
+
+        table, tboby, tr, td
+            background-color inherit
+
+.highlight>table
+    width auto
+    min-width fit-content
+    border none
+    
+    td
+        padding 0
+        border none
+
+@media (max-width: 480px)
+    .block-table
+        display block
+        overflow-x auto
+            
+
+            
\ No newline at end of file
diff --git a/themes/theme/source/css/post/tag_plugin.styl b/themes/theme/source/css/post/tag_plugin.styl
new file mode 100644
index 00000000..9a1a7d94
--- /dev/null
+++ b/themes/theme/source/css/post/tag_plugin.styl
@@ -0,0 +1,48 @@
+.gist
+    td
+        border 0
+
+    a 
+        color $color-text-secondary
+        background-image none!important
+
+blockquote>footer
+    margin 0 $margin-m-2
+    padding $margin-m-0 0
+    font-size $font-size-blockquote-footer
+    color $color-text-secondary
+
+    cite
+        margin-left $margin-m-0
+
+    cite::before
+        content " — "
+
+    strong
+        color $color-text-secondary
+        font-size $font-size-blockquote-footer
+        
+    a 
+        color $color-text-secondary
+        background-image none!important
+    
+
+figcaption
+    font-family monospace
+    font-size $font-size-blockquote-footer
+    padding $margin-m-0 0
+    color $color-text-secondary
+
+    span
+        padding-right $margin-m-0
+
+    a 
+        color $color-text-secondary
+        background-image none!important
+
+blockquote.pullquote.left
+    float left
+
+blockquote.pullquote.right
+    float right
+    
\ No newline at end of file
diff --git a/themes/theme/source/css/post/task_list.styl b/themes/theme/source/css/post/task_list.styl
new file mode 100644
index 00000000..ea5dabca
--- /dev/null
+++ b/themes/theme/source/css/post/task_list.styl
@@ -0,0 +1,43 @@
+ul 
+    li.task-list-item
+        position relative
+
+    li.task-list-item>input[type=checkbox]
+        list-style none
+        background none
+        appearance none
+        -webkit-appearance none
+        -moz-appearance none;
+        width $margin-l-0
+        display inline-block
+        border none
+        opacity 1
+
+    li.task-list-item>input[type=checkbox][checked]:before 
+        background $color-text-primary
+        -webkit-mask-image url('../icon/checkbox-checked.svg')
+        -webkit-mask-position center center
+        mask-image url('../icon/checkbox-checked.svg')
+        -webkit-mask-repeat no-repeat
+
+    li.task-list-item>input[type=checkbox]:before 
+        background $color-text-primary
+        -webkit-mask-image url('../icon/checkbox-default.svg')
+        -webkit-mask-position center center
+        mask-image url('../icon/checkbox-default.svg')
+        -webkit-mask-repeat no-repeat
+        
+    li.task-list-item>input[type=checkbox]:after, li.task-list-item>input[type=checkbox]:before
+        display block
+        position absolute
+        content "X"
+        color transparent
+        left 0
+        top 0
+        width $icon-size
+        height $line-height-body
+        background-size contain
+        background-repeat no-repeat
+        background-position-x 0
+        background-position-y center
+        --webkit-touch-callout none
\ No newline at end of file
diff --git a/themes/theme/source/css/style.styl b/themes/theme/source/css/style.styl
new file mode 100644
index 00000000..97bd4cb9
--- /dev/null
+++ b/themes/theme/source/css/style.styl
@@ -0,0 +1,47 @@
+// media
+@import "media.styl"
+
+// variable & init
+@import "variable.styl"
+@import "normalize.styl"
+
+// color mode
+@import "color.styl"
+
+// font
+@import "font-slices.styl"
+@import "font.styl"
+
+// structure style
+@import "layout.styl"
+@import "base.styl"
+
+// motion
+@import "motion.styl"
+
+// partials
+@import "partials/header.styl"
+@import "partials/footer.styl"
+@import "partials/post_list.styl"
+@import "partials/post_gallery.styl"
+@import "partials/paginator.styl"
+@import "partials/profile.styl"
+
+// pages
+@import "page/search.styl"
+
+// post
+@import "post/post_content.styl"
+@import "post/post_head.styl"
+@import "post/post_footer.styl"
+@import "post/post_comment.styl"
+@import "post/code.styl"
+@import "post/table.styl"
+@import "post/media.styl"
+@import "post/tag_plugin.styl"
+@import "post/task_list.styl"
+@import "post/mermaid.styl"
+
+// component
+@import "component/icon.styl"
+@import "component/component.styl"
diff --git a/themes/theme/source/css/variable.styl b/themes/theme/source/css/variable.styl
new file mode 100644
index 00000000..f8af5332
--- /dev/null
+++ b/themes/theme/source/css/variable.styl
@@ -0,0 +1,72 @@
+// PIXEL
+$px = 0.0625rem
+
+$line-primary = 4px
+$line-secondary = 2px
+$line-third = 1px
+
+$icon-size = 20*$px
+
+$margin-primary = 48*$px
+$margin-l-2 = 40*$px
+$margin-l-1 = 32*$px
+$margin-l-0 = 24*$px
+$margin-m-2 = 16*$px
+$margin-m-1 = 12*$px
+$margin-m-0 = 8*$px
+$margin-s-2 = 4*$px
+$margin-s-1 = 2*$px
+$margin-s-0 = 1*$px
+
+$font-family = 'GoogleSansCode', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
+
+$font-weight-light = 300
+$font-weight-regular = 400
+$font-weight-medium = 500
+$font-weight-semibold = 600
+$font-weight-bold = 700
+
+$font-size-header = 13*$px
+$font-size-footer = 11*$px
+
+$font-size-heading-h1 = 26*$px
+$font-size-heading-h2 = 22*$px
+$font-size-heading-h3 = 17*$px
+$font-size-heading-h4 = 15*$px
+$font-size-heading-h5 = 14*$px
+$font-size-heading-h6 = 14*$px
+
+$font-size-body = 15*$px
+
+$font-size-code = 13*$px
+
+$font-size-comment = 13*$px
+
+$font-size-post-date = 13*$px
+$font-size-year-title = 26*$px
+$font-size-post-tag = 11*$px
+
+$font-size-blockquote-footer = 11*$px
+
+$line-height-header = 18*$px
+$line-height-footer = 18*$px
+
+$line-height-heading-h1 = 32*$px
+$line-height-heading-h2 = 28*$px
+$line-height-heading-h3 = 22*$px
+$line-height-heading-h4 = 20*$px
+$line-height-heading-h5 = 18*$px
+$line-height-heading-h6 = 18*$px
+
+$line-height-body = 22*$px
+
+$line-height-code = 15*$px
+
+$line-height-post-date = 18*$px
+$line-height-year-title = 32*$px
+$line-height-post-tag = 14*$px
+
+$transition-duration = 200ms
+$header-height = 48*$px
+
+
diff --git a/themes/theme/source/favicon.ico b/themes/theme/source/favicon.ico
new file mode 100644
index 00000000..a938655c
--- /dev/null
+++ b/themes/theme/source/favicon.ico
diff --git a/themes/theme/source/fonts/CarroisSong.ttf b/themes/theme/source/fonts/CarroisSong.ttf
new file mode 100644
index 00000000..9105c1a8
--- /dev/null
+++ b/themes/theme/source/fonts/CarroisSong.ttf
diff --git a/themes/theme/source/fonts/cjk-common.woff2 b/themes/theme/source/fonts/cjk-common.woff2
new file mode 100644
index 00000000..3140f04a
--- /dev/null
+++ b/themes/theme/source/fonts/cjk-common.woff2
diff --git a/themes/theme/source/fonts/cjk-ext.woff2 b/themes/theme/source/fonts/cjk-ext.woff2
new file mode 100644
index 00000000..6e1b840f
--- /dev/null
+++ b/themes/theme/source/fonts/cjk-ext.woff2
diff --git a/themes/theme/source/fonts/latin-base.woff2 b/themes/theme/source/fonts/latin-base.woff2
new file mode 100644
index 00000000..6e71c681
--- /dev/null
+++ b/themes/theme/source/fonts/latin-base.woff2
diff --git a/themes/theme/source/fonts/latin-ext.woff2 b/themes/theme/source/fonts/latin-ext.woff2
new file mode 100644
index 00000000..78abb265
--- /dev/null
+++ b/themes/theme/source/fonts/latin-ext.woff2
diff --git a/themes/theme/source/fonts/src/GoogleSansCode-Regular.ttf b/themes/theme/source/fonts/src/GoogleSansCode-Regular.ttf
new file mode 100644
index 00000000..db4d27d3
--- /dev/null
+++ b/themes/theme/source/fonts/src/GoogleSansCode-Regular.ttf
diff --git a/themes/theme/source/fonts/symbols.woff2 b/themes/theme/source/fonts/symbols.woff2
new file mode 100644
index 00000000..59bc5d8d
--- /dev/null
+++ b/themes/theme/source/fonts/symbols.woff2
diff --git a/themes/theme/source/icon/arrow-left.svg b/themes/theme/source/icon/arrow-left.svg
new file mode 100644
index 00000000..9c828592
--- /dev/null
+++ b/themes/theme/source/icon/arrow-left.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/left-arrow</title>
+    <g id="icon/left-arrow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M9,17 C9.88426888,17 10.7262647,16.8655579 11.5259875,16.5966736 C12.3257103,16.3277893 13.0589051,15.9487179 13.7255717,15.4594595 C14.3922384,14.970201 14.970201,14.3922384 15.4594595,13.7255717 C15.9487179,13.0589051 16.3277893,12.3257103 16.5966736,11.5259875 C16.8655579,10.7262647 17,9.88426888 17,9 C17,8.11573112 16.8655579,7.27373527 16.5966736,6.47401247 C16.3277893,5.67428967 15.9487179,4.94109494 15.4594595,4.27442827 C14.970201,3.60776161 14.3922384,3.02979903 13.7255717,2.54054054 C13.0589051,2.05128205 12.3257103,1.67221067 11.5259875,1.4033264 C10.7262647,1.13444213 9.88426888,1 9,1 C8.11573112,1 7.27373527,1.13444213 6.47401247,1.4033264 C5.67428967,1.67221067 4.94109494,2.05128205 4.27442827,2.54054054 C3.60776161,3.02979903 3.02979903,3.60776161 2.54054054,4.27442827 C2.05128205,4.94109494 1.67221067,5.67428967 1.4033264,6.47401247 C1.13444213,7.27373527 1,8.11573112 1,9 C1,9.88426888 1.13444213,10.7262647 1.4033264,11.5259875 C1.67221067,12.3257103 2.05128205,13.0589051 2.54054054,13.7255717 C3.02979903,14.3922384 3.60776161,14.970201 4.27442827,15.4594595 C4.94109494,15.9487179 5.67428967,16.3277893 6.47401247,16.5966736 C7.27373527,16.8655579 8.11573112,17 9,17 Z M9,16.035343 C8.22106722,16.035343 7.48024948,15.9168399 6.77754678,15.6798337 C6.07484407,15.4428274 5.43035343,15.1088011 4.84407484,14.6777547 C4.25779626,14.2467082 3.74913375,13.7380457 3.31808732,13.1517672 C2.88704089,12.5654886 2.55370755,11.9209979 2.31808732,11.2182952 C2.08246708,10.5155925 1.96465696,9.77616078 1.96465696,9 C1.96465696,8.22106722 2.08246708,7.48024948 2.31808732,6.77754678 C2.55370755,6.07484407 2.88704089,5.43035343 3.31808732,4.84407484 C3.74913375,4.25779626 4.25779626,3.74913375 4.84407484,3.31808732 C5.43035343,2.88704089 6.07484407,2.55370755 6.77754678,2.31808732 C7.48024948,2.08246708 8.22106722,1.96465696 9,1.96465696 C9.77893278,1.96465696 10.5197505,2.08246708 11.2224532,2.31808732 C11.9251559,2.55370755 12.5696466,2.88704089 13.1559252,3.31808732 C13.7422037,3.74913375 14.2508663,4.25779626 14.6819127,4.84407484 C15.1129591,5.43035343 15.4462924,6.07484407 15.6819127,6.77754678 C15.9175329,7.48024948 16.035343,8.22106722 16.035343,9 C16.035343,9.77616078 15.9175329,10.5155925 15.6819127,11.2182952 C15.4462924,11.9209979 15.1129591,12.5654886 14.6819127,13.1517672 C14.2508663,13.7380457 13.7422037,14.2467082 13.1559252,14.6777547 C12.5696466,15.1088011 11.9251559,15.4428274 11.2224532,15.6798337 C10.5197505,15.9168399 9.77893278,16.035343 9,16.035343 Z M8.45114345,12.7255717 L9.09147609,12.0852391 L6.45530146,9.45738046 L13.2827443,9.45738046 L13.2827443,8.54261954 L6.45530146,8.54261954 L9.09147609,5.90644491 L8.45114345,5.27442827 L4.72557173,9 L8.45114345,12.7255717 Z" id="" fill="#000000" fill-rule="nonzero"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/themes/theme/source/icon/arrow-right.svg b/themes/theme/source/icon/arrow-right.svg
new file mode 100644
index 00000000..7850ca44
--- /dev/null
+++ b/themes/theme/source/icon/arrow-right.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/right-arrow</title>
+    <g id="icon/right-arrow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M9,17 C9.88426888,17 10.7262647,16.8655579 11.5259875,16.5966736 C12.3257103,16.3277893 13.0589051,15.9487179 13.7255717,15.4594595 C14.3922384,14.970201 14.970201,14.3922384 15.4594595,13.7255717 C15.9487179,13.0589051 16.3277893,12.3257103 16.5966736,11.5259875 C16.8655579,10.7262647 17,9.88426888 17,9 C17,8.11573112 16.8655579,7.27373527 16.5966736,6.47401247 C16.3277893,5.67428967 15.9487179,4.94109494 15.4594595,4.27442827 C14.970201,3.60776161 14.3922384,3.02979903 13.7255717,2.54054054 C13.0589051,2.05128205 12.3257103,1.67221067 11.5259875,1.4033264 C10.7262647,1.13444213 9.88426888,1 9,1 C8.11573112,1 7.27373527,1.13444213 6.47401247,1.4033264 C5.67428967,1.67221067 4.94109494,2.05128205 4.27442827,2.54054054 C3.60776161,3.02979903 3.02979903,3.60776161 2.54054054,4.27442827 C2.05128205,4.94109494 1.67221067,5.67428967 1.4033264,6.47401247 C1.13444213,7.27373527 1,8.11573112 1,9 C1,9.88426888 1.13444213,10.7262647 1.4033264,11.5259875 C1.67221067,12.3257103 2.05128205,13.0589051 2.54054054,13.7255717 C3.02979903,14.3922384 3.60776161,14.970201 4.27442827,15.4594595 C4.94109494,15.9487179 5.67428967,16.3277893 6.47401247,16.5966736 C7.27373527,16.8655579 8.11573112,17 9,17 Z M9,16.035343 C8.22106722,16.035343 7.48024948,15.9168399 6.77754678,15.6798337 C6.07484407,15.4428274 5.43035343,15.1088011 4.84407484,14.6777547 C4.25779626,14.2467082 3.74913375,13.7380457 3.31808732,13.1517672 C2.88704089,12.5654886 2.55370755,11.9209979 2.31808732,11.2182952 C2.08246708,10.5155925 1.96465696,9.77616078 1.96465696,9 C1.96465696,8.22106722 2.08246708,7.48024948 2.31808732,6.77754678 C2.55370755,6.07484407 2.88704089,5.43035343 3.31808732,4.84407484 C3.74913375,4.25779626 4.25779626,3.74913375 4.84407484,3.31808732 C5.43035343,2.88704089 6.07484407,2.55370755 6.77754678,2.31808732 C7.48024948,2.08246708 8.22106722,1.96465696 9,1.96465696 C9.77893278,1.96465696 10.5197505,2.08246708 11.2224532,2.31808732 C11.9251559,2.55370755 12.5696466,2.88704089 13.1559252,3.31808732 C13.7422037,3.74913375 14.2508663,4.25779626 14.6819127,4.84407484 C15.1129591,5.43035343 15.4462924,6.07484407 15.6819127,6.77754678 C15.9175329,7.48024948 16.035343,8.22106722 16.035343,9 C16.035343,9.77616078 15.9175329,10.5155925 15.6819127,11.2182952 C15.4462924,11.9209979 15.1129591,12.5654886 14.6819127,13.1517672 C14.2508663,13.7380457 13.7422037,14.2467082 13.1559252,14.6777547 C12.5696466,15.1088011 11.9251559,15.4428274 11.2224532,15.6798337 C10.5197505,15.9168399 9.77893278,16.035343 9,16.035343 Z M9.55717256,12.7255717 L13.2827443,9 L9.55717256,5.27442827 L8.91683992,5.91476091 L11.5530146,8.54261954 L4.72557173,8.54261954 L4.72557173,9.45738046 L11.5530146,9.45738046 L8.91683992,12.0935551 L9.55717256,12.7255717 Z" id="" fill="#000000" fill-rule="nonzero"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/themes/theme/source/icon/arrow-up.svg b/themes/theme/source/icon/arrow-up.svg
new file mode 100644
index 00000000..ddeab3c9
--- /dev/null
+++ b/themes/theme/source/icon/arrow-up.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/arrow-up</title>
+    <g id="icon/arrow-up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M9,17 C9.88426888,17 10.7262647,16.8655579 11.5259875,16.5966736 C12.3257103,16.3277893 13.0589051,15.9487179 13.7255717,15.4594595 C14.3922384,14.970201 14.970201,14.3922384 15.4594595,13.7255717 C15.9487179,13.0589051 16.3277893,12.3257103 16.5966736,11.5259875 C16.8655579,10.7262647 17,9.88426888 17,9 C17,8.11573112 16.8655579,7.27373527 16.5966736,6.47401247 C16.3277893,5.67428967 15.9487179,4.94109494 15.4594595,4.27442827 C14.970201,3.60776161 14.3922384,3.02979903 13.7255717,2.54054054 C13.0589051,2.05128205 12.3257103,1.67221067 11.5259875,1.4033264 C10.7262647,1.13444213 9.88426888,1 9,1 C8.11573112,1 7.27373527,1.13444213 6.47401247,1.4033264 C5.67428967,1.67221067 4.94109494,2.05128205 4.27442827,2.54054054 C3.60776161,3.02979903 3.02979903,3.60776161 2.54054054,4.27442827 C2.05128205,4.94109494 1.67221067,5.67428967 1.4033264,6.47401247 C1.13444213,7.27373527 1,8.11573112 1,9 C1,9.88426888 1.13444213,10.7262647 1.4033264,11.5259875 C1.67221067,12.3257103 2.05128205,13.0589051 2.54054054,13.7255717 C3.02979903,14.3922384 3.60776161,14.970201 4.27442827,15.4594595 C4.94109494,15.9487179 5.67428967,16.3277893 6.47401247,16.5966736 C7.27373527,16.8655579 8.11573112,17 9,17 Z M9,15.960499 C8.22938323,15.960499 7.4961885,15.8433818 6.8004158,15.6091476 C6.1046431,15.3749134 5.46638947,15.045045 4.88565489,14.6195426 C4.3049203,14.1940402 3.8018018,13.6909217 3.37629938,13.1101871 C2.95079695,12.5294525 2.62092862,11.8911989 2.38669439,11.1954262 C2.15246015,10.4996535 2.03534304,9.76784477 2.03534304,9 C2.03534304,8.22938323 2.15246015,7.4961885 2.38669439,6.8004158 C2.62092862,6.1046431 2.95079695,5.46708247 3.37629938,4.88773389 C3.8018018,4.30838531 4.3049203,3.80526681 4.88565489,3.37837838 C5.46638947,2.95148995 6.1046431,2.62162162 6.8004158,2.38877339 C7.4961885,2.15592516 8.22938323,2.03950104 9,2.03950104 C9.77061677,2.03950104 10.5031185,2.15592516 11.1975052,2.38877339 C11.8918919,2.62162162 12.5294525,2.95148995 13.1101871,3.37837838 C13.6909217,3.80526681 14.1947332,4.30838531 14.6216216,4.88773389 C15.04851,5.46708247 15.3783784,6.1046431 15.6112266,6.8004158 C15.8440748,7.4961885 15.960499,8.22938323 15.960499,9 C15.960499,9.76784477 15.8440748,10.4996535 15.6112266,11.1954262 C15.3783784,11.8911989 15.04851,12.5294525 14.6216216,13.1101871 C14.1947332,13.6909217 13.6909217,14.1940402 13.1101871,14.6195426 C12.5294525,15.045045 11.8918919,15.3749134 11.1975052,15.6091476 C10.5031185,15.8433818 9.77061677,15.960499 9,15.960499 Z M9.54885655,13.2577963 L9.54885655,6.72141372 L12.047817,9.22037422 L12.7879418,8.47193347 L9.00831601,4.69230769 L5.22037422,8.47193347 L5.97713098,9.22037422 L8.46777547,6.72141372 L8.46777547,13.2577963 L9.54885655,13.2577963 Z" id="logo/arrow-up" fill="#000000" fill-rule="nonzero"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/themes/theme/source/icon/checkbox-checked.svg b/themes/theme/source/icon/checkbox-checked.svg
new file mode 100644
index 00000000..da15a094
--- /dev/null
+++ b/themes/theme/source/icon/checkbox-checked.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/checkbox/checked</title>
+    <defs>
+        <path d="M9,17 C9.88426888,17 10.7262647,16.8655579 11.5259875,16.5966736 C12.3257103,16.3277893 13.0589051,15.9487179 13.7255717,15.4594595 C14.3922384,14.970201 14.970201,14.3922384 15.4594595,13.7255717 C15.9487179,13.0589051 16.3277893,12.3257103 16.5966736,11.5259875 C16.8655579,10.7262647 17,9.88426888 17,9 C17,8.11573112 16.8655579,7.27373527 16.5966736,6.47401247 C16.3277893,5.67428967 15.9487179,4.94109494 15.4594595,4.27442827 C14.970201,3.60776161 14.3922384,3.02979903 13.7255717,2.54054054 C13.0589051,2.05128205 12.3257103,1.67221067 11.5259875,1.4033264 C10.7262647,1.13444213 9.88426888,1 9,1 C8.11573112,1 7.27373527,1.13444213 6.47401247,1.4033264 C5.67428967,1.67221067 4.94109494,2.05128205 4.27442827,2.54054054 C3.60776161,3.02979903 3.02979903,3.60776161 2.54054054,4.27442827 C2.05128205,4.94109494 1.67221067,5.67428967 1.4033264,6.47401247 C1.13444213,7.27373527 1,8.11573112 1,9 C1,9.88426888 1.13444213,10.7262647 1.4033264,11.5259875 C1.67221067,12.3257103 2.05128205,13.0589051 2.54054054,13.7255717 C3.02979903,14.3922384 3.60776161,14.970201 4.27442827,15.4594595 C4.94109494,15.9487179 5.67428967,16.3277893 6.47401247,16.5966736 C7.27373527,16.8655579 8.11573112,17 9,17 Z M9,15.960499 C8.22938323,15.960499 7.4961885,15.8433818 6.8004158,15.6091476 C6.1046431,15.3749134 5.46638947,15.045045 4.88565489,14.6195426 C4.3049203,14.1940402 3.8018018,13.6909217 3.37629938,13.1101871 C2.95079695,12.5294525 2.62092862,11.8911989 2.38669439,11.1954262 C2.15246015,10.4996535 2.03534304,9.76784477 2.03534304,9 C2.03534304,8.22938323 2.15246015,7.4961885 2.38669439,6.8004158 C2.62092862,6.1046431 2.95079695,5.46708247 3.37629938,4.88773389 C3.8018018,4.30838531 4.3049203,3.80526681 4.88565489,3.37837838 C5.46638947,2.95148995 6.1046431,2.62162162 6.8004158,2.38877339 C7.4961885,2.15592516 8.22938323,2.03950104 9,2.03950104 C9.77061677,2.03950104 10.5031185,2.15592516 11.1975052,2.38877339 C11.8918919,2.62162162 12.5294525,2.95148995 13.1101871,3.37837838 C13.6909217,3.80526681 14.1947332,4.30838531 14.6216216,4.88773389 C15.04851,5.46708247 15.3783784,6.1046431 15.6112266,6.8004158 C15.8440748,7.4961885 15.960499,8.22938323 15.960499,9 C15.960499,9.76784477 15.8440748,10.4996535 15.6112266,11.1954262 C15.3783784,11.8911989 15.04851,12.5294525 14.6216216,13.1101871 C14.1947332,13.6909217 13.6909217,14.1940402 13.1101871,14.6195426 C12.5294525,15.045045 11.8918919,15.3749134 11.1975052,15.6091476 C10.5031185,15.8433818 9.77061677,15.960499 9,15.960499 Z M8.04781705,12.027027 L13.3243243,6.77130977 L12.5010395,5.94386694 L8.04781705,10.3804574 L5.94386694,8.30561331 L5.13305613,9.13305613 L8.04781705,12.027027 Z" id="path-1"></path>
+    </defs>
+    <g id="icon/checkbox/checked" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon/checkbox-checked" fill-rule="nonzero" fill="#000000">
+            <use xlink:href="#path-1"></use>
+            <use xlink:href="#path-1"></use>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/themes/theme/source/icon/checkbox-default.svg b/themes/theme/source/icon/checkbox-default.svg
new file mode 100644
index 00000000..51ac63dc
--- /dev/null
+++ b/themes/theme/source/icon/checkbox-default.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/checkbox/default</title>
+    <defs>
+        <path d="M9,17 C9.88426888,17 10.7262647,16.8655579 11.5259875,16.5966736 C12.3257103,16.3277893 13.0589051,15.9487179 13.7255717,15.4594595 C14.3922384,14.970201 14.970201,14.3922384 15.4594595,13.7255717 C15.9487179,13.0589051 16.3277893,12.3257103 16.5966736,11.5259875 C16.8655579,10.7262647 17,9.88426888 17,9 C17,8.11573112 16.8655579,7.27373527 16.5966736,6.47401247 C16.3277893,5.67428967 15.9487179,4.94109494 15.4594595,4.27442827 C14.970201,3.60776161 14.3922384,3.02979903 13.7255717,2.54054054 C13.0589051,2.05128205 12.3257103,1.67221067 11.5259875,1.4033264 C10.7262647,1.13444213 9.88426888,1 9,1 C8.11573112,1 7.27373527,1.13444213 6.47401247,1.4033264 C5.67428967,1.67221067 4.94109494,2.05128205 4.27442827,2.54054054 C3.60776161,3.02979903 3.02979903,3.60776161 2.54054054,4.27442827 C2.05128205,4.94109494 1.67221067,5.67428967 1.4033264,6.47401247 C1.13444213,7.27373527 1,8.11573112 1,9 C1,9.88426888 1.13444213,10.7262647 1.4033264,11.5259875 C1.67221067,12.3257103 2.05128205,13.0589051 2.54054054,13.7255717 C3.02979903,14.3922384 3.60776161,14.970201 4.27442827,15.4594595 C4.94109494,15.9487179 5.67428967,16.3277893 6.47401247,16.5966736 C7.27373527,16.8655579 8.11573112,17 9,17 Z M9,15.960499 C8.22938323,15.960499 7.4961885,15.8433818 6.8004158,15.6091476 C6.1046431,15.3749134 5.46638947,15.045045 4.88565489,14.6195426 C4.3049203,14.1940402 3.8018018,13.6909217 3.37629938,13.1101871 C2.95079695,12.5294525 2.62092862,11.8911989 2.38669439,11.1954262 C2.15246015,10.4996535 2.03534304,9.76784477 2.03534304,9 C2.03534304,8.22938323 2.15246015,7.4961885 2.38669439,6.8004158 C2.62092862,6.1046431 2.95079695,5.46708247 3.37629938,4.88773389 C3.8018018,4.30838531 4.3049203,3.80526681 4.88565489,3.37837838 C5.46638947,2.95148995 6.1046431,2.62162162 6.8004158,2.38877339 C7.4961885,2.15592516 8.22938323,2.03950104 9,2.03950104 C9.77061677,2.03950104 10.5031185,2.15592516 11.1975052,2.38877339 C11.8918919,2.62162162 12.5294525,2.95148995 13.1101871,3.37837838 C13.6909217,3.80526681 14.1947332,4.30838531 14.6216216,4.88773389 C15.04851,5.46708247 15.3783784,6.1046431 15.6112266,6.8004158 C15.8440748,7.4961885 15.960499,8.22938323 15.960499,9 C15.960499,9.76784477 15.8440748,10.4996535 15.6112266,11.1954262 C15.3783784,11.8911989 15.04851,12.5294525 14.6216216,13.1101871 C14.1947332,13.6909217 13.6909217,14.1940402 13.1101871,14.6195426 C12.5294525,15.045045 11.8918919,15.3749134 11.1975052,15.6091476 C10.5031185,15.8433818 9.77061677,15.960499 9,15.960499 Z" id="path-1"></path>
+    </defs>
+    <g id="icon/checkbox/default" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon/checkbox-default" fill-rule="nonzero" fill="#000000">
+            <use xlink:href="#path-1"></use>
+            <use xlink:href="#path-1"></use>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/themes/theme/source/icon/close-btn.svg b/themes/theme/source/icon/close-btn.svg
new file mode 100644
index 00000000..4d6e1bc1
--- /dev/null
+++ b/themes/theme/source/icon/close-btn.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.6469 18L6.00828 16.3463L10.3539 12L6 7.64543L7.6469 6L12 10.3537L16.3531 6L18 7.64543L13.6461 12L17.9917 16.3463L16.3531 18L12 13.6463L7.6469 18Z" fill="black"/>
+</svg>
diff --git a/themes/theme/source/icon/marker.svg b/themes/theme/source/icon/marker.svg
new file mode 100644
index 00000000..65ab4b2d
--- /dev/null
+++ b/themes/theme/source/icon/marker.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>marker</title>
+    <g id="HOME-🏠" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="MARKDOWN-STYLE" transform="translate(-570.000000, -1486.000000)">
+            <g id="body" transform="translate(560.000000, 120.000000)">
+                <g id="md-unordered-list" transform="translate(0.000000, 1321.000000)">
+                    <g id="unordered-list" transform="translate(0.000000, 45.000000)">
+                        <g id="marker" transform="translate(10.000000, 0.000000)">
+                            <rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
+                            <circle id="Oval" fill="#000000" cx="15" cy="17" r="3"></circle>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/themes/theme/source/js/format.js b/themes/theme/source/js/format.js
new file mode 100644
index 00000000..9d79edce
--- /dev/null
+++ b/themes/theme/source/js/format.js
@@ -0,0 +1,23 @@
+function detectTaskList() {
+    var taskListObjects = document.getElementsByTagName("input");
+    for (var i = 0; i < taskListObjects.length; i++) {
+      var par = taskListObjects[i].parentNode;
+      par.classList.add("task-list-item");
+      par.parentNode.classList.add("task-list");
+    }
+}
+
+function detectBlockTable() {
+  var tableListObjects = document.getElementsByTagName("thead");
+  for (var i = 0; i < tableListObjects.length; i++) {
+    var par = tableListObjects[i].parentNode;
+    par.classList.add("block-table");
+  }
+}
+
+function detectors(){
+  detectTaskList();
+  detectBlockTable();
+}
+
+
diff --git a/themes/theme/source/js/menu.js b/themes/theme/source/js/menu.js
new file mode 100644
index 00000000..fd84fcc3
--- /dev/null
+++ b/themes/theme/source/js/menu.js
@@ -0,0 +1,27 @@
+function toggleMenu() {
+  var menuList = document.getElementsByClassName("menu-list")[0];
+  var menuButton = document.getElementById("menu-btn");
+  if (menuList.classList.contains("active")) {
+    menuList.classList.remove("active");
+    menuButton.innerHTML = "菜单";
+  } else {
+    menuList.classList.add("active");
+    menuButton.innerHTML = "菜单";
+  }
+}
+
+function closeMenu() {
+  var menuList = document.getElementsByClassName("menu-list")[0];
+  var menuButton = document.getElementById("menu-btn");
+  if (menuList.classList.contains("active")) {
+    menuList.classList.remove("active");
+    menuButton.innerHTML = "菜单";
+  }
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+  var menuItems = document.querySelectorAll(".menu-item a");
+  menuItems.forEach(function(item) {
+    item.addEventListener("click", closeMenu);
+  });
+});
\ No newline at end of file
diff --git a/themes/theme/source/js/mermaid-zoom.js b/themes/theme/source/js/mermaid-zoom.js
new file mode 100644
index 00000000..6b4f0e17
--- /dev/null
+++ b/themes/theme/source/js/mermaid-zoom.js
@@ -0,0 +1,169 @@
+// Mermaid 图表点击放大功能
+
+(function() {
+    'use strict';
+
+    // 等待 DOM 加载完成
+    function initMermaidZoom() {
+        const mermaidElements = document.querySelectorAll('.mermaid');
+        
+        if (mermaidElements.length === 0) return;
+
+        // 检测是否为移动端
+        const isMobile = window.innerWidth <= 688;
+
+        // 移动端：为 mermaid 元素添加提示样式
+        if (isMobile) {
+            mermaidElements.forEach(function(el) {
+                el.style.position = 'relative';
+                // 创建提示元素
+                const hint = document.createElement('span');
+                hint.textContent = '点击放大';
+                hint.style.cssText = 'position:absolute;bottom:4px;right:4px;font-size:10px;padding:2px 6px;background:rgba(0,0,0,0.5);color:#fff;border-radius:4px;pointer-events:none;';
+                el.appendChild(hint);
+            });
+        }
+
+        // 创建模态框
+        const modal = document.createElement('div');
+        modal.className = 'mermaid-modal';
+        modal.innerHTML = `
+            <button class="mermaid-close" aria-label="关闭">&times;</button>
+            <div class="mermaid-content"></div>
+        `;
+        document.body.appendChild(modal);
+
+        const closeBtn = modal.querySelector('.mermaid-close');
+        const content = modal.querySelector('.mermaid-content');
+
+        // 关闭模态框函数
+        function closeModal() {
+            modal.classList.remove('active');
+            document.body.style.overflow = '';
+        }
+
+        // 为每个 mermaid 图表添加点击事件
+        mermaidElements.forEach(function(el) {
+            el.addEventListener('click', function(e) {
+                // 等待 mermaid 渲染完成
+                const svg = el.querySelector('svg');
+                if (!svg) return;
+
+                // 复制 SVG 到模态框
+                content.innerHTML = '';
+                const clonedSvg = svg.cloneNode(true);
+                
+                // 获取原始 SVG 的尺寸
+                const originalWidth = svg.viewBox.baseVal.width || svg.width.baseVal.value || 800;
+                const originalHeight = svg.viewBox.baseVal.height || svg.height.baseVal.value || 600;
+                
+                // 检测是否为移动端
+                const isMobile = window.innerWidth <= 688;
+                
+                // 计算放大比例
+                let targetWidth;
+                if (isMobile) {
+                    // 移动端：适配屏幕宽度，留出边距
+                    targetWidth = window.innerWidth - 32; // 16px padding × 2
+                } else {
+                    // 桌面端：85% 视口宽度，最大 1600px
+                    targetWidth = Math.min(window.innerWidth * 0.85, 1600);
+                }
+                
+                const scale = targetWidth / originalWidth;
+                const newWidth = originalWidth * scale;
+                const newHeight = originalHeight * scale;
+                
+                // 设置放大后的尺寸
+                clonedSvg.setAttribute('width', newWidth + 'px');
+                clonedSvg.setAttribute('height', newHeight + 'px');
+                clonedSvg.style.width = newWidth + 'px';
+                clonedSvg.style.height = newHeight + 'px';
+                clonedSvg.style.maxWidth = 'none';
+                clonedSvg.style.maxHeight = 'none';
+                
+                // 确保 viewBox 存在
+                if (!clonedSvg.getAttribute('viewBox')) {
+                    clonedSvg.setAttribute('viewBox', '0 0 ' + originalWidth + ' ' + originalHeight);
+                }
+                
+                content.appendChild(clonedSvg);
+                
+                // 显示模态框
+                modal.classList.add('active');
+                document.body.style.overflow = 'hidden';
+                
+                // 移动端样式调整
+                if (isMobile) {
+                    content.style.maxWidth = '100vw';
+                    content.style.maxHeight = '100vh';
+                    content.style.padding = '12px';
+                    content.style.borderRadius = '0';
+                    modal.style.padding = '0';
+                } else {
+                    // 恢复桌面端样式
+                    content.style.maxWidth = '';
+                    content.style.maxHeight = '';
+                    content.style.padding = '';
+                    content.style.borderRadius = '';
+                    modal.style.padding = '';
+                }
+            });
+        });
+
+        // 关闭按钮事件
+        closeBtn.addEventListener('click', closeModal);
+
+        // 点击背景关闭
+        modal.addEventListener('click', function(e) {
+            if (e.target === modal) {
+                closeModal();
+            }
+        });
+
+        // ESC 键关闭
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape' && modal.classList.contains('active')) {
+                closeModal();
+            }
+        });
+    }
+
+    // 等待 mermaid 渲染完成后再初始化
+    function waitForMermaid() {
+        const mermaidElements = document.querySelectorAll('.mermaid');
+        let renderedCount = 0;
+        
+        function checkRendered() {
+            let allRendered = true;
+            mermaidElements.forEach(function(el) {
+                if (!el.querySelector('svg')) {
+                    allRendered = false;
+                }
+            });
+            
+            if (allRendered) {
+                initMermaidZoom();
+            } else {
+                // 如果还没渲染完，继续等待
+                if (renderedCount < 50) { // 最多等待 5 秒
+                    renderedCount++;
+                    setTimeout(checkRendered, 100);
+                } else {
+                    // 超时，仍然初始化（可能有些图表渲染失败）
+                    initMermaidZoom();
+                }
+            }
+        }
+        
+        // 开始检查
+        setTimeout(checkRendered, 500);
+    }
+
+    // 页面加载完成后初始化
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', waitForMermaid);
+    } else {
+        waitForMermaid();
+    }
+})();
diff --git a/themes/theme/source/js/search.js b/themes/theme/source/js/search.js
new file mode 100644
index 00000000..27abb4e0
--- /dev/null
+++ b/themes/theme/source/js/search.js
@@ -0,0 +1,68 @@
+// Search functionality for standalone search page
+
+(function () {
+  'use strict';
+
+  let localSearch = null;
+  let isDataLoaded = false;
+
+  function initSearch() {
+    const input = document.getElementById('search-input');
+    const container = document.getElementById('search-results');
+
+    if (!input || !container || typeof LocalSearch === 'undefined') {
+      container.innerHTML = '<div class="search-result-message">搜索功能初始化失败</div>';
+      return;
+    }
+
+    localSearch = new LocalSearch({
+      path: searchConfig.path,
+      top_n_per_article: searchConfig.top_n_per_article,
+      unescape: searchConfig.unescape
+    });
+
+    localSearch.fetchData();
+
+    window.addEventListener('search:loaded', function () {
+      isDataLoaded = true;
+      container.innerHTML = '<div class="search-result-message"></div>';
+    });
+
+    function displaySearchResult() {
+      if (!isDataLoaded) {
+        container.innerHTML = '<div class="search-result-message">加载中...</div>';
+        return;
+      }
+
+      const searchText = input.value.trim().toLowerCase();
+
+      if (searchText.length === 0) {
+        container.innerHTML = '<div class="search-result-message"></div>';
+        return;
+      }
+
+      const keywords = searchText.split(/[-\s]+/);
+      const resultItems = localSearch.getResultItems(keywords);
+
+      if (resultItems.length === 0) {
+        container.innerHTML = '<div class="search-result-message">未找到相关结果</div>';
+      } else {
+        container.innerHTML = `
+          <div class="search-result-message">找到 ${resultItems.length} 个结果</div>
+          <ul class="search-result-list">
+            ${resultItems.map(result => result.item).join('')}
+          </ul>
+        `;
+      }
+    }
+
+    input.addEventListener('input', displaySearchResult);
+    input.focus();
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initSearch);
+  } else {
+    initSearch();
+  }
+})();
diff --git a/themes/theme/source/js/theme-switch.js b/themes/theme/source/js/theme-switch.js
new file mode 100644
index 00000000..4dddd304
--- /dev/null
+++ b/themes/theme/source/js/theme-switch.js
@@ -0,0 +1,31 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const themeSwitch = document.getElementById('theme-switch-btn');
+  const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
+  
+  // 检查本地存储中的主题设置
+  const currentTheme = localStorage.getItem('theme');
+  if (currentTheme === 'dark') {
+    document.body.classList.add('dark-theme');
+    themeSwitch.querySelector('i').classList.replace('icon-moon', 'icon-sun');
+  } else if (currentTheme === 'light') {
+    document.body.classList.remove('dark-theme');
+  } else if (prefersDarkScheme.matches) {
+    document.body.classList.add('dark-theme');
+    themeSwitch.querySelector('i').classList.replace('icon-moon', 'icon-sun');
+  }
+  
+  // 切换主题
+  themeSwitch.addEventListener('click', (e) => {
+    e.preventDefault();
+    
+    if (document.body.classList.contains('dark-theme')) {
+      document.body.classList.remove('dark-theme');
+      localStorage.setItem('theme', 'light');
+      themeSwitch.querySelector('i').classList.replace('icon-sun', 'icon-moon');
+    } else {
+      document.body.classList.add('dark-theme');
+      localStorage.setItem('theme', 'dark');
+      themeSwitch.querySelector('i').classList.replace('icon-moon', 'icon-sun');
+    }
+  });
+}); 
\ No newline at end of file
diff --git a/themes/theme/source/profile_cover.jpg b/themes/theme/source/profile_cover.jpg
new file mode 100644
index 00000000..c57f8b1a
--- /dev/null
+++ b/themes/theme/source/profile_cover.jpg