refactor: remove sidebar & change toc style

.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

layout/_partial/header.ejs

@@ -1,7 +1,5 @@
 <header class="header-wrapper">
 
-    <div class="header-progress"></div>
-
     <div class="header-content">
 
         <a class="logo-title" href="/">

layout/_partial/scripts.ejs

@@ -18,5 +18,6 @@
         <%- js(['lib/anime.min.js', 'js/toc.js']) %>
     <% } %>
 
+    <%- js('js/post.js') %>
 <% } %>
 

layout/_partial/sidebar-categories.ejs

@@ -1,8 +0,0 @@
-<div class="sidebar-category">
-    <div class="category-label">文章分类</div>
-
-    <%- list_categories(site.categories, {
-        class: 'post-category'
-    }) %>
-
-</div>

layout/_partial/sidebar-site-info.ejs

@@ -1,13 +0,0 @@
-<div class="site-info-container">
-
-    <div class="avatar-box justify-center">
-        <%- image_tag('./images/avatar.png', {class: 'avatar'}) %>
-    </div>
-    <div class="author justify-center">
-        <%= config.author %>
-    </div>
-    <div class="description">
-        <%= config.description %>
-    </div>
-
-</div>

layout/_partial/sidebar-tagcloud.ejs

@@ -1,11 +0,0 @@
-<div class="sidebar-tagcloud">
-    <div class="tagcloud-label">标签云</div>
-    <div class="tagcloud-container">
-        <%- tagcloud(site.tags, {
-            min_font: 1,
-            max_font: 1.5,
-            unit: 'em',
-            amount: 100
-        }) %>
-    </div>
-</div>

layout/_partial/sidebar-tags.ejs

@@ -1,6 +0,0 @@
-<div class="sidebar-tags">
-    <div class="tag-label">文章标签</div>
-    <%- list_tags(site.tags, {
-        class: 'post-tag'
-    }) %>
-</div>

layout/_partial/sidebar.ejs

@@ -1,16 +0,0 @@
-<% if (is_post()) { %>
-    <div class="sidebar sidebar-post fade-in-down-animation">
-        <%- partial('sidebar-toc') %>
-    </div>
-<% } else { %>
-    <div class="sidebar sidebar-other fade-in-down-animation">
-        <div class="sidebar-container">
-            <div class="sidebar-item">
-                <%- partial('sidebar-tagcloud') %>
-            </div>
-            <div class="sidebar-item">
-                <%- partial('sidebar-categories') %>
-            </div>
-        </div>
-    </div>
-<% } %>

layout/_partial/tagcloud.ejs

@@ -2,7 +2,12 @@
     <div class="fade-in-down-animation">
         <div class="tagcloud-container">
             <div class="tagcloud-content">
-                <%- tagcloud({min_font: 16, max_font: 28}) %>
+                <%- tagcloud({
+                    min_font: 0.98,
+                    max_font: 1.50,
+                    unit: 'em',
+                    amount: 100
+                }) %>
             </div>
         </div>
     </div>

layout/_partial/tools.ejs

@@ -14,5 +14,8 @@
                 <a href="<%= '/' + config.feed.path %>" target="_blank"><i class="fa fa-rss"></i></a>
             </li>
         <% } %>
+        <li class="page-aside-toggle">
+            <i class="fa fa-bars"></i>
+        </li>
     </ul>
 </div>

layout/article-content.ejs

@@ -41,10 +41,3 @@
         </div>
     </div>
 </div>
-<% if ( (theme.magic.enable && !theme.magic.sidebar.enable && theme.toc.enable) || (!theme.magic.enable && theme.toc.enable)) { %>
-    <div class="article-toc-container fade-in-down-animation">
-        <div class="article-toc">
-            <%- partial('_partial/sidebar-toc') %>
-        </div>
-    </div>
-<% } %>

layout/page.ejs

@@ -1,13 +1,21 @@
-<div class="page-template">
+<div class="page-container">
-    <div class="page-top">
+
+    <header class="page-header">
+        <div class="header-progress"></div>
+    </header>
+
+    <main class="page-main">
+
+        <div class="page-main-content">
+
+            <div class="page-main-content-top">
                 <%- partial('_partial/header') %>
             </div>
 
