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

View File

@ -1,7 +1,7 @@
$keep-container-border-radius = 5px;
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");
&:hover {
@ -10,7 +10,7 @@ hover-style(isTransform, scaleX, scaleY) {
}
if (hexo-config('style.hover.shadow')) {
box-shadow: 3px 3px 10px var(--shadow-hover-color);
box-shadow: 2px 2px 8px var(--shadow-hover-color);
}
}
}

View File

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

View File

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

View File

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

View File

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