From 5af0637399377bbdc4231fda2145ebd373ebb01e Mon Sep 17 00:00:00 2001 From: XPoet Date: Sat, 5 Sep 2020 22:41:10 +0800 Subject: [PATCH] refactor: remove sidebar & change toc style --- .editorconfig | 13 + layout/_partial/header.ejs | 2 - layout/_partial/scripts.ejs | 1 + layout/_partial/sidebar-categories.ejs | 8 - layout/_partial/sidebar-site-info.ejs | 13 - layout/_partial/sidebar-tagcloud.ejs | 11 - layout/_partial/sidebar-tags.ejs | 6 - layout/_partial/sidebar.ejs | 16 - layout/_partial/tagcloud.ejs | 7 +- layout/_partial/{sidebar-toc.ejs => toc.ejs} | 0 layout/_partial/tools.ejs | 3 + layout/article-content.ejs | 7 - layout/page.ejs | 110 +++--- source/css/layout/_partial/header.styl | 16 +- source/css/layout/_partial/local-search.styl | 2 +- .../layout/_partial/sidebar-categories.styl | 71 ---- .../css/layout/_partial/sidebar-tagcloud.styl | 26 -- source/css/layout/_partial/sidebar-tags.styl | 38 -- source/css/layout/_partial/sidebar.styl | 29 -- source/css/layout/_partial/site-info.styl | 35 -- .../_partial/{sidebar-toc.styl => toc.styl} | 4 - source/css/layout/article-content.styl | 4 +- source/css/layout/common/animated.styl | 4 +- source/css/layout/common/magic-theme.styl | 17 +- source/css/layout/common/variables.styl | 11 +- source/css/layout/home-content.styl | 4 +- source/css/layout/page.styl | 345 +++++++++--------- source/css/style.styl | 7 +- source/js/header-shrink.js | 6 +- source/js/main.js | 46 ++- source/js/post.js | 4 + 31 files changed, 340 insertions(+), 526 deletions(-) create mode 100755 .editorconfig delete mode 100644 layout/_partial/sidebar-categories.ejs delete mode 100644 layout/_partial/sidebar-site-info.ejs delete mode 100644 layout/_partial/sidebar-tagcloud.ejs delete mode 100644 layout/_partial/sidebar-tags.ejs delete mode 100644 layout/_partial/sidebar.ejs rename layout/_partial/{sidebar-toc.ejs => toc.ejs} (100%) delete mode 100644 source/css/layout/_partial/sidebar-categories.styl delete mode 100644 source/css/layout/_partial/sidebar-tagcloud.styl delete mode 100644 source/css/layout/_partial/sidebar-tags.styl delete mode 100644 source/css/layout/_partial/sidebar.styl delete mode 100644 source/css/layout/_partial/site-info.styl rename source/css/layout/_partial/{sidebar-toc.styl => toc.styl} (90%) create mode 100644 source/js/post.js diff --git a/.editorconfig b/.editorconfig new file mode 100755 index 0000000..6e87a00 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,13 @@ +# Editor configuration, see http://editorconfig.org +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +max_line_length = off +trim_trailing_whitespace = false diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs index 7ac63c8..3e6c683 100644 --- a/layout/_partial/header.ejs +++ b/layout/_partial/header.ejs @@ -1,7 +1,5 @@
-
-
diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs index a99ea71..4816b89 100644 --- a/layout/_partial/scripts.ejs +++ b/layout/_partial/scripts.ejs @@ -18,5 +18,6 @@ <%- js(['lib/anime.min.js', 'js/toc.js']) %> <% } %> + <%- js('js/post.js') %> <% } %> diff --git a/layout/_partial/sidebar-categories.ejs b/layout/_partial/sidebar-categories.ejs deleted file mode 100644 index 1b80171..0000000 --- a/layout/_partial/sidebar-categories.ejs +++ /dev/null @@ -1,8 +0,0 @@ -
-
文章分类
- - <%- list_categories(site.categories, { - class: 'post-category' - }) %> - -
diff --git a/layout/_partial/sidebar-site-info.ejs b/layout/_partial/sidebar-site-info.ejs deleted file mode 100644 index 665dad4..0000000 --- a/layout/_partial/sidebar-site-info.ejs +++ /dev/null @@ -1,13 +0,0 @@ -
- -
- <%- image_tag('./images/avatar.png', {class: 'avatar'}) %> -
-
- <%= config.author %> -
-
- <%= config.description %> -
- -
\ No newline at end of file diff --git a/layout/_partial/sidebar-tagcloud.ejs b/layout/_partial/sidebar-tagcloud.ejs deleted file mode 100644 index 50b8ca1..0000000 --- a/layout/_partial/sidebar-tagcloud.ejs +++ /dev/null @@ -1,11 +0,0 @@ -
-
标签云
-
- <%- tagcloud(site.tags, { - min_font: 1, - max_font: 1.5, - unit: 'em', - amount: 100 - }) %> -
-
diff --git a/layout/_partial/sidebar-tags.ejs b/layout/_partial/sidebar-tags.ejs deleted file mode 100644 index 3546b74..0000000 --- a/layout/_partial/sidebar-tags.ejs +++ /dev/null @@ -1,6 +0,0 @@ -
-
文章标签
- <%- list_tags(site.tags, { - class: 'post-tag' - }) %> -
diff --git a/layout/_partial/sidebar.ejs b/layout/_partial/sidebar.ejs deleted file mode 100644 index 91ab905..0000000 --- a/layout/_partial/sidebar.ejs +++ /dev/null @@ -1,16 +0,0 @@ -<% if (is_post()) { %> -
- <%- partial('sidebar-toc') %> -
-<% } else { %> -
-
-
- <%- partial('sidebar-tagcloud') %> -
-
- <%- partial('sidebar-categories') %> -
-
-
-<% } %> \ No newline at end of file diff --git a/layout/_partial/tagcloud.ejs b/layout/_partial/tagcloud.ejs index 6c83e63..6584fe6 100644 --- a/layout/_partial/tagcloud.ejs +++ b/layout/_partial/tagcloud.ejs @@ -2,7 +2,12 @@
- <%- tagcloud({min_font: 16, max_font: 28}) %> + <%- tagcloud({ + min_font: 0.98, + max_font: 1.50, + unit: 'em', + amount: 100 + }) %>
diff --git a/layout/_partial/sidebar-toc.ejs b/layout/_partial/toc.ejs similarity index 100% rename from layout/_partial/sidebar-toc.ejs rename to layout/_partial/toc.ejs diff --git a/layout/_partial/tools.ejs b/layout/_partial/tools.ejs index fef3e97..c168ab3 100644 --- a/layout/_partial/tools.ejs +++ b/layout/_partial/tools.ejs @@ -14,5 +14,8 @@ <% } %> +
  • + +
    • diff --git a/layout/article-content.ejs b/layout/article-content.ejs index 922e2e5..a20afd7 100644 --- a/layout/article-content.ejs +++ b/layout/article-content.ejs @@ -41,10 +41,3 @@ -<% if ( (theme.magic.enable && !theme.magic.sidebar.enable && theme.toc.enable) || (!theme.magic.enable && theme.toc.enable)) { %> -
    -
    - <%- partial('_partial/sidebar-toc') %> -
    -
    -<% } %> \ No newline at end of file diff --git a/layout/page.ejs b/layout/page.ejs index b7902fb..c16d7ea 100644 --- a/layout/page.ejs +++ b/layout/page.ejs @@ -1,73 +1,87 @@ -
    -
    - <%- partial('_partial/header') %> -
    +
    -
    +
    +
    +
    -
    +
    -
    - <% if (is_home()) { %> - <%- partial('home-content') %> +
    - <% } else if (is_archive()) { %> - <%- partial('archive-content') %> +
    + <%- partial('_partial/header') %> +
    - <% } else if (is_post()) { %> - <%- partial('article-content') %> +
    - <% } else if (is_category()) { %> - <%- partial('category-content') %> +
    - <% } else if (is_tag()) { %> - <%- partial('tag-content') %> + <% if (is_home()) { %> + <%- partial('home-content') %> - <% } else if (page.title === 'category' || page.title === 'categories') { %> - <%- partial('category-list') %> + <% } else if (is_archive()) { %> + <%- partial('archive-content') %> - <% } else if (page.title === 'tag' || page.title === 'tags') { %> - <%- partial('_partial/tagcloud') %> + <% } else if (is_post()) { %> + <%- partial('article-content') %> - <% } else if (page.title === 'about') { %> - <%- partial('about') %> + <% } else if (is_category()) { %> + <%- partial('category-content') %> - <% } else if (page.title === 'link' || page.title === 'links') { %> - <%- partial('links') %> + <% } else if (is_tag()) { %> + <%- partial('tag-content') %> - <% } %> + <% } else if (page.title === 'category' || page.title === 'categories') { %> + <%- partial('category-list') %> + + <% } else if (page.title === 'tag' || page.title === 'tags') { %> + <%- partial('_partial/tagcloud') %> + + <% } else if (page.title === 'about') { %> + <%- partial('about') %> + + <% } else if (page.title === 'link' || page.title === 'links') { %> + <%- partial('links') %> + + <% } %> + +
    - <% if (theme.magic.enable && theme.magic.sidebar.enable) { %> -
    - <%- partial('_partial/sidebar') %> -
    - <% } %> - -
    - -
    - <%- partial('_partial/tools') %> +
    + <%- partial('_partial/footer') %> +
    +
    - <% if (theme.back2top.enable) { %> -
    -
      -
    • +
      + <%- partial('_partial/tools') %> +
      + + <% if (theme.back2top.enable) { %> +
      +
        +
      • -
        • -
      -
      - <% } %> -
    + + +
    + <% } %> + + + -
    - <%- partial('_partial/footer') %> -
    + + + <% if (theme.local_search.enable) { %> <%- partial('_partial/local-search') %> <% } %> diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl index 9b04bd8..3b208eb 100644 --- a/source/css/layout/_partial/header.styl +++ b/source/css/layout/_partial/header.styl @@ -18,18 +18,6 @@ $header-progress-height = 2.8px; magic-style(1.02, 1.02); } - .header-progress { - display: none; - position: absolute; - width: 0; - height: $header-progress-height; - top: 0; - left: 0; - background: var(--primary-color); - transition: all 0.1s ease; - } - - .header-content { width: $main-content-width; height: 100%; @@ -37,11 +25,11 @@ $header-progress-height = 2.8px; transition(); +ils-tablet() { - width: 90%; + width: $main-content-width-tablet !important; } +ils-mobile() { - width: 95%; + width: $main-content-width-mobile !important; } display: flex; diff --git a/source/css/layout/_partial/local-search.styl b/source/css/layout/_partial/local-search.styl index f132bad..78de554 100644 --- a/source/css/layout/_partial/local-search.styl +++ b/source/css/layout/_partial/local-search.styl @@ -10,7 +10,7 @@ $icon-size = 1.2em; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.4); - z-index: $z-index-5; + z-index: $z-index-8; } diff --git a/source/css/layout/_partial/sidebar-categories.styl b/source/css/layout/_partial/sidebar-categories.styl deleted file mode 100644 index aec4196..0000000 --- a/source/css/layout/_partial/sidebar-categories.styl +++ /dev/null @@ -1,71 +0,0 @@ -@require "../common/magic-theme.styl" - - -.sidebar-category { - - position relative - background: var(--background-color); - magic-container(1.02, 1.02, 20px); - - .category-label { - margin-bottom: 12px; - padding-bottom: 12px; - font-size: 16px; - font-weight: 600; - border-bottom: 1px solid var(--border-color); - } - - .post-category-list { - - .post-category-list-item { - margin-bottom: 10px; - - &:last-child { - margin-bottom: 0; - } - - a.post-category-list-link { - - &:hover { - font-weight: 550; - } - - } - - span.post-category-list-count { - - float: right; - - &::before { - content: '（'; - } - - &::after { - content: '）'; - } - - } - - - ul.post-category-list-child { - - margin-left: 10px; - margin-top: 15px; - - li { - - &::before { - content: '· '; - } - - margin-bottom: 10px; - - &:last-child { - margin-bottom: 0; - } - - } - } - } - } -} diff --git a/source/css/layout/_partial/sidebar-tagcloud.styl b/source/css/layout/_partial/sidebar-tagcloud.styl deleted file mode 100644 index 89a34a3..0000000 --- a/source/css/layout/_partial/sidebar-tagcloud.styl +++ /dev/null @@ -1,26 +0,0 @@ -@require "../common/magic-theme.styl" - - -.sidebar-tagcloud { - - position relative - background: var(--background-color); - magic-container(1.02, 1.02, 20px); - - .tagcloud-label { - margin-bottom: 12px; - padding-bottom: 12px; - font-size: 16px; - font-weight: 600; - border-bottom: 1px solid var(--border-color); - } - - .tagcloud-container { - text-align: justify; - - a { - padding: 0 2px; - line-height: 1.8em; - } - } -} diff --git a/source/css/layout/_partial/sidebar-tags.styl b/source/css/layout/_partial/sidebar-tags.styl deleted file mode 100644 index 7b586af..0000000 --- a/source/css/layout/_partial/sidebar-tags.styl +++ /dev/null @@ -1,38 +0,0 @@ -@require "../common/magic-theme.styl" - -.sidebar-tags { - - position relative - background: var(--background-color); - magic-container(1.02, 1.02, 20px); - - .tag-label { - margin-bottom: 12px; - padding-bottom: 12px; - font-size: 16px; - font-weight: 600; - border-bottom: 1px solid var(--border-color); - } - - - .post-tag-list { - - .post-tag-list-item { - display: flex; - justify-content: space-between; - margin-bottom: 10px; - - &:last-child { - margin-bottom: 0; - } - - .post-tag-list-link { - - } - - .post-tag-list-count { - - } - } - } -} diff --git a/source/css/layout/_partial/sidebar.styl b/source/css/layout/_partial/sidebar.styl deleted file mode 100644 index ccd6912..0000000 --- a/source/css/layout/_partial/sidebar.styl +++ /dev/null @@ -1,29 +0,0 @@ -@require "../common/variables.styl" -@require "../common/magic-theme.styl" - -.sidebar { - - width: $sidebar-width; - box-sizing: border-box; - - .sidebar-container { - - .sidebar-item { - margin-bottom: $component-interspace; - - &:last-child { - margin-bottom: 0; - } - } - - } -} - - -.sidebar-post { - position: fixed; -} - -.sidebar-other { - position: absolute; -} diff --git a/source/css/layout/_partial/site-info.styl b/source/css/layout/_partial/site-info.styl deleted file mode 100644 index f02cad1..0000000 --- a/source/css/layout/_partial/site-info.styl +++ /dev/null @@ -1,35 +0,0 @@ -@require "../common/magic-theme.styl" - - -.site-info-container { - width: 100%; - box-sizing: border-box; - background: var(--background-color); - - magic-container(1.02, 1.02, 20px); - - .justify-center { - display: flex; - justify-content: center; - } - - .avatar-box { - .avatar { - width: 40%; - border-radius: 5px; - padding: 2px; - border: 1px solid var(--border-color); - } - - } - - .author { - font-size: 1.6em; - letter-spacing: 1px; - margin: 20px 0; - } - - .description { - text-align center - } -} \ No newline at end of file diff --git a/source/css/layout/_partial/sidebar-toc.styl b/source/css/layout/_partial/toc.styl similarity index 90% rename from source/css/layout/_partial/sidebar-toc.styl rename to source/css/layout/_partial/toc.styl index 5293e9f..3ae56f6 100644 --- a/source/css/layout/_partial/sidebar-toc.styl +++ b/source/css/layout/_partial/toc.styl @@ -9,10 +9,6 @@ box-sizing: border-box; background: var(--background-color); - if (hexo-config('magic.enable') && hexo-config('magic.sidebar.enable')) { - magic-container(1.02, 1.02, 20px); - } - .post-toc { ol { diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl index 814a8e6..7b5c232 100644 --- a/source/css/layout/article-content.styl +++ b/source/css/layout/article-content.styl @@ -40,7 +40,7 @@ .article-content { text-align: justify; padding-bottom: 30px; - border-bottom: 1px solid $border-color; + border-bottom: 1px solid var(--border-color); } @@ -77,7 +77,7 @@ } -if ((hexo-config('magic.enable') && !hexo-config('magic.sidebar.enable') && hexo-config('toc.enable')) || (!hexo-config('magic.enable') && hexo-config('toc.enable'))) { +if ((hexo-config('magic.enable') && hexo-config('toc.enable')) || (!hexo-config('magic.enable') && hexo-config('toc.enable'))) { .article-toc-container { position: fixed; top: $header-height + $component-interspace; diff --git a/source/css/layout/common/animated.styl b/source/css/layout/common/animated.styl index 213aece..5ad5b04 100644 --- a/source/css/layout/common/animated.styl +++ b/source/css/layout/common/animated.styl @@ -16,9 +16,9 @@ the-transition-ease-in() { the-transition-ease-out() { + transition-delay: 0s; transition-duration: 0.2s; transition-timing-function: ease-out; - transition-delay: 0s; } @@ -66,4 +66,4 @@ the-transition-ease-out() { transform: scaleX(1); } -} \ No newline at end of file +} diff --git a/source/css/layout/common/magic-theme.styl b/source/css/layout/common/magic-theme.styl index 68c9c8a..203c0fd 100644 --- a/source/css/layout/common/magic-theme.styl +++ b/source/css/layout/common/magic-theme.styl @@ -1,6 +1,7 @@ @require "animated.styl" magic-style(scaleX, scaleY) { + if (hexo-config('magic.enable') == true) { box-shadow: 0 0 2px var(--border-color); @@ -24,7 +25,19 @@ magic-style(scaleX, scaleY) { } magic-container(scaleX, scaleY, padding) { - magic-style(scaleX, scaleY); + padding: padding; - border-radius: 2px; + border-radius: 4px; + magic-style(scaleX, scaleY); + + +ils-tablet() { + padding: padding - 2px; + border-radius: 3px; + } + + +ils-mobile() { + padding: padding - 4px; + border-radius: 2px; + } + } diff --git a/source/css/layout/common/variables.styl b/source/css/layout/common/variables.styl index 8216516..646a387 100644 --- a/source/css/layout/common/variables.styl +++ b/source/css/layout/common/variables.styl @@ -11,12 +11,9 @@ if (hexo-config('magic.enable')) { $header-height = 100px; // normal 风格：头部默认高度 } -if (hexo-config('magic.enable') && hexo-config('magic.sidebar.enable')) { - $main-content-width = 80%; // magic.sidebar（双栏） 中间内容区域宽度 - $sidebar-width = 280px; // magic.sidebar（双栏） 侧边栏宽度 -} else { - $main-content-width = 62%; // （单栏）中间内容区域宽度 -} +$main-content-width = 62%; // 中间内容区域宽度（PC） +$main-content-width-tablet = 80%; // 中间内容区域宽度（平板） +$main-content-width-mobile = 88%; // 中间内容区域宽度（手机） $header-shrink-height = 60px; // 头部收缩高度 $tool-button-width = 36px; // tools 方形工具按钮宽度 @@ -46,6 +43,8 @@ $z-index-3 = 1003; $z-index-4 = 1004; $z-index-5 = 1005; $z-index-6 = 1006; +$z-index-7 = 1007; +$z-index-8 = 1008; // =================================== diff --git a/source/css/layout/home-content.styl b/source/css/layout/home-content.styl index fead12b..fcf449e 100644 --- a/source/css/layout/home-content.styl +++ b/source/css/layout/home-content.styl @@ -9,7 +9,7 @@ background: var(--background-color); - if (hexo-config('magic.enable') == true) { + if (hexo-config('magic.enable')) { magic-container(1.02, 1.02, 30px); margin-bottom: $component-interspace; @@ -40,7 +40,7 @@ margin: 0; - if (hexo-config('magic.enable') == true) { + if (hexo-config('magic.enable')) { padding-bottom: 20px; border-bottom: 1px solid var(--border-color); } else { diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl index a381d79..169dbe4 100644 --- a/source/css/layout/page.styl +++ b/source/css/layout/page.styl @@ -1,190 +1,191 @@ @require "common/variables.styl"; @require "./common/animated.styl"; -.page-template { - padding-top: $header-height; - position: relative; +$header-progress-height = 3px; +$page-aside-width = 248px; - .page-top { +.page-container { + position: relative; + padding-top: $header-progress-height; + + +ils-tablet() { + padding-left: 0 !important; + } + + transition(); + + .page-header { + .header-progress { + display: none; + position: fixed; + width: 0; + height: $header-progress-height; + top: 0; + left: 0; + background: var(--primary-color); + transition: all 0.1s ease; + z-index: $z-index-7; + } + } + + + .page-main { + + .page-main-content { + padding-top: $header-height; + position: relative; + + +ils-tablet() { + padding-top: $header-height - 8px; + } + + +ils-mobile() { + padding-top: $header-height - 16px; + } + + .page-main-content-top { + position: fixed; + top: 0; + right: 0; + width: 100%; + height: $header-height; + + +ils-tablet() { + height: $header-height - 8px; + padding-left: 0 !important; + } + + +ils-mobile() { + height: $header-height - 16px; + } + + z-index: $z-index-5; + box-sizing: border-box; + transition(); + } + + + .page-main-content-middle { + width: 100%; + display: flex; + justify-content: center; + padding: $component-interspace 0; + + .main-content { + width: $main-content-width; + + +ils-tablet() { + width: $main-content-width-tablet !important; + } + + +ils-mobile() { + width: $main-content-width-mobile !important; + } + + height: 100%; + position: relative; + box-sizing: border-box; + } + + } + + + .page-main-content-bottom { + width: 100%; + } + } + + + .page-main-content-top-shrink { + transition(); + padding-top: $header-shrink-height; + + .page-main-content-top { + height: $header-shrink-height; + } + + .sidebar-tools { + top: $header-shrink-height + $component-interspace !important; + } + + } + + + } + + + .page-aside { position: fixed; top: 0; - width: 100%; - height: $header-height; - z-index: $z-index-5; + bottom: 0; + left: - $page-aside-width; + width: $page-aside-width; + z-index: $z-index-6; box-sizing: border-box; + overflow-y: auto; + background: var(--background-color); + + +ils-tablet() { + left: 0 !important; + display: none !important; + } + + if (hexo-config('magic.enable')) { + magic-container(1.02, 1.02, 20px); + } else { + padding: 20px; + border-right: 1px solid var(--border-color); + } + + border-radius: 0; + + the-transition-ease-out(); + } + + + .sidebar-tools { + position: fixed; + top: $header-height + $component-interspace; + right: $component-interspace; transition(); } - .page-middle { - width: 100%; - display: flex; - justify-content: center; - padding: $component-interspace 0; - - .main-content { - width: $main-content-width; - height: 100%; - position: relative; - box-sizing: border-box; - - if (hexo-config('magic.enable') && hexo-config('magic.sidebar.enable')) { - - if (hexo-config('magic.sidebar.position') == left) { - padding-left: $sidebar-width + $component-interspace; - } else { - padding-right: $sidebar-width + $component-interspace; - } - - .main-content-right { - position: absolute; - - if (hexo-config('magic.sidebar.position') == left) { - left: 0; - } else { - right: 0; - } - - width: $sidebar-width; - box-sizing: border-box; - } - } - - .main-content-left { - position: relative; - if (hexo-config('magic.sidebar.position') == left) { - float: right; - } else { - float: left; - } - width: 100%; - box-sizing: border-box; - } - - - } - - - .sidebar-tools { - position: fixed; - top: $header-height + $component-interspace; - if (hexo-config('side_tools.position') == left) { - left: ((100% - $main-content-width) / 4); - } else { - right: ((100% - $main-content-width) / 4); - } - transition(); - } - - - .scroll-to-top { - display: none; - position: fixed; - - if (hexo-config('back2top.position') == left) { - left: ((100% - $main-content-width) / 4); - } else { - right: ((100% - $main-content-width) / 4); - } - bottom: $component-interspace; - - li { - cursor: pointer; - width: $tool-button-width; - height: $tool-button-width; - border-radius: 5px; - font-size: 1em; - display: flex; - align-items: center; - justify-content: center; - background: var(--background-color); - - if (hexo-config('magic.enable') == true) { - magic-style(1.1, 1.1); - } else { - border: 1px solid var(--third-text-color); - } - - &:hover { - transition(); - color: var(--background-color); - background: var(--primary-color); - } - } - } - } - - - .page-bottom { - width: 100%; - } -} - - -.page-top-shrink { - transition(); - padding-top: $header-shrink-height; - - .page-top { - height: $header-shrink-height; - } - - .sidebar-tools { - top: $header-shrink-height + $component-interspace !important; - } - -} - - -@media screen and (max-width: $media-max-width) { - - .page-template { - padding-top: $header-height - 10px !important; - } - - .page-top { - height: $header-height - 10px !important; - } - - .main-content { - width: 80% !important; - } - - .sidebar-tools { - if (hexo-config('side_tools.position') == left) { - left: 2% !important; - transform-origin: left top; - } else { - right: 2% !important; - transform-origin: right top; - } - transform: scale(0.8); - } - .scroll-to-top { + display: none; + position: fixed; + if (hexo-config('back2top.position') == left) { - left: 2% !important; - transform-origin: left bottom; + left: ((100% - $main-content-width) / 4); } else { - right: 2% !important; - transform-origin: right bottom; + right: ((100% - $main-content-width) / 4); + } + bottom: $component-interspace; + + li { + cursor: pointer; + width: $tool-button-width; + height: $tool-button-width; + border-radius: 5px; + font-size: 1em; + display: flex; + align-items: center; + justify-content: center; + background: var(--background-color); + + if (hexo-config('magic.enable') == true) { + magic-style(1.1, 1.1); + } else { + border: 1px solid var(--third-text-color); + } + + &:hover { + transition(); + color: var(--background-color); + background: var(--primary-color); + } } - transform: scale(0.8); } + } - - -@media screen and (max-width: $media-max-width-mobile) { - .page-template { - padding-top: $header-height - 20px !important; - } - - .page-top { - height: $header-height - 20px !important; - } - - .main-content { - width: 90% !important; - } -} diff --git a/source/css/style.styl b/source/css/style.styl index c7b0b9f..099e963 100644 --- a/source/css/style.styl +++ b/source/css/style.styl @@ -3,7 +3,7 @@ @import "layout/common/basic.styl" @import "layout/page.styl" @import "layout/_partial/local-search.styl" -@import "layout/_partial/sidebar-toc.styl" +@import "layout/_partial/toc.styl" @import "layout/_partial/comments/valine.styl" @import "layout/_partial/comments/gitalk.styl" @import "layout/_partial/header.styl" @@ -23,9 +23,4 @@ @import "layout/common/markdown.styl" @import "layout/common/codeblock/highlight.styl" @import "layout/common/codeblock/copy-code.styl" -@import "layout/_partial/sidebar.styl" -@import "layout/_partial/site-info.styl" -@import "layout/_partial/sidebar-categories.styl" -@import "layout/_partial/sidebar-tags.styl" -@import "layout/_partial/sidebar-tagcloud.styl" @import "layout/_partial/tagcloud.styl" diff --git a/source/js/header-shrink.js b/source/js/header-shrink.js index cdef2f2..99bd82d 100644 --- a/source/js/header-shrink.js +++ b/source/js/header-shrink.js @@ -1,4 +1,4 @@ -const pageTemplateDom = document.querySelector('.page-template'); +const pageTemplateDom = document.querySelector('.page-main-content'); const articleTocContainerDom = document.querySelector('.article-toc-container'); const headerDom = document.querySelector('.header-wrapper'); const menuBarDom = document.querySelector('.menu-bar'); @@ -13,7 +13,7 @@ window.addEventListener('scroll', function (_e) { if (!isHeaderShrink && scrollTop > headerHeight) { isHeaderShrink = true; headerDom.classList.add('header-wrapper-shrink'); - pageTemplateDom.classList.add('page-top-shrink'); + pageTemplateDom.classList.add('page-main-content-top-shrink'); if (articleTocContainerDom) { articleTocContainerDom.classList.add('article-toc-container-shrink'); @@ -21,7 +21,7 @@ window.addEventListener('scroll', function (_e) { } else if (isHeaderShrink && scrollTop <= headerHeight) { isHeaderShrink = false; headerDom.classList.remove('header-wrapper-shrink'); - pageTemplateDom.classList.remove('page-top-shrink'); + pageTemplateDom.classList.remove('page-main-content-top-shrink'); if (articleTocContainerDom) { articleTocContainerDom.classList.remove('article-toc-container-shrink'); diff --git a/source/js/main.js b/source/js/main.js index 17c7806..33606aa 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -1,3 +1,47 @@ window.addEventListener('DOMContentLoaded', () => { - console.log(`${CONFIG.themeInfo.name} v${CONFIG.themeInfo.version}`); + console.log(`${CONFIG.themeInfo.name} v${CONFIG.themeInfo.version}`); + + pageAsideOpenToggle(); + }); + + +const pageAsideOpenToggle = () => { + + const toggleDom = document.querySelector('.page-aside-toggle'); + const pageTopDom = document.querySelector('.page-main-content-top'); + const containerDom = document.querySelector('.page-container'); + const leftAsideDom = document.querySelector('.page-aside'); + + const headerContentDom = document.querySelector('.header-wrapper .header-content'); + const mainContentDom = document.querySelector('.page-main-content-middle .main-content'); + + let isOpen = false; + const openToggle = (isOpen) => { + + const pageAsideWidth = '248px'; + containerDom.style.paddingLeft = isOpen ? pageAsideWidth : '0'; + pageTopDom.style.paddingLeft = isOpen ? pageAsideWidth : '0'; + pageTopDom.style.paddingLeft = isOpen ? pageAsideWidth : '0'; + leftAsideDom.style.left = isOpen ? '0' : `-${pageAsideWidth}`; + + headerContentDom.style.width = isOpen ? '76%' : '62%'; + mainContentDom.style.width = isOpen ? '76%' : '62%'; + + } + + + toggleDom.addEventListener('click', () => { + isOpen = !isOpen; + openToggle(isOpen); + }) + + + window.utils = { + openToggle: () => { + isOpen = true; + openToggle(isOpen); + } + } + +} diff --git a/source/js/post.js b/source/js/post.js new file mode 100644 index 0000000..ad6610c --- /dev/null +++ b/source/js/post.js @@ -0,0 +1,4 @@ +window.addEventListener('DOMContentLoaded', () => { + const navItems = document.querySelectorAll('.post-toc-wrap .post-toc li'); + navItems.length > 0 && window.utils.openToggle(); +});