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

style: optimize home page style

This commit is contained in:
XPoet 2021-01-22 18:20:13 +08:00
parent 0d30655436
commit 2c27ba7bcf
5 changed files with 18 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
source/css/common/keep-theme.styl
View File

@ -1,7 +1,7 @@
$keep-container-border-radius = 5px; $keep-container-border-radius = 5px;
hover-style(isTransform, scaleX, scaleY) { hover-style(isTransform, scaleX, scaleY) {
box-shadow: 2px 2px 6px var(--shadow-color); box-shadow: 2px 2px 5px var(--shadow-color);
transition-t("transform", "0", "0.2", "linear"); transition-t("transform", "0", "0.2", "linear");
&:hover { &:hover {
@ -10,7 +10,7 @@ hover-style(isTransform, scaleX, scaleY) {
} }
if (hexo-config('style.hover.shadow')) { if (hexo-config('style.hover.shadow')) {
box-shadow: 3px 3px 10px var(--shadow-hover-color); box-shadow: 2px 2px 8px var(--shadow-hover-color);
} }
} }
} }

13
source/css/layout/_partial/side-tools.styl
View File

@ -81,21 +81,26 @@ $tools-item-border-radius = 1px;
.tool-scroll-to-top { .tool-scroll-to-top {
display: none; display: none;
&.show {
display: flex;
}
&:hover { &:hover {
.percent {
display: none;
}
.arrow-up { .arrow-up {
display: flex; display: flex;
} }
.percent {
display: none;
}
} }
.arrow-up, .percent { .arrow-up, .percent {
transition-t("display", "0", "0.2", "linear"); transition-t("display", "5", "0.2", "linear");
} }

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

@ -116,7 +116,7 @@ $article-title-font-size = 1.6rem;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
keep-container(true, 1.05, 1.05, 10px, 0); keep-container(true, 1.03, 1.03, 10px, 0);
a { a {
position: relative; position: relative;

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

@ -7,7 +7,7 @@
.home-article-item { .home-article-item {
position: relative; position: relative;
keep-container(true, 1.02, 1.02, 28px, 38px); keep-container(true, 1.015, 1.015, 28px, 38px);
.top-icon { .top-icon {
position: absolute; position: absolute;
@ -27,8 +27,8 @@
.home-article-title { .home-article-title {
position: relative; position: relative;
font-weight: 600; font-weight: 600;
font-size: 1.38rem; font-size: 1.4rem;
line-height: 1; line-height: 1.5;
color: var(--second-text-color); color: var(--second-text-color);
@ -50,9 +50,7 @@
word-wrap: break-word; word-wrap: break-word;
text-align: justify; text-align: justify;
margin: 20px 0; margin: 20px 0;
line-height: 2rem;
color: var(--default-text-color); color: var(--default-text-color);
} }
@ -60,7 +58,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
font-size: 0.95rem; font-size: 0.92rem;
color: var(--third-text-color); color: var(--third-text-color);

4
source/js/utils.js
View File

@ -35,9 +35,9 @@ KEEP.initUtils = () => {
if (this.isHasScrollPercent) { if (this.isHasScrollPercent) {
const percent_dom = this.back2TopButton_dom.querySelector('.percent'); const percent_dom = this.back2TopButton_dom.querySelector('.percent');
if (percent === '0') { if (percent === '0') {
this.back2TopButton_dom.style.display = 'none'; this.back2TopButton_dom.classList.remove('show');
} else { } else {
this.back2TopButton_dom.style.display = 'flex'; this.back2TopButton_dom.classList.add('show');
percent_dom.innerHTML = percent; percent_dom.innerHTML = percent;
} }
} }