feat: add theme magic & add toggle theme feature
This commit is contained in:
XPoet
parent
43d870327d
commit
bb140e73d7
|
|
@ -85,3 +85,10 @@ toc:
|
|||
expand_all: false
|
||||
# Maximum heading depth of generated toc.
|
||||
max_depth: 6
|
||||
|
||||
# magic theme style
|
||||
magic:
|
||||
enable: true
|
||||
sidebar:
|
||||
enable: false
|
||||
position: right
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
el: '#vcomments',
|
||||
appId: '<%= theme.comments.valine.appid %>',
|
||||
appKey: '<%= theme.comments.valine.appkey %>',
|
||||
meta: '<%= theme.comments.valine.meta %>',
|
||||
avatar: 'wavatar',
|
||||
enableQQ: true,
|
||||
placeholder: '<%= theme.comments.valine.placeholder %>',
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<%- 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']) %>
|
||||
<% } %>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -2,8 +2,9 @@
|
|||
<ul class="home-article-list">
|
||||
<% page.posts.forEach(post => { %>
|
||||
<li class="home-article-item">
|
||||
|
||||
<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 %>
|
||||
</a>
|
||||
</h3>
|
||||
|
|
@ -17,10 +18,21 @@
|
|||
</div>
|
||||
|
||||
<div class="home-article-meta-info">
|
||||
<span class="article-date">
|
||||
<i class="fa fa-pencil-square-o"></i> <%= date(post.date, 'YYYY-MM-DD') %>
|
||||
<div class="article-date">
|
||||
<span><i class="fa fa-pencil-square-o"></i> <%= date(post.date, 'YYYY-MM-DD') %></span>
|
||||
<span>
|
||||
<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>
|
||||
</div>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<div class="page-middle">
|
||||
|
||||
<main class="main-content normal-code-theme">
|
||||
|
||||
<div class="main-content-left">
|
||||
<% if (is_home()) { %>
|
||||
<%- partial('home-content') %>
|
||||
|
|
@ -26,16 +27,13 @@
|
|||
<%- partial('about') %>
|
||||
<% } %>
|
||||
</div>
|
||||
<div class="main-content-right">
|
||||
<!-- TODO -->
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<% if (is_post() && theme.toc.enable) { %>
|
||||
<div class="sidebar-toc">
|
||||
<%- partial('_partial/sidebar-toc') %>
|
||||
<% 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') %>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,20 @@
|
|||
@require "../common/variables.styl"
|
||||
@require "../common/variables.styl";
|
||||
@require "../common/magic-theme.styl";
|
||||
@require "../common/animated.styl";
|
||||
|
||||
.header-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
background: var(--background-color);
|
||||
display: flex;
|
||||
align-items: 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 {
|
||||
display: flex;
|
||||
|
|
@ -18,7 +24,7 @@
|
|||
width: $main-content-width;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
transition: transform 0.5s ease;
|
||||
transition();
|
||||
z-index: $z-index-5;
|
||||
|
||||
.logo-title {
|
||||
|
|
@ -26,7 +32,7 @@
|
|||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
color: var(--first-text-color);
|
||||
transition: transform 0.3s ease;
|
||||
transition();
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -56,8 +62,8 @@
|
|||
width: 100%;
|
||||
height: 2px;
|
||||
transform: translateX(-50%);
|
||||
background: $primary-color;
|
||||
transition: all 0.5s ease;
|
||||
background: var(--primary-color);
|
||||
transition();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -67,7 +73,7 @@
|
|||
.active {
|
||||
color: var(--second-text-color);
|
||||
font-weight: bold;
|
||||
transition: all 0.5s ease;
|
||||
transition();
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
|
|
@ -77,8 +83,8 @@
|
|||
width: 100%;
|
||||
height: 2px;
|
||||
transform: translateX(-50%);
|
||||
background: $primary-color;
|
||||
transition: all 0.5s ease;
|
||||
background: var(--primary-color)
|
||||
transition();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -97,7 +103,7 @@
|
|||
margin: 6px 0;
|
||||
position: relative;
|
||||
background: var(--normal-text-color);
|
||||
transition: all 0.3s ease;
|
||||
transition();
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
|
|
@ -107,7 +113,7 @@
|
|||
width: 100%;
|
||||
height: 2px;
|
||||
background: var(--normal-text-color);
|
||||
transition: all 0.3s ease;
|
||||
transition();
|
||||
}
|
||||
|
||||
&::after {
|
||||
|
|
@ -118,7 +124,7 @@
|
|||
width: 100%;
|
||||
height: 2px;
|
||||
background: var(--normal-text-color);
|
||||
transition: all 0.3s ease;
|
||||
transition();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -134,7 +140,7 @@
|
|||
transform: scaleY(0);
|
||||
transform-origin: top;
|
||||
background: var(--background-color);
|
||||
transition: all 0.5s ease;
|
||||
transition();
|
||||
z-index: $z-index-2;
|
||||
|
||||
.drawer-menu-list {
|
||||
|
|
@ -153,7 +159,7 @@
|
|||
text-align: center;
|
||||
line-height: 34px;
|
||||
color: var(--normal-text-color);
|
||||
transition: all 0.5s ease;
|
||||
transition();
|
||||
|
||||
&:hover {
|
||||
color: var(--second-text-color);
|
||||
|
|
@ -162,7 +168,7 @@
|
|||
}
|
||||
|
||||
.active {
|
||||
border: 1px solid $primary-color;
|
||||
border: 1px solid var(--normal-text-color);
|
||||
color: var(--second-text-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -183,12 +189,13 @@
|
|||
z-index: $z-index-1;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
transition();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.header-drawer-show {
|
||||
|
||||
.header-content {
|
||||
|
|
@ -222,12 +229,15 @@
|
|||
|
||||
|
||||
.header-wrapper-shrink {
|
||||
if (hexo-config('magic') == false) {
|
||||
box-shadow: 0 1px 2px var(--border-color);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
|
||||
.logo-title {
|
||||
transform: scale(0.86);
|
||||
transform: scale(0.8);
|
||||
transform-origin: left top;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,12 @@
|
|||
@require '../common/variables.styl'
|
||||
|
||||
.post-toc-wrap {
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
font-size: 0.9em;
|
||||
padding: 10px;
|
||||
|
||||
.post-toc {
|
||||
padding: 5px;
|
||||
font-size: 0.85em;
|
||||
border: 1px solid var(--border-color);
|
||||
|
||||
ol {
|
||||
list-style: none;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,34 +1,54 @@
|
|||
@require '../common/variables.styl'
|
||||
@require '../common/magic-theme.styl'
|
||||
|
||||
$li-padding = 10px;
|
||||
$li-border-radius = 5px;
|
||||
$li-margin-bottom = 10px;
|
||||
|
||||
|
||||
.tools-container {
|
||||
|
||||
.tools-list {
|
||||
li {
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--third-text-color);
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
padding: $li-padding;
|
||||
border-radius: $li-border-radius;
|
||||
font-size: 1.2em;
|
||||
display: flex;
|
||||
align-items: 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 {
|
||||
padding: 0;
|
||||
|
||||
a {
|
||||
border-radius: $li-border-radius;
|
||||
padding: $li-padding;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&:hover {
|
||||
color: var(--background-color);
|
||||
background: var(--primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
color: var(--background-color);
|
||||
background: var(--primary-color);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,21 @@
|
|||
@require "./common/magic-theme.styl";
|
||||
|
||||
.about-container {
|
||||
|
||||
background: var(--background-color);
|
||||
|
||||
magic-container(1.01);
|
||||
|
||||
.about-content {
|
||||
margin-bottom: 40px;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
@require 'common/variables.styl'
|
||||
@require "./common/variables.styl";
|
||||
@require "./common/magic-theme.styl";
|
||||
|
||||
$archive-year-font-size = 1.8em;
|
||||
$article-title-font-size = 1.12em;
|
||||
|
|
@ -6,6 +7,10 @@ $article-date-font-size = 0.8em;
|
|||
|
||||
.archive-container {
|
||||
|
||||
background: var(--background-color);
|
||||
|
||||
magic-container(1.01);
|
||||
|
||||
.archive-item {
|
||||
margin-bottom: 40px;
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,20 @@
|
|||
|
||||
.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 {
|
||||
|
||||
h3 {
|
||||
|
|
@ -21,6 +35,7 @@
|
|||
}
|
||||
|
||||
.article-content {
|
||||
text-align: justify;
|
||||
padding-bottom: 30px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
transition() {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
the-transition() {
|
||||
transition-duration: 0.2s;
|
||||
transition-timing-function: ease-in-out;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,20 @@
|
|||
@require 'variables.styl'
|
||||
@require 'animated.styl'
|
||||
@require 'magic-theme.styl'
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: var(--normal-text-color);
|
||||
if (hexo-config('magic.enable') == true) {
|
||||
background: var(--magic-background-color);
|
||||
} else {
|
||||
background: var(--background-color);
|
||||
}
|
||||
font-size: $default-font-size;
|
||||
font-family: $default-font-family;
|
||||
font-weight: $default-font-weight;
|
||||
line-height: $default-font-line-height;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
::selection {
|
||||
|
|
@ -49,14 +53,20 @@ button {
|
|||
position: relative;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: var(--third-text-color);
|
||||
border: 1px solid var(--third-text-color);
|
||||
white-space: nowrap;
|
||||
border-radius: 10em;
|
||||
border-radius: 5px;
|
||||
padding: 0.5em 1em;
|
||||
background: var(--background-color);
|
||||
transition();
|
||||
magic-style(1.1);
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
border: 1px solid var(--primary-color);
|
||||
color: var(--background-color);
|
||||
background: var(--primary-color);
|
||||
}
|
||||
|
||||
//&:hover {
|
||||
// color: var(--primary-color);
|
||||
// border: 1px solid var(--primary-color);
|
||||
//}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,27 @@
|
|||
// ==================================
|
||||
// ils-x variables
|
||||
// THEME VARIABLE
|
||||
// ==================================
|
||||
|
||||
// ===============================
|
||||
// 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; // 头部收缩高度
|
||||
$main-content-width = 60%; // 中间内容区域宽度
|
||||
$media-max-width = 760px; // 媒体查询最大宽度
|
||||
|
||||
|
||||
// ===============================
|
||||
// z-index
|
||||
// ===============================
|
||||
|
|
@ -26,17 +38,19 @@ $z-index-6 = 1006;
|
|||
// ===============================
|
||||
// normal mode color
|
||||
$primary-color = #1b65ea; // 主题颜色
|
||||
$background-color = #fdfdfd; // 背景颜色
|
||||
$normal-text-color = #44424e; // 通用文本颜色（默认字体颜色）
|
||||
$background-color = #fff; // 背景颜色
|
||||
$magic-background-color = #f5f5f5; // MAGIC 背景颜色
|
||||
$normal-text-color = #393749; // 通用文本颜色（默认字体颜色）
|
||||
$first-text-color = darken($normal-text-color, 15%); // 第一文本颜色
|
||||
$second-text-color = darken($normal-text-color, 5%); // 第二文本颜色
|
||||
$third-text-color = lighten($normal-text-color, 30%); // 第三文本颜色
|
||||
$border-color = darken($background-color, 15%); // 边框颜色
|
||||
$third-text-color = lighten($normal-text-color, 35%); // 第三文本颜色
|
||||
$border-color = darken($background-color, 30%); // 边框颜色
|
||||
$selection-color = lighten($primary-color, 20%);
|
||||
|
||||
// dark mode color
|
||||
$dark-primary-color = $primary-color;
|
||||
$dark-background-color = #3a3a3a;
|
||||
$dark-magic-background-color = #2a2a2a;
|
||||
$dark-normal-text-color = #bbb;
|
||||
$dark-first-text-color = lighten($dark-normal-text-color, 30%);
|
||||
$dark-second-text-color = lighten($dark-normal-text-color, 20%);
|
||||
|
|
@ -60,6 +74,7 @@ $default-font-weight = 400;
|
|||
|
||||
:root {
|
||||
--background-color: $background-color;
|
||||
--magic-background-color: $magic-background-color;
|
||||
--primary-color: $primary-color;
|
||||
--first-text-color: $first-text-color;
|
||||
--second-text-color: $second-text-color;
|
||||
|
|
@ -72,6 +87,7 @@ $default-font-weight = 400;
|
|||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-color: $dark-background-color;
|
||||
--magic-background-color: $dark-magic-background-color;
|
||||
--primary-color: $dark-primary-color;
|
||||
--first-text-color: $dark-first-text-color;
|
||||
--second-text-color: $dark-second-text-color;
|
||||
|
|
@ -85,6 +101,7 @@ $default-font-weight = 400;
|
|||
|
||||
.dark-mode {
|
||||
--background-color: $dark-background-color;
|
||||
--magic-background-color: $dark-magic-background-color;
|
||||
--primary-color: $dark-primary-color;
|
||||
--first-text-color: $dark-first-text-color;
|
||||
--second-text-color: $dark-second-text-color;
|
||||
|
|
@ -96,6 +113,7 @@ $default-font-weight = 400;
|
|||
|
||||
.light-mode {
|
||||
--background-color: $background-color;
|
||||
--magic-background-color: $magic-background-color;
|
||||
--primary-color: $primary-color;
|
||||
--first-text-color: $first-text-color;
|
||||
--second-text-color: $second-text-color;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@require "common/variables.styl"
|
||||
@require "common/magic-theme.styl"
|
||||
|
||||
.home-content-container {
|
||||
|
||||
|
|
@ -6,36 +7,44 @@
|
|||
|
||||
.home-article-item {
|
||||
|
||||
margin-bottom: 60px;
|
||||
padding-bottom: 30px;
|
||||
background: var(--background-color);
|
||||
|
||||
if (hexo-config('magic.enable') == true) {
|
||||
|
||||
magic-container(1.02);
|
||||
margin-bottom: 30px;
|
||||
|
||||
} else {
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
|
||||
.home-article-title {
|
||||
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;
|
||||
color: var(--second-text-color);
|
||||
font-size: 1.5em;
|
||||
margin: 0;
|
||||
|
||||
if (hexo-config('magic.enable') == true) {
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
} else {
|
||||
a {
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
|
@ -44,10 +53,19 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: var(--third-text-color);
|
||||
font-size: 0.9em;
|
||||
font-size: 1em;
|
||||
|
||||
span.article-date {
|
||||
|
||||
.article-date {
|
||||
letter-spacing: 0.5px;
|
||||
|
||||
span {
|
||||
margin-right: 15px;
|
||||
|
||||
ul, li {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
@require "common/variables.styl"
|
||||
@require "common/variables.styl";
|
||||
@require "./common/animated.styl";
|
||||
|
||||
// 组件间隔
|
||||
$component-interspace = 30px;
|
||||
|
||||
.page-template {
|
||||
padding-top: $header-height;
|
||||
|
|
@ -10,7 +14,8 @@
|
|||
width: 100%;
|
||||
height: $header-height;
|
||||
z-index: $z-index-5;
|
||||
transition: all 0.5s ease;
|
||||
box-sizing: border-box;
|
||||
transition();
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -18,50 +23,51 @@
|
|||
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') == true) {
|
||||
|
||||
padding-right: $sidebar-width + $component-interspace;
|
||||
|
||||
.main-content-right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: $sidebar-width;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.main-content-left {
|
||||
position: relative;
|
||||
float: left;
|
||||
padding: 40px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.main-content-right {
|
||||
position: relative;
|
||||
float: right;
|
||||
width: 0;
|
||||
}
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.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 {
|
||||
position: fixed;
|
||||
top: $header-height + 50px;
|
||||
left: 4%;
|
||||
transition: all 0.5s ease;
|
||||
top: $header-height + $component-interspace;
|
||||
left: ((100% - $main-content-width) / 4);
|
||||
transition();
|
||||
}
|
||||
|
||||
|
||||
.scroll-to-top {
|
||||
display: none;
|
||||
position: fixed;
|
||||
right: 4%;
|
||||
bottom: 20px;
|
||||
right: ((100% - $main-content-width) / 4);
|
||||
bottom: $component-interspace;
|
||||
border-radius: 2px;
|
||||
padding: 2px 6px;
|
||||
color: var(--frist-text-color);
|
||||
|
|
@ -91,11 +97,11 @@
|
|||
}
|
||||
|
||||
.sidebar-tools {
|
||||
top: $header-shrink-height + 50px !important;
|
||||
top: $header-shrink-height + $component-interspace !important;
|
||||
}
|
||||
|
||||
.sidebar-toc {
|
||||
top: $header-shrink-height + 50px !important;
|
||||
top: $header-shrink-height + $component-interspace !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -106,14 +112,15 @@
|
|||
|
||||
.sidebar-tools {
|
||||
left: 2% !important;
|
||||
transform-origin: right top;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
.sidebar-toc {
|
||||
right: 2% !important;
|
||||
}
|
||||
|
||||
.scroll-to-top {
|
||||
right: 2% !important;
|
||||
}
|
||||
//.sidebar-toc {
|
||||
// right: 2% !important;
|
||||
//}
|
||||
//.scroll-to-top {
|
||||
// right: 2% !important;
|
||||
//}
|
||||
|
||||
}
|
||||
|
|
@ -19,3 +19,6 @@
|
|||
@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-category.styl"
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
window.addEventListener('DOMContentLoaded', () => {
|
||||
console.log(`${CONFIG.themeInfo.name} v${CONFIG.themeInfo.version}`);
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue