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 {
from {
transform: translate3d(0, 0, 0);
transform: translate(0, 0);
background:$colorBodyBg;
}
to {
transform: translate3d(333px, 0, 0);
transform: translate(333px, 0);
background: none;
}
}
@keyframes leftOut {
from {
transform: translate3d(333px, 0, 0);
transform: translate(333px, 0);
background: none;
}
to {
transform: translate3d(0, 0, 0);
transform: translate(0, 0);
background:$colorBodyBg;
}
}
@ -288,22 +288,22 @@
@keyframes smallLeftIn {
from {
transform: translate3d(0, 0, 0);
transform: translate(0, 0);
opacity: 0;
}
to {
transform: translate3d(300px, 0, 0);
transform: translate(300px, 0);
opacity: 1;
}
}
@keyframes smallleftOut {
from {
transform: translate3d(300px, 0, 0);
transform: translate(300px, 0);
opacity: 1;
}
to {
transform: translate3d(0, 0, 0);
transform: translate(0, 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 {
display: block;
}

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

@ -6,6 +6,38 @@ $articleBg_night: #15202b; // 文章背景色
$borderColor_night: #38444d; // 边框颜色
$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 {
background: $mainBg_night;
// 展开菜单之后的背景
@ -15,6 +47,12 @@ body.night {
// 主背景
.mid-col {
background: $mainBg_night;
&.show {
@extend %anmLeftIn_night;
}
&.hide {
@extend %anmLeftOut_night;
}
}
// 文章区域
.article{

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

@ -196,12 +196,13 @@ const waifuTools = {
},
"tools.eye"() {
// 切换到夜间模式
document.querySelector('.mid-col').classList.remove('hide')
let night = document.querySelector('body').classList.toggle('night')
localStorage.setItem('night', night)
},
"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}`:''))
})
}