From b273d666401a0abf1360e5dd80a5e8733bd603c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BB=93=E5=8F=91=E5=8F=97=E9=95=BF=E7=94=9F?= Date: Thu, 29 Aug 2019 11:40:30 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A1=B5=E9=9D=A2=E6=B5=81?= =?UTF-8?q?=E7=95=85=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/yilia/layout/layout.ejs | 6 +- themes/yilia/package-lock.json | 41 +++------ themes/yilia/source-src/css/article-main.scss | 2 +- .../yilia/source-src/css/core/_animation.scss | 4 - themes/yilia/source-src/css/grid.scss | 23 ++--- themes/yilia/source-src/css/mobile.scss | 4 + themes/yilia/source-src/css/night.scss | 16 +--- themes/yilia/source-src/js/anm.js | 92 ------------------- themes/yilia/source-src/js/slider.js | 12 +-- 9 files changed, 31 insertions(+), 169 deletions(-) delete mode 100644 themes/yilia/source-src/js/anm.js diff --git a/themes/yilia/layout/layout.ejs b/themes/yilia/layout/layout.ejs index e296e23..24b93e4 100644 --- a/themes/yilia/layout/layout.ejs +++ b/themes/yilia/layout/layout.ejs @@ -3,8 +3,7 @@ <%- partial('_partial/head') %>
- -
+
<%- partial('_partial/left-col', null, {cache: !config.relative_link}) %> <%- partial('_partial/live2d') %>
@@ -21,9 +20,6 @@ <%- partial('_partial/mobile-nav', null, {cache: !config.relative_link}) %>
-
- -
<%- body %>
diff --git a/themes/yilia/package-lock.json b/themes/yilia/package-lock.json index 58ed1ff..bc43f4b 100644 --- a/themes/yilia/package-lock.json +++ b/themes/yilia/package-lock.json @@ -3591,8 +3591,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -3613,14 +3612,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3635,20 +3632,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -3765,8 +3759,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -3778,7 +3771,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3793,7 +3785,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -3801,14 +3792,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3827,7 +3816,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -3908,8 +3896,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -3921,7 +3908,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -4007,8 +3993,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -4044,7 +4029,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -4064,7 +4048,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -4109,14 +4092,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, diff --git a/themes/yilia/source-src/css/article-main.scss b/themes/yilia/source-src/css/article-main.scss index 390ebae..98b442e 100644 --- a/themes/yilia/source-src/css/article-main.scss +++ b/themes/yilia/source-src/css/article-main.scss @@ -12,7 +12,7 @@ border-width: 1px; border-style: solid; border-color: #fff #ddd; - background: $colorBg; + background: #{$colorBg}cc; @extend %trans; img{ max-width: 100%; diff --git a/themes/yilia/source-src/css/core/_animation.scss b/themes/yilia/source-src/css/core/_animation.scss index 7d9bd62..a28748a 100644 --- a/themes/yilia/source-src/css/core/_animation.scss +++ b/themes/yilia/source-src/css/core/_animation.scss @@ -257,22 +257,18 @@ @keyframes leftIn { from { transform: translate(0, 0); - background:$colorBodyBg; } to { transform: translate(333px, 0); - background: none; } } @keyframes leftOut { from { transform: translate(333px, 0); - background: none; } to { transform: translate(0, 0); - background:$colorBodyBg; } } diff --git a/themes/yilia/source-src/css/grid.scss b/themes/yilia/source-src/css/grid.scss index eaa1b41..4db09be 100644 --- a/themes/yilia/source-src/css/grid.scss +++ b/themes/yilia/source-src/css/grid.scss @@ -20,21 +20,19 @@ html, body, #container { #container{ position:relative; min-height:100%; - background: linear-gradient(200deg,#5aa5c6,#a4854b); scroll-behavior: smooth; -webkit-overflow-scrolling: touch; + background: $colorBodyBg url(http://photo.colorfulsweet.site/2019/08/29/4f8a91881d2a4.png) no-repeat; + background-size: contain; + background-position: right; overflow-scrolling: touch; - .anm-canvas { - display: none; - } &.show { - overflow-y: hidden; - .anm-canvas { - display: block; - position: fixed; - } + overflow-y: hidden; } } +body:not(.night) #container.show { + background: linear-gradient(200deg,#5aa5c6,#a4854b); +} .body-wrap{ padding-top: 30px; margin-bottom: 80px; @@ -43,15 +41,14 @@ html, body, #container { position:absolute; right:0; min-height:100%; - background:$colorBodyBg; left: 300px; width: auto; - @extend %trans; &.show { @extend %anmLeftIn; .article { - transition: opacity .3s ease-in, background-color .3s ease-in; - opacity: 0.6 !important; + @extend %trans; + // transition: opacity .3s ease-in, background-color .3s ease-in; + opacity: 0.5 !important; pointer-events: none; } } diff --git a/themes/yilia/source-src/css/mobile.scss b/themes/yilia/source-src/css/mobile.scss index 544ddb8..1b0b1f6 100644 --- a/themes/yilia/source-src/css/mobile.scss +++ b/themes/yilia/source-src/css/mobile.scss @@ -2,6 +2,9 @@ padding-top: 0; margin-bottom: 0; } +#container { + background: $colorBodyBg; +} .left-col { display: none; } @@ -117,6 +120,7 @@ padding: 10px; border: 0; font-size: 16px; + background: #{$colorBg}; .article-more-link { margin: 0; } diff --git a/themes/yilia/source-src/css/night.scss b/themes/yilia/source-src/css/night.scss index 1fda0d6..3784841 100644 --- a/themes/yilia/source-src/css/night.scss +++ b/themes/yilia/source-src/css/night.scss @@ -41,22 +41,12 @@ $textColor_night: #d5d5d5; // 文字颜色 body.night { background: $mainBg_night; // 展开菜单之后的背景 - #container { - background: none; - } - // 主背景 - .mid-col { - background: $mainBg_night; - &.show { - @extend %anmLeftIn_night; - } - &.hide { - @extend %anmLeftOut_night; - } + #container, #container.show { + background-color: $mainBg_night; } // 文章区域 .article{ - background: $articleBg_night; + background: #{$articleBg_night}cc; border-color: $borderColor_night; color: $textColor_night; .article-title { // 主标题 diff --git a/themes/yilia/source-src/js/anm.js b/themes/yilia/source-src/js/anm.js deleted file mode 100644 index 3547221..0000000 --- a/themes/yilia/source-src/js/anm.js +++ /dev/null @@ -1,92 +0,0 @@ -function init() { - var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true; - - // Main - initHeader(); - addListeners(); - - function initHeader() { - width = window.innerWidth; - height = window.innerHeight; - target = {x: 0, y: height}; - - largeHeader = document.getElementById('container'); - largeHeader.style.height = height+'px'; - - canvas = document.getElementById('anm-canvas'); - canvas.width = width; - canvas.height = height; - ctx = canvas.getContext('2d'); - - // create particles - circles = []; - for(var x = 0; x < width*0.5; x++) { - var c = new Circle(); - circles.push(c); - } - animate(); - } - - // Event handling - function addListeners() { - window.addEventListener('scroll', scrollCheck); - window.addEventListener('resize', resize); - } - - function scrollCheck() { - if(document.body.scrollTop > height) animateHeader = false; - else animateHeader = true; - } - - function resize() { - width = window.innerWidth; - height = window.innerHeight; - largeHeader.style.height = height+'px'; - canvas.width = width; - canvas.height = height; - } - - function animate() { - if(animateHeader) { - ctx.clearRect(0,0,width,height); - for(var i in circles) { - circles[i].draw(); - } - } - requestAnimationFrame(animate); - } - - // Canvas manipulation - function Circle() { - var _this = this; - - // constructor - (function() { - _this.pos = {}; - init(); - //console.log(_this); - })(); - - function init() { - _this.pos.x = Math.random()*width; - _this.pos.y = height+Math.random()*100; - _this.alpha = 0.1+Math.random()*0.3; - _this.scale = 0.1+Math.random()*0.3; - _this.velocity = Math.random(); - } - - this.draw = function() { - if(_this.alpha <= 0) { - init(); - } - _this.pos.y -= _this.velocity; - _this.alpha -= 0.0005; - ctx.beginPath(); - ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false); - ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')'; - ctx.fill(); - }; - } -} - -export default { init } \ No newline at end of file diff --git a/themes/yilia/source-src/js/slider.js b/themes/yilia/source-src/js/slider.js index b1c6234..0a24ca1 100644 --- a/themes/yilia/source-src/js/slider.js +++ b/themes/yilia/source-src/js/slider.js @@ -1,12 +1,6 @@ -// 动画 -import Anm from './anm' -// 浏览器判断 -import Browser from './browser' - import axios from 'axios' import Vue from '../lib/vue/vue.min' import waifuTips from '../config/waifu-tip.json' -const isMobile = (Browser.versions.mobile && window.screen.width < 800) function setScrollZero() { let $sct = document.querySelectorAll('.tools-section') @@ -284,8 +278,4 @@ const waifuTools = { // 打开全文检索Modal vm.openFullTextSearch() } -} - -if (!isMobile) { - Anm.init() -} +} \ No newline at end of file