Merge pull request #178 from XPoet/dev

release v3.5.0

.github/FUNDING.yml

@@ -9,4 +9,4 @@ community_bridge: # Replace with a single Community Bridge project-name e.g., cl
 liberapay: # Replace with a single Liberapay username
 issuehunt: # Replace with a single IssueHunt username
 otechie: # Replace with a single Otechie username
-custom: ['https://cdn.jsdelivr.net/gh/XPoet/image-hosting@master/FE-Cheerleaders/play-tour.png']
+custom: ['https://cdn.staticaly.com/gh/XPoet/image-hosting@master/FE-Cheerleaders/play-tour.png']

.github/workflows/npm-publish.yml

@@ -0,0 +1,19 @@
+name: npm publish
+
+on:
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  publish-npm:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_PUBLISH_TOKEN}}

.npmignore

@@ -2,3 +2,5 @@ node_modules
 /.github/FUNDING.yml
 package-lock.json
 yarn.lock
+.vscode/*
+.idea/*

_config.yml

@@ -1,5 +1,5 @@
 ## ======================================================================================
-## Keep v3.4.9
+## Keep v3.5.0
 ## Repository: https://github.com/XPoet/hexo-theme-keep
 ## Document: https://keep-docs.xpoet.cn
 ## ======================================================================================
@@ -42,12 +42,6 @@ style:
   # e.g. font_family: STKaiti, STSong, STHeiti
   font_family:
 
-  # Left side TOC width (you don't usually have to change it)
-  left_side_width: 260px
-
-  # Content area max width (you don't usually have to change it)
-  content_max_width: 920px
-
   # Mouse hover style settings
   hover:
     # Shadow effect when the mouse hover. Option values: true | false
@@ -159,12 +153,14 @@ post:
     custom_label_list: ["Trainee", "Engineer", "Architect"]
 
 # ---------------------------------------------------------------------------------------
-# Code block tools
+# Code block
 # Support code copy and code block collapse
 # ---------------------------------------------------------------------------------------
-code_block_tools:
+code_block:
+  tools:  # Include "code copy", "code block collapse" and "code language"
     enable: false # Option values: true | false
     style: default # Option values: default | mac
+  highlight_theme: default  # Option values: default | obsidian
 
 # ---------------------------------------------------------------------------------------
 # Table of Contents in the Sidebar
@@ -217,6 +213,7 @@ comment:
 
   # Valine
   # See: https://github.com/xCss/Valine
+  #      https://valine.js.org
   valine:
     appid:           # Your leancloud application appid
     appkey:          # Your leancloud application appkey
@@ -224,6 +221,7 @@ comment:
 
   # Gitalk
   # See: https://github.com/gitalk/gitalk
+  #      https://gitalk.github.io
   gitalk:
     github_id:        # GitHub repo owner
     github_admins:    # GitHub Admins (in Array type), optional.
@@ -233,10 +231,19 @@ comment:
 
   # Twikoo
   # See: https://github.com/imaegoo/twikoo
+  #      https://twikoo.js.org
   twikoo:
     env_id:         # Tencent Cloud environment id
     region:         # Environment region. If select Guangzhou, fill in "ap-guangzhou".
-    version: 1.6.7  # Twikoo version, default use v1.6.7, you can custom fill
+    version: 1.6.7  # Twikoo version, default use v1.6.7
+
+  # Waline
+  # See: https://github.com/walinejs/waline
+  #      https://waline.js.org/guide/get-started.html
+  waline:
+    server_url:     # Server URL
+    reaction:       # Article reactions
+    version: 2      # Waline version, default use v2
 
 # ---------------------------------------------------------------------------------------
 # RSS

layout/_partial/comment/comment.ejs

@@ -1,19 +1,27 @@
+<%
+const {
+    enable: t_comment_enable,
+    use: t_comment_use
+} = theme?.comment
+%>
 <div class="comments-container">
-    <div id="comment-anchor"></div>
+    <div id="comments-anchor"></div>
     <div class="comment-area-title">
         <i class="fas fa-comments"></i>&nbsp;<%- __('comments') %>
     </div>
-    <% if (theme.comment.enable === true && theme.comment.hasOwnProperty(theme.comment.use)) { %>
+    <% if (t_comment_enable === true && t_comment_use) { %>
-
+        <% if  (t_comment_use === 'valine') { %>
-        <% if  (theme.comment.use === 'valine') { %>
             <%- partial('valine') %>
 
-        <% } else if (theme.comment.use === 'gitalk') { %>
+        <% } else if (t_comment_use === 'gitalk') { %>
             <%- partial('gitalk') %>
 
-        <% } else if (theme.comment.use === 'twikoo') { %>
+        <% } else if (t_comment_use === 'twikoo') { %>
             <%- partial('twikoo') %>
 
+        <% } else if (t_comment_use === 'waline') { %>
+            <%- partial('waline') %>
+
         <% } %>
     <% } %>
 </div>

layout/_partial/comment/gitalk.ejs

@@ -1,17 +1,35 @@
-<% const { client_id, client_secret, repository, github_id, github_admins } = theme.comment.gitalk %>
+<%
+const { enable: pjax_enable } = theme?.pjax
+const {
+    client_id,
+    client_secret,
+    repository,
+    github_id,
+    github_admins
+} = theme.comment?.gitalk
+let cdn_css = '//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.css'
+let cdn_js = '//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.js'
+const { enable: t_cdn_enable, provider: t_cdn_provider } = theme?.cdn
+if (t_cdn_enable === true) {
+    switch (t_cdn_provider) {
+        case 'jsdelivr':
+            cdn_css = '//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.css'
+            cdn_js = '//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.js'
+            break
 
-<% if(
+        case 'unpkg':
-        theme.comment.use === 'gitalk'
+            cdn_css = '//unpkg.com/gitalk/dist/gitalk.css'
-        && client_id
+            cdn_js = '//unpkg.com/gitalk/dist/gitalk.min.js'
-        && client_secret
+            break
-        && github_id
+    }
-        && repository
+}
-) { %>
+%>
+<% if(client_id && client_secret && github_id && repository) { %>
+    <div class="gitalk-comment-container">
         <div id="gitalk-container"></div>
-    <script <%= theme.pjax.enable === true ? 'data-pjax' : '' %>
+        <link rel="stylesheet" href="<%= cdn_css %>">
-            src="//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.js"></script>
+        <script <%= pjax_enable === true ? 'data-pjax' : '' %> src="<%= cdn_js %>"></script>
-    <script <%= theme.pjax.enable === true ? 'data-pjax' : '' %>>
+        <script <%= pjax_enable === true ? 'data-pjax' : '' %>>
-
           function loadGitalk() {
             let __gitalk__pathname = decodeURI(location.pathname);
             const __gitalk__pathnameLength = __gitalk__pathname.length;
@@ -21,7 +39,6 @@
             }
 
             try {
-
               Gitalk && new Gitalk({
                 clientID: '<%= client_id %>',
                 clientSecret: '<%= client_secret %>',
@@ -31,13 +48,12 @@
                 id: __gitalk__pathname,
                 language: '<%= config.language %>'
               }).render('gitalk-container');
-
             } catch (e) {
               window.Gitalk = null;
             }
           }
 
-      if ('<%= theme.pjax.enable %>') {
+          if ('<%= pjax_enable %>' === 'true') {
             const loadGitalkTimeout = setTimeout(() => {
               loadGitalk();
               clearTimeout(loadGitalkTimeout);
@@ -46,4 +62,5 @@
             window.addEventListener('DOMContentLoaded', loadGitalk);
           }
         </script>
+    </div>
 <% } %>

layout/_partial/comment/twikoo.ejs

@@ -1,16 +1,28 @@
 <%
-const { enable: pjax_enable } = theme.pjax
+const { enable: pjax_enable } = theme?.pjax
 let {
-  env_id: tk_env_id, region: tk_region, version: tk_version
+    env_id: tk_env_id,
-} = theme.comment.twikoo
+    region: tk_region,
+    version: tk_version
+} = theme.comment?.twikoo
 if (!tk_version) { tk_version = '1.6.7' }
-const twikoo_cdn_url = `//cdn.jsdelivr.net/npm/twikoo@${tk_version}/dist/twikoo.all.min.js`
+const { enable: t_cdn_enable, provider: t_cdn_provider } = theme?.cdn
+let twikoo_cdn_url = `//cdn.jsdelivr.net/npm/twikoo@${tk_version}/dist/twikoo.all.min.js`
+if (t_cdn_enable === true) {
+    switch (t_cdn_provider) {
+        case 'jsdelivr':
+            twikoo_cdn_url = `//cdn.jsdelivr.net/npm/twikoo@${tk_version}/dist/twikoo.all.min.js`
+            break
+
+        case 'unpkg':
+            twikoo_cdn_url = `//unpkg.com/twikoo@${tk_version}/dist/twikoo.all.min.js`
+            break
+    }
+}
 %>
-<% if(theme.comment.use === 'twikoo' && tk_env_id) { %>
+<% if(tk_env_id) { %>
     <div class="twikoo-container">
-        <script <%= pjax_enable === true ? 'data-pjax' : '' %>
+        <script <%= pjax_enable === true ? 'data-pjax' : '' %> src="<%= twikoo_cdn_url %>"></script>
-                src="<%= twikoo_cdn_url %>"
-        ></script>
         <div id="twikoo-comment"></div>
         <script <%= pjax_enable === true ? 'data-pjax' : '' %>>
           function loadTwikoo() {
@@ -22,7 +34,7 @@ const twikoo_cdn_url = `//cdn.jsdelivr.net/npm/twikoo@${tk_version}/dist/twikoo.
             });
           }
 
-            if ('<%= pjax_enable === true %>') {
+          if ('<%= pjax_enable %>' === 'true') {
             const loadTwikooTimeout = setTimeout(() => {
               loadTwikoo();
               clearTimeout(loadTwikooTimeout);

layout/_partial/comment/valine.ejs

@@ -1,22 +1,38 @@
-<% if(
+<%
-        theme.comment.use === 'valine'
+const { enable: pjax_enable } = theme?.pjax
-        && theme.comment.valine.appid
+const {
-        && theme.comment.valine.appkey
+    appid,
-) { %>
+    appkey,
+    placeholder
+} = theme.comment?.valine
+let cdn_url = '//cdn.jsdelivr.net/npm/valine@latest/dist/Valine.min.js'
+const { enable: t_cdn_enable, provider: t_cdn_provider } = theme?.cdn
+if (t_cdn_enable === true) {
+    switch (t_cdn_provider) {
+        case 'jsdelivr':
+            cdn_url = '//cdn.jsdelivr.net/npm/valine@latest/dist/Valine.min.js'
+            break
+
+        case 'unpkg':
+            cdn_url = '//unpkg.com/valine@latest/dist/Valine.min.js'
+            break
+    }
+}
+%>
+<% if(appid && appkey) { %>
     <div class="valine-container">
-        <script <%= theme.pjax.enable === true ? 'data-pjax' : '' %>
+        <script <%= pjax_enable === true ? 'data-pjax' : '' %> src="<%= cdn_url %>"></script>
-                src="//cdn.jsdelivr.net/npm/valine@latest/dist/Valine.min.js"></script>
         <div id="vcomments"></div>
-        <script <%= theme.pjax.enable === true ? 'data-pjax' : '' %>>
+        <script <%= pjax_enable === true ? 'data-pjax' : '' %>>
           function loadValine() {
             new Valine({
               el: '#vcomments',
-                    appId: '<%= theme.comment.valine.appid %>',
+              appId: '<%= appid %>',
-                    appKey: '<%= theme.comment.valine.appkey %>',
+              appKey: '<%= appkey %>',
               meta: ['nick', 'mail', 'link'],
               avatar: 'wavatar',
               enableQQ: true,
-                    placeholder: '<%= theme.comment.valine.placeholder %>',
+              placeholder: '<%= placeholder %>',
               lang: '<%= config.language %>'.toLowerCase()
             });
 
@@ -53,7 +69,7 @@
             }, 2000);
           }
 
-            if ('<%= theme.pjax.enable %>') {
+          if ('<%= pjax_enable %>' === 'true') {
             const loadValineTimeout = setTimeout(() => {
               loadValine();
               clearTimeout(loadValineTimeout);

layout/_partial/comment/waline.ejs

@@ -0,0 +1,55 @@
+<%
+const { enable: pjax_enable } = theme?.pjax
+let {
+    server_url: waline_env_server_url,
+    version: waline_version,
+    reaction: waline_reaction
+} = theme.comment?.waline
+if (!waline_version) { waline_version = '2' }
+let cdn_css = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline.css`
+let cdn_css_meta = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline-meta.css`
+let cdn_js = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline.js`
+const { enable: t_cdn_enable, provider: t_cdn_provider } = theme?.cdn
+if (t_cdn_enable === true) {
+    switch (t_cdn_provider) {
+        case 'jsdelivr':
+            cdn_css = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline.css`
+            cdn_css_meta = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline-meta.css`
+            cdn_js = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline.js`
+            break
+
+        case 'unpkg':
+            cdn_css = `//unpkg.com/@waline/client@v${waline_version}/dist/waline.css`
+            cdn_css_meta = `//unpkg.com/@waline/client@v${waline_version}/dist/waline-meta.css`
+            cdn_js = `//unpkg.com/@waline/client@v${waline_version}/dist/waline.js`
+            break
+    }
+}
+%>
+<% if(waline_env_server_url) { %>
+    <div class="waline-comment-container">
+        <link rel="stylesheet" href="<%= cdn_css %>"/>
+        <link rel="stylesheet" href="<%= cdn_css_meta %>"/>
+        <script <%= pjax_enable === true ? 'data-pjax' : '' %> src="<%= cdn_js %>"></script>
+        <div id="waline-comment"></div>
+        <script <%= pjax_enable === true ? 'data-pjax' : '' %>>
+          function loadWaline() {
+            Waline.init({
+              el: '#waline-comment',
+              serverURL: '<%= waline_env_server_url %>',
+              lang: '<%= config.language %>' || 'zh-CN',
+              comment: '.post-comments-count',
+              reaction: '<%= waline_reaction %>' === 'true'
+            })
+          }
+
+          if ('<%= pjax_enable %>' === 'true') {
+            setTimeout(() => {
+              loadWaline()
+            }, 1000)
+          } else {
+            window.addEventListener('DOMContentLoaded', loadWaline)
+          }
+        </script>
+    </div>
+<% } %>

layout/_partial/footer.ejs

@@ -32,7 +32,7 @@ const { site_uv: bsz_site_uv, site_pv: bsz_site_pv, enable: bsz_enable } = theme
         <div class="theme-info info-item">
             <%- __('powered_by', '<a target="_blank" href="https://hexo.io">Hexo</a>') %>&nbsp;|&nbsp;<%- __('theme') %>
             &nbsp;
-            <a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.4.9</a>
+            <a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.5.0</a>
         </div>
         <% if (f_icp) { %>
             <div class="icp-info info-item">

layout/_partial/header.ejs

@@ -4,7 +4,7 @@ const { logo: s_logo, first_screen: s_first_screen } = theme.style
 const { enable: s_fs_enable, header_transparent: s_fs_header_transparent } = s_first_screen
 const { title: config_title } = config
 %>
-<header class="header-wrapper<%= is_home() && s_fs_header_transparent ? ' transparent-1' : '' %>">
+<header class="header-wrapper<%= s_fs_enable === true && is_home() && s_fs_header_transparent ? ' transparent-1' : '' %>">
 
     <div class="header-content<%- (s_fs_enable === true && is_home() && !page.prev) ? ' has-first-screen' : '' %>">
         <div class="left">

layout/_partial/home-article-meta-info.ejs

@@ -39,5 +39,5 @@ const target_date = post.date !== post.updated ? post.updated : post.date
         <% } %>
     </div>
 
-    <a href="<%- url_for(post.path) %>"><%- __('read_more') %>&nbsp;<i class="fas fa-angle-right"></i></a>
+    <a class="read-more" href="<%- url_for(post.path) %>"><%- __('read_more') %>&nbsp;<i class="fas fa-angle-right"></i></a>
 </div>

layout/_partial/page-template.ejs

@@ -11,7 +11,7 @@
         <% if (isLoadFriendsLink) { %>
             <%- partial('_partial/friends-link') %>
         <% } %>
-        <div class="page-template-content markdown-body">
+        <div class="page-template-content keep-markdown-body">
             <% if (isLoadFriendsLink || page.content) { %>
                 <%- page.content %>
             <% } else { %>

layout/_partial/post-tools.ejs

@@ -2,15 +2,16 @@
     <ul class="tools-list">
         <!-- TOC aside toggle -->
         <% if (theme.toc.enable) { %>
-            <li class="tools-item page-aside-toggle">
+            <li class="tools-item flex-center toggle-show-toc">
-                <i class="fas fa-outdent"></i>
+                <i class="fas fa-list"></i>
             </li>
         <% } %>
 
         <!-- go comment -->
         <% if (theme.comment.enable === true && theme.comment.hasOwnProperty(theme.comment.use)) { %>
-            <li class="go-comment">
+            <li class="tools-item flex-center go-to-comments">
                 <i class="fas fa-comment"></i>
+                <span class="post-comments-count"></span>
             </li>
         <% } %>
     </ul>

layout/_partial/scripts.ejs

@@ -10,7 +10,7 @@
 const {
     local_search: t_local_search,
     code_copy: t_code_copy,
-    code_block_tools: t_code_block_tools,
+    code_block: t_code_block,
     lazyload: t_lazyload,
     toc: t_toc,
     pjax: t_pjax
@@ -21,8 +21,8 @@ const {
     <%- __js('js/local-search.js') %>
 <% } %>
 
-<% if (t_code_block_tools?.enable === true || t_code_copy?.enable === true) { %>
+<% if (t_code_copy?.enable === true || t_code_block?.enable === true || t_code_block?.tools?.enable === true) { %>
-    <%- __js('js/code-block-tools.js') %>
+    <%- __js('js/code-block.js') %>
 <% } %>
 
 <% if (t_lazyload?.enable === true) { %>
@@ -32,9 +32,9 @@ const {
 <div class="post-scripts<%= theme.pjax?.enable === true ? ' pjax' : '' %>">
     <% if (t_toc?.enable === true && is_post()) { %>
         <%- __js([
-            'js/left-side-toggle.js',
+            'js/post-helper.js',
-            'js/libs/anime.min.js',
+            'js/toc.js',
-            'js/toc.js'
+            'js/libs/anime.min.js'
         ]) %>
     <% } %>
 </div>

layout/_partial/side-tools.ejs

@@ -8,10 +8,6 @@
             <i class="fas fa-search-minus"></i>
         </li>
 
-        <li class="tools-item tool-expand-width flex-center">
-            <i class="fas fa-up-right-and-down-left-from-center"></i>
-        </li>
-
         <li class="tools-item tool-dark-light-toggle flex-center">
             <i class="fas fa-moon"></i>
         </li>

layout/_partial/toc.ejs

@@ -4,7 +4,7 @@
                 page.content,
                 {
                     class: 'nav',
-                    list_number: theme.toc.number
+                    list_number: theme.toc.number || false
                 }
         ) %>
     </div>

layout/article-content.ejs

@@ -1,4 +1,5 @@
 <div class="fade-in-down-animation">
+    <div class="post-page-container">
         <div class="article-content-container">
 
             <div class="article-title">
@@ -30,7 +31,7 @@
                 </div>
             <% } %>
 
-        <div class="article-content markdown-body">
+            <div class="article-content keep-markdown-body">
                 <%- page.content %>
             </div>
 
@@ -93,4 +94,11 @@
                 </div>
             <% } %>
         </div>
+
+        <% if (is_post() && theme.toc.enable === true && page.toc !== false) { %>
+            <div class="toc-content-container">
+                <%- partial('_partial/toc') %>
+            </div>
+        <% } %>
+    </div>
 </div>

layout/home-content.ejs

@@ -13,7 +13,7 @@
                     </a>
                 </h3>
 
-                <div class="home-article-content markdown-body">
+                <div class="home-article-content keep-markdown-body">
                     <% if (post.excerpt) { %>
                         <%- post.excerpt %>
                     <% } else { %>

layout/page.ejs

@@ -1,11 +1,11 @@
 <%- partial('_partial/progress-bar') %>
 <main class="page-container">
 
-    <% if (theme.style.first_screen.enable === true && is_home() && !page.prev) { %>
+    <% if (theme.style.first_screen?.enable === true && is_home() && !page.prev) { %>
         <%- partial('_partial/first-screen') %>
     <% } %>
 
-    <div class="page-main-content<%= is_home() ? ' home' : '' %>">
+    <div class="page-main-content<%= is_home() ? ' is-home' : '' %>">
 
         <div class="page-main-content-top">
             <%- partial('_partial/header') %>
@@ -59,15 +59,9 @@
         <%- partial('_partial/side-tools') %>
     </div>
 
-    <% if (is_post() && theme.toc.enable === true && page.toc !== false) { %>
-        <aside class="page-aside">
-            <%- partial('_partial/toc') %>
-        </aside>
-    <% } %>
-
     <%- partial('_partial/image-viewer') %>
 
-    <% if (theme.local_search.enable) { %>
+    <% if (theme.local_search?.enable) { %>
         <%- partial('_partial/local-search') %>
     <% } %>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-keep",
-  "version": "3.4.9",
+  "version": "3.5.0",
   "private": false,
   "description": "A simple and elegant theme for Hexo.",
   "scripts": {

scripts/helpers/export-config.js

@@ -40,7 +40,7 @@ hexo.extend.helper.register('export_config', function () {
     style: theme.style || {},
     local_search: theme.local_search || {},
     code_copy: theme.code_copy || {},
-    code_block_tools: theme.code_block_tools || {},
+    code_block: theme.code_block || {},
     side_tools: theme.side_tools || {},
     pjax: theme.pjax || {},
     lazyload: theme.lazyload || {},

scripts/helpers/helper.js

@@ -55,7 +55,8 @@ hexo.extend.helper.register('getPostUrl', function (rootUrl, path) {
 
 const getSourceCdnUrl = (tyle, themeConfig, path) => {
   const version = require('../../package.json').version
-  const { provider = 'jsdelivr' } = themeConfig?.cdn
+  const cdn = themeConfig?.cdn || {}
+  const { provider = 'jsdelivr' } = cdn
 
   let urlPrefix = ''
   switch (provider.toLocaleLowerCase()) {

source/css/common/animated.styl

@@ -26,10 +26,10 @@ transition-t(property, delay, duration, function) {
   for f in convert(function) {
     $temp-function += ("," + f)
   }
+
   transition-delay convert($temp-delay)
   transition-timing-function convert($temp-function)
   transition-duration convert($temp-duration)
-
   transition-property convert($temp-property)
 }
 
@@ -86,7 +86,7 @@ transition-t(property, delay, duration, function) {
 .title-hover-animation {
   position relative
   display inline-block
-  color var(--second-text-color)
+  color var(--text-color-2)
   line-height 1.3
   vertical-align top
   border-bottom none
@@ -97,7 +97,7 @@ transition-t(property, delay, duration, function) {
     left 0
     width 100%
     height 2px
-    background-color var(--second-text-color)
+    background-color var(--text-color-2)
     transform scaleX(0)
     visibility hidden
     content ""

source/css/common/basic.styl

@@ -28,7 +28,7 @@
   }
 
   &::-webkit-scrollbar-track {
-    background var(--scroll-bar-bg-color)
+    background var(--scrollbar-background-color)
   }
 }
 
@@ -43,18 +43,33 @@ body {
   height 100%
   margin 0
   padding 0
-  color var(--default-text-color)
+  color var(--text-color-3)
   font-weight $default-font-weight
   font-size $default-font-size
   font-family $default-font-family
   line-height $default-font-line-height
-  background var(--background-color)
+  letter-spacing 0.2px
+  background var(--background-color-1)
 
   &::-webkit-scrollbar {
     width 0.6rem
     height 0.6rem
   }
 
+  +keep-tablet() {
+    &::-webkit-scrollbar {
+      width 0.5rem
+      height 0.5rem
+    }
+  }
+
+  +keep-mobile() {
+    &::-webkit-scrollbar {
+      width 0.4rem
+      height 0.4rem
+    }
+  }
+
   +keep-tablet() {
     font-size $default-font-size * 0.96
     line-height $default-font-line-height * 0.96
@@ -93,12 +108,12 @@ li {
 // a
 // ======================================================================
 a {
-  color var(--default-text-color)
+  color var(--text-color-3)
   text-decoration none
 
   i
   span {
-    color var(--default-text-color)
+    color var(--text-color-3)
   }
 
   &:hover
@@ -134,7 +149,7 @@ img {
       display block
       width 100%
       height 100%
-      background var(--background-color)
+      background var(--background-color-1)
       content ''
       transition-t("background", "0", "0.2", "ease")
     }
@@ -149,7 +164,7 @@ img {
       width 2rem
       height 2rem
       margin auto
-      border 2px solid var(--fourth-text-color)
+      border 2px solid var(--text-color-6)
       border-top-color var(--selection-color)
       border-left-color var(--selection-color)
       border-radius 50%
@@ -179,14 +194,14 @@ button {
   padding 0.4rem 1rem
   white-space nowrap
   text-align center
-  background var(--background-color)
+  background var(--background-color-1)
   border-radius 5px
   cursor pointer
 
   hover-style(true, 1.06, 1.06)
 
   &:hover {
-    color var(--background-color)
+    color var(--background-color-1)
     background var(--primary-color)
   }
 }
@@ -244,10 +259,10 @@ button {
     display none
     box-sizing border-box
     padding 0.2rem 0.6rem
-    color var(--fourth-text-color)
+    color var(--text-color-6)
     font-size 0.8rem
     white-space nowrap
-    background var(--first-text-color)
+    background var(--text-color-1)
     border-radius 0.3rem
     transform translateX(-50%) translateY(-100%)
     transition-t("display", "0", "0.2", "ease")
@@ -276,8 +291,8 @@ button {
     justify-content center
     box-sizing border-box
     min-height 6rem
-    background var(--fourth-text-color)
+    background var(--text-color-6)
-    border 0.2rem solid var(--default-text-color)
+    border 0.2rem solid var(--text-color-3)
     border-radius 0.3rem
     transform translateX(-50%) translateY(-100%)
     transition-t("display", "0", "0.2", "ease")

source/css/common/code-block/code-block.styl

@@ -3,6 +3,76 @@
   box-sizing border-box
   margin 1.4rem 0
 
+  &.mac {
+    margin 1.4rem 0 1.8rem 0
+    box-shadow 0 0.8rem 2rem 0 rgba(0, 0, 0, 0.4)
+
+    &:hover {
+      .code-tools-box .copy {
+        opacity 1
+      }
+    }
+
+
+    .code-tools-box {
+      justify-content flex-end
+      padding 0.4rem 0.6rem 0.7rem 0.4rem
+      background #21252b
+
+      &::before {
+        position absolute
+        left 0.8rem
+        width 0.76rem
+        height 0.76rem
+        background #fc625d
+        border-radius 50%
+        box-shadow 1.3rem 0 #fdbc40, 2.6rem 0 #35cd4b
+        content ''
+      }
+
+
+      &.folded {
+        border-bottom-right-radius 0
+        border-bottom-left-radius 0
+
+        .copy {
+          display none
+        }
+      }
+
+
+      .code-lang {
+        order 1
+        color #bbb
+      }
+
+
+      .fold {
+        order 2
+        padding 0 0.1rem 0 0.6rem
+
+        i {
+          color #ccc
+        }
+      }
+
+
+      .copy {
+        position absolute
+        top 3rem
+        right 0.5rem
+        padding 0 0.1rem
+        opacity 0
+        transition-t("opacity", "0", "0.2", "ease-in-out")
+
+        i {
+          font-size 1rem
+        }
+      }
+    }
+  }
+
+
   .code-tools-box {
     display flex
     align-items center
@@ -10,30 +80,32 @@
     box-sizing border-box
     width 100%
     padding 0.3rem 0.4rem
-    background var(--fourth-text-color)
+    color var(--toolbar-foreground)
+    background var(--toolbar-background)
     border-top-left-radius 0.3rem
     border-top-right-radius 0.3rem
 
+
     &.folded {
       border-bottom-right-radius 0.3rem
       border-bottom-left-radius 0.3rem
     }
 
+
     .code-lang {
       justify-content flex-start
       margin-left 0.2rem
-      color var(--default-text-color)
       font-weight 600
       font-size 0.9rem
       font-family "Source Code Pro", consolas, Menlo
     }
 
+
     .tool {
       disable-user-select()
       cursor pointer
 
       i {
-        color var(--second-text-color)
         font-size 0.8rem
       }
     }
@@ -52,69 +124,4 @@
       height 0
     }
   }
-
-
-  if (hexo-config('code_block_tools.style') == 'mac' || hexo-config('code_copy.style') == 'mac') {
-    margin 1.4rem 0 1.8rem 0
-    box-shadow 0 0.8rem 2rem 0 rgba(0, 0, 0, 0.4)
-
-    &:hover {
-      .code-tools-box .copy {
-        opacity 1
-      }
-    }
-
-    .code-tools-box {
-      justify-content flex-end
-      padding 0.4rem 0.6rem 0.7rem 0.4rem
-      background #21252b
-
-      &::before {
-        position absolute
-        left 0.8rem
-        width 0.76rem
-        height 0.76rem
-        background #fc625d
-        border-radius 50%
-        box-shadow 1.3rem 0 #fdbc40, 2.6rem 0 #35cd4b
-        content ''
-      }
-
-      &.folded {
-        border-bottom-right-radius 0
-        border-bottom-left-radius 0
-
-        .copy {
-          display none
-        }
-      }
-
-      .code-lang {
-        order 1
-        color #bbb
-      }
-
-      .fold {
-        order 2
-        padding 0 0.1rem 0 0.6rem
-        i {
-          color #ccc
-        }
-      }
-
-
-      .copy {
-        position absolute
-        right 0.5rem
-        bottom 0.3rem
-        padding 0 0.1rem
-        opacity 0
-        transition-t("opacity", "0", "0.2", "ease-in-out")
-
-        i {
-          font-size 1rem
-        }
-      }
-    }
-  }
 }

source/css/common/code-block/code-theme.styl

@@ -1,54 +1,101 @@
 @import "../variables.styl"
 
-$code-foreground = lighten($default-text-color, 2%)
+// A single line block of code
-$code-background = darken($background-color, 5%)
+$code-foreground = lighten($text-color-3, 2%)
-$highlight-foreground = lighten($default-text-color, 2%)
+$code-background = darken($background-color-1, 5%)
-$highlight-background = darken($background-color, 2%)
+$dark-code-foreground = lighten($dark-text-color-3, 2%)
-$highlight-gutter-color = lighten($default-text-color, 5%)
+$dark-code-background = darken($dark-background-color-1, 10%)
-$highlight-gutter-bg-color = darken($background-color, 5%)
+
-$highlight-comment = #8e908c
+
-$highlight-red = #c82829
+if (hexo-config('code_block.highlight_theme') == 'obsidian') {
-$highlight-orange = #f5871f
+  $toolbar-foreground = #b5b5b5
-$highlight-yellow = #eab700
+  $toolbar-background = #3a3f40
-$highlight-green = #718c00
+  $highlight-foreground = #faf5d6
-$highlight-aqua = #3e999f
+  $highlight-background = #273036
-$highlight-blue = #4271ae
+  $highlight-gutter-color = #7a979a
-$highlight-purple = #8959a8
+  $highlight-gutter-bg-color = #273130
-$highlight-deletion = #fdd
+  $highlight-comment = #76888e
-$highlight-addition = #dfd
+  $highlight-red = #ee5758
+  $highlight-orange = #ec7600
+  $highlight-yellow = #ffcd22
+  $highlight-green = #93c763
+  $highlight-aqua = #458383
+  $highlight-blue = #6e95bd
+  $highlight-purple = #b18bb7
+  $highlight-deletion = #ff9999
+  $highlight-addition = #ccff99
+
+  $dark-toolbar-foreground = darken($toolbar-foreground, 2%)
+  $dark-toolbar-background = darken($toolbar-background, 2%)
+  $dark-highlight-foreground = darken($highlight-foreground, 10%)
+  $dark-highlight-background = darken($highlight-background, 2%)
+  $dark-highlight-gutter-color = lighten($highlight-gutter-color, 1%)
+  $dark-highlight-gutter-bg-color = darken($highlight-gutter-bg-color, 2%)
+  $dark-highlight-comment = $highlight-comment
+  $dark-highlight-red = darken($highlight-red, 2%)
+  $dark-highlight-orange = darken($highlight-orange, 2%)
+  $dark-highlight-yellow = darken($highlight-yellow, 2%)
+  $dark-highlight-green = darken($highlight-green, 2%)
+  $dark-highlight-aqua = darken($highlight-aqua, 2%)
+  $dark-highlight-blue = darken($highlight-blue, 2%)
+  $dark-highlight-purple = darken($highlight-purple, 2%)
+  $dark-highlight-deletion = darken($highlight-deletion, 2%)
+  $dark-highlight-addition = darken($highlight-addition, 2%)
+}
+else {
+  $toolbar-foreground = $text-color-3
+  $toolbar-background = $background-color-3
+  $highlight-foreground = lighten($text-color-3, 2%)
+  $highlight-background = darken($background-color-1, 2%)
+  $highlight-gutter-color = lighten($text-color-3, 5%)
+  $highlight-gutter-bg-color = darken($background-color-1, 5%)
+  $highlight-comment = #8e908c
+  $highlight-red = #c82829
+  $highlight-orange = #f5871f
+  $highlight-yellow = #eab700
+  $highlight-green = #718c00
+  $highlight-aqua = #3e999f
+  $highlight-blue = #4271ae
+  $highlight-purple = #8959a8
+  $highlight-deletion = #fdd
+  $highlight-addition = #dfd
+
+  $dark-toolbar-foreground = $dark-text-color-3
+  $dark-toolbar-background = $dark-background-color-3
+  $dark-highlight-foreground = lighten($dark-text-color-3, 2%)
+  $dark-highlight-background = darken($dark-background-color-1, 8%)
+  $dark-highlight-gutter-color = lighten($dark-text-color-3, 5%)
+  $dark-highlight-gutter-bg-color = darken($dark-background-color-1, 10%)
+  $dark-highlight-comment = #969896
+  $dark-highlight-red = #cc6666
+  $dark-highlight-orange = #de935f
+  $dark-highlight-yellow = #f0c674
+  $dark-highlight-green = #b5bd68
+  $dark-highlight-aqua = #8abeb7
+  $dark-highlight-blue = #81a2be
+  $dark-highlight-purple = #b294bb
+  $dark-highlight-deletion = #008000
+  $dark-highlight-addition = #800000
+}
 
-$night-code-foreground = lighten($dark-default-text-color, 2%)
-$night-code-background = darken($dark-background-color, 10%)
-$night-highlight-foreground = lighten($dark-default-text-color, 2%)
-$night-highlight-background = darken($dark-background-color, 8%)
-$night-highlight-gutter-color = lighten($dark-default-text-color, 5%)
-$night-highlight-gutter-bg-color = darken($dark-background-color, 10%)
-$night-highlight-comment = #969896
-$night-highlight-red = #cc6666
-$night-highlight-orange = #de935f
-$night-highlight-yellow = #f0c674
-$night-highlight-green = #b5bd68
-$night-highlight-aqua = #8abeb7
-$night-highlight-blue = #81a2be
-$night-highlight-purple = #b294bb
-$night-highlight-deletion = #008000
-$night-highlight-addition = #800000
 
 code-theme(mode) {
-  --code-foreground mode == 'light' ? $code-foreground : $night-code-foreground
+  --toolbar-foreground mode == 'light' ? $toolbar-foreground : $dark-toolbar-foreground
-  --code-background mode == 'light' ? $code-background : $night-code-background
+  --toolbar-background mode == 'light' ? $toolbar-background : $dark-toolbar-background
-  --highlight-background mode == 'light' ? $highlight-background : $night-highlight-background
+  --code-foreground mode == 'light' ? $code-foreground : $dark-code-foreground
-  --highlight-foreground mode == 'light' ? $highlight-foreground : $night-highlight-foreground
+  --code-background mode == 'light' ? $code-background : $dark-code-background
-  --highlight-comment mode == 'light' ? $highlight-comment : $night-highlight-comment
+  --highlight-background mode == 'light' ? $highlight-background : $dark-highlight-background
-  --highlight-red mode == 'light' ? $highlight-red : $night-highlight-red
+  --highlight-foreground mode == 'light' ? $highlight-foreground : $dark-highlight-foreground
-  --highlight-orange mode == 'light' ? $highlight-orange : $night-highlight-orange
+  --highlight-comment mode == 'light' ? $highlight-comment : $dark-highlight-comment
-  --highlight-yellow mode == 'light' ? $highlight-yellow : $night-highlight-yellow
+  --highlight-red mode == 'light' ? $highlight-red : $dark-highlight-red
-  --highlight-green mode == 'light' ? $highlight-green : $night-highlight-green
+  --highlight-orange mode == 'light' ? $highlight-orange : $dark-highlight-orange
-  --highlight-aqua mode == 'light' ? $highlight-aqua : $night-highlight-aqua
+  --highlight-yellow mode == 'light' ? $highlight-yellow : $dark-highlight-yellow
-  --highlight-blue mode == 'light' ? $highlight-blue : $night-highlight-blue
+  --highlight-green mode == 'light' ? $highlight-green : $dark-highlight-green
-  --highlight-purple mode == 'light' ? $highlight-purple : $night-highlight-purple
+  --highlight-aqua mode == 'light' ? $highlight-aqua : $dark-highlight-aqua
-  --highlight-gutter-color mode == 'light' ? $highlight-gutter-color : $night-highlight-gutter-color
+  --highlight-blue mode == 'light' ? $highlight-blue : $dark-highlight-blue
-  --highlight-gutter-bg-color mode == 'light' ? $highlight-gutter-bg-color : $night-highlight-gutter-bg-color
+  --highlight-purple mode == 'light' ? $highlight-purple : $dark-highlight-purple
+  --highlight-gutter-color mode == 'light' ? $highlight-gutter-color : $dark-highlight-gutter-color
+  --highlight-gutter-bg-color mode == 'light' ? $highlight-gutter-bg-color : $dark-highlight-gutter-bg-color
 }
 
 

source/css/common/code-block/highlight.styl

@@ -8,7 +8,7 @@ $code-block {
   font-size 0.96rem
   line-height 1.5rem
   background var(--highlight-background)
-  -webkit-text-size-adjust none
+  not-text-size-adjust()
 }
 
 
@@ -40,7 +40,8 @@ pre {
 
 .highlight {
   @extend $code-block
-  border-radius 0.1rem
+  border-bottom-right-radius 0.1rem
+  border-bottom-left-radius 0.1rem
 
   pre {
     margin 0
@@ -95,24 +96,27 @@ pre {
 
   .line {
     height 1.5rem
-    color var(--default-text-color)
+    color var(--highlight-foreground)
 
     .attr {
-      color var(--default-text-color)
+      color var(--highlight-foreground)
     }
 
     .string {
-      color var(--default-text-color)
+      color var(--highlight-foreground)
     }
   }
 }
 
 
 .gutter {
-  -webkit-user-select none
+  disable-user-select()
-  -moz-user-select none
+  color var(--highlight-gutter-color)
-  -ms-user-select none
+  background var(--highlight-gutter-bg-color)
-  user-select none
+
+  .line {
+    color var(--highlight-gutter-color)
+  }
 }
 
 .gist table {
@@ -123,7 +127,6 @@ pre {
   }
 }
 
-// For diff highlight
 pre .deletion {
   background var(--highlight-deletion)
 }
@@ -157,6 +160,10 @@ pre {
     color var(--highlight-red)
   }
 
+  .property {
+    color var(--highlight-blue)
+  }
+
   .number
   .preprocessor
   .built_in

source/css/common/keep-theme.styl

@@ -1,4 +1,4 @@
-$keep-container-border-radius = 5px
+$keep-container-border-radius = 0.4rem
 
 hover-style(isTransform, scaleX, scaleY) {
   box-shadow 2px 2px 5px var(--shadow-color)
@@ -22,7 +22,7 @@ hover-style(isTransform, scaleX, scaleY) {
 keep-container(isTransform, scaleX, scaleY, padding, marginBottomValue) {
   box-sizing border-box
   padding padding
-  background var(--background-color)
+  background var(--content-background-color)
   border-radius $keep-container-border-radius
 
   if (marginBottomValue != 0) {
@@ -58,3 +58,12 @@ disable-user-select() {
   -webkit-user-select none
   user-select none
 }
+
+
+not-text-size-adjust() {
+  -ms-text-size-adjust none
+  -moz-text-size-adjust none
+  -webkit-text-size-adjust none
+}
+
+

source/css/common/markdown.styl

@@ -1,4 +1,4 @@
-.markdown-body {
+.keep-markdown-body {
   font-size 1rem
 
   blockquote {
@@ -11,14 +11,14 @@
 
     box-sizing border-box
     margin 1.4rem 0
-    color var(--default-text-color)
+    color var(--text-color-3)
-    background var(--second-background-color)
+    background var(--background-color-2)
-    border-left 0.4rem solid var(--default-text-color)
+    border-left 0.4rem solid var(--text-color-4)
   }
 
 
   p {
-    color var(--default-text-color)
+    color var(--text-color-3)
     line-height 2
   }
 
@@ -29,7 +29,7 @@
     padding-bottom 0.2rem
     text-decoration none
     overflow-wrap break-word
-    border-bottom 0.1rem solid var(--third-text-color)
+    border-bottom 0.1rem solid var(--text-color-4)
     outline 0
     cursor pointer
 
@@ -38,7 +38,7 @@
     .fab {
       position relative
       margin 0 0.2rem 0 0.4rem
-      color var(--third-text-color)
+      color var(--text-color-4)
       font-size 0.88rem
     }
 
@@ -54,12 +54,12 @@
 
 
   strong {
-    color var(--default-text-color)
+    color var(--text-color-3)
   }
 
 
   em {
-    color var(--default-text-color)
+    color var(--text-color-3)
   }
 
 
@@ -115,7 +115,7 @@
 
 
   li {
-    color var(--default-text-color)
+    color var(--text-color-3)
   }
 
 
@@ -125,7 +125,7 @@
   h4
   h5
   h6 {
-    color var(--second-text-color)
+    color var(--text-color-2)
     line-height 1.5
 
     +keep-tablet() {
@@ -209,6 +209,10 @@
       opacity 0
     }
 
+    &[lazyload] {
+      margin 0.8rem auto 0.2rem
+    }
+
     if (hexo-config('post.img_align') == 'center' || hexo-config('style.article_img_align') == 'center') {
       margin 0.8rem auto 0.2rem
     }
@@ -246,12 +250,12 @@
     }
 
     tr {
-      background-color var(--background-color)
+      background-color var(--background-color-1)
-      border 0.1rem solid var(--fourth-text-color)
+      border 0.1rem solid var(--text-color-6)
     }
 
     tr:nth-child(2n) {
-      background-color var(--second-background-color)
+      background-color var(--background-color-2)
     }
   }
 }

source/css/common/variables.styl

@@ -14,16 +14,19 @@ $main-content-width-tablet = 86%                                // main content
 $main-content-width-mobile = 90%                                // main content width (mobile)
 $post-tool-button-width = 38px                                  // post tool button width
 $component-spacing-value = 38px                                 // component-spacing-value (PC)
+$content-max-width = 928px                                      // main content max width
 
-// main content max width
+// main content max width of has TOC
-$temp-content-max-width = hexo-config('style.content_max_width')
+$has-toc-content-max-width = $content-max-width * 1.2
-$content-max-width = $temp-content-max-width ? convert($temp-content-max-width) : 1000px
+
+// main content max width of has first screen
+$has-fs-content-max-width = $content-max-width * 1.2
 
 
 // ==============================================================================================
 // media query
 // ==============================================================================================
-$media-max-width = 780px                                 // media query max width (tablet)
+$media-max-width = 800px                                 // media query max width (tablet)
 $media-max-width-mobile = 500px                          // media query max width (mobile)
 
 keep-tablet() {
@@ -60,53 +63,89 @@ $z-index-10 = 1010
 $temp-color = hexo-config('style.primary_color')
 $primary-color = $temp-color ? convert($temp-color) : #0066cc
 
+// light
+$primary-color-light-1 = lighten($primary-color, 10%)
+$primary-color-light-2 = lighten($primary-color, 20%)
+
+// dark
+$primary-color-dark-1 = darken($primary-color, 10%)
+$primary-color-dark-2 = darken($primary-color, 20%)
+
 
 // ==============================================================================================
 // theme light mode color set
 // ==============================================================================================
-$background-color = #fff
+$background-color-1 = #fff
-$second-background-color = darken($background-color, 3%)
+$background-color-2= darken($background-color-1, 3%)
-$default-text-color = #50505c
+$background-color-3= darken($background-color-1, 6%)
-$first-text-color = darken($default-text-color, 10%)
+$content-background-color = #fff
-$second-text-color = darken($default-text-color, 5%)
+
-$third-text-color = lighten($default-text-color, 30%)
+$text-color-3 = #50505c
-$fourth-text-color = lighten($default-text-color, 90%)
+$text-color-1 = darken($text-color-3, 10%)
-$border-color = darken($background-color, 30%)
+$text-color-2 = darken($text-color-3, 5%)
+$text-color-4 = lighten($text-color-3, 30%)
+$text-color-5 = lighten($text-color-3, 60%)
+$text-color-6 = lighten($text-color-3, 90%)
+
+$toc-text-color = lighten($text-color-3, 20%)
+
+$badge-color = darken($background-color-1, 6%)
+$badge-background-color = lighten($text-color-3, 40%)
+
+$border-color = darken($background-color-1, 30%)
 $selection-color = lighten($primary-color, 10%)
+
 $shadow-color = rgba(0, 0, 0, 0.2)
-$shadow-hover-color = rgba(0, 0, 0, 0.28)
+$shadow-hover-color = rgba(0, 0, 0, 0.3)
-$scrollbar-color = lighten($default-text-color, 6%)
+
-$scroll-bar-bg-color = darken($background-color, 10%)
+$scrollbar-color = lighten($text-color-3, 10%)
-$link-color = darken($default-text-color, 10%)
+$scrollbar-background-color = darken($background-color-1, 10%)
+$toc-scrollbar-color = alpha($text-color-3, 0.1)
+
 $copyright-info-color = #cc0033
-$avatar-background-color = #0066cc
+$avatar-background-color = $primary-color-dark-1
-$header-transparent-background-1 = alpha($background-color, 0.28)
+$header-transparent-background-1 = alpha($background-color-1, 0.28)
-$header-transparent-background-2 = alpha($background-color, 0.58)
+$header-transparent-background-2 = alpha($background-color-1, 0.58)
+
 $pjax-progress-bar-color = linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3)
 
 
 // ==============================================================================================
 // theme dark mode color set
 // ==============================================================================================
-$dark-primary-color = $primary-color
+$dark-background-color-1 = #383940
-$dark-background-color = #383940
+$dark-background-color-2= lighten($dark-background-color-1, 3%)
-$dark-second-background-color = darken($dark-background-color, 10%)
+$dark-background-color-3= lighten($dark-background-color-1, 6%)
-$dark-default-text-color = #bebec6
+$dark-content-background-color = darken($dark-background-color-1, 2%)
-$dark-first-text-color = lighten($dark-default-text-color, 30%)
+
-$dark-second-text-color = lighten($dark-default-text-color, 20%)
+$dark-text-color-3 = #bebec6
-$dark-third-text-color = darken($dark-default-text-color, 20%)
+$dark-text-color-1 = lighten($dark-text-color-3, 10%)
-$dark-fourth-text-color = darken($dark-default-text-color, 75%)
+$dark-text-color-2 = lighten($dark-text-color-3, 5%)
-$dark-border-color = lighten($dark-background-color, 20%)
+$dark-text-color-4 = darken($dark-text-color-3, 20%)
-$dark-selection-color = $selection-color
+$dark-text-color-5 = darken($dark-text-color-3, 50%)
+$dark-text-color-6 = darken($dark-text-color-3, 70%)
+
+$dark-toc-text-color = darken($dark-text-color-3, 15%)
+
+$dark-badge-color = lighten($dark-background-color-1, 10%)
+$dark-badge-background-color = lighten($dark-text-color-3, 40%)
+
+$dark-border-color = lighten($dark-background-color-1, 30%)
+$dark-selection-color = darken($selection-color, 20%)
+
 $dark-shadow-color = rgba(128, 128, 128, 0.2)
 $dark-shadow-hover-color = rgba(128, 128, 128, 0.28)
-$dark-scrollbar-color = darken($dark-background-color, 10%)
+
-$dark-scroll-bar-bg-color = lighten($dark-background-color, 20%)
+$dark-scrollbar-color = darken($dark-background-color-1, 10%)
-$dark-link-color = lighten($dark-default-text-color, 10%)
+$dark-scrollbar-background-color = lighten($dark-background-color-1, 20%)
+$dark-toc-scrollbar-color = alpha($dark-text-color-3, 0.1)
+
 $dark-copyright-info-color = darken($copyright-info-color, 20%)
-$dark-avatar-background-color = darken($avatar-background-color, 10%)
+$dark-avatar-background-color = darken($avatar-background-color, 20%)
-$dark-header-transparent-background-1 = alpha($dark-background-color, 0.28)
+
-$dark-header-transparent-background-2 = alpha($dark-background-color, 0.58)
+$dark-header-transparent-background-1 = alpha($dark-background-color-1, 0.28)
+$dark-header-transparent-background-2 = alpha($dark-background-color-1, 0.58)
+
 $dark-pjax-progress-bar-color = linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee)
 
 
@@ -126,25 +165,57 @@ $default-font-weight = 400
 //  light/dark mode color
 // ==============================================================================================
 root-color(mode) {
-  --background-color mode == 'light' ? $background-color : $dark-background-color
+  // primary color
-  --second-background-color mode == 'light' ? $second-background-color : $dark-second-background-color
+  --primary-color $primary-color
-  --primary-color mode == 'light' ? $primary-color : $dark-primary-color
+  --primary-color-light-1 $primary-color-light-1
-  --first-text-color mode == 'light' ? $first-text-color : $dark-first-text-color
+  --primary-color-light-2 $primary-color-light-2
-  --second-text-color mode == 'light' ? $second-text-color : $dark-second-text-color
+  --primary-color-dark-1 $primary-color-dark-1
-  --third-text-color mode == 'light' ? $third-text-color : $dark-third-text-color
+  --primary-color-dark-2 $primary-color-dark-2
-  --fourth-text-color mode == 'light' ? $fourth-text-color : $dark-fourth-text-color
+
-  --default-text-color mode == 'light' ? $default-text-color : $dark-default-text-color
+  // background color
+  --background-color-1 mode == 'light' ? $background-color-1 : $dark-background-color-1
+  --background-color-2 mode == 'light' ? $background-color-2 : $dark-background-color-2
+  --background-color-3 mode == 'light' ? $background-color-3 : $dark-background-color-3
+
+  // content background color
+  --content-background-color mode == 'light' ? $content-background-color : $dark-content-background-color
+
+  // text color
+  --text-color-1 mode == 'light' ? $text-color-1 : $dark-text-color-1
+  --text-color-2 mode == 'light' ? $text-color-2 : $dark-text-color-2
+  --text-color-3 mode == 'light' ? $text-color-3 : $dark-text-color-3
+  --text-color-4 mode == 'light' ? $text-color-4 : $dark-text-color-4
+  --text-color-5 mode == 'light' ? $text-color-5 : $dark-text-color-5
+  --text-color-6 mode == 'light' ? $text-color-6 : $dark-text-color-6
+
+  // toc text color
+  --toc-text-color mode == 'light' ? $toc-text-color : $dark-toc-text-color
+
+  // badge color
+  --badge-color mode == 'light' ? $badge-color : $dark-badge-color
+  --badge-background-color mode == 'light' ? $badge-background-color : $dark-badge-background-color
+
+  // border color
   --border-color mode == 'light' ? $border-color : $dark-border-color
+
+  // selection color
   --selection-color mode == 'light' ? $selection-color : $dark-selection-color
+
+  // shadow color
   --shadow-color mode == 'light' ? $shadow-color : $dark-shadow-color
   --shadow-hover-color mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color
+
+  // scrollbar color
   --scrollbar-color mode == 'light' ? $scrollbar-color : $dark-scrollbar-color
-  --scroll-bar-bg-color mode == 'light' ? $scroll-bar-bg-color : $dark-scroll-bar-bg-color
+  --scrollbar-background-color mode == 'light' ? $scrollbar-background-color : $dark-scrollbar-background-color
-  --link-color mode == 'light' ? $link-color : $dark-link-color
+  --toc-scrollbar-color mode == 'light' ? $toc-scrollbar-color : $dark-toc-scrollbar-color
+
   --copyright-info-color mode == 'light' ? $copyright-info-color : $dark-copyright-info-color
   --avatar-background-color mode == 'light' ? $avatar-background-color : $dark-avatar-background-color
+
   --header-transparent-background-1 mode == 'light' ? $header-transparent-background-1 : $dark-header-transparent-background-1
   --header-transparent-background-2 mode == 'light' ? $header-transparent-background-2 : $dark-header-transparent-background-2
+
   --pjax-progress-bar-color  mode == 'light' ? $pjax-progress-bar-color : $dark-pjax-progress-bar-color
 }
 

source/css/layout/_partial/archive-list.styl

@@ -17,7 +17,7 @@ $article-date-font-size = 1rem
 
       .archive-year {
         margin-right 6px
-        color var(--second-text-color)
+        color var(--text-color-2)
         font-weight 600
         font-size $archive-year-font-size
 
@@ -28,7 +28,7 @@ $article-date-font-size = 1rem
 
 
       .archive-year-post-count {
-        color var(--second-text-color)
+        color var(--text-color-2)
         font-weight 500
         font-size $archive-year-count-font-size
 
@@ -68,12 +68,12 @@ $article-date-font-size = 1rem
 
 
         a.article-title {
-          color var(--default-text-color)
+          color var(--text-color-3)
         }
 
         .article-date {
           float right
-          color var(--default-text-color)
+          color var(--text-color-3)
           font-size $article-date-font-size
         }
       }

source/css/layout/_partial/article-copyright-info.styl

@@ -4,7 +4,7 @@
   width 100%
   overflow hidden
   font-size 1rem
-  background var(--second-background-color)
+  background var(--background-color-2)
 
   &::after {
     position absolute
@@ -30,7 +30,7 @@
     }
 
     &::-webkit-scrollbar-thumb {
-      background var(--third-text-color)
+      background var(--text-color-4)
     }
 
     &::-webkit-scrollbar-track {
@@ -39,7 +39,7 @@
 
     li {
       margin-bottom 0.4rem
-      color var(--default-text-color)
+      color var(--text-color-3)
       white-space nowrap
 
       .license {

source/css/layout/_partial/article-meta-info.styl

@@ -3,7 +3,7 @@
 
   .article-meta-item {
     margin-right 0.6rem
-    color var(--third-text-color)
+    color var(--text-color-4)
 
     &:last-child {
       margin-right 0
@@ -44,7 +44,7 @@
     }
 
     a {
-      color var(--third-text-color)
+      color var(--text-color-4)
 
       &:hover {
         color var(--primary-color)

source/css/layout/_partial/comment/comment.styl

@@ -8,6 +8,9 @@ if (hexo-config('comment.enable') == true && hexo-config('comment.use') != "") {
   else if (hexo-config('comment.use') == "twikoo") {
     @import "./twikoo.styl"
   }
+  else if (hexo-config('comment.use') == "waline") {
+    @import "./waline.styl"
+  }
 }
 
 .comments-container {
@@ -15,7 +18,7 @@ if (hexo-config('comment.enable') == true && hexo-config('comment.use') != "") {
   width 100%
   margin-top $component-spacing-value
 
-  #comment-anchor {
+  #comments-anchor {
     width 100%
     height 0.8rem
   }
@@ -23,11 +26,11 @@ if (hexo-config('comment.enable') == true && hexo-config('comment.use') != "") {
   .comment-area-title {
     width 100%
     margin 0.8rem 0
-    color var(--default-text-color)
+    color var(--text-color-3)
     font-size 1.38rem
 
     i {
-      color var(--default-text-color)
+      color var(--text-color-3)
     }
 
     +keep-tablet() {

source/css/layout/_partial/comment/gitalk.styl

@@ -1,562 +1,105 @@
-// variables
+.gitalk-comment-container {
-$gt-color-main := #6190e8
-$gt-color-sub := #a1a1a1
-$gt-color-loader := #999999
-$gt-color-error := #ff3860
-$gt-color-hr :=  #e9e9e9
-$gt-color-comment-txt := #333333
-$gt-color-link-active := #333333
-$gt-color-btn := #ffffff
-$gt-size-base := 16px // default font-size
-$gt-size-border-radius := 5px
-$gt-breakpoint-mobile := 479px
-$gt-mask-z-index := 9999
 
-// functions & mixins
+  transition-t("color, background", "0, 0", "0.2, 0.2", "ease, ease")
-clearfix() {
-  &:before
-  &:after {
-    display table
-    clear both
-    content ""
-  }
-}
-em($px, $base-size = $gt-size-base) {
-  u = unit($px)
-  if (u is 'px') {
-    unit($px / $base-size, 'em')
-  }
-  else {
-    unit($px, u)
-  }
-}
 
-mobile() {
-  @media (max-width $gt-breakpoint-mobile) {
-    {block}
-  }
-}
 
-// variables - calculated
-$gt-size-loader-dot := em(6px)
-$gt-size-loader := em(28px)
-$gt-size-avatar := em(50px)
-$gt-size-avatar-mobi := em(32px)
-
-// styles
-// Put everything under container to avoid style conflicts
-.comments-container {
   .gt-container {
-    box-sizing border-box
-    * {
-      box-sizing border-box
-    }
-    font-size $gt-size-base
-    // common
-    a {
-      color $gt-color-main
-      &:hover {
-        color lighten($gt-color-main, 20%)
-        border-color lighten($gt-color-main, 20%)
-      }
-      &.is--active {
-        color $gt-color-link-active
-        cursor default !important
-        &:hover {
-          color $gt-color-link-active
-        }
-      }
-    }
-    .hide {
-      display none !important
-    }
-    // icons
-    .gt-svg {
-      display inline-block
-      width em(16px)
-      height em(16px)
-      vertical-align sub
-      svg {
-        width 100%
-        height 100%
-        fill $gt-color-main
-      }
-    }
-    .gt-ico {
-      display inline-block
-      &-text {
-        margin-left em(5px)
-      }
-      &-github {
-        width 100%
-        height 100%
-        .gt-svg {
-          width 100%
-          height 100%
-        }
-        svg {
-          fill inherit
-        }
-      }
-    }
-    // loader
-    .gt-spinner {
-      position relative
-      &::before {
-        position absolute
-        top 3px
-        box-sizing border-box
-        width em(12px)
-        height em(12px)
-        margin-top em(-3px)
-        margin-left em(-6px)
-        border 1px solid $gt-color-btn
-        border-top-color $gt-color-main
-        border-radius 50%
-        animation gt-kf-rotate 0.6s linear infinite
-        content ''
-      }
-    }
 
-    .gt-loader {
-      position relative
-      display inline-block
-      width $gt-size-loader
-      height $gt-size-loader
-      font-style normal
-      // font-size: $gt-size-loader
-      line-height $gt-size-loader
-      border 1px solid $gt-color-loader
-      border-radius 50%
-      animation ease gt-kf-rotate 1.5s infinite
-      &:before {
-        position absolute
-        top 0
-        left 50%
-        display block
-        width $gt-size-loader-dot
-        height $gt-size-loader-dot
-        margin-top -($gt-size-loader-dot / 2)
-        margin-left -($gt-size-loader-dot / 2)
-        background-color $gt-color-loader
-        border-radius 50%
-        content ''
-      }
-    }
-    // avatar
-    .gt-avatar {
-      display inline-block
-      width $gt-size-avatar
-      height $gt-size-avatar
-      +mobile() {
-        width $gt-size-avatar-mobi
-        height $gt-size-avatar-mobi
-      }
-      img {
-        width 100%
-        height auto
-        border-radius 3px
-      }
-      &-github {
-        width $gt-size-avatar - em(2px)
-        height $gt-size-avatar - em(2px)
-        cursor pointer
-        +mobile() {
-          width $gt-size-avatar-mobi - em(2px)
-          height $gt-size-avatar-mobi - em(2px)
-        }
-      }
-    }
-    // button
     .gt-btn {
-      display inline-block
+      background-color var(--primary-color-light-1)
-      padding em(12px) em(20px)
+      border 1px solid var(--primary-color-light-1)
-      color $gt-color-btn
+      transition-t("color, background", "0, 0", "0.2, 0.2", "ease, ease")
-      font-size em(12px)
-      line-height 1
-      white-space nowrap
-      text-decoration none
-      background-color $gt-color-main
-      border 1px solid $gt-color-main
-      border-radius $gt-size-border-radius
-      outline none
-      cursor pointer
-      &-text {
-        font-weight 400
-      }
-      &-loading {
-        position relative
-        display inline-block
-        width em(12px)
-        height em(16px)
-        margin-left em(8px)
-        vertical-align top
-      }
-      &.is--disable {
-        cursor not-allowed
-        opacity 0.5
-      }
-      &-login {
-        margin-right 0
-      }
-      &-preview {
-        color $gt-color-main
-        background-color var(--background-color)
-        &:hover {
-          background-color var(--second-background-color)
-        }
-      }
-      &-public {
-        &:hover {
-          background-color lighten($gt-color-main, 20%)
-          border-color lighten($gt-color-main, 20%)
-        }
-      }
-    }
-  }
-  &-loadmore
-  // loadmore
-
-  /* error */
-  .gt-error {
-    margin em(10px)
-    color $gt-color-error
-    text-align center
     }
 
