diff options
| -rw-r--r-- | assets/css/miracles.min.css | 115 | ||||
| -rw-r--r-- | assets/js/OwO.min.js | 3 | ||||
| -rw-r--r-- | includes/footer.php | 46 | ||||
| -rw-r--r-- | includes/head.php | 4 | ||||
| -rw-r--r-- | includes/header.php | 29 | ||||
| -rw-r--r-- | index.php | 5 | ||||
| -rw-r--r-- | libs/Contents.php | 2 | ||||
| -rw-r--r-- | 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<t.length;a++){var s=t[a];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(e,s.key,s)}}return function(t,a,s){return a&&e(t.prototype,a),s&&e(t,s),t}}();!function(){var e=function(){function e(t){var a=this;_classCallCheck(this,e);var s={logo:"OwO表情",container:document.getElementsByClassName("OwO")[0],target:document.getElementsByTagName("textarea")[0],position:"down",width:"100%",maxHeight:"250px",api:"https://api.anotherhome.net/OwO/OwO.json"};for(var n in s)s.hasOwnProperty(n)&&!t.hasOwnProperty(n)&&(t[n]=s[n]);this.container=t.container,this.target=t.target,"up"===t.position&&this.container.classList.add("OwO-up");var i=new XMLHttpRequest;i.onreadystatechange=function(){4===i.readyState&&(i.status>=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 <div class="OwO-logo"><span>'+e.logo+'</span></div>\n <div class="OwO-body" style="width: '+e.width+'">',s=0;s<this.packages.length;s++){a+='\n <ul class="OwO-items OwO-items-'+this.odata[this.packages[s]].type+'" style="max-height: '+(parseInt(e.maxHeight)-53+"px")+';">';for(var n=this.odata[this.packages[s]].container,i=0;i<n.length;i++)a+='\n <li class="OwO-item" title="'+n[i].text+'">'+n[i].icon+"</li>";a+="\n </ul>"}a+='\n <div class="OwO-bar">\n <ul class="OwO-packages">';for(var o=0;o<this.packages.length;o++)a+="\n <li><span>"+this.packages[o]+"</span></li>";a+="\n </ul>\n </div>\n </div>\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<this.packagesEle.children.length;l++)c(l);this.tab(0)}},{key:"toggle",value:function(){this.container.classList.contains("OwO-open")?this.container.classList.remove("OwO-open"):this.container.classList.add("OwO-open")}},{key:"tab",value:function(e){var t=this.container.getElementsByClassName("OwO-items-show")[0];t&&t.classList.remove("OwO-items-show"),this.container.getElementsByClassName("OwO-items")[e].classList.add("OwO-items-show");var a=this.container.getElementsByClassName("OwO-package-active")[0];a&&a.classList.remove("OwO-package-active"),this.packagesEle.getElementsByTagName("li")[e].classList.add("OwO-package-active")}}]),e}();"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=e:window.OwO=e}(); -//# sourceMappingURL=OwO.min.js.map
\ No newline at end of file +"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<t.length;a++){var s=t[a];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(e,s.key,s)}}return function(t,a,s){return a&&e(t.prototype,a),s&&e(t,s),t}}();!function(){var e=function(){function e(t){var a=this;_classCallCheck(this,e);var s={logo:"OwO表情",container:document.getElementsByClassName("OwO")[0],target:document.getElementsByTagName("textarea")[0],position:"down",width:"100%",maxHeight:"250px",api:"https://api.anotherhome.net/OwO/OwO.json"};for(var n in s)s.hasOwnProperty(n)&&!t.hasOwnProperty(n)&&(t[n]=s[n]);this.container=t.container,this.target=t.target,"up"===t.position&&this.container.classList.add("OwO-up");var i=new XMLHttpRequest;i.onreadystatechange=function(){4===i.readyState&&(i.status>=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 <div class="OwO-logo"><span>'+e.logo+'</span></div>\n <div class="OwO-body" style="width: '+e.width+'">',s=0;s<this.packages.length;s++){a+='\n <ul class="OwO-items OwO-items-'+this.odata[this.packages[s]].type+'" style="max-height: '+(parseInt(e.maxHeight)-53+"px")+';">';for(var n=this.odata[this.packages[s]].container,i=0;i<n.length;i++)a+='\n <li class="OwO-item" title="'+n[i].text+'">'+n[i].icon+"</li>";a+="\n </ul>"}a+='\n <div class="OwO-bar">\n <ul class="OwO-packages">';for(var o=0;o<this.packages.length;o++)a+="\n <li><span>"+this.packages[o]+"</span></li>";a+="\n </ul>\n </div>\n </div>\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<this.packagesEle.children.length;l++)c(l);this.tab(0)}},{key:"toggle",value:function(){this.container.classList.contains("OwO-open")?this.container.classList.remove("OwO-open"):this.container.classList.add("OwO-open")}},{key:"tab",value:function(e){var t=this.container.getElementsByClassName("OwO-items-show")[0];t&&t.classList.remove("OwO-items-show"),this.container.getElementsByClassName("OwO-items")[e].classList.add("OwO-items-show");var a=this.container.getElementsByClassName("OwO-package-active")[0];a&&a.classList.remove("OwO-package-active"),this.packagesEle.getElementsByTagName("li")[e].classList.add("OwO-package-active")}}]),e}();"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=e:window.OwO=e}();
\ No newline at end of file diff --git a/includes/footer.php b/includes/footer.php index 82d527a..8017818 100644 --- a/includes/footer.php +++ b/includes/footer.php @@ -41,48 +41,22 @@ pres[i].className = 'line-numbers';} Prism.highlightAll(true,null);} $('form#login-form').addClass('need-refresh'); - var OwO_demo = new OwO({ - logo: 'OωO表情', - container: document.getElementsByClassName('OwO')[0], - target: document.getElementsByClassName('OwO-textarea')[0], - api: '<?php Utils::indexTheme('assets/OwO.json'); ?>', - 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: '<?php Utils::indexTheme('assets/OwO.json'); ?>',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: '<?php Utils::indexTheme('assets/OwO.json'); ?>', - position: 'down', - width: '400px', - maxHeight: '250px' - });</script> + 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: '<?php Utils::indexTheme('assets/OwO.json'); ?>',position: 'down',width: '400px',maxHeight: '250px'}); </script> <?php $this->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'])) { <?php $this->options->headerEcho(); ?> <!-- css --> <link rel="stylesheet" href="<?php Utils::indexTheme('assets/css/normalize.css'); ?>" /> - <link rel="stylesheet" href="<?php Utils::indexTheme('assets/css/miracles.min.css'); ?>" /> <link rel="stylesheet" href="<?php Utils::indexTheme('assets/css/nprogress.css'); ?>" /> <link rel="stylesheet" href="<?php Utils::indexTheme('assets/css/prism.css'); ?>" /> <link rel="stylesheet" href="<?php Utils::indexTheme('assets/css/owo.min.css'); ?>" /> <link rel="stylesheet" href="<?php Utils::indexTheme('assets/css/fancybox.css'); ?>" /> + <link rel="stylesheet" href="<?php Utils::indexTheme('assets/css/miracles.min.css'); ?>" /> <!-- icon font --> - <link rel="stylesheet" href="//at.alicdn.com/t/font_1165190_8emw6f3zka.css" /> + <link rel="stylesheet" href="//at.alicdn.com/t/font_1165190_hilot65sdef.css" /> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:300|Noto+Serif+SC:300&display=swap" rel="stylesheet"> 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 @@ <?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?> + <!-- 搜索 --> <div class="search ready"> <button class="search-close ready" onclick="Search()"><i class="iconfont icon-x"></i></button> <form method="post" action=""> @@ -8,6 +9,7 @@ </div> </form> </div> + <!-- 登录面板 --> <div class="login ready"> <button class="login-close ready" onclick="Login()"><i class="iconfont icon-x"></i></button> <?php if($this->user->hasLogin()): ?> @@ -26,7 +28,22 @@ </form> <?php endif; ?> </div> - <nav class="nav<?php if($this->options->nav_position && $this->options->nav_position=1): ?> nav-fixed<?php endif; ?>"> + <!-- 移动端导航面板 --> + <div class="mobile-menu ready"> + <button class="mobile-menu-close ready" onclick="toggleMobileMenu()"><i class="iconfont icon-x"></i></button> + <h2 class="mobile-menu-title">页面导航</h2> + <div class="mobile-menu-pagelist"><div class="container-fluid"><div class="row"> + <?php $this->widget('Widget_Contents_Page_List') + ->parse('<div class="col-6"><a href="{permalink}">{title}</a></div>'); ?> + </div></div></div> + <div class="mobile-menu-footer"> + <p>© <?php echo date('Y'); ?> <a href="<?php $this->options->SiteUrl(); ?>"><?php $this->options->title(); ?></a> | Theme <a href="https://github.com/BigCoke233/miracles">Miracles</a></p> + </div> + </div> + + <!-- 导航 --> + <!-- > 大屏幕导航 --> + <nav class="large-screen nav<?php if($this->options->nav_position && $this->options->nav_position=1): ?> nav-fixed<?php endif; ?>"> <div class="container"> <p class="nav-content"> <a href="<?php $this->options->SiteUrl(); ?>" class="nav-title"><?php $this->options->title(); ?></a> @@ -39,6 +56,16 @@ <button class="nav-icon-button login-button" onclick="Login()"><i class="iconfont icon-user"></i></button> </div> </nav> + <!--> 小屏幕导航 --> + <nav class="small-screen nav nav-mobile<?php if($this->options->nav_position && $this->options->nav_position=1): ?> nav-fixed<?php endif; ?>"> + <div class="nav-mobile-content"> + <a href="<?php $this->options->SiteUrl(); ?>" style="float:left"><i class="iconfont icon-xuanzhongshangcheng"></i></a> + <a onclick="Search()" style="float:left"><i class="iconfont icon-chaxun"></i></a> + <a onclick="Login()" style="float:left"><i class="iconfont icon-user"></i></a> + <a onclick="toggleMobileMenu()" style="float:right">MENU <i class="iconfont icon-list"></i></a> + </div> + </nav> + <div id="pjax-container"> <header> <?php if($this->is('post') || $this->is('page')): ?> @@ -1,6 +1,7 @@ <?php /** - * You're the miracles. + * You're the miracles. 你即是奇迹 + * 作者：<a href="https://guhub.cn">Eltrac</a> | 帮助文档：<a href="https://github.com/BigCoke233/miracles/wiki">GitHub Wiki</a> * * @package Miracles * @author Eltrac @@ -40,7 +41,7 @@ $this->need('includes/header.php'); <div class="post-item small-screen"> <div class="post-banner-box-ss"> <div class="post-banner-ss"> - <img src="<?php if($this->fields->banner && $this->fields->banner=!''): ?><?php echo $this->fields->banner(); ?><?php else: ?><?php Utils::indexTheme('images/postbg/'); ?><?php echo rand(1,rand(1,rand(1,10))); ?>.jpg<?php endif; ?>"> + <img src="/usr/themes/Miracles/images/loading.gif" data-original="<?php if($this->fields->banner && $this->fields->banner=!''): ?><?php echo $this->fields->banner(); ?><?php else: ?><?php Utils::indexTheme('images/postbg/'); ?><?php echo rand(1,rand(1,rand(1,10))); ?>.jpg<?php endif; ?>"> </div> </div> <div class="post-item-content-ss"> diff --git a/libs/Contents.php b/libs/Contents.php index c007d0a..fd2c8f1 100644 --- a/libs/Contents.php +++ b/libs/Contents.php @@ -20,7 +20,7 @@ class Contents //解析友链项目 $reg = '/\[(.*?)\]\{(.*?)\}\((.*?)\)/s'; - $rp = '<div class="col-md-2 col-xs-4 col-sm-3"> + $rp = '<div class="col-lg-2 col-4 col-md-3 links-container"> <a href="${2}" target="_blank" class="links-link"> <div class="links-item"> <div class="links-img" style="background:url(\'${3}\');width: 100%;padding-top: 100%;background-repeat: no-repeat;background-size: cover;"></div> diff --git a/screenshot.jpg b/screenshot.jpg Binary files differindex f0b690b..3e59867 100644 --- a/screenshot.jpg +++ b/screenshot.jpg |
