lianglianglee
/
hexo-theme-keep
mirror of https://github.com/liangliangle/hexo-theme-keep.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: add theme magic & add toggle theme feature

This commit is contained in:
XPoet 2020-04-24 22:49:10 +08:00
parent 43d870327d
commit bb140e73d7
25 changed files with 444 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
_config.yml
View File

@ -85,3 +85,10 @@ toc:
expand_all: false expand_all: false
# Maximum heading depth of generated toc. # Maximum heading depth of generated toc.
max_depth: 6 max_depth: 6
# magic theme style
magic:
enable: true
sidebar:
enable: false
position: right

1
layout/_partial/comments/valine.ejs
View File

@ -11,7 +11,6 @@
el: '#vcomments', el: '#vcomments',
appId: '<%= theme.comments.valine.appid %>', appId: '<%= theme.comments.valine.appid %>',
appKey: '<%= theme.comments.valine.appkey %>', appKey: '<%= theme.comments.valine.appkey %>',
meta: '<%= theme.comments.valine.meta %>',
avatar: 'wavatar', avatar: 'wavatar',
enableQQ: true, enableQQ: true,
placeholder: '<%= theme.comments.valine.placeholder %>', placeholder: '<%= theme.comments.valine.placeholder %>',

2
layout/_partial/scripts.ejs
View File

@ -11,7 +11,7 @@
<%- js('js/code-copy.js') %> <%- js('js/code-copy.js') %>
<% } %> <% } %>
<% if (theme.toc.enable) { %> <% if (theme.toc.enable && theme.magic.enable && theme.magic.sidebar.enable) { %>
<%- js(['lib/anime.min.js', 'js/toc.js']) %> <%- js(['lib/anime.min.js', 'js/toc.js']) %>
<% } %> <% } %>

25
layout/_partial/sidebar-category.ejs Normal file
View File

@ -0,0 +1,25 @@
<div class="sidebar-category">
<div class="category-label">分类</div>
<ul class="category-list">
<li class="category-list-item">
数据库1
<span class="number">8</span>
</li>
<li class="category-list-item">
数据库2
<span class="number">12</span>
</li>
<li class="category-list-item">
数据库3
<span class="number">22</span>
</li>
<li class="category-list-item">
数据库3
<span class="number">22</span>
</li>
<li class="category-list-item">
数据库3
<span class="number">22</span>
</li>
</ul>
</div>

16
layout/_partial/sidebar.ejs Normal file
View File

@ -0,0 +1,16 @@
<div class="sidebar">
<% if (is_home()) { %>
<%- partial('sidebar-category') %>
<% } else if (is_archive()) { %>
<%- partial('site-info') %>
<% } else if (is_post() && theme.toc.enable ) { %>
<%- partial('sidebar-toc') %>
<% } else if (is_category()) { %>
<%- partial('site-info') %>
<% } else if (is_tag()) { %>
<%- partial('site-info') %>
<% } else if (page.title == 'about') { %>
<%- partial('site-info') %>
<% } %>
</div>

13
layout/_partial/site-info.ejs Normal file
View File

@ -0,0 +1,13 @@
<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>

22
layout/home-content.ejs
View File

