sookie/blog-web
1
0
Fork 0
Code Issues 12 Pull Requests Projects Releases Wiki Activity

夜间模式and移动端细节修正

Browse Source
This commit is contained in:
结发受长生 2019-05-20 13:54:00 +08:00
parent 75370c7cca
commit d3aba8d5ae
4 changed files with 48 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
themes/yilia/source-src/css/core/_animation.scss
View File

@ -256,22 +256,22 @@
@keyframes leftIn { @keyframes leftIn {
from { from {
transform: translate3d(0, 0, 0); transform: translate(0, 0);
background:$colorBodyBg; background:$colorBodyBg;
} }
to { to {
transform: translate3d(333px, 0, 0); transform: translate(333px, 0);
background: none; background: none;
} }
} }
@keyframes leftOut { @keyframes leftOut {
from { from {
transform: translate3d(333px, 0, 0); transform: translate(333px, 0);
background: none; background: none;
} }
to { to {
transform: translate3d(0, 0, 0); transform: translate(0, 0);
background:$colorBodyBg; background:$colorBodyBg;
} }
} }
@ -288,22 +288,22 @@
@keyframes smallLeftIn { @keyframes smallLeftIn {
from { from {
transform: translate3d(0, 0, 0); transform: translate(0, 0);
opacity: 0; opacity: 0;
} }
to { to {
transform: translate3d(300px, 0, 0); transform: translate(300px, 0);
opacity: 1; opacity: 1;
} }
} }
@keyframes smallleftOut { @keyframes smallleftOut {
from { from {
transform: translate3d(300px, 0, 0); transform: translate(300px, 0);
opacity: 1; opacity: 1;
} }
to { to {
transform: translate3d(0, 0, 0); transform: translate(0, 0);
opacity: 0; opacity: 0;
} }
} }

5
themes/yilia/source-src/css/mobile.scss
View File

@ -1,8 +1,3 @@
html, body, #container {
height: auto;
overflow-x: hidden;
overflow-y: auto;
}
#mobile-nav { #mobile-nav {
display: block; display: block;
} }

38
themes/yilia/source-src/css/night.scss
View File

@ -6,6 +6,38 @@ $articleBg_night: #15202b; // 文章背景色
$borderColor_night: #38444d; // 边框颜色 $borderColor_night: #38444d; // 边框颜色
$textColor_night: #d5d5d5; // 文字颜色 $textColor_night: #d5d5d5; // 文字颜色
@keyframes leftIn_night {
from {
transform: translate(0, 0);
background:$mainBg_night;
}
to {
transform: translate(333px, 0);
background: none;
}
}
@keyframes leftOut_night {
from {
transform: translate(333px, 0);
background: none;
}
to {
transform: translate(0, 0);
background:$mainBg_night;
}
}
%anmLeftIn_night {
@extend %anmCommon;
animation-name: leftIn_night;
}
%anmLeftOut_night {
@extend %anmCommon;
animation-name: leftOut_night;
}
body.night { body.night {
background: $mainBg_night; background: $mainBg_night;
// 展开菜单之后的背景 // 展开菜单之后的背景
@ -15,6 +47,12 @@ body.night {
// 主背景 // 主背景
.mid-col { .mid-col {
background: $mainBg_night; background: $mainBg_night;
&.show {
@extend %anmLeftIn_night;
}
&.hide {
@extend %anmLeftOut_night;
}
} }
// 文章区域 // 文章区域
.article{ .article{

3
themes/yilia/source-src/js/slider.js
View File

@ -196,12 +196,13 @@ const waifuTools = {
}, },
"tools.eye"() { "tools.eye"() {
// 切换到夜间模式 // 切换到夜间模式
document.querySelector('.mid-col').classList.remove('hide')
let night = document.querySelector('body').classList.toggle('night') let night = document.querySelector('body').classList.toggle('night')
localStorage.setItem('night', night) localStorage.setItem('night', night)
}, },
"tools.chart"() { "tools.chart"() {
// 一言 // 一言
axios.get('https://www.colorfulsweet.site/hitokoto?length=40&format=json').then(res => { axios.get('https://www.colorfulsweet.site/api/hitokoto?length=40&format=json').then(res => {
this.showMessage(res.data.hitokoto + (res.data.from?`　　——${res.data.from}`:'')) this.showMessage(res.data.hitokoto + (res.data.from?`　　——${res.data.from}`:''))
}) })
} }