-  // initing
+
-  .gt-initing {
+    .gt-initing-text {
-    padding em(20px) 0
+      color var(--text-color-3)
-    text-align center
-    &-text {
-      margin em(10px) auto
-      font-size 92%
-    }
     }
 
-  // no int
-  .gt-no-init {
-    padding em(20px) 0
-    text-align center
-  }
 
-  // link
-  .gt-link {
-    border-bottom 1px dotted $gt-color-main
-    &-counts
-    &-project {
-      text-decoration none
-    }
-  }
-
-  // meta
     .gt-meta {
-    position relative
-    z-index 10
-    margin em(20px) 0
-    padding em(16px) 0
-    font-size em(16px)
-    border-bottom 1px solid $gt-color-hr
-    clearfix()
-  }
-
       .gt-counts {
-    margin 0 em(10px) 0 0
+        a {
-    color var(--default-text-color)
+          color var(--primary-color)
+        }
+        color var(--text-color-3)
       }
 
       .gt-user {
-    float right
-    margin 0
-    font-size 92%
-    &-pic {
-      width 16px
-      height 16px
-      margin-right em(8px)
-      vertical-align top
-    }
-    &-inner {
-      display inline-block
-      cursor pointer
         .gt-user-name {
-        color var(--default-text-color)
+          color var(--text-color-3)
-      }
         }
 
-    .gt-ico {
-      margin 0 0 0 em(5px)
         svg {
-        fill var(--default-text-color)
+          path {
-      }
+            fill var(--text-color-3)
-    }
-    .is--poping {
-      .gt-ico {
-        svg {
-          fill $gt-color-main
-        }
           }
         }
       }
 
-  .gt-version {
-    margin-left em(6px)
-    color $gt-color-sub
-  }
-
-  .gt-copyright {
-    margin 0 em(15px) em(8px)
-    padding-top em(8px)
-    border-top 1px solid var(--border-color)
-  }
-
-  // popup
       .gt-popup {
-    position absolute
+        top 2.6rem
-    top em(38px)
+        background var(--background-color-2)
-    right 0
-    display inline-block
-    padding em(10px) 0
-    font-size em(14px)
-    letter-spacing 0.5px
-    background var(--background-color)
         border 1px solid var(--border-color)
-    .gt-action {
-      position relative
-      display block
-      margin em(8px) 0
-      padding 0 em(18px)
-      text-decoration none
-      cursor pointer
-      &.is--active {
-        &:before {
-          position absolute
-          top em(7px)
-          left em(8px)
-          width em(4px)
-          height em(4px)
-          background $gt-color-main
-          content ''
       }
     }
-    }
+
-  }
+
-  // header
     .gt-header {
-    position relative
-    display flex
-    &-comment {
-      flex 1
-      margin-left em(20px)
-      +mobile() {
-        margin-left em(14px)
-      }
-    }
-    &-textarea {
-      display block
-      box-sizing border-box
-      width 100%
-      min-height em(82px)
-      max-height em(240px)
-      padding em(12px)
-      color var(--default-text-color)
-      font-size em(14px)
-      word-wrap break-word
-      background-color var(--fourth-text-color)
-      border 1px solid var(--border-color)
-      border-radius $gt-size-border-radius
-      outline none
-      transition all 0.25s ease
-      resize vertical
-      &:hover {
-        background-color var(--background-color)
-      }
-    }
-    &-preview {
-      padding em(12px)
-      background-color var(--background-color)
-      border 1px solid var(--border-color)
-      border-radius $gt-size-border-radius
-    }
-    &-controls {
-      position relative
-      margin em(12px) 0 0
-      clearfix()
-      +mobile() {
-        margin 0
-      }
-      &-tip {
-        color $gt-color-main
-        font-size em(14px)
-        text-decoration none
-        vertical-align sub
-        +mobile() {
-          display none
-        }
-      }
-      .gt-btn {
-        float right
-        margin-left em(20px)
-        +mobile() {
-          float none
-          width 100%
-          margin em(12px) 0 0
-        }
-      }
-    }
-  }
-
-  &:after {
-    position fixed
-    top 0
-    right 0
-    bottom 100%
-    left 0
-    opacity 0
-    content ''
-  }
-  &.gt-input-focused {
-    position relative
-    &:after {
-      position fixed
-      top 0
-      right 0
-      bottom 0
-      left 0
-      z-index $gt-mask-z-index
-      background #000
-      opacity 0.6
-      transition opacity 0.3s, bottom 0s
-      content ''
-    }
       .gt-header-comment {
-      z-index $gt-mask-z-index + 1
+        textarea {
+          color var(--text-color-3)
+          background-color var(--background-color-2)
+          transition-t("color, background", "0, 0", "0.2, 0.2", "ease, ease")
+        }
+
+        .gt-header-controls {
+
+          .gt-btn-preview {
+            color #fff
+            background-color var(--primary-color-light-1)
+          }
+        }
       }
     }
 
-  // comments
+
     .gt-comments {
-    padding-top em(20px)
+      .gt-comments-null {
-    &-null {
+        color var(--text-color-4)
-      text-align center
-    }
-    &-controls {
-      margin em(20px) 0
-      text-align center
-    }
       }
 
-  // comment
-  .gt-comment {
-    position relative
-    display flex
-    padding em(10px) 0
-    &-content {
-      flex 1
-      margin-left em(20px)
-      padding em(12px) em(16px)
-      overflow auto
-      background-color var(--second-background-color)
-      transition all ease 0.25s
-      +mobile() {
-        margin-left em(14px)
-        padding em(10px) em(12px)
-      }
-    }
-    &-header {
-      position relative
-      margin-bottom em(8px)
-      font-size em(14px)
-    }
-    &-block-1 {
-      float right
-      width em(32px)
-      height em(22px)
-    }
-    &-block-2 {
-      float right
-      width em(64px)
-      height em(22px)
-    }
-    &-username {
-      color $gt-color-main
-      font-weight 500
-      text-decoration none
-      &:hover {
-        text-decoration underline
-      }
-    }
-    &-text {
-      margin-left em(8px)
-      color $gt-color-sub
-    }
-    &-date {
-      margin-left em(8px)
-      color $gt-color-sub
-    }
-    &-like
-    &-edit
-    &-reply {
-      position absolute
-      height em(22px)
-      &:hover {
-        cursor pointer
-      }
-    }
-    &-like {
-      top 0
-      right em(32px)
-    }
-    &-edit
-    &-reply {
-      top 0
-      right 0
-    }
-    &-body {
-      // color: $gt-color-comment-txt !important
-      color var(--second-text-color) !important
-      .email-hidden-toggle a {
-        display inline-block
-        height 12px
-        padding 0 9px
-        color #444d56
-        font-weight 600
-        font-size 12px
-        line-height 6px
-        text-decoration none
-        vertical-align middle
-        background #dfe2e5
-        border-radius 1px
-        &:hover {
-          background-color #c6cbd1
-        }
-      }
-      .email-hidden-reply {
-        display none
-        white-space pre-wrap
-        .email-signature-reply {
-          margin 15px 0
-          padding 0 15px
-          color #586069
-          border-left 4px solid #dfe2e5
-        }
-      }
-      .email-hidden-reply.expanded {
-        display block
-      }
-    }
-    &-admin {
       .gt-comment-content {
-        background-color var(--fourth-text-color)
+        background-color var(--background-color-2)
+        transition-t("color, background", "0, 0", "0.2, 0.2", "ease, ease")
+
+        &:hover {
+          box-shadow none
         }
+
+        .gt-comment-body {
+          p
+          li {
+            color var(--text-color-3)
+          }
+
+          .email-fragment {
+            color var(--text-color-3)
           }
         }
 
-  @keyframes gt-kf-rotate {
+        .notranslate {
-    0% {
+          background-color var(--background-color-3)
-      transform rotate(0)
+
+          code {
+            color var(--text-color-2)
+          }
+        }
+
+        pre {
+          background-color var(--background-color-3)
+        }
       }
-    100% {
-      transform rotate(360deg)
     }
   }
 }

source/css/layout/_partial/comment/twikoo.styl

@@ -5,11 +5,11 @@
     .tk-meta-input {
       .el-input {
         .el-input-group__prepend {
-          color var(--default-text-color)
+          color var(--text-color-3)
         }
 
         input {
-          color var(--default-text-color)
+          color var(--text-color-3)
         }
       }
     }
@@ -17,47 +17,50 @@
 
     .tk-input {
       textarea {
-        color var(--default-text-color)
+        color var(--text-color-3)
       }
     }
 
 
+
     .actions {
 
       .tk-row-actions-start {
-        .tk-action-icon {
+
+        .tk-submit-action-icon {
 
           svg {
-            fill var(--default-text-color)
+            path {
+              fill var(--text-color-3)
+              transition-t("fill", "0", "0.2", "ease")
+            }
           }
-
-          &.OwO {
 
           .OwO-body {
-              color var(--default-text-color)
+            color var(--text-color-3)
-              background-color var(--background-color)
+            background-color var(--background-color-1)
-            }
           }
         }
       }
 
       .tk-preview {
         span {
-          color var(--default-text-color)
+          color var(--text-color-3)
-          background var(--second-background-color)
+          background var(--background-color-2)
         }
       }
     }
 
 
     .tk-preview-container {
-      color var(--default-text-color)
+      color var(--text-color-3)
     }
 
+
     .tk-comments-container {
       .tk-comments-count {
         span {
-          color var(--default-text-color)
+          color var(--text-color-3)
         }
       }
     }
@@ -67,10 +70,16 @@
       margin-bottom 1.4rem
 
       .tk-meta {
+
         .tk-nick {
-          color var(--default-text-color)
+          color var(--text-color-3)
         }
 
+        strong {
+          color var(--text-color-3)
+        }
+
+
         .tk-tag {
 
           &.tk-tag-green {
@@ -85,18 +94,26 @@
 
         .tk-time {
           time {
-            color var(--default-text-color)
+            color var(--text-color-4)
           }
         }
       }
 
 
       .tk-content {
-        color var(--default-text-color)
+        color var(--text-color-3)
+
+        span {
+          color var(--text-color-3)
+        }
+
+        p {
+          color var(--text-color-3)
+        }
       }
 
       .tk-expand {
-        color var(--third-text-color)
+        color var(--text-color-4)
       }
     }
   }

source/css/layout/_partial/comment/valine.styl

@@ -4,14 +4,14 @@
 
     .vwrap {
 
-      border 0.1rem solid var(--third-text-color)
+      border 0.1rem solid var(--text-color-4)
 
       .vheader {
 
         .vinput {
 
-          color var(--default-text-color)
+          color var(--text-color-3)
-          border-color var(--third-text-color)
+          border-color var(--text-color-4)
 
           &:focus {
             border-bottom 0.1rem dashed var(--primary-color) !important
@@ -23,14 +23,14 @@
       .vedit {
 
         .veditor {
-          color var(--default-text-color)
+          color var(--text-color-3)
         }
 
         .vctrl {
 
           .vicon {
 
-            fill var(--default-text-color)
+            fill var(--text-color-3)
 
             &.actived {
               fill var(--primary-color)
@@ -41,9 +41,9 @@
 
 
       button.vsubmit {
-        color var(--default-text-color) !important
+        color var(--text-color-3) !important
         background transparent !important
-        border 0.1rem solid var(--default-text-color) !important
+        border 0.1rem solid var(--text-color-3) !important
 
         &:hover {
           color var(--primary-color) !important
@@ -54,10 +54,10 @@
 
 
     .vcount {
-      color var(--default-text-color)
+      color var(--text-color-3)
 
       .vnum {
-        color var(--second-text-color)
+        color var(--text-color-2)
       }
     }
 
@@ -85,15 +85,15 @@
         }
 
         .vsys {
-          color var(--default-text-color)
+          color var(--text-color-3)
-          background var(--fourth-text-color) !important
+          background var(--background-color-2) !important
         }
       }
 
 
       .vcontent {
         P {
-          color var(--default-text-color)
+          color var(--text-color-3)
 
           code {
             color var(--code-foreground)
@@ -114,14 +114,14 @@
 
 
     .vcopy {
-      color var(--third-text-color)
+      color var(--text-color-4)
     }
 
 
     .vpage {
 
       .vmore {
-        color var(--second-text-color)
+        color var(--text-color-2)
         border 0.1rem solid var(--border-color)
       }
     }

source/css/layout/_partial/comment/waline.styl

@@ -0,0 +1,62 @@
+.waline-comment-container {
+  #waline-comment {
+    --waline-theme-color var(--primary-color)
+    --waline-active-color var(--primary-color-light-1)
+    --waline-color var(--text-color-3)
+    --waline-bgcolor var(--background-color-1)
+    --waline-border-color var(--border-color)
+    --waline-disable-bgcolor var(--background-color-2)
+    --waline-disable-color var(--text-color-3)
+    --waline-code-bgcolor rgba(40, 44, 52, 0.9)
+    --waline-info-bgcolor var(--background-color-3)
+    --waline-info-color var(--text-color-3)
+    --waline-border 1px solid var(--waline-border-color)
+
+    input
+    textarea {
+      position relative
+      box-sizing border-box
+      padding 0.6rem 1rem
+      color var(--text-color-3)
+      background transparent
+      border-radius 0.4rem
+      outline none
+
+      &:hover {
+        background var(--background-color-2)
+      }
+    }
+
+
+    .wl-header {
+      box-sizing border-box
+      padding 0
+    }
+
+
+    button {
+      transition-t("color, background", "0, 0", "0.2, 0.2", "ease, ease")
+    }
+
+    .wl-logout-btn {
+      svg {
+        width 1rem
+        height 1rem
+        path {
+          color var(--background-color-3)
+        }
+      }
+    }
+
+    .wl-panel {
+      border-radius 0.4rem
+    }
+
+    .wl-count
+    .wl-num
+    .wl-preview h4
+    .wl-like span {
+      color var(--text-color-4)
+    }
+  }
+}

source/css/layout/_partial/first-screen.styl

@@ -5,12 +5,13 @@ $temp-img = hexo-config('style.first_screen.background_img')
 $first-screen-img = $temp-img ? $temp-img : '/images/bg.svg'
 
 $temp-font-color = hexo-config('style.first_screen.font_color')
-$first-screen-font-color = $temp-font-color ? convert($temp-font-color) : var(--default-text-color)
+$first-screen-font-color = $temp-font-color ? convert($temp-font-color) : var(--text-color-3)
 
 .first-screen-container {
   position relative
   box-sizing border-box
   width 100%
+  height 100vh
   overflow hidden
   background url($first-screen-img) center center / cover no-repeat
 
@@ -66,7 +67,7 @@ $first-screen-font-color = $temp-font-color ? convert($temp-font-color) : var(--
         cursor pointer
 
         i {
-          color var(--default-text-color)
+          color var(--text-color-3)
         }
       }
     }

source/css/layout/_partial/footer.styl

@@ -1,10 +1,10 @@
 .footer {
-  color var(--third-text-color)
+  color var(--text-color-4)
   font-size 1rem
 
 
   a {
-    color var(--third-text-color)
+    color var(--text-color-4)
 
     &:hover {
       color var(--primary-color)
@@ -18,7 +18,7 @@
 
   .info-item {
     margin 0.3rem 0
-    color var(--third-text-color)
+    color var(--text-color-4)
 
     &.ypyun-info a {
       display flex

source/css/layout/_partial/header.styl

@@ -11,7 +11,7 @@ $logo-image-box-width = 46px
   width 100%
   height 100%
   padding-top $scroll-progress-bar-height
-  background var(--background-color)
+  background var(--background-color-1)
 
   hover-style(false, 0, 0)
 
@@ -25,10 +25,15 @@ $logo-image-box-width = 46px
     width $main-content-width
     max-width $content-max-width
     height 100%
+    transition-t("max-width, width", "0, 0", "0.1, 0.1", "ease, ease")
 
 
     &.has-first-screen {
-      max-width $content-max-width * 1.2
+      max-width $has-fs-content-max-width
+    }
+
+    .has-toc & {
+      max-width $has-toc-content-max-width
     }
 
     +keep-tablet() {
@@ -75,7 +80,7 @@ $logo-image-box-width = 46px
       }
 
       .logo-title {
-        color var(--first-text-color)
+        color var(--text-color-1)
         font-weight bold
         font-size $logo-title-font-size
         line-height 1
@@ -109,7 +114,7 @@ $logo-image-box-width = 46px
             position relative
             float left
             margin-left 2rem
-            color var(--default-text-color)
+            color var(--text-color-3)
             font-size 1rem
             cursor pointer
 
@@ -143,7 +148,7 @@ $logo-image-box-width = 46px
               font-size $pc-search-icon-font-size
 
               i {
-                color var(--default-text-color)
+                color var(--text-color-3)
               }
             }
           }
@@ -162,12 +167,12 @@ $logo-image-box-width = 46px
           width 20px
           height 20px
           margin-left 12px
-          color var(--default-text-color)
+          color var(--text-color-3)
           font-size 18px
           cursor pointer
 
           i {
-            color var(--default-text-color)
+            color var(--text-color-3)
           }
 
           &:first-child {
@@ -187,7 +192,7 @@ $logo-image-box-width = 46px
             position relative
             width 18px
             height $menu-bar-line-height
-            background var(--default-text-color)
+            background var(--text-color-3)
 
             .header-drawer-show & {
               background transparent
@@ -200,7 +205,7 @@ $logo-image-box-width = 46px
               left 0
               width 100%
               height $menu-bar-line-height
-              background var(--default-text-color)
+              background var(--text-color-3)
               content ''
               transition-t("transform", "0", "0.38", "ease")
             }
@@ -236,7 +241,7 @@ $logo-image-box-width = 46px
     z-index $z-index-2
     width 100%
     padding $header-height 0 20px 0
-    background var(--background-color)
+    background var(--background-color-1)
     transform scaleY(0)
     transform-origin top
     transition-t("transform", "0", "0.38", "ease")
@@ -258,18 +263,18 @@ $logo-image-box-width = 46px
 
         a {
           padding 6px 20px
-          color var(--default-text-color)
+          color var(--text-color-3)
           border-radius 20px
 
           &:hover {
-            color var(--second-text-color)
+            color var(--text-color-2)
-            border 1px solid var(--default-text-color)
+            border 1px solid var(--text-color-3)
           }
 
 
           &.active {
-            color var(--second-text-color)
+            color var(--text-color-2)
-            border 1px solid var(--default-text-color)
+            border 1px solid var(--text-color-3)
           }
         }
       }

source/css/layout/_partial/local-search.styl

@@ -28,7 +28,7 @@ $search-header-height = 3rem
     width 70%
     height 80%
     margin auto
-    background var(--background-color)
+    background var(--background-color-1)
     border-radius 0.4rem
     transform scale(0)
     transition-t("transform", "0", "0.3", "ease")
@@ -46,13 +46,13 @@ $search-header-height = 3rem
       align-items center
       height $search-header-height
       padding 0 1rem
-      background var(--fourth-text-color)
+      background var(--text-color-6)
       border-top-left-radius 0.2rem
       border-top-right-radius 0.2rem
 
       .search-input-field-pre {
         margin-right 0.2rem
-        color var(--default-text-color)
+        color var(--text-color-3)
         cursor pointer
       }
 
@@ -62,7 +62,7 @@ $search-header-height = 3rem
 
         .search-input {
           width 100%
-          color var(--default-text-color)
+          color var(--text-color-3)
           font-size 1.2rem
           background transparent
           border 0
@@ -73,7 +73,7 @@ $search-header-height = 3rem
           }
 
           &::-webkit-input-placeholder {
-            color var(--third-text-color)
+            color var(--text-color-4)
             font-size 1rem
           }
         }
@@ -81,12 +81,12 @@ $search-header-height = 3rem
 
 
       .close-popup-btn {
-        color var(--default-text-color)
+        color var(--text-color-3)
         font-size $icon-size
         cursor pointer
 
         &:hover {
-          color var(--first-text-color)
+          color var(--text-color-1)
         }
       }
     }
@@ -130,7 +130,7 @@ $search-header-height = 3rem
               left 0
               width 0.4rem
               height 0.4rem
-              background var(--default-text-color)
+              background var(--text-color-3)
               border-radius 50%
               transform translateY(-50%)
               content ''
@@ -147,7 +147,7 @@ $search-header-height = 3rem
 
           a {
             &:hover {
-              color var(--default-text-color)
+              color var(--text-color-3)
             }
           }
 
@@ -162,7 +162,7 @@ $search-header-height = 3rem
 
       #no-result {
         margin auto
-        color var(--third-text-color)
+        color var(--text-color-4)
       }
     }
   }

source/css/layout/_partial/page-template.styl

@@ -8,7 +8,7 @@ $friend-link-item-border-radius = 6px
   keep-container(false, 0, 0, 2rem, 2rem)
 
   .page-template-content {
-    color var(--default-text-color)
+    color var(--text-color-3)
 
     h1
     h2
@@ -87,9 +87,9 @@ $friend-link-item-border-radius = 6px
               justify-content center
               width $friend-link-item-height  - $friend-link-item-interval
               height 100%
-              color var(--second-text-color)
+              color var(--text-color-2)
               font-size 2rem
-              background var(--second-background-color)
+              background var(--background-color-2)
 
 
               +keep-tablet() {
@@ -123,7 +123,7 @@ $friend-link-item-border-radius = 6px
               .name {
                 width 100%
                 height 60%
-                color var(--second-text-color)
+                color var(--text-color-2)
                 font-size 1.28rem
 
                 +keep-tablet() {
@@ -134,7 +134,7 @@ $friend-link-item-border-radius = 6px
               .description {
                 width 100%
                 height 40%
-                color var(--third-text-color)
+                color var(--text-color-4)
                 font-size 1rem
 
 

source/css/layout/_partial/post-tools.styl

@@ -2,32 +2,34 @@ $li-border-radius = 0.4rem
 $li-margin-bottom = 0.8rem
 
 .post-tools-container {
+  position relative
+  box-sizing border-box
+  padding-top 2rem
 
   .tools-list {
 
     li {
-      display flex
+      position relative
-      align-items center
+      box-sizing border-box
-      justify-content center
       width $post-tool-button-width
       height $post-tool-button-width
       margin-bottom $li-margin-bottom
-      color var(--default-text-color)
+      color var(--text-color-3)
       font-size 1.2rem
-      background var(--background-color)
+      background var(--background-color-1)
       border-radius 50%
       cursor pointer
 
       i {
-        color var(--default-text-color)
+        color var(--text-color-3)
       }
 
       &:hover {
-        color var(--background-color)
+        color var(--background-color-1)
         background var(--primary-color)
 
         i {
-          color var(--background-color)
+          color var(--background-color-1)
         }
       }
 
@@ -39,13 +41,37 @@ $li-margin-bottom = 0.8rem
 
       hover-style(true, 1.06, 1.06)
 
-      &.page-aside-toggle {
+      &.toggle-show-toc {
         display none
 
         +keep-tablet() {
           display none !important
         }
       }
+
+
+      &.go-to-comments {
+        .post-comments-count {
+          position absolute
+          top 0
+          right -1rem
+          display none
+          align-items center
+          justify-content center
+          box-sizing border-box
+          min-width 1.1rem
+          height 1.1rem
+          padding 0 0.2rem
+          color var(--badge-color)
+          font-size 12px
+          background var(--badge-background-color)
+          border-radius 0.4rem
+
+          +keep-tablet() {
+            display none !important
+          }
+        }
+      }
     }
   }
 }

source/css/layout/_partial/progress-bar.styl

@@ -32,7 +32,7 @@
       top 0.4rem
       right 0.3rem
       z-index $z-index-8
-      color var(--default-text-color)
+      color var(--text-color-3)
       font-size 1.1rem
       visibility hidden
 

source/css/layout/_partial/side-tools.styl

@@ -10,25 +10,25 @@ $tools-item-border-radius = 0.1rem
     width $tools-item-width
     height $tools-item-width
     margin-bottom 0.2rem
-    color var(--default-text-color)
+    color var(--text-color-3)
     font-size $tools-item-font-size
-    background var(--background-color)
+    background var(--background-color-1)
     border-right none
     border-radius $tools-item-border-radius
     box-shadow 0.1rem 0.1rem 0.2rem var(--shadow-color)
     cursor pointer
 
     i {
-      color var(--default-text-color)
+      color var(--text-color-3)
     }
 
     &:hover {
-      color var(--background-color)
+      color var(--background-color-1)
       background var(--primary-color)
       box-shadow 0.2rem 0.2rem 0.4rem var(--shadow-color)
 
       i {
-        color var(--background-color)
+        color var(--background-color-1)
       }
     }
 
@@ -47,7 +47,7 @@ $tools-item-border-radius = 0.1rem
         border-radius $tools-item-border-radius
 
         &:hover {
-          color var(--background-color)
+          color var(--background-color-1)
           background var(--primary-color)
           box-shadow 0.2rem 0.2rem 0.4rem var(--shadow-color)
         }
@@ -61,13 +61,6 @@ $tools-item-border-radius = 0.1rem
     opacity 0
     transition-t("transform, opacity", "0, 0", "0.2, 0.2", "linear, linear")
 
-    .tool-expand-width {
-      +keep-tablet() {
-        display none
-      }
-    }
-
-
     &.show {
       transform translateX(0)
       opacity 1

source/css/layout/_partial/toc.styl

@@ -1,13 +1,25 @@
 .post-toc-wrap {
+  position relative
   box-sizing border-box
   width 100%
+  height 100%
+  overflow-y auto
   font-size 0.92rem
 
+  &::-webkit-scrollbar-thumb {
+    background var(--toc-scrollbar-color)
+    border-radius 0.3rem
+  }
+
+  &::-webkit-scrollbar-track {
+    background transparent
+  }
+
   .post-toc {
 
     ol {
       margin 0
-      padding 0 2px 12px 10px
+      padding 0 0.1rem 0.8rem 0.6rem
       text-align left
       list-style none
 
@@ -27,6 +39,7 @@
 
 
     .nav-item {
+      margin-bottom 0.2rem
       overflow hidden
       line-height 1.8
       white-space nowrap
@@ -36,7 +49,7 @@
 
     .nav {
       .nav-child {
-        display hexo-config('toc.expand_all') ? block : none
+        display hexo-config('toc.expand_all') ? block:none
       }
 
       .active > .nav-child {
@@ -54,7 +67,7 @@
 
       .nav-number
       .nav-text {
-        color var(--default-text-color)
+        color var(--toc-text-color)
       }
 
       .active > a {

source/css/layout/article-content.styl

@@ -1,19 +1,60 @@
-$avatarWidth = 46px
+$avatarWidth = 3rem
-$arrow-icon-width = 16px
+$arrow-icon-width = 1rem
-$post-nav-max-width = 220px
+$post-nav-max-width = 14rem
 $article-title-font-size = 1.6rem
+$toc-container-width = 15rem
 
-.article-content-container {
 
+.post-page-container {
+  position relative
+  display flex
+  justify-content space-between
+  box-sizing border-box
+  width 100%
+  height 100%
+
+
+  &.show-toc {
+    .toc-content-container {
+      display block
+    }
+
+    .article-content-container {
+      width 'calc(100% - %s)' % $toc-container-width
+    }
+  }
+
+
+  +keep-tablet() {
+    .toc-content-container {
+      display none !important
+    }
+
+    .article-content-container {
+      width 100% !important
+    }
+  }
+
+
+  .article-content-container {
+    position relative
+    box-sizing border-box
+    width 100%
+    height 100%
     keep-container(false, 0, 0, 2rem, 2rem)
 
     +keep-mobile() {
       padding 1.2rem 0.2rem
       box-shadow none
+
+      &:hover {
+        box-shadow none
+      }
     }
 
+
     .article-title {
-    color var(--second-text-color)
+      color var(--text-color-2)
       font-weight 600
       font-size $article-title-font-size
 
@@ -41,7 +82,7 @@ $article-title-font-size = 1.6rem
         box-sizing border-box
         width $avatarWidth
         height $avatarWidth
-      padding 1px
+        padding 0.1rem
         border 1px solid var(--border-color)
         border-radius 50%
 
@@ -61,8 +102,8 @@ $article-title-font-size = 1.6rem
         box-sizing border-box
         width 100%
         height 100%
-      margin-left 10px
+        margin-left 0.8rem
-      padding 2px 0
+        padding 0.2rem 0
 
         .author {
           display flex
@@ -71,17 +112,17 @@ $article-title-font-size = 1.6rem
           font-size 1.18rem
 
           .name {
-          color var(--default-text-color)
+            color var(--text-color-3)
           }
 
           .author-label {
-          margin-left 10px
+            margin-left 0.8rem
-          padding 0 5px
+            padding 0 0.4rem
             color #fff
             font-weight 500
             font-size 0.8rem
             background var(--selection-color)
-          border-radius 5px
+            border-radius 0.4rem
           }
         }
       }
@@ -90,7 +131,7 @@ $article-title-font-size = 1.6rem
 
     .article-header
     .article-header-meta-info {
-    margin-top 16px
+      margin-top 1rem
       +keep-tablet() {
         transform scale(0.9)
         transform-origin left top
@@ -100,10 +141,13 @@ $article-title-font-size = 1.6rem
 
     .article-content {
       margin-top $component-spacing-value
-    padding-bottom 10px
+      padding-bottom 2rem
-    color var(--default-text-color)
+      color var(--text-color-3)
       word-wrap break-word
-    border-bottom 1px solid var(--border-color)
+
+      if (hexo-config('copyright_info.enable') == true) {
+        border-bottom 0.1rem dashed var(--border-color)
+      }
     }
 
 
@@ -128,6 +172,7 @@ $article-title-font-size = 1.6rem
       }
     }
 
+
     .post-copyright-info {
       width 100%
       margin-top $component-spacing-value
@@ -139,7 +184,7 @@ $article-title-font-size = 1.6rem
 
 
     .article-nav {
-    height 40px
+      height 2.8rem
       margin-top $component-spacing-value
 
       .article-prev
@@ -148,7 +193,7 @@ $article-title-font-size = 1.6rem
         max-width $post-nav-max-width
         height 100%
 
-      keep-container(true, 1.03, 1.03, 10px, 0)
+        keep-container(true, 1.03, 1.03, 0.8rem, 0)
 
         a {
           position relative
@@ -214,5 +259,23 @@ $article-title-font-size = 1.6rem
         }
       }
     }
+  }
+
+
+  .toc-content-container {
+    position sticky
+    top $header-height + $component-spacing-value
+    display none
+    box-sizing border-box
+    width $toc-container-width
+    max-height 'calc(100vh - %s)' % ($header-height + $component-spacing-value)
+    padding 2rem 0 2rem 1.4rem
+    transition-t("top, display, max-height", "0, 0, 0", "0.2, 0.1, 0.2", "ease, ease, ease")
+
+    .header-shrink & {
+      top $header-shrink-height + $component-spacing-value
+      max-height 'calc(100vh - %s)' % ($header-shrink-height + $component-spacing-value)
+    }
+  }
 }
 

source/css/layout/category-content.styl

@@ -7,14 +7,14 @@ $category-name-font-size = 1.6rem
   .category-name {
     margin-bottom $component-spacing-value
     padding-bottom 20px
-    color var(--second-text-color)
+    color var(--text-color-2)
 
     font-weight 600
     font-size $category-name-font-size
     border-bottom 1px solid var(--border-color)
 
     i {
-      color var(--second-text-color)
+      color var(--text-color-2)
     }
 
     +keep-tablet() {

source/css/layout/category-list.styl

@@ -20,7 +20,7 @@
 
         span.all-category-list-count {
           float right
-          color var(--default-text-color)
+          color var(--text-color-3)
 
 
           &::before {

source/css/layout/home-content.styl

@@ -1,5 +1,5 @@
 .home-content-container {
-  background var(--background-color)
+  background var(--background-color-1)
 
 
   .home-article-list {
@@ -13,7 +13,7 @@
         position absolute
         top 10px
         right 12px
-        color var(--third-text-color)
+        color var(--text-color-4)
         font-size 1.2rem
         transform rotate(45deg)
 
@@ -27,7 +27,7 @@
       .home-article-title {
         position relative
         margin 0
-        color var(--second-text-color)
+        color var(--text-color-2)
         font-weight 600
         font-size 1.4rem
         line-height 1.5
@@ -46,7 +46,7 @@
 
       .home-article-content {
         margin 20px 0
-        color var(--default-text-color)
+        color var(--text-color-3)
         text-align justify
         word-wrap break-word
       }
@@ -56,10 +56,9 @@
         display flex
         align-items center
         justify-content space-between
-        color var(--third-text-color)
+        color var(--text-color-4)
         font-size 0.92rem
 
-
         .home-article-meta-info {
           letter-spacing 0.5px
 
@@ -90,6 +89,12 @@
         }
 
 
+        .read-more {
+          display flex
+          align-items center
+        }
+
+
         hr {
           flex 1
           height 1px
@@ -98,8 +103,9 @@
           border none
         }
 
+
         a {
-          color var(--third-text-color)
+          color var(--text-color-4)
 
           &:hover {
             color var(--primary-color)

source/css/layout/page.styl

@@ -1,14 +1,9 @@
-$temp-width = hexo-config('style.left_side_width')
-$page-aside-width = $temp-width ? convert($temp-width) : 260px
-
 .page-container {
   position relative
   box-sizing border-box
   width 100%
   height auto
-  background var(--background-color)
+  background var(--background-color-1)
-  transition-t("padding-left", "0", "0.3", "ease-out")
-
 
   +keep-tablet() {
     padding-left 0 !important
@@ -17,9 +12,10 @@ $page-aside-width = $temp-width ? convert($temp-width) : 260px
 
   .page-main-content {
     position relative
+    box-sizing border-box
     padding-top $header-height
 
-    &.home {
+    &.is-home {
       .transparent-1 {
         background var(--header-transparent-background-1)
       }
@@ -61,7 +57,7 @@ $page-aside-width = $temp-width ? convert($temp-width) : 260px
       box-sizing border-box
       width 100%
       height $header-height
-      transition-t("transform, padding-left, height", "0, 0, 0", "0.3, 0.2, 0.2", "ease-out, linear, ease")
+      transition-t("transform, height", "0, 0", "0.3, 0.2", "ease-out, ease")
 
       &.hide {
         transform translateY(-105%)
@@ -113,6 +109,11 @@ $page-aside-width = $temp-width ? convert($temp-width) : 260px
         width $main-content-width
         max-width $content-max-width
         height 100%
+        transition-t("max-width, width", "0, 0", "0.1, 0.1", "ease, ease")
+
+        .has-toc & {
+          max-width $has-toc-content-max-width
+        }
 
         +keep-tablet() {
           width $main-content-width-tablet
@@ -131,35 +132,12 @@ $page-aside-width = $temp-width ? convert($temp-width) : 260px
   }
 
 
-  .page-aside {
-    position fixed
-    top 0
-    bottom 0
-    left - $page-aside-width
-    z-index $z-index-6
-    box-sizing border-box
-    width $page-aside-width
-    height 100%
-    padding 20px
-    overflow-y auto
-    background var(--background-color)
-
-    hover-style(false, 0, 0)
-
-    transition-t("left, transform", "0, 0", "0.3, 0.2", "ease-out, linear")
-
-    +keep-tablet() {
-      left 0 !important
-      display none !important
-    }
-  }
-
-
   .post-tools {
     position fixed
     top $header-height + $component-spacing-value
-    right $component-spacing-value
+    left 'calc((100vw - %s / 2) - 5rem)' % $content-max-width
-    transition-t("top", "0", "0.2", "ease")
+    opacity 0
+    transition-t("top, transform, opacity, left", "0, 0, 0.2, 0", "0.2, 0.2, 0.2, 0.2", "ease, ease, ease, ease")
 
     .header-shrink & {
       top $header-shrink-height + $component-spacing-value
@@ -167,25 +145,17 @@ $page-aside-width = $temp-width ? convert($temp-width) : 260px
       +keep-tablet() {
         top $header-shrink-height * 0.9 + $component-spacing-value
       }
-
-      +keep-mobile() {
-        top $header-shrink-height * 0.8 + $component-spacing-value
-      }
     }
 
 
     +keep-tablet() {
       top $header-height * 0.9 + $component-spacing-value
-      right 10px
       transform scale(0.82)
-      transform-origin right top
     }
 
 
     +keep-mobile() {
-      top $header-height * 0.8 + $component-spacing-value
+      display none
-      right 5px
-      transform scale(0.72)
     }
   }
 

source/css/layout/tag-content.styl

@@ -7,14 +7,14 @@ $tag-name-font-size = 1.6rem
   .tag-name {
     margin-bottom $component-spacing-value
     padding-bottom 20px
-    color var(--second-text-color)
+    color var(--text-color-2)
 
     font-weight 600
     font-size $tag-name-font-size
     border-bottom 1px solid var(--border-color)
 
     i {
-      color var(--second-text-color)
+      color var(--text-color-2)
     }
 
     +keep-tablet() {

source/css/style.styl

@@ -1,7 +1,7 @@
 @import "common/basic.styl"
 @import "common/markdown.styl"
 @import "common/code-block/highlight.styl"
-@import "common/code-block/code-block-tools.styl"
+@import "common/code-block/code-block.styl"
 @import "common/code-block/code-theme.styl"
 @import "layout/page.styl"
 @import "layout/_partial/local-search.styl"

source/js/code-block.js

@@ -7,9 +7,11 @@ KEEP.initCodeBlockTools = () => {
     wrapper.appendChild(this)
   }
 
-  const { style: codeCopyStyle } = KEEP.theme_config?.code_copy
+  const { style: codeCopyStyle } = KEEP.theme_config?.code_copy || {}
-  const { style: codeBlockStyle } = KEEP.theme_config?.code_block_tools
+  const { style: codeBlockStyle } = KEEP.theme_config?.code_block || {}
-  const isMac = (codeBlockStyle || codeCopyStyle || 'default') === 'mac'
+  const { style: codeBlockToolsStyle } = KEEP.theme_config?.code_block?.tools || {}
+
+  const isMac = (codeCopyStyle || codeBlockStyle || codeBlockToolsStyle || 'default') === 'mac'
   const foldedIconClassName = isMac ? 'fas fa-chevron-left' : 'fas fa-chevron-right'
   const {
     copy: copyLang,
@@ -17,7 +19,7 @@ KEEP.initCodeBlockTools = () => {
     fold: foldLang,
     folded: foldedLang
   } = KEEP.language_code_block
-  const foldDom = `<span class="tool fold tooltip" data-content="${foldLang}"><i class="fas fa-chevron-down"></i></span>`
+  const foldDom = `<span class="tool fold tooltip" data-content="${foldLang}" data-offset-y="-2px"><i class="fas fa-chevron-down"></i></span>`
 
   document.querySelectorAll('figure.highlight').forEach((element) => {
     let codeLang = element.classList.length ? element.classList[1].toUpperCase() : ''
@@ -26,6 +28,9 @@ KEEP.initCodeBlockTools = () => {
     }
     const highlightContainer = document.createElement('div')
     highlightContainer.classList.add('highlight-container')
+    if (isMac) {
+      highlightContainer.classList.add('mac')
+    }
     element.wrap(highlightContainer)
 
     const codeLangDom = `${codeLang ? '<span class="code-lang">' + codeLang + '</span>' : ''}`
@@ -34,7 +39,7 @@ KEEP.initCodeBlockTools = () => {
       'afterbegin',
       `<div class="code-tools-box">
         ${isMac ? foldDom + codeLangDom : '<span>' + foldDom + codeLangDom + '</span>'}
-        <span class="tool copy tooltip" data-content="${copyLang}"><i class="fas fa-copy"></i></span>
+        <span class="tool copy tooltip" data-content="${copyLang}" data-offset-y="-2px"><i class="fas fa-copy"></i></span>
       </div>`
     )
     const codeToolsBox = element.parentNode.querySelector('.code-tools-box')

source/js/left-side-toggle.js

@@ -1,45 +0,0 @@
-/* global KEEP */
-
-function initLeftSideToggle() {
-  KEEP.utils.leftSideToggle = {
-    toggleBar: document.querySelector('.page-aside-toggle'),
-    pageTopDom: document.querySelector('.page-main-content-top'),
-    containerDom: document.querySelector('.page-container'),
-    leftAsideDom: document.querySelector('.page-aside'),
-    toggleBarIcon: document.querySelector('.page-aside-toggle i'),
-
-    isOpenPageAside: false,
-
-    initToggleBarButton() {
-      this.toggleBar &&
-        this.toggleBar.addEventListener('click', () => {
-          this.isOpenPageAside = !this.isOpenPageAside
-          KEEP.styleStatus.isOpenPageAside = this.isOpenPageAside
-          KEEP.setStyleStatus()
-          this.changePageLayoutWhenOpenToggle(this.isOpenPageAside)
-        })
-    },
-
-    changePageLayoutWhenOpenToggle(isOpen) {
-      this.toggleBarIcon &&
-        (this.toggleBarIcon.className = isOpen ? 'fas fa-outdent' : 'fas fa-indent')
-      const pageAsideWidth = KEEP.theme_config.style.left_side_width || '260px'
-      this.containerDom.style.paddingLeft = isOpen ? pageAsideWidth : '0'
-      this.pageTopDom.style.paddingLeft = isOpen ? pageAsideWidth : '0'
-      this.leftAsideDom.style.left = isOpen ? '0' : `-${pageAsideWidth}`
-    },
-
-    pageAsideHandleOfTOC(isOpen) {
-      this.toggleBar.style.display = 'flex'
-      this.isOpenPageAside = isOpen
-      this.changePageLayoutWhenOpenToggle(isOpen)
-    }
-  }
-  KEEP.utils.leftSideToggle.initToggleBarButton()
-}
-
-if (KEEP.theme_config.pjax.enable === true && KEEP.utils) {
-  initLeftSideToggle()
-} else {
-  window.addEventListener('DOMContentLoaded', initLeftSideToggle)
-}

source/js/main.js

@@ -1,7 +1,7 @@
 /* global KEEP */
 
 window.addEventListener('DOMContentLoaded', () => {
-  const { version, local_search, code_block_tools, code_copy, lazyload } = KEEP.theme_config
+  const { version, local_search, code_block, code_copy, lazyload } = KEEP.theme_config
 
   KEEP.themeInfo = {
     theme: `Keep v${version}`,
@@ -15,7 +15,7 @@ window.addEventListener('DOMContentLoaded', () => {
     isExpandPageWidth: false,
     isDark: false,
     fontSizeLevel: 0,
-    isOpenPageAside: true
+    isShowToc: true
   }
 
   // print theme base info
@@ -56,7 +56,11 @@ window.addEventListener('DOMContentLoaded', () => {
       KEEP.initLocalSearch()
     }
 
-    if (code_block_tools?.enable === true || code_copy?.enable === true) {
+    if (
+      code_block?.tools?.enable === true ||
+      code_block?.enable === true ||
+      code_copy?.enable === true
+    ) {
       KEEP.initCodeBlockTools()
     }
 

source/js/post-helper.js

@@ -0,0 +1,127 @@
+/* global KEEP */
+
+function initToggleShowToc() {
+  KEEP.utils.postHelper = {
+    postPageContainerDom: document.querySelector('.post-page-container'),
+    toggleShowTocBtnDom: document.querySelector('.toggle-show-toc'),
+    toggleShowTocIcon: document.querySelector('.toggle-show-toc i'),
+    mainContentDom: document.querySelector('.main-content'),
+    postToolsDom: document.querySelector('.post-tools'),
+    goToCommentsDom: document.querySelector('.post-tools .go-to-comments'),
+
+    isShowToc: false,
+
+    initToggleToc() {
+      this.toggleShowTocBtnDom &&
+        this.toggleShowTocBtnDom.addEventListener('click', () => {
+          this.isShowToc = !this.isShowToc
+          KEEP.styleStatus.isShowToc = this.isShowToc
+          KEEP.setStyleStatus()
+          this.handleToggleToc(this.isShowToc)
+        })
+    },
+
+    handleToggleToc(isOpen) {
+      if (isOpen) {
+        this.postPageContainerDom.classList.add('show-toc')
+        document.body.classList.add('has-toc')
+      } else {
+        this.postPageContainerDom.classList.remove('show-toc')
+        document.body.classList.remove('has-toc')
+      }
+
+      setTimeout(() => {
+        this.setPostToolsLeft()
+      }, 120)
+    },
+
+    hasToc(isOpen) {
+      this.toggleShowTocBtnDom.style.display = 'flex'
+      this.isShowToc = isOpen
+      this.handleToggleToc(isOpen)
+    },
+
+    setPostToolsLeft(mcw) {
+      const mainContainerWidth = mcw
+        ? mcw
+        : this.mainContentDom.getBoundingClientRect().width.toFixed(0)
+      let offsetX = 5
+
+      if (window.innerWidth <= 800) {
+        offsetX = 3
+      }
+
+      this.postToolsDom.style.opacity = `1`
+      this.postToolsDom.style.left = `calc((100vw - ${mainContainerWidth}px) / 2 - ${offsetX}rem)`
+    },
+
+    initSetPostToolsLeft() {
+      setTimeout(() => {
+        this.setPostToolsLeft()
+      }, 150)
+
+      window.addEventListener('resize', () => {
+        this.setPostToolsLeft()
+      })
+    },
+
+    // go comment anchor
+    goToComments() {
+      const commentsAnchor = document.querySelector('#comments-anchor')
+      if (this.goToCommentsDom && commentsAnchor) {
+        this.goToCommentsDom.addEventListener('click', (event) => {
+          event.preventDefault()
+          let winScrollY = window.scrollY
+          winScrollY = winScrollY === 0 ? -20 : winScrollY
+          const offset = commentsAnchor.getBoundingClientRect().top + winScrollY
+          window.anime({
+            targets: document.scrollingElement,
+            duration: 300,
+            easing: 'linear',
+            scrollTop: offset,
+            complete: () => {
+              setTimeout(() => {
+                KEEP.utils.pageTop_dom.classList.add('hide')
+              }, 150)
+            }
+          })
+        })
+      }
+    },
+
+    // watch comments count
+    watchPostCommentsCount() {
+      const commentsCountDom = this.postToolsDom.querySelector('.post-comments-count')
+      if (!commentsCountDom) return
+      const config = { attributes: true, childList: true }
+
+      const callback = function (mutationsList) {
+        mutationsList.forEach((item) => {
+          if (item.type === 'childList') {
+            const count = Number(item.target.innerHTML)
+            if (count > 0) {
+              commentsCountDom.style.display = 'flex'
+              if (count > 99) {
+                commentsCountDom.innerHTML = '99+'
+                observer.disconnect()
+              }
+            }
+          }
+        })
+      }
+
+      const observer = new MutationObserver(callback)
+      observer.observe(commentsCountDom, config)
+    }
+  }
+  KEEP.utils.postHelper.initToggleToc()
+  KEEP.utils.postHelper.initSetPostToolsLeft()
+  KEEP.utils.postHelper.goToComments()
+  KEEP.utils.postHelper.watchPostCommentsCount()
+}
+
+if (KEEP.theme_config.pjax.enable === true && KEEP.utils) {
+  initToggleShowToc()
+} else {
+  window.addEventListener('DOMContentLoaded', initToggleShowToc)
+}

source/js/toc.js

@@ -1,9 +1,10 @@
 /* global KEEP */
 
 function initTOC() {
-  KEEP.utils.navItems = document.querySelectorAll('.post-toc-wrap .post-toc li')
+  const postPageContainerDom = document.querySelector('.post-page-container')
+  const tocContentContainer = document.querySelector('.toc-content-container')
 
-  if (KEEP.utils.navItems.length > 0) {
+  if (KEEP.utils.hasToc) {
     KEEP.utils = {
       ...KEEP.utils,
 
@@ -28,16 +29,19 @@ function initTOC() {
             )
             element.addEventListener('click', (event) => {
               event.preventDefault()
-              const offset = target.getBoundingClientRect().top + window.scrollY
+              let winScrollY = window.scrollY
+              winScrollY = winScrollY === 0 ? -20 : winScrollY
+              const offset = target.getBoundingClientRect().top + winScrollY
               window.anime({
                 targets: document.scrollingElement,
                 duration: 500,
                 easing: 'linear',
                 scrollTop: offset - 10,
-                complete: function () {
+                complete: () => {
+                  history.pushState(null, document.title, element.href)
                   setTimeout(() => {
                     KEEP.utils.pageTop_dom.classList.add('hide')
-                  }, 100)
+                  }, 150)
                 }
               })
             })
@@ -59,7 +63,7 @@ function initTOC() {
           if (parent.matches('li')) parent.classList.add('active')
           parent = parent.parentNode
         }
-        // Scrolling to center active TOC element if TOC content is taller then viewport.
+        // Scrolling to center active TOC element if TOC content is taller than viewport.
         const tocElement = document.querySelector('.post-toc-wrap')
         window.anime({
           targets: tocElement,
@@ -73,34 +77,33 @@ function initTOC() {
         })
       },
 
-      showPageAsideWhenHasTOC() {
+      handleShowWhenHasToc() {
         const openHandle = () => {
           const styleStatus = KEEP.getStyleStatus()
-          const key = 'isOpenPageAside'
+          const key = 'isShowToc'
           if (styleStatus && styleStatus.hasOwnProperty(key)) {
-            KEEP.utils.leftSideToggle.pageAsideHandleOfTOC(styleStatus[key])
+            KEEP.utils.postHelper.hasToc(styleStatus[key])
           } else {
-            KEEP.utils.leftSideToggle.pageAsideHandleOfTOC(true)
+            KEEP.utils.postHelper.hasToc(true)
           }
         }
 
         const initOpenKey = 'init_open'
 
         if (KEEP.theme_config.toc.hasOwnProperty(initOpenKey)) {
-          KEEP.theme_config.toc[initOpenKey]
+          KEEP.theme_config.toc[initOpenKey] ? openHandle() : KEEP.utils.postHelper.hasToc(false)
-            ? openHandle()
-            : KEEP.utils.leftSideToggle.pageAsideHandleOfTOC(false)
         } else {
           openHandle()
         }
       }
     }
 
-    KEEP.utils.showPageAsideWhenHasTOC()
+    KEEP.utils.handleShowWhenHasToc()
     KEEP.utils.registerSidebarTOC()
   } else {
-    const pageAsideDom = document.querySelector('.page-aside')
+    if (tocContentContainer && postPageContainerDom) {
-    pageAsideDom && KEEP.utils.pageContainer_dom.removeChild(pageAsideDom)
+      postPageContainerDom.removeChild(tocContentContainer)
+    }
   }
 }
 

source/js/utils.js

@@ -19,6 +19,7 @@ KEEP.initUtils = () => {
     isHasScrollProgressBar: false,
     isHasScrollPercent: false,
     isHeaderTransparent: false,
+    hasToc: false,
 
     initData() {
       const { scroll, first_screen } = KEEP.theme_config.style
@@ -76,9 +77,7 @@ KEEP.initUtils = () => {
     registerWindowScroll() {
       window.addEventListener('scroll', () => {
         // style handle when scroll
-        if (this.isHasScrollPercent || this.isHasScrollProgressBar) {
         this.styleHandleWhenScroll()
-        }
 
         // TOC scroll handle
         if (KEEP.theme_config.toc.enable && KEEP.utils.hasOwnProperty('findActiveIndexByTOC')) {
@@ -131,77 +130,22 @@ KEEP.initUtils = () => {
       })
     },
 
-    // toggle content area width
-    contentAreaWidthAdjust() {
-      const toolExpandDom = document.querySelector('.tool-expand-width')
-      const headerContentDom = document.querySelector('.header-content')
-      const mainContentDom = document.querySelector('.main-content')
-      const iconDom = toolExpandDom.querySelector('i')
-
-      const defaultMaxWidth = KEEP.theme_config.style.content_max_width || '1000px'
-      const expandMaxWidth = '90%'
-      let headerMaxWidth = defaultMaxWidth
-
-      let isExpand = false
-
-      if (
-        KEEP.theme_config.style.first_screen.enable === true &&
-        window.location.pathname === '/'
-      ) {
-        headerMaxWidth = parseInt(defaultMaxWidth) * 1.2 + 'px'
-      }
-
-      const setPageWidth = (isExpand) => {
-        KEEP.styleStatus.isExpandPageWidth = isExpand
-        KEEP.setStyleStatus()
-        if (isExpand) {
-          iconDom.classList.remove('fa-up-right-and-down-left-from-center')
-          iconDom.classList.add('fa-down-left-and-up-right-to-center')
-          headerContentDom.style.maxWidth = expandMaxWidth
-          mainContentDom.style.maxWidth = expandMaxWidth
-        } else {
-          iconDom.classList.remove('fa-down-left-and-up-right-to-center')
-          iconDom.classList.add('fa-up-right-and-down-left-from-center')
-          headerContentDom.style.maxWidth = headerMaxWidth
-          mainContentDom.style.maxWidth = defaultMaxWidth
-        }
-      }
-
-      const initPageWidth = () => {
-        const styleStatus = KEEP.getStyleStatus()
-        if (styleStatus) {
-          isExpand = styleStatus.isExpandPageWidth
-          setPageWidth(isExpand)
-        }
-      }
-
-      initPageWidth()
-
-      toolExpandDom.addEventListener('click', () => {
-        isExpand = !isExpand
-        setPageWidth(isExpand)
-      })
-    },
-
-    // go comment anchor
-    goComment() {
-      this.goComment_dom = document.querySelector('.go-comment')
-      if (this.goComment_dom) {
-        this.goComment_dom.addEventListener('click', () => {
-          document.querySelector('#comment-anchor').scrollIntoView()
-        })
-      }
-    },
-
     // get dom element height
     getElementHeight(selectors) {
       const dom = document.querySelector(selectors)
       return dom ? dom.getBoundingClientRect().height : 0
     },
 
-    // init first screen height
+    // init has TOC
-    initFirstScreenHeight() {
+    initHasToc() {
-      this.firstScreen_dom && (this.firstScreen_dom.style.height = this.innerHeight + 'px')
+      const tocNavDoms = document.querySelectorAll('.post-toc-wrap .post-toc li')
+      if (tocNavDoms.length > 0) {
+        this.hasToc = true
+        document.body.classList.add('has-toc')
+      } else {
+        this.hasToc = false
+        document.body.classList.remove('has-toc')
+      }
     },
 
     // init page height handle
@@ -223,20 +167,21 @@ KEEP.initUtils = () => {
 
     // zoom in image
     zoomInImage() {
-      const SIDE_GAP = 30
+      let SIDE_GAP = 40
       let isZoomIn = false
+      let curWinScrollY = 0
       let selectedImgDom = null
-      const imgDomList = document.querySelectorAll('.markdown-body img')
+      const imgDomList = document.querySelectorAll('.keep-markdown-body img')
       const zoomInImgMask = document.querySelector('.zoom-in-image-mask')
       const zoomInImg = zoomInImgMask.querySelector('.zoom-in-image')
 
       const zoomOut = () => {
         if (isZoomIn) {
           isZoomIn = false
+          curWinScrollY = 0
           zoomInImg && (zoomInImg.style.transform = `scale(1)`)
           zoomInImgMask && zoomInImgMask.classList.remove('show')
-          const timer = setTimeout(() => {
+          setTimeout(() => {
-            clearTimeout(timer)
             selectedImgDom && selectedImgDom.classList.remove('hide')
           }, 300)
         }
@@ -249,15 +194,30 @@ KEEP.initUtils = () => {
           })
 
         document.addEventListener('scroll', () => {
+          if (isZoomIn && Math.abs(curWinScrollY - window.scrollY) >= 50) {
             zoomOut()
+          }
         })
       }
 
+      const setSideGap = () => {
+        const w = document.body.offsetWidth
+        if (w <= 500) {
+          SIDE_GAP = 10
+        } else if (w <= 800) {
+          SIDE_GAP = 20
+        } else {
+          SIDE_GAP = 40
+        }
+      }
+
       if (imgDomList.length) {
         zoomOutHandle()
         imgDomList.forEach((img) => {
           img.addEventListener('click', () => {
+            curWinScrollY = window.scrollY
             isZoomIn = !isZoomIn
+            setSideGap()
             zoomInImg.setAttribute('src', img.getAttribute('src'))
             selectedImgDom = img
             if (isZoomIn) {
@@ -377,17 +337,30 @@ KEEP.initUtils = () => {
       const init = () => {
         // tooltip
         document.querySelectorAll('.tooltip').forEach((element) => {
-          const { content } = element.dataset
+          const { content, offsetX, offsetY } = element.dataset
+
+          let style = ''
+          let sTop = ''
+          let sLeft = ''
+          if (offsetX) {
+            sTop = `left: ${offsetX};`
+          }
+          if (offsetY) {
+            sLeft = `top: ${offsetY};`
+          }
+          if (offsetX || offsetY) {
+            style = ` style="${sLeft}${sTop}"`
+          }
+
           if (content) {
             element.insertAdjacentHTML(
               'afterbegin',
-              `<span class="tooltip-content">${content}</span>`
+              `<span class="tooltip-content"${style}>${content}</span>`
             )
           }
         })
 
         // tooltip-img
-
         const imgsSet = {}
 
         const toggleShowImg = (dom, nameIdx) => {
@@ -458,17 +431,11 @@ KEEP.initUtils = () => {
   // global font adjust
   KEEP.utils.globalFontAdjust()
 
-  // adjust content area width
-  KEEP.utils.contentAreaWidthAdjust()
-
-  // go comment
-  KEEP.utils.goComment()
-
   // init page height handle
   KEEP.utils.initPageHeightHandle()
 
-  // init first screen height
+  // check whether TOC exists
-  KEEP.utils.initFirstScreenHeight()
+  KEEP.utils.initHasToc()
 
   // big image viewer handle
   KEEP.utils.zoomInImage()