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">
|
||||
|
||||
<div class="header-progress"></div>
|
||||
|
||||
<div class="header-content">
|
||||
|
||||
<a class="logo-title" href="/">
|
||||
|
|
|
|||
|
|
@ -18,5 +18,6 @@
|
|||
<%- 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="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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<% } %>
|
||||
110
layout/page.ejs
110
layout/page.ejs
|
|
@ -1,73 +1,87 @@
|
|||
<div class="page-template">
|
||||
<div class="page-top">
|
||||
<%- partial('_partial/header') %>
|
||||
</div>
|
||||
<div class="page-container">
|
||||
|
||||
<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">
|
||||
<% if (is_home()) { %>
|
||||
<%- partial('home-content') %>
|
||||
<div class="page-main-content">
|
||||
|
||||
<% } else if (is_archive()) { %>
|
||||
<%- partial('archive-content') %>
|
||||
<div class="page-main-content-top">
|
||||
<%- partial('_partial/header') %>
|
||||
</div>
|
||||
|
||||
<% } else if (is_post()) { %>
|
||||
<%- partial('article-content') %>
|
||||
<div class="page-main-content-middle">
|
||||
|
||||
<% } else if (is_category()) { %>
|
||||
<%- partial('category-content') %>
|
||||
<main class="main-content normal-code-theme">
|
||||
|
||||
<% } 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') %>
|
||||
|
||||
<% } %>
|
||||
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
<% if (theme.magic.enable && theme.magic.sidebar.enable) { %>
|
||||
<div class="main-content-right">
|
||||
<%- partial('_partial/sidebar') %>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
</main>
|
||||
|
||||
<div class="sidebar-tools">
|
||||
<%- partial('_partial/tools') %>
|
||||
<div class="page-main-content-bottom">
|
||||
<%- partial('_partial/footer') %>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<% if (theme.back2top.enable) { %>
|
||||
<div class="scroll-to-top">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="sidebar-tools">
|
||||
<%- partial('_partial/tools') %>
|
||||
</div>
|
||||
|
||||
<% if (theme.back2top.enable) { %>
|
||||
<div class="scroll-to-top">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="scroll-percent">
|
||||
<i class="fa fa-caret-up"></i>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<!-- page aside -->
|
||||
<aside class="page-aside">
|
||||
<% if (is_post()) { %>
|
||||
<%- partial('_partial/toc') %>
|
||||
<% } %>
|
||||
</aside>
|
||||
|
||||
<div class="page-bottom">
|
||||
<%- partial('_partial/footer') %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<% if (theme.local_search.enable) { %>
|
||||
<%- partial('_partial/local-search') %>
|
||||
<% } %>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
background: var(--background-color);
|
||||
|
||||
if (hexo-config('magic.enable') && hexo-config('magic.sidebar.enable')) {
|
||||
magic-container(1.02, 1.02, 20px);
|
||||
}
|
||||
|
||||
.post-toc {
|
||||
|
||||
ol {
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
||||
// ===================================
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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