-    <div class="page-middle ">
+            <div class="page-main-content-middle">
 
                 <main class="main-content normal-code-theme">
 
-            <div class="main-content-left">
                     <% if (is_home()) { %>
                         <%- partial('home-content') %>
 
@@ -37,14 +45,14 @@
 
                     <% } %>
 
+                </main>
+
             </div>
 
-            <% if (theme.magic.enable && theme.magic.sidebar.enable) { %>
+            <div class="page-main-content-bottom">
-                <div class="main-content-right">
+                <%- partial('_partial/footer') %>
-                    <%- partial('_partial/sidebar') %>
+            </div>
         </div>
-            <% } %>
-
     </main>
 
     <div class="sidebar-tools">
@@ -62,12 +70,18 @@
             </ul>
         </div>
     <% } %>
-    </div>
 
-    <div class="page-bottom">
+    <!-- page aside -->
-        <%- partial('_partial/footer') %>
+    <aside class="page-aside">
-    </div>
+        <% if (is_post()) { %>
+            <%- partial('_partial/toc') %>
+        <% } %>
+    </aside>
+
 </div>
+
+
+
 <% if (theme.local_search.enable) { %>
     <%- partial('_partial/local-search') %>
 <% } %>

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;

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;
 }
 
 

source/css/layout/_partial/sidebar-categories.styl

@@ -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;
-          }
-
-        }
-      }
-    }
-  }
-}

source/css/layout/_partial/sidebar-tagcloud.styl

@@ -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;
-    }
-  }
-}

source/css/layout/_partial/sidebar-tags.styl

@@ -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 {
-
-      }
-    }
-  }
-}

source/css/layout/_partial/sidebar.styl

@@ -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;
-}

source/css/layout/_partial/site-info.styl

@@ -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
-  }
-}

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 {

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;

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;
 }
 
 

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: 4px;
+  magic-style(scaleX, scaleY);
+
+  +ils-tablet() {
+    padding: padding - 2px;
+    border-radius: 3px;
+  }
+
+  +ils-mobile() {
+    padding: padding - 4px;
     border-radius: 2px;
+  }
+
 }

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 = 62%;          // 中间内容区域宽度（PC）
-  $main-content-width = 80%;    // magic.sidebar（双栏） 中间内容区域宽度
+$main-content-width-tablet = 80%;   // 中间内容区域宽度（平板）
-  $sidebar-width = 280px;       // magic.sidebar（双栏） 侧边栏宽度
+$main-content-width-mobile = 88%;   // 中间内容区域宽度（手机）
-} else {
-  $main-content-width = 62%;    // （单栏）中间内容区域宽度
-}
 
 $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;
 
 
 // ===================================

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 {

source/css/layout/page.styl

@@ -1,22 +1,71 @@
 @require "common/variables.styl";
 @require "./common/animated.styl";
 
-.page-template {
+$header-progress-height = 3px;
+$page-aside-width = 248px;
+
+.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;
 
-  .page-top {
+      +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-middle {
+      .page-main-content-middle {
         width: 100%;
         display: flex;
         justify-content: center;
@@ -24,55 +73,80 @@
 
         .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;
-
-      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 {
+      .page-main-content-bottom {
-        position: relative;
-        if (hexo-config('magic.sidebar.position') == left) {
-          float: right;
-        } else {
-          float: left;
-        }
         width: 100%;
-        box-sizing: border-box;
+      }
     }
 
 
+    .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;
+    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;
-      if (hexo-config('side_tools.position') == left) {
+    right: $component-interspace;
-        left: ((100% - $main-content-width) / 4);
-      } else {
-        right: ((100% - $main-content-width) / 4);
-      }
     transition();
   }
 
@@ -112,79 +186,6 @@
       }
     }
   }
-  }
 
 
-  .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 {
-    if (hexo-config('back2top.position') == left) {
-      left: 2% !important;
-      transform-origin: left bottom;
-    } else {
-      right: 2% !important;
-      transform-origin: right bottom;
-    }
-    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;
-  }
 }

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"

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');

source/js/main.js

@@ -1,3 +1,47 @@
 window.addEventListener('DOMContentLoaded', () => {
   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);
+    }
+  }
+
+}

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();
+});