@ -2,8 +2,9 @@
<ul class="home-article-list"> <ul class="home-article-list">
<% page.posts.forEach(post => { %> <% page.posts.forEach(post => { %>
<li class="home-article-item"> <li class="home-article-item">
<h3 class="home-article-title"> <h3 class="home-article-title">
<a class="title-hover-animation" href="<%- url_for(post.path) %>"> <a href="<%- url_for(post.path) %>">
<%= (post.top ? `[${__('top')}] ` : '') + post.title %> <%= (post.top ? `[${__('top')}] ` : '') + post.title %>
</a> </a>
</h3> </h3>
@ -17,10 +18,21 @@
</div> </div>
<div class="home-article-meta-info"> <div class="home-article-meta-info">
<span class="article-date"> <div class="article-date">
<i class="fa fa-pencil-square-o"></i> <%= date(post.date, 'YYYY-MM-DD') %> <span><i class="fa fa-pencil-square-o"></i> <%= date(post.date, 'YYYY-MM-DD') %></span>
</span> <span>
<hr> <i class="fa fa-folder"></i>
<ul>
<% post.categories.forEach((category, i) => { %>
<li><%= i === 0 ? '' : '| ' %><a
href="<%- url_for(category.path) %>"><%= category.name %></a></li>
<% }); %>
</ul>
</span>
</div>
<% if (theme.magic.enable === false) { %>
<hr>
<% } %>
<a href="<%- url_for(post.path) %>">阅读全文 <i class="fa fa-angle-right"></i></a> <a href="<%- url_for(post.path) %>">阅读全文 <i class="fa fa-angle-right"></i></a>
</div> </div>
</li> </li>

16
layout/page.ejs
View File

@ -6,6 +6,7 @@
<div class="page-middle"> <div class="page-middle">
<main class="main-content normal-code-theme"> <main class="main-content normal-code-theme">
<div class="main-content-left"> <div class="main-content-left">
<% if (is_home()) { %> <% if (is_home()) { %>
<%- partial('home-content') %> <%- partial('home-content') %>
@ -26,16 +27,13 @@
<%- partial('about') %> <%- partial('about') %>
<% } %> <% } %>
</div> </div>
<div class="main-content-right">
<!-- TODO -->
</div>
</main>
<% if (is_post() && theme.toc.enable) { %> <% if (theme.magic.enable && theme.magic.sidebar.enable) { %>
<div class="sidebar-toc"> <div class="main-content-right">
<%- partial('_partial/sidebar-toc') %> <%- partial('_partial/sidebar') %>
</div> </div>
<% } %> <% } %>
</main>
<div class="sidebar-tools"> <div class="sidebar-tools">
<%- partial('_partial/tools') %> <%- partial('_partial/tools') %>

48
source/css/layout/_partial/header.styl
View File

@ -1,14 +1,20 @@
@require "../common/variables.styl" @require "../common/variables.styl";
@require "../common/magic-theme.styl";
@require "../common/animated.styl";
.header-wrapper { .header-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
background: var(--background-color);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.5s ease; background: var(--background-color);
if (hexo-config('magic.enable') == true) {
magic-style(1.02);
}
.header-content { .header-content {
display: flex; display: flex;
@ -18,7 +24,7 @@
width: $main-content-width; width: $main-content-width;
height: 100%; height: 100%;
position: relative; position: relative;
transition: transform 0.5s ease; transition();
z-index: $z-index-5; z-index: $z-index-5;
.logo-title { .logo-title {
@ -26,7 +32,7 @@
font-weight: bold; font-weight: bold;
letter-spacing: 1px; letter-spacing: 1px;
color: var(--first-text-color); color: var(--first-text-color);
transition: transform 0.3s ease; transition();
} }
@ -56,8 +62,8 @@
width: 100%; width: 100%;
height: 2px; height: 2px;
transform: translateX(-50%); transform: translateX(-50%);
background: $primary-color; background: var(--primary-color);
transition: all 0.5s ease; transition();
} }
} }
@ -67,7 +73,7 @@
.active { .active {
color: var(--second-text-color); color: var(--second-text-color);
font-weight: bold; font-weight: bold;
transition: all 0.5s ease; transition();
&::after { &::after {
content: ''; content: '';
@ -77,8 +83,8 @@
width: 100%; width: 100%;
height: 2px; height: 2px;
transform: translateX(-50%); transform: translateX(-50%);
background: $primary-color; background: var(--primary-color)
transition: all 0.5s ease; transition();
} }
} }
} }
@ -97,7 +103,7 @@
margin: 6px 0; margin: 6px 0;
position: relative; position: relative;
background: var(--normal-text-color); background: var(--normal-text-color);
transition: all 0.3s ease; transition();
&::before { &::before {
content: ''; content: '';
@ -107,7 +113,7 @@
width: 100%; width: 100%;
height: 2px; height: 2px;
background: var(--normal-text-color); background: var(--normal-text-color);
transition: all 0.3s ease; transition();
} }
&::after { &::after {
@ -118,7 +124,7 @@
width: 100%; width: 100%;
height: 2px; height: 2px;
background: var(--normal-text-color); background: var(--normal-text-color);
transition: all 0.3s ease; transition();
} }
} }
} }
@ -134,7 +140,7 @@
transform: scaleY(0); transform: scaleY(0);
transform-origin: top; transform-origin: top;
background: var(--background-color); background: var(--background-color);
transition: all 0.5s ease; transition();
z-index: $z-index-2; z-index: $z-index-2;
.drawer-menu-list { .drawer-menu-list {
@ -153,7 +159,7 @@
text-align: center; text-align: center;
line-height: 34px; line-height: 34px;
color: var(--normal-text-color); color: var(--normal-text-color);
transition: all 0.5s ease; transition();
&:hover { &:hover {
color: var(--second-text-color); color: var(--second-text-color);
@ -162,7 +168,7 @@
} }
.active { .active {
border: 1px solid $primary-color; border: 1px solid var(--normal-text-color);
color: var(--second-text-color); color: var(--second-text-color);
font-weight: bold; font-weight: bold;
} }
@ -183,12 +189,13 @@
z-index: $z-index-1; z-index: $z-index-1;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
transition: all 0.3s ease; transition();
} }
} }
.header-drawer-show { .header-drawer-show {
.header-content { .header-content {
@ -222,12 +229,15 @@
.header-wrapper-shrink { .header-wrapper-shrink {
box-shadow: 0 1px 2px var(--border-color); if (hexo-config('magic') == false) {
box-shadow: 0 1px 2px var(--border-color);
}
.header-content { .header-content {
.logo-title { .logo-title {
transform: scale(0.86); transform: scale(0.8);
transform-origin: left top;
} }
.menu-list { .menu-list {

60
source/css/layout/_partial/sidebar-category.styl Normal file
View File

@ -0,0 +1,60 @@
.sidebar-category {
padding: 20px;
position: relative;
.category-label {
margin-bottom: 10px;
padding-left: 10px;
font-size: 16px;
font-weight: 600;
&::after {
content: '';
position: absolute;
top: 20px;
left: 20px;
width: 4px;
height: 20px;
background: #333;
}
}
.category-list {
li.category-list-item {
padding: 6px;
margin-bottom: 10px;
border: 1px solid var(--border-color);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.3s ease;
&:last-child {
margin-bottom: 0;
}
&:hover {
box-shadow: 0 0 5px var(--border-color);
transform: scale(1.02);
}
.number {
font-size: 12px;
background: skyblue;
border-radius: 2px;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
color: var(--background-color);
}
}
}
}

7
source/css/layout/_partial/sidebar-toc.styl
View File

@ -1,15 +1,12 @@
@require '../common/variables.styl' @require '../common/variables.styl'
.post-toc-wrap { .post-toc-wrap {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 0.9em;
padding: 10px;
.post-toc { .post-toc {
padding: 5px;
font-size: 0.85em;
border: 1px solid var(--border-color);
ol { ol {
list-style: none; list-style: none;

15
source/css/layout/_partial/sidebar.styl Normal file
View File

@ -0,0 +1,15 @@
@require "../common/variables.styl"
.sidebar {
position: fixed;
width: $sidebar-width;
background: var(--background-color);
box-shadow: 0 0 3px var(--border-color);
transition: all 0.3s ease;
border-radius: 2px;
&:hover {
box-shadow: 0 0 8px var(--border-color);
transform: scale(1.02);
}
}

36
source/css/layout/_partial/site-info.styl Normal file
View File

@ -0,0 +1,36 @@
.site-info-container {
width: 100%;
.justify-center {
display: flex;
justify-content: center;
}
.avatar-box {
padding: 20px 0;
.avatar {
width: 40%;
//border-radius: 50%;
border-radius: 5px;
padding: 2px;
border: 1px solid var(--border-color);
}
}
.author {
font-size: 1.6em;
letter-spacing: 1px;
}
.description {
padding: 20px;
text-align center
}
}

36
source/css/layout/_partial/tools.styl
View File

@ -1,34 +1,54 @@
@require '../common/variables.styl' @require '../common/variables.styl'
@require '../common/magic-theme.styl'
$li-padding = 10px;
$li-border-radius = 5px;
$li-margin-bottom = 10px;
.tools-container { .tools-container {
.tools-list { .tools-list {
li { li {
cursor: pointer; cursor: pointer;
padding: 5px; padding: $li-padding;
border-radius: 50%; border-radius: $li-border-radius;
border: 1px solid var(--third-text-color);
width: 26px;
height: 26px;
font-size: 1.2em; font-size: 1.2em;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-bottom: 12px; margin-bottom: $li-margin-bottom;
background: var(--background-color);
if (hexo-config('magic.enable') == true) {
magic-style(1.1);
} else {
border: 1px solid var(--third-text-color);
}
&.rss { &.rss {
padding: 0;
a { a {
border-radius: $li-border-radius;
padding: $li-padding;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
&:hover {
color: var(--background-color);
background: var(--primary-color);
}
} }
} }
&:hover { &:hover {
color: var(--primary-color); color: var(--background-color);
border-color: var(--primary-color); background: var(--primary-color);
} }
&:last-child { &:last-child {

18
source/css/layout/about.styl
View File

@ -1,5 +1,21 @@
@require "./common/magic-theme.styl";
.about-container { .about-container {
background: var(--background-color);
magic-container(1.01);
.about-content { .about-content {
margin-bottom: 40px;
h1, h2, h3, h4, h5, h6 {
&:first-child {
margin-top: 0;
}
}
margin-bottom: 30px;
} }
} }

7
source/css/layout/archive-content.styl
View File

@ -1,4 +1,5 @@
@require 'common/variables.styl' @require "./common/variables.styl";
@require "./common/magic-theme.styl";
$archive-year-font-size = 1.8em; $archive-year-font-size = 1.8em;
$article-title-font-size = 1.12em; $article-title-font-size = 1.12em;
@ -6,6 +7,10 @@ $article-date-font-size = 0.8em;
.archive-container { .archive-container {
background: var(--background-color);
magic-container(1.01);
.archive-item { .archive-item {
margin-bottom: 40px; margin-bottom: 40px;

15
source/css/layout/article-content.styl
View File

@ -2,6 +2,20 @@
.article-content-container { .article-content-container {
background: var(--background-color);
if (hexo-config('magic.enable') == true) {
box-shadow: 0 0 3px var(--border-color);
padding: 30px;
transition: all 0.3s ease;
border-radius: 2px;
&:hover {
box-shadow: 0 0 8px var(--border-color);
transform: scaleX(1.008) scaleY(1.004);
}
}
.article-title { .article-title {
h3 { h3 {
@ -21,6 +35,7 @@
} }
.article-content { .article-content {
text-align: justify;
padding-bottom: 30px; padding-bottom: 30px;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
} }

4
source/css/layout/common/animated.styl
View File

@ -1,3 +1,7 @@
transition() {
transition: all 0.3s ease;
}
the-transition() { the-transition() {
transition-duration: 0.2s; transition-duration: 0.2s;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;

24
source/css/layout/common/basic.styl
View File

@ -1,16 +1,20 @@
@require 'variables.styl' @require 'variables.styl'
@require 'animated.styl' @require 'animated.styl'
@require 'magic-theme.styl'
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
color: var(--normal-text-color); color: var(--normal-text-color);
background: var(--background-color); if (hexo-config('magic.enable') == true) {
background: var(--magic-background-color);
} else {
background: var(--background-color);
}
font-size: $default-font-size; font-size: $default-font-size;
font-family: $default-font-family; font-family: $default-font-family;
font-weight: $default-font-weight; font-weight: $default-font-weight;
line-height: $default-font-line-height; line-height: $default-font-line-height;
transition: all 0.5s ease;
} }
::selection { ::selection {
@ -49,14 +53,20 @@ button {
position: relative; position: relative;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
color: var(--third-text-color);
border: 1px solid var(--third-text-color);
white-space: nowrap; white-space: nowrap;
border-radius: 10em; border-radius: 5px;
padding: 0.5em 1em; padding: 0.5em 1em;
background: var(--background-color);
transition();
magic-style(1.1);
&:hover { &:hover {
color: var(--primary-color); color: var(--background-color);
border: 1px solid var(--primary-color); background: var(--primary-color);
} }
//&:hover {
// color: var(--primary-color);
// border: 1px solid var(--primary-color);
//}
} }

21
source/css/layout/common/magic-theme.styl Normal file
View File

@ -0,0 +1,21 @@
magic-style(scale) {
if (hexo-config('magic.enable') == true) {
box-shadow: 0 0 3px var(--border-color);
transition: all 0.3s ease;
&:hover {
box-shadow: 0 0 8px var(--border-color);
transform: scale(scale);
}
}
}
magic-container(scale) {
if (hexo-config('magic.enable') == true) {
magic-style(scale);
padding: 30px;
border-radius: 2px;
}
}

34
source/css/layout/common/variables.styl
View File

@ -1,14 +1,26 @@
// ================================== // ==================================
// ils-x variables // THEME VARIABLE
// ================================== // ==================================
// =============================== // ===============================
// layout // layout
// =============================== // ===============================
$header-height = 100px; // 头部默认高度 if (hexo-config('magic.enable') == true) {
$header-height = 80px; // 头部默认高度
} else {
$header-height = 100px; // 头部默认高度
}
if (hexo-config('magic.enable') == true && hexo-config('magic.sidebar.enable') == true ) {
$main-content-width = 80%;
$sidebar-width = 280px; // 侧边栏宽度
} else {
$main-content-width = 66%;
}
$header-shrink-height = 60px; // 头部收缩高度 $header-shrink-height = 60px; // 头部收缩高度
$main-content-width = 60%; // 中间内容区域宽度 $media-max-width = 760px; // 媒体查询最大宽度
$media-max-width = 760px; // 媒体查询最大宽度
// =============================== // ===============================
// z-index // z-index
@ -26,17 +38,19 @@ $z-index-6 = 1006;
// =============================== // ===============================
// normal mode color // normal mode color
$primary-color = #1b65ea; // 主题颜色 $primary-color = #1b65ea; // 主题颜色
$background-color = #fdfdfd; // 背景颜色 $background-color = #fff; // 背景颜色
$normal-text-color = #44424e; // 通用文本颜色（默认字体颜色） $magic-background-color = #f5f5f5; // MAGIC 背景颜色
$normal-text-color = #393749; // 通用文本颜色（默认字体颜色）
$first-text-color = darken($normal-text-color, 15%); // 第一文本颜色 $first-text-color = darken($normal-text-color, 15%); // 第一文本颜色
$second-text-color = darken($normal-text-color, 5%); // 第二文本颜色 $second-text-color = darken($normal-text-color, 5%); // 第二文本颜色
$third-text-color = lighten($normal-text-color, 30%); // 第三文本颜色 $third-text-color = lighten($normal-text-color, 35%); // 第三文本颜色
$border-color = darken($background-color, 15%); // 边框颜色 $border-color = darken($background-color, 30%); // 边框颜色
$selection-color = lighten($primary-color, 20%); $selection-color = lighten($primary-color, 20%);
// dark mode color // dark mode color
$dark-primary-color = $primary-color; $dark-primary-color = $primary-color;
$dark-background-color = #3a3a3a; $dark-background-color = #3a3a3a;
$dark-magic-background-color = #2a2a2a;
$dark-normal-text-color = #bbb; $dark-normal-text-color = #bbb;
$dark-first-text-color = lighten($dark-normal-text-color, 30%); $dark-first-text-color = lighten($dark-normal-text-color, 30%);
$dark-second-text-color = lighten($dark-normal-text-color, 20%); $dark-second-text-color = lighten($dark-normal-text-color, 20%);
@ -60,6 +74,7 @@ $default-font-weight = 400;
:root { :root {
--background-color: $background-color; --background-color: $background-color;
--magic-background-color: $magic-background-color;
--primary-color: $primary-color; --primary-color: $primary-color;
--first-text-color: $first-text-color; --first-text-color: $first-text-color;
--second-text-color: $second-text-color; --second-text-color: $second-text-color;
@ -72,6 +87,7 @@ $default-font-weight = 400;
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--background-color: $dark-background-color; --background-color: $dark-background-color;
--magic-background-color: $dark-magic-background-color;
--primary-color: $dark-primary-color; --primary-color: $dark-primary-color;
--first-text-color: $dark-first-text-color; --first-text-color: $dark-first-text-color;
--second-text-color: $dark-second-text-color; --second-text-color: $dark-second-text-color;
@ -85,6 +101,7 @@ $default-font-weight = 400;
.dark-mode { .dark-mode {
--background-color: $dark-background-color; --background-color: $dark-background-color;
--magic-background-color: $dark-magic-background-color;
--primary-color: $dark-primary-color; --primary-color: $dark-primary-color;
--first-text-color: $dark-first-text-color; --first-text-color: $dark-first-text-color;
--second-text-color: $dark-second-text-color; --second-text-color: $dark-second-text-color;
@ -96,6 +113,7 @@ $default-font-weight = 400;
.light-mode { .light-mode {
--background-color: $background-color; --background-color: $background-color;
--magic-background-color: $magic-background-color;
--primary-color: $primary-color; --primary-color: $primary-color;
--first-text-color: $first-text-color; --first-text-color: $first-text-color;
--second-text-color: $second-text-color; --second-text-color: $second-text-color;

58
source/css/layout/home-content.styl
View File

@ -1,4 +1,5 @@
@require "common/variables.styl" @require "common/variables.styl"
@require "common/magic-theme.styl"
.home-content-container { .home-content-container {
@ -6,36 +7,44 @@
.home-article-item { .home-article-item {
margin-bottom: 60px; background: var(--background-color);
padding-bottom: 30px;
if (hexo-config('magic.enable') == true) {
magic-container(1.02);
margin-bottom: 30px;
} else {
margin-bottom: 70px;
}
.home-article-title { .home-article-title {
position: relative; position: relative;
//&::before {
// content: '';
// position: absolute;
// top: 50%;
// transform: translateY(-50%);
// left: -12px;
// width: 3px;
// height: 22px;
// background: var(--primary-color);
// transition: all 0.5s ease;
//}
font-weight: 600; font-weight: 600;
color: var(--second-text-color); color: var(--second-text-color);
font-size: 1.5em; font-size: 1.5em;
margin: 0; margin: 0;
a { if (hexo-config('magic.enable') == true) {
color: var(--second-text-color); padding-bottom: 20px;
border-bottom: 1px solid var(--border-color);
} else {
a {
color: var(--second-text-color);
}
} }
} }
.home-article-content { .home-article-content {
margin: 45px 0;
text-align: justify;
if (hexo-config('magic.enable') == true) {
margin: 30px 0 45px 0;
} else {
margin: 30px 0;
}
line-height: 2em; line-height: 2em;
} }
@ -44,10 +53,19 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
color: var(--third-text-color); color: var(--third-text-color);
font-size: 0.9em; font-size: 1em;
span.article-date {
.article-date {
letter-spacing: 0.5px; letter-spacing: 0.5px;
span {
margin-right: 15px;
ul, li {
display: inline;
}
}
} }
hr { hr {

71
source/css/layout/page.styl
View File

@ -1,4 +1,8 @@
@require "common/variables.styl" @require "common/variables.styl";
@require "./common/animated.styl";
// 组件间隔
$component-interspace = 30px;
.page-template { .page-template {
padding-top: $header-height; padding-top: $header-height;
@ -10,7 +14,8 @@
width: 100%; width: 100%;
height: $header-height; height: $header-height;
z-index: $z-index-5; z-index: $z-index-5;
transition: all 0.5s ease; box-sizing: border-box;
transition();
} }
@ -18,50 +23,51 @@
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: $component-interspace 0;
.main-content { .main-content {
width: $main-content-width; width: $main-content-width;
height: 100%; height: 100%;
position: relative; position: relative;
box-sizing: border-box;
if (hexo-config('magic.enable') && hexo-config('magic.sidebar.enable') == true) {
padding-right: $sidebar-width + $component-interspace;
.main-content-right {
position: absolute;
right: 0;
width: $sidebar-width;
box-sizing: border-box;
}
}
.main-content-left { .main-content-left {
position: relative; position: relative;
float: left; float: left;
padding: 40px 0;
width: 100%; width: 100%;
box-sizing: border-box;
} }
.main-content-right {
position: relative;
float: right;
width: 0;
}
}
.sidebar-toc {
position: fixed;
top: $header-height + 50px;
right: 3%;
transition: all 0.5s ease;
width: 180px;
max-height: 500px;
overflow-y: auto;
} }
.sidebar-tools { .sidebar-tools {
position: fixed; position: fixed;
top: $header-height + 50px; top: $header-height + $component-interspace;
left: 4%; left: ((100% - $main-content-width) / 4);
transition: all 0.5s ease; transition();
} }
.scroll-to-top { .scroll-to-top {
display: none; display: none;
position: fixed; position: fixed;
right: 4%; right: ((100% - $main-content-width) / 4);
bottom: 20px; bottom: $component-interspace;
border-radius: 2px; border-radius: 2px;
padding: 2px 6px; padding: 2px 6px;
color: var(--frist-text-color); color: var(--frist-text-color);
@ -91,11 +97,11 @@
} }
.sidebar-tools { .sidebar-tools {
top: $header-shrink-height + 50px !important; top: $header-shrink-height + $component-interspace !important;
} }
.sidebar-toc { .sidebar-toc {
top: $header-shrink-height + 50px !important; top: $header-shrink-height + $component-interspace !important;
} }
} }
@ -106,14 +112,15 @@
.sidebar-tools { .sidebar-tools {
left: 2% !important; left: 2% !important;
transform-origin: right top;
transform: scale(0.8);
} }
.sidebar-toc { //.sidebar-toc {
right: 2% !important; // right: 2% !important;
} //}
//.scroll-to-top {
.scroll-to-top { // right: 2% !important;
right: 2% !important; //}
}
} }

5
source/css/style.styl
View File

@ -18,4 +18,7 @@
@import "layout/tag-content.styl" @import "layout/tag-content.styl"
@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-category.styl"

3
source/js/main.js
View File

@ -1,4 +1,3 @@
window.addEventListener('DOMContentLoaded', () => { window.addEventListener('DOMContentLoaded', () => {
console.log(`${CONFIG.themeInfo.name} v${CONFIG.themeInfo.version}`); console.log(`${CONFIG.themeInfo.name} v${CONFIG.themeInfo.version}`);
}); });