From 6b4b7d14199e2b4b2c3e242c5735a17dafdd156f Mon Sep 17 00:00:00 2001 From: Eltrac <45323514+BigCoke233@users.noreply.github.com> Date: Mon, 15 Jul 2019 15:55:41 +0800 Subject: =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E4=B8=8E=E7=94=B5=E8=84=91?= =?UTF-8?q?=E7=AB=AF=E5=AF=BC=E8=88=AA=E5=88=86=E7=A6=BB=E3=80=81=E6=96=B0?= =?UTF-8?q?=E5=B0=81=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/miracles.min.css | 115 +++++++++++++++++++++++++++++++++++--------- assets/js/OwO.min.js | 3 +- includes/footer.php | 46 ++++-------------- includes/head.php | 4 +- includes/header.php | 29 ++++++++++- index.php | 5 +- libs/Contents.php | 2 +- screenshot.jpg | Bin 41798 -> 165962 bytes 8 files changed, 136 insertions(+), 68 deletions(-) diff --git a/assets/css/miracles.min.css b/assets/css/miracles.min.css index 1639add..9ed26fd 100644 --- a/assets/css/miracles.min.css +++ b/assets/css/miracles.min.css @@ -18,10 +18,7 @@ body,html { margin: 0; background: #fafafa; overflow: auto; - transition: background 0.2s -} -body { - height: 100%; + transition: background 0.2s; width: 100%; } @@ -130,7 +127,11 @@ hr { .body-dark .login, .body-dark .login-close, .body-darl .login a, -.body-dark .OwO-bar { +.body-dark .OwO-bar, +.body-dark .mobile-menu, +.body-dark .mobile-menu a, +.body-dark .mobile-menu-close, +.body-dark .mobile-menu-footer { color: #fafafa!important } @@ -146,7 +147,9 @@ hr { .body-dark .post-content th, .body-dark .post-content tr, .body-dark .OwO-logo, -.body-dark .OwO-body { +.body-dark .OwO-body, +.body-dark .mobile-menu-title, +.body-dark .mobile-menu-footer { border-color: #6e6e6e!important; } @@ -169,7 +172,9 @@ hr { -moz-box-shadow: 0 0 30px #000 } -.body-dark .nav a:hover { +.body-dark .nav a:hover, +.body-dark .nav-mobile-title:hover, +.mobile-menu-pagelist a:hover { background: #646464 } .body-dark .nav-icon-button { @@ -187,7 +192,7 @@ hr { } .nav { - background: rgba(255,255,255,.9); + background: rgba(255,255,255,0.96); width: 100%; position: absolute; box-shadow: 0 0 20px #ddd; @@ -219,7 +224,9 @@ hr { font-size: 16px } -.nav-content a:hover { +.nav-content a:hover, +.nav-mobile-content a:hover, +.nav-mobile-content button:hover { background: #f0f0f0 } @@ -242,6 +249,21 @@ hr { position: absolute; top: 20px; } + + +.nav-mobile { + background: rgba(255,255,255,0.99); + word-break: keep-all; +} +.nav-mobile-content { + padding: 0 5px; +} +.nav-mobile-content a, +.nav-mobile-content button { + margin: 0; + padding: 16px 10px; +} + .search-button { right: 20px; } @@ -599,20 +621,20 @@ hr { .links-item { background: #fff; - box-shadow: 0 3px 1px #ddd; - -webkit-box-shadow: 0 1px 3px #ddd; - -moz-box-shadow: 0 3px 1px #ddd; + box-shadow: 0 3px 1px #ccc; + -webkit-box-shadow: 0 1px 3px #ccc; + -moz-box-shadow: 0 3px 1px #ccc; overflow: hidden; transition: all .2s!important; - margin-bottom: 20px; + margin-bottom: 5px; border-radius: 3px } .links-item:hover { transform: scale(1.05); - box-shadow: 0 6px 28px #ddd; - -webkit-box-shadow: 0 6px 28px #ddd; - -moz-box-shadow: 0 6px 28px #ddd; + box-shadow: 0 6px 28px #ccc; + -webkit-box-shadow: 0 6px 28px #ccc; + -moz-box-shadow: 0 6px 28px #ccc; transform: translateY(-6px) } @@ -621,14 +643,18 @@ hr { } .links-title { - text-align: Center + text-align: center } .links-title h4 { font-weight: 700; letter-spacing: 2px; white-space: nowrap; - margin: 10px 0 + font-size: 15px; + margin: 14px 0 +} +.links-container { + padding: 6px; } .archive-title { @@ -646,33 +672,63 @@ hr { margin-bottom: 5px } -.search,.login { +.search,.login,.mobile-menu { position: fixed; top: 0; bottom: 0; right: 0; left: 0; - background-color: rgba(255,255,255,.95); + background-color: rgba(255,255,255,0.96); transition: all .2s; z-index: 1000; +} +.search,.login { display: flex; align-items: center; justify-content: center; } .body-dark .search, -.body-dark .login { +.body-dark .login, +.body-dark .mobile-menu { background: rgba(90,90,90,.95) } .search.ready, -.login.ready { +.login.ready, +.mobile-menu.ready { bottom: 120vh; top: -120vh; visibility: hidden; } .search-close.ready, -.login-close.ready { +.login-close.ready, +.mobile-menu-close.ready { display: none } +.mobile-menu-pagelist a { + display: block; + border-radius: 4px; + padding: 10px 5px; + text-align: center; + transition: all 0.2s; +} +.mobile-menu-pagelist a:hover { + background: rgb(240,240,240) +} +.mobile-menu-title { + text-align: center; + border-bottom: 1px solid rgb(220,220,220); + padding-bottom: 20px; +} +.mobile-menu-footer { + position: absolute; + text-align: center; + bottom: 10px; + right: 0; + left: 0; + border-top: 1px solid rgb(220,220,220); + padding-top: 10px; +} + .search-form input { border: 1px solid #bababa; padding: 10px 25px; @@ -691,7 +747,8 @@ hr { outline: 0 } .search-close, -.login-close { +.login-close, +.mobile-menu-close { position: fixed; top: 20px; right: 20px; @@ -948,6 +1005,7 @@ iframe[src*="//player.bilibili.com/player.html"] { .login-form button { width: 260px; } + @media (min-width:768px) { .nav-content a { font-size: 19px; @@ -1019,6 +1077,9 @@ iframe[src*="//player.bilibili.com/player.html"] { .post-body { margin-top: -130px } + .links-container { + padding: 10px; + } } @media (min-width:992px) { @@ -1097,6 +1158,9 @@ iframe[src*="//player.bilibili.com/player.html"] { .post-body { margin-top: -134px } + .links-container { + padding: 12px; + } } @media (min-width:1200px) { @@ -1173,4 +1237,7 @@ iframe[src*="//player.bilibili.com/player.html"] { .post-body { margin-top: -140px } + .links-container { + padding: 15px; + } } diff --git a/assets/js/OwO.min.js b/assets/js/OwO.min.js index 74d2383..bcc9238 100644 --- a/assets/js/OwO.min.js +++ b/assets/js/OwO.min.js @@ -1,2 +1 @@ -"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function e(e,t){for(var a=0;a=200&&i.status<300||304===i.status?(a.odata=JSON.parse(i.responseText),a.init(t)):console.log("OwO data request was unsuccessful: "+i.status))},i.open("get",t.api,!0),i.send(null)}return _createClass(e,[{key:"init",value:function(e){var t=this;this.area=e.target,this.packages=Object.keys(this.odata);for(var a='\n \n
',s=0;s';for(var n=this.odata[this.packages[s]].container,i=0;i'+n[i].icon+"";a+="\n "}a+='\n
\n
    ';for(var o=0;o"+this.packages[o]+"";a+="\n
\n
\n
\n ",this.container.innerHTML=a,this.logo=this.container.getElementsByClassName("OwO-logo")[0],this.logo.addEventListener("click",function(){t.toggle()}),this.container.getElementsByClassName("OwO-body")[0].addEventListener("click",function(e){var a=null;if(e.target.classList.contains("OwO-item")?a=e.target:e.target.parentNode.classList.contains("OwO-item")&&(a=e.target.parentNode),a){var s=t.area.selectionEnd,n=t.area.value;t.area.value=n.slice(0,s)+a.innerHTML+n.slice(s),t.area.focus(),t.toggle()}}),this.packagesEle=this.container.getElementsByClassName("OwO-packages")[0];for(var c=function(e){!function(a){t.packagesEle.children[e].addEventListener("click",function(){t.tab(a)})}(e)},l=0;l=200&&i.status<300||304===i.status?(a.odata=JSON.parse(i.responseText),a.init(t)):console.log("OwO data request was unsuccessful: "+i.status))},i.open("get",t.api,!0),i.send(null)}return _createClass(e,[{key:"init",value:function(e){var t=this;this.area=e.target,this.packages=Object.keys(this.odata);for(var a='\n \n
',s=0;s';for(var n=this.odata[this.packages[s]].container,i=0;i'+n[i].icon+"";a+="\n "}a+='\n
\n
    ';for(var o=0;o"+this.packages[o]+"";a+="\n
\n
\n
\n ",this.container.innerHTML=a,this.logo=this.container.getElementsByClassName("OwO-logo")[0],this.logo.addEventListener("click",function(){t.toggle()}),this.container.getElementsByClassName("OwO-body")[0].addEventListener("click",function(e){var a=null;if(e.target.classList.contains("OwO-item")?a=e.target:e.target.parentNode.classList.contains("OwO-item")&&(a=e.target.parentNode),a){var s=t.area.selectionEnd,n=t.area.value;t.area.value=n.slice(0,s)+a.innerHTML+n.slice(s),t.area.focus(),t.toggle()}}),this.packagesEle=this.container.getElementsByClassName("OwO-packages")[0];for(var c=function(e){!function(a){t.packagesEle.children[e].addEventListener("click",function(){t.tab(a)})}(e)},l=0;l', - position: 'down', - width: '400px', - maxHeight: '250px' - }); - jQuery(function() { - jQuery("img").lazyload({threshold: 200,effect: "fadeIn"}); - }); + var OwO_demo = new OwO({logo: 'OωO表情',container: document.getElementsByClassName('OwO')[0],target: document.getElementsByClassName('OwO-textarea')[0],api: '',position: 'down',width: '400px',maxHeight: '250px'}); + jQuery(function() {jQuery("img").lazyload({threshold: 200,effect: "fadeIn"});}); }); //LazyLoad - jQuery(function() { - jQuery("img").lazyload({threshold: 200,effect: "fadeIn"}); - }); + jQuery(function() {jQuery("img").lazyload({threshold: 200,effect: "fadeIn"});}); //解决刷新后不显示行号的问题 var pres = document.getElementsByTagName('pre'); - for (var i = 0; i < pres.length; i++){ - if (pres[i].getElementsByTagName('code').length > 0) - pres[i].className = 'line-numbers'; - } + for (var i = 0; i < pres.length; i++){if (pres[i].getElementsByTagName('code').length > 0)pres[i].className = 'line-numbers';} //Search - function Search() { - $(".search").toggleClass("ready"); - $(".search-close").toggleClass("ready"); - } + function Search() {$(".search").toggleClass("ready");$(".search-close").toggleClass("ready");} + //mobileMenu + function toggleMobileMenu() {$(".mobile-menu").toggleClass("ready");$(".mobile-menu-close").toggleClass("ready");} //Login - function Login() { - $(".login").toggleClass("ready"); - $(".login-close").toggleClass("ready"); - } - var OwO_demo = new OwO({ - logo: 'OωO表情', - container: document.getElementsByClassName('OwO')[0], - target: document.getElementsByClassName('OwO-textarea')[0], - api: '', - position: 'down', - width: '400px', - maxHeight: '250px' - }); + function Login() {$(".login").toggleClass("ready");$(".login-close").toggleClass("ready");} + //OwO + var OwO_demo = new OwO({logo: 'OωO表情',container: document.getElementsByClassName('OwO')[0],target: document.getElementsByClassName('OwO-textarea')[0],api: '',position: 'down',width: '400px',maxHeight: '250px'}); footer(); ?> diff --git a/includes/head.php b/includes/head.php index 9367c0c..116b8ff 100644 --- a/includes/head.php +++ b/includes/head.php @@ -46,13 +46,13 @@ if (isset($_POST['action'])) { options->headerEcho(); ?> - + - + diff --git a/includes/header.php b/includes/header.php index abc57ca..c43b4dd 100644 --- a/includes/header.php +++ b/includes/header.php @@ -1,4 +1,5 @@ +
@@ -8,6 +9,7 @@
+ -