style: optimize modules style

This commit is contained in:
XPoet 2020-04-28 23:20:17 +08:00
parent 5df81f6b7d
commit fc0f82df42
21 changed files with 127 additions and 47 deletions

View File

@ -4,7 +4,7 @@
</span> </span>
<% if (articleObject.categories.length) { %> <% if (articleObject.categories.length) { %>
<span class="article-categories article-meta-item"> <span class="article-categories article-meta-item">
<i class="fa fa-bookmark"></i> <i class="fa fa-folder"></i>
<ul> <ul>
<% articleObject.categories.forEach((category, i) => { %> <% articleObject.categories.forEach((category, i) => { %>
<li> <li>

View File

@ -11,6 +11,7 @@
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 %>'.split(','),
avatar: 'wavatar', avatar: 'wavatar',
enableQQ: true, enableQQ: true,
placeholder: '<%= theme.comments.valine.placeholder %>', placeholder: '<%= theme.comments.valine.placeholder %>',

View File

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

View File

@ -1,6 +1,13 @@
<div class="sidebar"> <div class="sidebar fade-in-down-animation">
<% if (is_home()) { %> <% if (is_home()) { %>
<div class="home-sidebar-container">
<div class="home-sidebar-item">
<%- partial('site-info') %>
</div>
<div class="home-sidebar-item">
<%- partial('sidebar-category') %> <%- partial('sidebar-category') %>
</div>
</div>
<% } else if (is_archive()) { %> <% } else if (is_archive()) { %>
<%- partial('site-info') %> <%- partial('site-info') %>
<% } else if (is_post() && theme.toc.enable ) { %> <% } else if (is_post() && theme.toc.enable ) { %>

View File

@ -1,4 +1,5 @@
<div class="article-content-container"> <div class="article-content-container">
<div class="article-title"> <div class="article-title">
<h3><a class="title-hover-animation"><%= page.title %></a></h3> <h3><a class="title-hover-animation"><%= page.title %></a></h3>
</div> </div>
@ -32,3 +33,9 @@
<%- partial('_partial/comments/comment') %> <%- partial('_partial/comments/comment') %>
</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">
<%- partial('_partial/sidebar-toc') %>
</div>
<% } %>

View File

@ -15,7 +15,7 @@
border-color: var(--third-text-color); border-color: var(--third-text-color);
&:focus { &:focus {
border-bottom: 1px solid var(--primary-color) !important; border-bottom: 1px dashed var(--primary-color) !important;
} }
} }
} }

View File

@ -229,7 +229,8 @@
.header-wrapper-shrink { .header-wrapper-shrink {
if (hexo-config('magic') == false) {
if (hexo-config('magic.enable') == false) {
box-shadow: 0 1px 2px var(--border-color); box-shadow: 0 1px 2px var(--border-color);
} }

View File

@ -1,7 +1,11 @@
@require "../common/magic-theme.styl"
.sidebar-category { .sidebar-category {
padding: 20px; position relative
position: relative; background: var(--background-color);
magic-container(1.02, 30px);
.category-label { .category-label {
margin-bottom: 10px; margin-bottom: 10px;

View File

@ -1,17 +1,24 @@
@require '../common/variables.styl' @require '../common/variables.styl'
@require '../common/animated.styl'
@require '../common/magic-theme.styl'
.post-toc-wrap { .post-toc-wrap {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 0.9em; font-size: 0.88em;
padding: 10px; box-sizing: border-box;
background: var(--background-color);
if (hexo-config('magic.enable') && hexo-config('magic.sidebar.enable')) {
magic-container(1.02, 30px);
}
.post-toc { .post-toc {
ol { ol {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0 2px 5px 10px; padding: 0 2px 12px 10px;
text-align: left; text-align: left;
&:last-child { &:last-child {
@ -24,7 +31,7 @@
a { a {
transition-property: all; transition-property: all;
the-transition(); //transition();
} }
} }

View File

@ -1,15 +1,19 @@
@require "../common/variables.styl" @require "../common/variables.styl"
@require "../common/magic-theme.styl"
.sidebar { .sidebar {
position: fixed; position: fixed;
width: $sidebar-width; width: $sidebar-width;
background: var(--background-color); box-sizing: border-box;
box-shadow: 0 0 3px var(--border-color);
transition: all 0.3s ease;
border-radius: 2px;
&:hover { .home-sidebar-container {
box-shadow: 0 0 8px var(--border-color);
transform: scale(1.02); .home-sidebar-item {
margin-bottom: $component-interspace;
&:last-child {
margin-bottom: 0;
}
} }
} }
}

View File

@ -1,5 +1,12 @@
@require "../common/magic-theme.styl"
.site-info-container { .site-info-container {
width: 100%; width: 100%;
box-sizing: border-box;
background: var(--background-color);
magic-container(1.02, 30px);
.justify-center { .justify-center {
display: flex; display: flex;
@ -7,12 +14,8 @@
} }
.avatar-box { .avatar-box {
padding: 20px 0;
.avatar { .avatar {
width: 40%; width: 40%;
//border-radius: 50%;
border-radius: 5px; border-radius: 5px;
padding: 2px; padding: 2px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
@ -23,14 +26,10 @@
.author { .author {
font-size: 1.6em; font-size: 1.6em;
letter-spacing: 1px; letter-spacing: 1px;
margin: 20px 0;
} }
.description { .description {
padding: 20px;
text-align center text-align center
} }
} }

View File

@ -3,6 +3,7 @@
@require "../common/magic-theme.styl"; @require "../common/magic-theme.styl";
$li-border-radius = 5px; $li-border-radius = 5px;
//$li-border-radius = 50%;
$li-margin-bottom = 12px; $li-margin-bottom = 12px;
.tools-container { .tools-container {

View File

@ -4,7 +4,7 @@
background: var(--background-color); background: var(--background-color);
magic-container(1.01); magic-container(1.01, 30px);
.about-content { .about-content {

View File

@ -9,7 +9,7 @@ $article-date-font-size = 0.8em;
background: var(--background-color); background: var(--background-color);
magic-container(1.01); magic-container(1.01, 30px);
.archive-item { .archive-item {
margin-bottom: 40px; margin-bottom: 40px;

View File

@ -1,10 +1,12 @@
@require 'common/variables.styl' @require 'common/variables.styl'
@require 'common/magic-theme.styl'
.article-content-container { .article-content-container {
background: var(--background-color); background: var(--background-color);
if (hexo-config('magic.enable') == true) { if (hexo-config('magic.enable') == true) {
box-shadow: 0 0 3px var(--border-color); box-shadow: 0 0 3px var(--border-color);
padding: 30px; padding: 30px;
transition: all 0.3s ease; transition: all 0.3s ease;
@ -12,10 +14,11 @@
&:hover { &:hover {
box-shadow: 0 0 8px var(--border-color); box-shadow: 0 0 8px var(--border-color);
transform: scaleX(1.008) scaleY(1.004); transform: scaleX(1.008) scaleY(1.002);
} }
} }
.article-title { .article-title {
h3 { h3 {
@ -56,3 +59,36 @@
} }
} }
if ((hexo-config('magic.enable') == true && hexo-config('magic.sidebar.enable') == false && hexo-config('toc.enable') == true) || (hexo-config('magic.enable') == false && hexo-config('toc.enable') == true)) {
.article-toc-container {
position: fixed;
top: $header-height + $component-interspace;
background: var(--background-color);
max-width: 200px;
max-height: 600px;
if (hexo-config('side-tools.position') == left) {
right: 30px;
} else {
left: 30px;
}
if (hexo-config('magic.enable') == true) {
magic-container(1.02, 20px);
} else {
transition();
border: 1px solid var(--border-color);
padding: 20px;
}
}
.article-toc-container-shrink {
top: $header-shrink-height + $component-interspace !important;
}
}

View File

@ -14,22 +14,26 @@ the-transition-ease-in() {
transition-delay: 0s; transition-delay: 0s;
} }
the-transition-ease-out() { the-transition-ease-out() {
transition-duration: 0.2s; transition-duration: 0.2s;
transition-timing-function: ease-out; transition-timing-function: ease-out;
transition-delay: 0s; transition-delay: 0s;
} }
.fade-in-down-animation { .fade-in-down-animation {
animation-fill-mode: both; animation-fill-mode: both;
animation-duration: 1s; animation-duration: 1s;
animation-name fade-in-down animation-name: fade-in-down;
} }
@keyframes fade-in-down { @keyframes fade-in-down {
0% { 0% {
opacity: 0; opacity: 0;
transform: translateY(-20px); //transform: translateY(-20px);
//transform: translateX(-20px);
transform: translateX(20px);
} }
100% { 100% {
@ -37,6 +41,7 @@ the-transition-ease-out() {
transform: translateY(0); transform: translateY(0);
} }
} }
.title-hover-animation { .title-hover-animation {
display: inline-block; display: inline-block;
position: relative; position: relative;

View File

@ -1,4 +1,5 @@
@require "animated.styl" @require "animated.styl"
magic-style(scale) { magic-style(scale) {
if (hexo-config('magic.enable') == true) { if (hexo-config('magic.enable') == true) {
@ -14,10 +15,10 @@ magic-style(scale) {
} }
magic-container(scale) { magic-container(scale, padding) {
if (hexo-config('magic.enable') == true) { if (hexo-config('magic.enable') == true) {
magic-style(scale); magic-style(scale);
padding: 30px; padding: padding;
border-radius: 2px; border-radius: 2px;
} }
} }

View File

@ -15,12 +15,13 @@ if (hexo-config('magic.enable') == true && hexo-config('magic.sidebar.enable') =
$main-content-width = 80%; $main-content-width = 80%;
$sidebar-width = 280px; // $sidebar-width = 280px; //
} else { } else {
$main-content-width = 66%; $main-content-width = 60%;
} }
$header-shrink-height = 60px; // $header-shrink-height = 60px; //
$media-max-width = 760px; // $media-max-width = 760px; //
$tool-button-width = 36px; // $tool-button-width = 36px; //
$component-interspace = 30px; //
// =============================== // ===============================

View File

@ -11,7 +11,7 @@
if (hexo-config('magic.enable') == true) { if (hexo-config('magic.enable') == true) {
magic-container(1.02); magic-container(1.02, 30px);
margin-bottom: 30px; margin-bottom: 30px;
} else { } else {

View File

@ -1,9 +1,6 @@
@require "common/variables.styl"; @require "common/variables.styl";
@require "./common/animated.styl"; @require "./common/animated.styl";
//
$component-interspace = 30px;
.page-template { .page-template {
padding-top: $header-height; padding-top: $header-height;
position: relative; position: relative;
@ -18,7 +15,6 @@ $component-interspace = 30px;
transition(); transition();
} }
.page-middle { .page-middle {
width: 100%; width: 100%;
display: flex; display: flex;
@ -66,6 +62,7 @@ $component-interspace = 30px;
transition(); transition();
} }
.scroll-to-top { .scroll-to-top {
display: none; display: none;
position: fixed; position: fixed;
@ -103,12 +100,16 @@ $component-interspace = 30px;
} }
} }
.page-bottom { .page-bottom {
width: 100%; width: 100%;
} }
} }
.page-top-shrink { .page-top-shrink {
transition();
padding-top: $header-shrink-height; padding-top: $header-shrink-height;
.page-top { .page-top {
@ -119,9 +120,6 @@ $component-interspace = 30px;
top: $header-shrink-height + $component-interspace !important; top: $header-shrink-height + $component-interspace !important;
} }
.sidebar-toc {
top: $header-shrink-height + $component-interspace !important;
}
} }
@media screen and (max-width: $media-max-width) { @media screen and (max-width: $media-max-width) {
@ -143,7 +141,6 @@ $component-interspace = 30px;
//.sidebar-toc { //.sidebar-toc {
// right: 2% !important; // right: 2% !important;
//} //}
.scroll-to-top { .scroll-to-top {
if (hexo-config('back2top.position') == left) { if (hexo-config('back2top.position') == left) {
left: 2% !important; left: 2% !important;

View File

@ -1,4 +1,5 @@
const pageTemplateDom = document.querySelector('.page-template'); const pageTemplateDom = document.querySelector('.page-template');
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');
const windowMaskDom = document.querySelector('.window-mask'); const windowMaskDom = document.querySelector('.window-mask');
@ -13,10 +14,18 @@ window.addEventListener('scroll', function (_e) {
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-top-shrink');
if (articleTocContainerDom) {
articleTocContainerDom.classList.add('article-toc-container-shrink');
}
} 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-top-shrink');
if (articleTocContainerDom) {
articleTocContainerDom.classList.remove('article-toc-container-shrink');
}
} }
}); });