refactor: remove sidebar & change toc style
This commit is contained in:
XPoet
parent
c2d384aaa3
commit
5af0637399
|
|
@ -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
|
||||||
|
|
@ -1,7 +1,5 @@
|
||||||
<header class="header-wrapper">
|
<header class="header-wrapper">
|
||||||
|
|
||||||
<div class="header-progress"></div>
|
|
||||||
|
|
||||||
<div class="header-content">
|
<div class="header-content">
|
||||||
|
|
||||||
<a class="logo-title" href="/">
|
<a class="logo-title" href="/">
|
||||||
|
|
|
||||||
|
|
@ -18,5 +18,6 @@
|
||||||
<%- js(['lib/anime.min.js', 'js/toc.js']) %>
|
<%- js(['lib/anime.min.js', 'js/toc.js']) %>
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
||||||
|
<%- js('js/post.js') %>
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
<div class="sidebar-category">
|
|
||||||
<div class="category-label">文章分类</div>
|
|
||||||
|
|
||||||
<%- list_categories(site.categories, {
|
|
||||||
class: 'post-category'
|
|
||||||
}) %>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
<div class="sidebar-tags">
|
|
||||||
<div class="tag-label">文章标签</div>
|
|
||||||
<%- list_tags(site.tags, {
|
|
||||||
class: 'post-tag'
|
|
||||||
}) %>
|
|
||||||
</div>
|
|
||||||
|
|
@ -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>
|
|
||||||
<% } %>
|
|
||||||
|
|
@ -2,7 +2,12 @@
|
||||||
<div class="fade-in-down-animation">
|
<div class="fade-in-down-animation">
|
||||||
<div class="tagcloud-container">
|
<div class="tagcloud-container">
|
||||||
<div class="tagcloud-content">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -14,5 +14,8 @@
|
||||||
<a href="<%= '/' + config.feed.path %>" target="_blank"><i class="fa fa-rss"></i></a>
|
<a href="<%= '/' + config.feed.path %>" target="_blank"><i class="fa fa-rss"></i></a>
|
||||||
</li>
|
</li>
|
||||||
<% } %>
|
<% } %>
|
||||||
|
<li class="page-aside-toggle">
|
||||||
|
<i class="fa fa-bars"></i>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -41,10 +41,3 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
|
||||||
<% } %>
|
|
||||||
110
layout/page.ejs
110
layout/page.ejs
|
|
@ -1,73 +1,87 @@
|
||||||
<div class="page-template">
|
<div class="page-container">
|
||||||
<div class="page-top">
|
|
||||||
<%- partial('_partial/header') %>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="page-middle ">
|
<header class="page-header">
|
||||||
|
<div class="header-progress"></div>
|
||||||
|
</header>
|
||||||
|
|
||||||
<main class="main-content normal-code-theme">
|
<main class="page-main">
|
||||||
|
|
||||||
<div class="main-content-left">
|
<div class="page-main-content">
|
||||||
<% if (is_home()) { %>
|
|
||||||
<%- partial('home-content') %>
|
|
||||||
|
|
||||||
<% } else if (is_archive()) { %>
|
<div class="page-main-content-top">
|
||||||
<%- partial('archive-content') %>
|
<%- partial('_partial/header') %>
|
||||||
|
</div>
|
||||||
|
|
||||||
<% } else if (is_post()) { %>
|
<div class="page-main-content-middle">
|
||||||
<%- partial('article-content') %>
|
|
||||||
|
|
||||||
<% } else if (is_category()) { %>
|
<main class="main-content normal-code-theme">
|
||||||
<%- partial('category-content') %>
|
|
||||||
|
|
||||||
<% } else if (is_tag()) { %>
|
<% if (is_home()) { %>
|
||||||
<%- partial('tag-content') %>
|
<%- partial('home-content') %>
|
||||||
|
|
||||||
<% } else if (page.title === 'category' || page.title === 'categories') { %>
|
<% } else if (is_archive()) { %>
|
||||||
<%- partial('category-list') %>
|
<%- partial('archive-content') %>
|
||||||
|
|
||||||
<% } else if (page.title === 'tag' || page.title === 'tags') { %>
|
<% } else if (is_post()) { %>
|
||||||
<%- partial('_partial/tagcloud') %>
|
<%- partial('article-content') %>
|
||||||
|
|
||||||
<% } else if (page.title === 'about') { %>
|
<% } else if (is_category()) { %>
|
||||||
<%- partial('about') %>
|
<%- partial('category-content') %>
|
||||||
|
|
||||||
<% } else if (page.title === 'link' || page.title === 'links') { %>
|
<% } else if (is_tag()) { %>
|
||||||
<%- partial('links') %>
|
<%- 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') %>
|
||||||
|
|
||||||
|
<% } %>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
</div>
|
</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">
|
|
||||||
<%- partial('_partial/tools') %>
|
|
||||||
</div>
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
<% if (theme.back2top.enable) { %>
|
<div class="sidebar-tools">
|
||||||
<div class="scroll-to-top">
|
<%- partial('_partial/tools') %>
|
||||||
<ul>
|
</div>
|
||||||
<li>
|
|
||||||
|
<% if (theme.back2top.enable) { %>
|
||||||
|
<div class="scroll-to-top">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
<span class="scroll-percent">
|
<span class="scroll-percent">
|
||||||
<i class="fa fa-caret-up"></i>
|
<i class="fa fa-caret-up"></i>
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<% } %>
|
<% } %>
|
||||||
</div>
|
|
||||||
|
<!-- page aside -->
|
||||||
|
<aside class="page-aside">
|
||||||
|
<% if (is_post()) { %>
|
||||||
|
<%- partial('_partial/toc') %>
|
||||||
|
<% } %>
|
||||||
|
</aside>
|
||||||
|
|
||||||
<div class="page-bottom">
|
|
||||||
<%- partial('_partial/footer') %>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<% if (theme.local_search.enable) { %>
|
<% if (theme.local_search.enable) { %>
|
||||||
<%- partial('_partial/local-search') %>
|
<%- partial('_partial/local-search') %>
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
|
||||||
|
|
@ -18,18 +18,6 @@ $header-progress-height = 2.8px;
|
||||||
magic-style(1.02, 1.02);
|
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 {
|
.header-content {
|
||||||
width: $main-content-width;
|
width: $main-content-width;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -37,11 +25,11 @@ $header-progress-height = 2.8px;
|
||||||
transition();
|
transition();
|
||||||
|
|
||||||
+ils-tablet() {
|
+ils-tablet() {
|
||||||
width: 90%;
|
width: $main-content-width-tablet !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
+ils-mobile() {
|
+ils-mobile() {
|
||||||
width: 95%;
|
width: $main-content-width-mobile !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ $icon-size = 1.2em;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: rgba(0, 0, 0, 0.4);
|
background: rgba(0, 0, 0, 0.4);
|
||||||
z-index: $z-index-5;
|
z-index: $z-index-8;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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 {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -9,10 +9,6 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background: var(--background-color);
|
background: var(--background-color);
|
||||||
|
|
||||||
if (hexo-config('magic.enable') && hexo-config('magic.sidebar.enable')) {
|
|
||||||
magic-container(1.02, 1.02, 20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-toc {
|
.post-toc {
|
||||||
|
|
||||||
ol {
|
ol {
|
||||||
|
|
@ -40,7 +40,7 @@
|
||||||
.article-content {
|
.article-content {
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
padding-bottom: 30px;
|
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 {
|
.article-toc-container {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: $header-height + $component-interspace;
|
top: $header-height + $component-interspace;
|
||||||
|
|
|
||||||
|
|
@ -16,9 +16,9 @@ the-transition-ease-in() {
|
||||||
|
|
||||||
|
|
||||||
the-transition-ease-out() {
|
the-transition-ease-out() {
|
||||||
|
transition-delay: 0s;
|
||||||
transition-duration: 0.2s;
|
transition-duration: 0.2s;
|
||||||
transition-timing-function: ease-out;
|
transition-timing-function: ease-out;
|
||||||
transition-delay: 0s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
@require "animated.styl"
|
@require "animated.styl"
|
||||||
|
|
||||||
magic-style(scaleX, scaleY) {
|
magic-style(scaleX, scaleY) {
|
||||||
|
|
||||||
if (hexo-config('magic.enable') == true) {
|
if (hexo-config('magic.enable') == true) {
|
||||||
|
|
||||||
box-shadow: 0 0 2px var(--border-color);
|
box-shadow: 0 0 2px var(--border-color);
|
||||||
|
|
@ -24,7 +25,19 @@ magic-style(scaleX, scaleY) {
|
||||||
}
|
}
|
||||||
|
|
||||||
magic-container(scaleX, scaleY, padding) {
|
magic-container(scaleX, scaleY, padding) {
|
||||||
magic-style(scaleX, scaleY);
|
|
||||||
padding: padding;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,12 +11,9 @@ if (hexo-config('magic.enable')) {
|
||||||
$header-height = 100px; // normal 风格：头部默认高度
|
$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; // 头部收缩高度
|
$header-shrink-height = 60px; // 头部收缩高度
|
||||||
$tool-button-width = 36px; // tools 方形工具按钮宽度
|
$tool-button-width = 36px; // tools 方形工具按钮宽度
|
||||||
|
|
@ -46,6 +43,8 @@ $z-index-3 = 1003;
|
||||||
$z-index-4 = 1004;
|
$z-index-4 = 1004;
|
||||||
$z-index-5 = 1005;
|
$z-index-5 = 1005;
|
||||||
$z-index-6 = 1006;
|
$z-index-6 = 1006;
|
||||||
|
$z-index-7 = 1007;
|
||||||
|
$z-index-8 = 1008;
|
||||||
|
|
||||||
|
|
||||||
// ===================================
|
// ===================================
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
|
|
||||||
background: var(--background-color);
|
background: var(--background-color);
|
||||||
|
|
||||||
if (hexo-config('magic.enable') == true) {
|
if (hexo-config('magic.enable')) {
|
||||||
|
|
||||||
magic-container(1.02, 1.02, 30px);
|
magic-container(1.02, 1.02, 30px);
|
||||||
margin-bottom: $component-interspace;
|
margin-bottom: $component-interspace;
|
||||||
|
|
@ -40,7 +40,7 @@
|
||||||
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
if (hexo-config('magic.enable') == true) {
|
if (hexo-config('magic.enable')) {
|
||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
border-bottom: 1px solid var(--border-color);
|
border-bottom: 1px solid var(--border-color);
|
||||||
} else {
|
} else {
|
||||||
|
|
|
||||||
|
|
@ -1,190 +1,191 @@
|
||||||
@require "common/variables.styl";
|
@require "common/variables.styl";
|
||||||
@require "./common/animated.styl";
|
@require "./common/animated.styl";
|
||||||
|
|
||||||
.page-template {
|
$header-progress-height = 3px;
|
||||||
padding-top: $header-height;
|
$page-aside-width = 248px;
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.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;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
bottom: 0;
|
||||||
height: $header-height;
|
left: - $page-aside-width;
|
||||||
z-index: $z-index-5;
|
width: $page-aside-width;
|
||||||
|
z-index: $z-index-6;
|
||||||
box-sizing: border-box;
|
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();
|
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 {
|
.scroll-to-top {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
|
||||||
if (hexo-config('back2top.position') == left) {
|
if (hexo-config('back2top.position') == left) {
|
||||||
left: 2% !important;
|
left: ((100% - $main-content-width) / 4);
|
||||||
transform-origin: left bottom;
|
|
||||||
} else {
|
} else {
|
||||||
right: 2% !important;
|
right: ((100% - $main-content-width) / 4);
|
||||||
transform-origin: right bottom;
|
}
|
||||||
|
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
@import "layout/common/basic.styl"
|
@import "layout/common/basic.styl"
|
||||||
@import "layout/page.styl"
|
@import "layout/page.styl"
|
||||||
@import "layout/_partial/local-search.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/valine.styl"
|
||||||
@import "layout/_partial/comments/gitalk.styl"
|
@import "layout/_partial/comments/gitalk.styl"
|
||||||
@import "layout/_partial/header.styl"
|
@import "layout/_partial/header.styl"
|
||||||
|
|
@ -23,9 +23,4 @@
|
||||||
@import "layout/common/markdown.styl"
|
@import "layout/common/markdown.styl"
|
||||||
@import "layout/common/codeblock/highlight.styl"
|
@import "layout/common/codeblock/highlight.styl"
|
||||||
@import "layout/common/codeblock/copy-code.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"
|
@import "layout/_partial/tagcloud.styl"
|
||||||
|
|
|
||||||
|
|
@ -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 articleTocContainerDom = document.querySelector('.article-toc-container');
|
||||||
const headerDom = document.querySelector('.header-wrapper');
|
const headerDom = document.querySelector('.header-wrapper');
|
||||||
const menuBarDom = document.querySelector('.menu-bar');
|
const menuBarDom = document.querySelector('.menu-bar');
|
||||||
|
|
@ -13,7 +13,7 @@ window.addEventListener('scroll', function (_e) {
|
||||||
if (!isHeaderShrink && scrollTop > headerHeight) {
|
if (!isHeaderShrink && scrollTop > headerHeight) {
|
||||||
isHeaderShrink = true;
|
isHeaderShrink = true;
|
||||||
headerDom.classList.add('header-wrapper-shrink');
|
headerDom.classList.add('header-wrapper-shrink');
|
||||||
pageTemplateDom.classList.add('page-top-shrink');
|
pageTemplateDom.classList.add('page-main-content-top-shrink');
|
||||||
|
|
||||||
if (articleTocContainerDom) {
|
if (articleTocContainerDom) {
|
||||||
articleTocContainerDom.classList.add('article-toc-container-shrink');
|
articleTocContainerDom.classList.add('article-toc-container-shrink');
|
||||||
|
|
@ -21,7 +21,7 @@ window.addEventListener('scroll', function (_e) {
|
||||||
} else if (isHeaderShrink && scrollTop <= headerHeight) {
|
} else if (isHeaderShrink && scrollTop <= headerHeight) {
|
||||||
isHeaderShrink = false;
|
isHeaderShrink = false;
|
||||||
headerDom.classList.remove('header-wrapper-shrink');
|
headerDom.classList.remove('header-wrapper-shrink');
|
||||||
pageTemplateDom.classList.remove('page-top-shrink');
|
pageTemplateDom.classList.remove('page-main-content-top-shrink');
|
||||||
|
|
||||||
if (articleTocContainerDom) {
|
if (articleTocContainerDom) {
|
||||||
articleTocContainerDom.classList.remove('article-toc-container-shrink');
|
articleTocContainerDom.classList.remove('article-toc-container-shrink');
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,47 @@
|
||||||
window.addEventListener('DOMContentLoaded', () => {
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
window.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const navItems = document.querySelectorAll('.post-toc-wrap .post-toc li');
|
||||||
|
navItems.length > 0 && window.utils.openToggle();
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue