规范代码结构、优化样式、控制台输出版权信息

14 files changed, 2214 insertions, 25 deletions

diff --git a/assets/css/main/col.css b/assets/css/main/col.css
new file mode 100644
index 0000000..3859a2b
--- /dev/null
+++ b/assets/css/main/col.css
@@ -0,0 +1,8 @@
+@charset 'utf-8';

+/*

+ * The column

+ * Author:   Bootstrap

+ * Modifier: Eltrac

+ * License:  MIT

+ */

+.container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}.container-fluid{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{display:flex;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.no-gutters{margin-right:0;margin-left:0}.no-gutters>.col,.no-gutters>[class*=col-]{padding-right:0;padding-left:0}.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto{position:relative;width:100%;padding-right:15px;padding-left:15px}.col{flex-basis:0;flex-grow:1;max-width:100%}.col-auto{flex:0 0 auto;width:auto;max-width:100%}.col-1{flex:0 0 8.333333%;max-width:8.333333%}.col-2{flex:0 0 16.666667%;max-width:16.666667%}.col-3{flex:0 0 25%;max-width:25%}.col-4{flex:0 0 33.333333%;max-width:33.333333%}.col-5{flex:0 0 41.666667%;max-width:41.666667%}.col-6{flex:0 0 50%;max-width:50%}.col-7{flex:0 0 58.333333%;max-width:58.333333%}.col-8{flex:0 0 66.666667%;max-width:66.666667%}.col-9{flex:0 0 75%;max-width:75%}.col-10{flex:0 0 83.333333%;max-width:83.333333%}.col-11{flex:0 0 91.666667%;max-width:91.666667%}.col-12{flex:0 0 100%;max-width:100%}.order-first{order:-1}.order-last{order:13}.order-0{order:0}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.order-5{order:5}.order-6{order:6}.order-7{order:7}.order-8{order:8}.order-9{order:9}.order-10{order:10}.order-11{order:11}.order-12{order:12}.offset-1{margin-left:8.333333%}.offset-2{margin-left:16.666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.333333%}.offset-5{margin-left:41.666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.333333%}.offset-8{margin-left:66.666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.333333%}.offset-11{margin-left:91.666667%}@media (min-width:576px){.col-sm{flex-basis:0;flex-grow:1;max-width:100%}.col-sm-auto{flex:0 0 auto;width:auto;max-width:100%}.col-sm-1{flex:0 0 8.333333%;max-width:8.333333%}.col-sm-2{flex:0 0 16.666667%;max-width:16.666667%}.col-sm-3{flex:0 0 25%;max-width:25%}.col-sm-4{flex:0 0 33.333333%;max-width:33.333333%}.col-sm-5{flex:0 0 41.666667%;max-width:41.666667%}.col-sm-6{flex:0 0 50%;max-width:50%}.col-sm-7{flex:0 0 58.333333%;max-width:58.333333%}.col-sm-8{flex:0 0 66.666667%;max-width:66.666667%}.col-sm-9{flex:0 0 75%;max-width:75%}.col-sm-10{flex:0 0 83.333333%;max-width:83.333333%}.col-sm-11{flex:0 0 91.666667%;max-width:91.666667%}.col-sm-12{flex:0 0 100%;max-width:100%}.order-sm-first{order:-1}.order-sm-last{order:13}.order-sm-0{order:0}.order-sm-1{order:1}.order-sm-2{order:2}.order-sm-3{order:3}.order-sm-4{order:4}.order-sm-5{order:5}.order-sm-6{order:6}.order-sm-7{order:7}.order-sm-8{order:8}.order-sm-9{order:9}.order-sm-10{order:10}.order-sm-11{order:11}.order-sm-12{order:12}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.333333%}.offset-sm-2{margin-left:16.666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.333333%}.offset-sm-5{margin-left:41.666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.333333%}.offset-sm-8{margin-left:66.666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.333333%}.offset-sm-11{margin-left:91.666667%}}@media (min-width:768px){.col-md{flex-basis:0;flex-grow:1;max-width:100%}.col-md-auto{flex:0 0 auto;width:auto;max-width:100%}.col-md-1{flex:0 0 8.333333%;max-width:8.333333%}.col-md-2{flex:0 0 16.666667%;max-width:16.666667%}.col-md-3{flex:0 0 25%;max-width:25%}.col-md-4{flex:0 0 33.333333%;max-width:33.333333%}.col-md-5{flex:0 0 41.666667%;max-width:41.666667%}.col-md-6{flex:0 0 50%;max-width:50%}.col-md-7{flex:0 0 58.333333%;max-width:58.333333%}.col-md-8{flex:0 0 66.666667%;max-width:66.666667%}.col-md-9{flex:0 0 75%;max-width:75%}.col-md-10{flex:0 0 83.333333%;max-width:83.333333%}.col-md-11{flex:0 0 91.666667%;max-width:91.666667%}.col-md-12{flex:0 0 100%;max-width:100%}.order-md-first{order:-1}.order-md-last{order:13}.order-md-0{order:0}.order-md-1{order:1}.order-md-2{order:2}.order-md-3{order:3}.order-md-4{order:4}.order-md-5{order:5}.order-md-6{order:6}.order-md-7{order:7}.order-md-8{order:8}.order-md-9{order:9}.order-md-10{order:10}.order-md-11{order:11}.order-md-12{order:12}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.333333%}.offset-md-2{margin-left:16.666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.333333%}.offset-md-5{margin-left:41.666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.333333%}.offset-md-8{margin-left:66.666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.333333%}.offset-md-11{margin-left:91.666667%}}@media (min-width:992px){.col-lg{flex-basis:0;flex-grow:1;max-width:100%}.col-lg-auto{flex:0 0 auto;width:auto;max-width:100%}.col-lg-1{flex:0 0 8.333333%;max-width:8.333333%}.col-lg-2{flex:0 0 16.666667%;max-width:16.666667%}.col-lg-3{flex:0 0 25%;max-width:25%}.col-lg-4{flex:0 0 33.333333%;max-width:33.333333%}.col-lg-5{flex:0 0 41.666667%;max-width:41.666667%}.col-lg-6{flex:0 0 50%;max-width:50%}.col-lg-7{flex:0 0 58.333333%;max-width:58.333333%}.col-lg-8{flex:0 0 66.666667%;max-width:66.666667%}.col-lg-9{flex:0 0 75%;max-width:75%}.col-lg-10{flex:0 0 83.333333%;max-width:83.333333%}.col-lg-11{flex:0 0 91.666667%;max-width:91.666667%}.col-lg-12{flex:0 0 100%;max-width:100%}.order-lg-first{order:-1}.order-lg-last{order:13}.order-lg-0{order:0}.order-lg-1{order:1}.order-lg-2{order:2}.order-lg-3{order:3}.order-lg-4{order:4}.order-lg-5{order:5}.order-lg-6{order:6}.order-lg-7{order:7}.order-lg-8{order:8}.order-lg-9{order:9}.order-lg-10{order:10}.order-lg-11{order:11}.order-lg-12{order:12}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.333333%}.offset-lg-2{margin-left:16.666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.333333%}.offset-lg-5{margin-left:41.666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.333333%}.offset-lg-8{margin-left:66.666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.333333%}.offset-lg-11{margin-left:91.666667%}}@media (min-width:1200px){.col-xl{flex-basis:0;flex-grow:1;max-width:100%}.col-xl-auto{flex:0 0 auto;width:auto;max-width:100%}.col-xl-1{flex:0 0 8.333333%;max-width:8.333333%}.col-xl-2{flex:0 0 16.666667%;max-width:16.666667%}.col-xl-3{flex:0 0 25%;max-width:25%}.col-xl-4{flex:0 0 33.333333%;max-width:33.333333%}.col-xl-5{flex:0 0 41.666667%;max-width:41.666667%}.col-xl-6{flex:0 0 50%;max-width:50%}.col-xl-7{flex:0 0 58.333333%;max-width:58.333333%}.col-xl-8{flex:0 0 66.666667%;max-width:66.666667%}.col-xl-9{flex:0 0 75%;max-width:75%}.col-xl-10{flex:0 0 83.333333%;max-width:83.333333%}.col-xl-11{flex:0 0 91.666667%;max-width:91.666667%}.col-xl-12{flex:0 0 100%;max-width:100%}.order-xl-first{order:-1}.order-xl-last{order:13}.order-xl-0{order:0}.order-xl-1{order:1}.order-xl-2{order:2}.order-xl-3{order:3}.order-xl-4{order:4}.order-xl-5{order:5}.order-xl-6{order:6}.order-xl-7{order:7}.order-xl-8{order:8}.order-xl-9{order:9}.order-xl-10{order:10}.order-xl-11{order:11}.order-xl-12{order:12}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.333333%}.offset-xl-2{margin-left:16.666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.333333%}.offset-xl-5{margin-left:41.666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.333333%}.offset-xl-8{margin-left:66.666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.333333%}.offset-xl-11{margin-left:91.666667%}}.main-container{margin:0 auto}@media (min-width:576px){.main-container{max-width:540px}}@media (min-width:768px){.main-container{max-width:720px}}@media (min-width:992px){.main-container{max-width:920px}}@media (min-width:1200px){.main-container{max-width:1000px}}
\ No newline at end of file
diff --git a/assets/css/main/comment.css b/assets/css/main/comment.css
new file mode 100644
index 0000000..e2a66de
--- /dev/null
+++ b/assets/css/main/comment.css
@@ -0,0 +1,240 @@
+@charset 'utf-8';

+/*

+ * Style of comments

+ * Author:  Eltrac

+ * License: MIT

+ */

+/* 评论 */

+.comment-title {

+	text-align: center;

+	margin: 50px 0;

+	font-size: 26px

+}

+.comment-list,.comment-list li {

+	list-style-type: none

+}

+.comment-list {

+	margin-left: 0;

+}

+.comment-children {

+	margin-left: 20px;

+}

+.comment-children .comment-list {

+	margin: 0;

+}

+.comment-children .comment-body {

+	margin: 15px 0;

+	padding: 0;

+}

+.comment-body {

+	margin: 28px 0;

+	padding: 0;

+	position: relative

+}

+.comment-main,

+.comment-author-avatar {

+	margin: 0;

+	padding: 0;

+}

+.comment-author-avatar img {

+	border-radius: 10000px;

+	height: 50px;

+	width: 50px

+}

+.comment-author-info h4,.comment-author-info p {

+	margin: 0

+}

+.comment-author-info h4 {

+	font-size: 18px

+}

+.comment-author-info h4 a {

+	color: var(--theme-color)

+}

+.comment-author-info p {

+	margin-top: 5px;

+	color: gray;

+	font-size: 15px

+}

+.comment-content p {

+	color: #000;

+	font-size: 16px;

+	word-break: break-all;

+	vertical-align: center;

+	padding: 10px 16px;

+}

+.comment-content img {

+	max-width: 100%

+}

+.comment-meta {

+	font-size: 17px;

+}

+.comment-author {

+	font-size: 0.8em;

+	background: rgb(240,240,240);

+	border-radius: 3px;

+	padding: 2px 3px;

+	letter-spacing: 2px;

+	transition: all 0.2s;

+}

+.comment-author:hover {

+	background: rgb(235,235,235);

+}

+.bubble.comment-content {

+	background: rgb(238,238,238);

+	padding: 3px 8px;

+	padding-right: 12px;

+	padding-top: -3px;

+	border-radius: 4px;

+	min-width: 10px!important;

+}

+.bubble.comment-content:before {

+    border-right-color: rgb(238,238,238);

+}

+.bubble.comment-content:hover {

+	transform: none;

+	box-shadow: 0 0 0 #fff;

+	-moz-box-shadow: 0 0 0 #fff;

+	-webkit-box-shadow: 0 0 0 #fff;

+}

+.comment-by-author > .container-fluid > .row > .comment-main > .bubble.comment-content {

+	background: var(--theme-color)

+}

+.comment-by-author > .container-fluid > .row > .comment-main > .bubble.comment-content p {

+	color: #fff!important;

+}

+.comment-by-author > .container-fluid > .row > .comment-main > .bubble.comment-content:before {

+	border-right-color: var(--theme-color)

+}

+.comment-by-author > .container-fluid > .row > .comment-main > .bubble.comment-content > .comment-reply a {

+	color:#fff!important;

+}

+.comment-reply a {

+	position: absolute;

+	top: 5px;

+	right: 4px;

+	display: inline-block;

+	font-size: 90%;

+	border-radius: 2px;

+	padding: 3px 4px;

+	transition: color 0.2s;

+	color: rgb(120,120,120);

+}

+.comment-reply a:hover {

+	color: rgb(150,150,150)

+}

+.comment-submit button {

+	display: block;

+	margin: 10px 0;

+	border-radius: 6px;

+	border: none;

+	background: linear-gradient(to right,#00f,var(--theme-color));

+	color: #fff;

+	padding: 16px 10px;

+	width: 100%;

+	cursor: pointer;

+	transition: opacity .2s;

+	margin-top: -14px

+}

+.comment-submit button:hover {

+	opacity: .9

+}

+.comment-input input,.comment-textarea {

+	display: block;

+	resize: none;

+	border: 2px solid #ddd;

+	border-radius: 5px;

+	width: 100%;

+	padding: 14px;

+	outline: none;

+}

+.comment-input {

+	margin-top: -10px;

+    margin-bottom: -20px;

+}

+#comment-form label {

+	display: none

+}

+.comment-closed-alert {

+	text-align: center;

+}

+.comment-pagenav {

+	margin-left: -20px;

+}

+.comment-pagenav li {

+	list-style-type: none;

+	display: inline-block;

+}

+.comment-pagenav li a {

+	background: #fff;

+	padding: 5px 13px;

+	margin-right: 5px;

+	box-shadow: 0 1px 4px #ccc;

+	-moz-box-shadow: 0 1px 4px #ccc;

+	-webkit-box-shadow: 0 1px 4px #ccc;

+	transition: all .2s;

+}

+.comment-pagenav li a:hover {

+	background: rgb(249,249,249);

+	box-shadow: 0 1px 8px #ccc;

+	-moz-box-shadow: 0 1px 8px #ccc;

+	-webkit-box-shadow: 0 1px 8px #ccc;

+}

+.comment-pagenav-icon {

+	margin: 0 -3px;

+}

+

+/* OwO */

+.owo-img {

+	height: 34px;

+	vertical-align: middle;

+	margin: 0 3px;

+}

+.OwO {

+	margin-left: 15px;

+	margin-top: 0;

+}

+.owo-para {

+	margin-top: 0;

+}

+/* 说说动态 */

+.saying-form {

+	margin-bottom: 20px;

+}

+.saying-OwO {

+	float: left;

+	margin-left: 0

+}

+.saying-submit {

+	float: right;

+	background: var(--theme-color);

+	border-radius: 5px;

+	color: white;

+	padding: 10px 20px;

+	border: none;

+	font-size: 15px;

+	cursor: pointer;

+}

+.saying-content p {

+	padding: 10px 20px;

+}

+.saying-content a {

+	color: white;

+}

+.saying-author,

+.saying-meta,

+.saying-author a {

+	position: absolute;

+	color: rgb(250,250,250)!important;

+	font-size: 12px;

+}

+.saying-meta {

+	bottom: 3px;

+	right: 10px;

+}

+.saying-author {

+	top: 3px;

+	left: 20px;

+}

+.saying-meta i {

+	font-size: 12px;

+}
\ No newline at end of file
diff --git a/assets/css/main/component.css b/assets/css/main/component.css
new file mode 100644
index 0000000..90eea7d
--- /dev/null
+++ b/assets/css/main/component.css
@@ -0,0 +1,139 @@
+@charset 'utf-8';

+/*

+ * Style of some component

+ * Author:  Eltrac

+ * License: MIT

+ */

+/* Button */

+button {

+	outline: none;

+	cursor: pointer

+}

+.button {

+	border: 3px solid #ccc;

+	border-radius: 30px;

+	padding: 8px 12px;

+	transition: all .2s;

+}

+.button:hover {

+	border-color: #000;

+	background: #000;

+	color: #fff

+}

+.button-sm {

+	padding: 3px 5px;

+}

+.button-md {

+	border: none;

+	border-radius: 3px;

+}

+.button-md:hover {

+	background: rgb(235,235,235);

+	color: #fff;

+}

+/* Alert */

+.alert {

+	background: var(--theme-color);

+	color: #fff;

+	border-bottom-left-radius: 4px;

+	border-bottom-right-radius: 4px;

+	padding: 10px 18px;

+	position: fixed;

+	top: 0;

+	left: 0;

+	right: 0;

+	width: 100%;

+	margin: 0 auto;

+	box-shadow: 0 0 4px #ccc;

+	-moz-box-shadow: 0 0 4px #ccc;

+	-webkit-box-shadow: 0 0 4px #ccc;

+	z-index: 20;

+	transition: all 0.3s;

+}

+.alert.ready {

+	top: -200px;

+}

+.alert-close {

+	border: none;

+	background: rgb(0,0,0,0);

+	transform: scale(0.8);

+	color: #fff;

+	float: right;

+	margin-top: -36px;

+}

+/* Mask */

+.mask {

+	position: fixed;

+	top: 0;

+	bottom: 0;

+	left: 0;

+	right: 0;

+	background: rgb(70,70,70,0);

+	z-index: -100;

+	transition: background 0.4s;

+}

+.mask-open {

+	background: rgb(70,70,70,0.7);

+	z-index: 25;

+}

+/* Fixed Buttons */

+.fixed-button {

+	background: #fdfdfd;

+	font-size: 16px;

+	height: 40px;

+	width: 40px;

+	display: flex;

+	justify-content:center;

+	align-items:center;

+	border: none;

+	border-radius: 10000px;

+	box-shadow: 0 1px 5px #bababa;

+	-webkit-box-shadow: 0 1px 5px #bababa;

+	-moz-box-shadow: 0 1px 5px #bababa;

+	position: fixed;

+	cursor: pointer;

+	outline: 0;

+	right: 6px;

+	transition: all 0.3s;

+}

+.fixed-button:hover {

+	box-shadow: 0 3px 25px #bababa;

+	-webkit-box-shadow: 0 3px 25px #bababa;

+	-moz-box-shadow: 0 3px 25px #bababa;

+	background: rgb(248,248,248)!important;

+}

+.gotop-button {

+	bottom: 8px;

+	background: #fff!important;

+	color: rgb(80,80,80)!important;

+	opacity: 1;

+}

+.gotop-button.invisible {

+	opacity: 0;

+}

+/* Bubble */

+.bubble {

+    position: relative;

+    background: var(--theme-color);

+	border-radius: 2px;

+	padding: 0;

+	color: white;

+	display: inline-block;

+	min-width: 180px;

+	transition: all 0.3s;

+}

+.bubble:before{

+    position: absolute;

+    content: "";

+    width: 0;

+    height: 0;

+    right: 100%;

+    top: 8px;

+    border-top: 8px solid transparent;

+    border-right: 16px solid var(--theme-color);

+    border-bottom: 8px solid transparent;

+}

+.bubble:hover {

+	transform: translateY(-6px);

+	box-shadow: 2px 8px 17px #bababa;

+}
\ No newline at end of file
diff --git a/assets/css/main/dark.css b/assets/css/main/dark.css
new file mode 100644
index 0000000..95927d5
--- /dev/null
+++ b/assets/css/main/dark.css
@@ -0,0 +1,283 @@
+@charset 'utf-8';

+

+/*

+ * Dark theme for Miracles

+ * Author:  Eltrac

+ * License: MIT

+ */

+

+.body-dark {

+	background:#4b4b4b;

+	color:#fafafa

+}

+

+/**

+ *  Special

+ */

+

+/* Post Content */

+.body-dark .post-content code {

+	background:#505050

+}

+.body-dark .post-content img:not(.OwO-img) {

+	box-shadow:0 2px 10px #323232;

+	-moz-box-shadow:0 2px 10px #323232;

+	-webkit-box-shadow:0 2px 10px #323232

+}

+.body-dark .post-content tr:nth-child(odd) {

+	background:#6e6e6e

+}

+.body-dark .post-content hr {

+	background:#787878

+}

+/* Pio Plugin */

+.body-dark .pio-container .pio-dialog {

+	color:#fff;

+	box-shadow:1px 1px 15px #505050;

+	-webkit-box-shadow:1px 1px 15px #505050;

+	-moz-box-shadow:1px 1px 15px #505050;

+	background:rgba(90,90,90,.9)

+}

+.body-dark .pio-action span {

+	background-color:rgba(90,90,90,.9)

+}

+/* Aplayer */

+.body-dark .aplayer,

+.body-dark .aplayer .aplayer-author,

+.body-dark .aplayer .aplayer-controller,

+.body-dark .aplayer .aplayer-icon,

+.body-dark .aplayer .aplayer-info,

+.body-dark .aplayer .aplayer-lrc-contents p,

+.body-dark .aplayer-list-author,

+.body-dark .aplayer-list-index {

+	color:#f0f0f0!important

+}

+.body-dark .aplayer {

+	background:#646464

+}

+.body-dark .aplayer .aplayer-list ol li:hover,

+.body-dark .aplayer-list-light {

+	background:#8c8c8c!important

+}

+.body-dark .aplayer .aplayer-lrc:after,

+.body-dark .aplayer .aplayer-lrc:before {

+	background:0 0;

+	background:0 0;

+	filter:none

+}

+.body-dark .aplayer .aplayer-list ol li {

+	border-color:#787878

+}

+.body-dark .aplayer-list::-webkit-scrollbar {

+	background:#6e6e6e!important

+}

+.body-dark .aplayer-list::-webkit-scrollbar-thumb {

+	background:#505050

+}

+.body-dark .aplayer-info {

+	border:none

+}

+/* Nav/Search/login */

+.body-dark .nav {

+	background:rgba(50,50,50,.9)!important;

+	box-shadow:0 0 20px #000;

+	-webkit-box-shadow:0 0 20px #000;

+	-moz-box-shadow:0 0 30px #000

+}

+.body-dark .mobile-menu-pagelist a:hover,

+.body-dark .nav a:hover,

+.body-dark .nav-mobile-title:hover {

+	background:#646464

+}

+.body-dark .nav-icon-button {

+	background:#5a5a5a

+}

+.body-dark .nav-icon-button {

+	color:#fff

+}

+.body-dark .nav-icon-button:hover,

+.body-dark .search-close {

+	background:#5a5a5a

+}

+.body-dark .login,

+.body-dark .mobile-menu,

+.body-dark .search {

+	background:rgba(90,90,90,.95)

+}

+/* Others */

+.body-dark .post-meta a {

+	color: gray!important

+}

+.body-dark .comment-reply a {

+	background: 0 0

+}

+.body-dark .footer-info {

+	background:#3c3c3c!important

+}

+

+/**

+ *  Normal

+ */

+/* Need shadow */

+.body-dark .options {

+	box-shadow:0 0 0 #fff;

+	-moz-box-shadow:0 0 0 #fff;

+	-webkit-box-shadow:0 0 0 #fff

+}

+.body-dark .OwO .OwO-body .OwO-items .OwO-item:hover,

+.body-dark .OwO-body,.body-dark .OwO-open .OwO-logo,

+.body-dark .bubble.saying-body:hover,

+.body-dark .comment-pagenav a,

+.body-dark .dark-button,

+.body-dark .options,

+.body-dark .post-body,

+.body-dark .post-item,

+.body-dark .post-pagenav a {

+	box-shadow:0 0 36px #323232;

+	-moz-box-shadow:0 0 36px #323232;

+	-webkit-box-shadow:0 0 36px #323232

+}

+.body-dark .gotop-button,

+.body-dark .links-item,

+.body-dark .alert {

+	box-shadow:0 1px 3px #323232;

+	-moz-box-shadow:0 1px 3px #323232;

+	-webkit-box-shadow:0 1px 3px #323232

+}

+.body-dark .gotop-button:hover,

+.body-dark .links-item:hover {

+	box-shadow:0 4px 22px #323232;

+	-moz-box-shadow:0 4px 22px #323232;

+	-webkit-box-shadow:0 4px 22px #323232;

+}

+/* No Shadow */

+.body-dark .options-with-drawer {

+	box-shadow: 0 0 0 #fff;

+	-moz-box-shadow: 0 0 0 #fff;

+	-webkit-box-shadow: 0 0 0 #fff;

+}

+/* Need #646464 bg */

+.body-dark .archives-list a:hover,

+.body-dark .bubble.comment-content,

+.body-dark .bubble.saying-body,

+.body-dark .comment-author,

+.body-dark .comment-by-author .bubble.comment-content,

+.body-dark .comment-pagenav a,

+.body-dark .comment-submit button,

+.body-dark .drawer-content a:hover,

+.body-dark .drawer-footer,

+.body-dark .drawer-header,

+.body-dark .options-button-active,

+.body-dark .tags-item a,

+.body-dark .about-social a:hover {

+	background: #646464!important

+}

+/* Need #5a5a5a bg */

+.body-dark .OwO-body,

+.body-dark .OwO-logo,

+.body-dark .OwO-package-active,

+.body-dark .OwO-packages li:hover,

+.body-dark .comment-form input,

+.body-dark .comment-form textarea,

+.body-dark .comment-reply a:hover,

+.body-dark .dark-button,.body-dark .dialog,

+.body-dark .drawer,

+.body-dark .drawer-icon,

+.body-dark .gotop-button,.body-dark .links-item,

+.body-dark .options,

+.body-dark .options-family-button,

+.body-dark .options-theme-label,

+.body-dark .post-body,

+.body-dark .post-content th,

+.body-dark .post-item,

+.body-dark .post-pagenav a,

+.body-dark .saying-textarea,

+.body-dark .search-form input {

+	background:#5a5a5a!important

+}

+/* Need #6e6e6e bg */

+.body-dark .OwO-bar,

+.body-dark .OwO-item {

+	background:#6e6e6e!important

+}

+/* Need white fonts */

+.body-dark .OwO-bar,

+.body-dark .OwO-logo,

+.body-dark .comment,

+.body-dark .comment a,

+.body-dark .comment-content p,

+.body-dark .comment-form input,

+.body-dark .comment-form textarea,

+.body-dark .dark-button,

+.body-dark .drawer,

+.body-dark .drawer a,

+.body-dark .drawer-icon,

+.body-dark .drawer-open .drawer-button,

+.body-dark .footer-info,

+.body-dark .footer-info a,

+.body-dark .gotop-button,

+.body-dark .login,

+.body-dark .login-close,

+.body-dark .mobile-menu,

+.body-dark .mobile-menu a,

+.body-dark .mobile-menu-close,

+.body-dark .mobile-menu-footer,

+.body-dark .nav,

+.body-dark .nav a,

+.body-dark .options-contentsize-button,

+.body-dark .options-family-button,

+.body-dark .options-theme-item:hover .options-theme-label,

+.body-dark .post-body,

+.body-dark .post-body a,

+.body-dark .post-content blockquote,

+.body-dark .post-item,

+.body-dark .post-item a,

+.body-dark .search-close,

+.body-dark .search-form button,

+.body-darl .login a,

+.body-dark .alert {

+	color:#fafafa!important

+}

+.body-dark .options-theme-label {

+	color:#5a5a5a!important

+}

+/* Need border color */

+.body-dark .OwO-body,

+.body-dark .OwO-logo,

+.body-dark .comment-form input,

+.body-dark .comment-form textarea,

+.body-dark .drawer,

+.body-dark .mobile-menu-footer,

+.body-dark .mobile-menu-title,

+.body-dark .options hr,

+.body-dark .post-content blockquote,

+.body-dark .post-content table,

+.body-dark .post-content td,

+.body-dark .post-content th,

+.body-dark .post-content tr,

+.body-dark .saying-textarea {

+	border-color:#6e6e6e!important

+}

+.body-dark .tip {

+	border-top-color:#6e6e6e!important;

+	border-bottom-color:#6e6e6e!important;

+	border-right-color:#6e6e6e!important

+}

+.body-dark .bubble.comment-content:before,

+.body-dark .bubble.saying-body:before,

+.body-dark .comment-by-author .bubble.comment-content:before {

+	border-right-color:#646464!important

+}

+/* Need darker mask */

+.body-dark .banner-mask {

+	background:rgba(10,10,10,.4)

+}

+/* Need filter */

+.body-dark img {

+	filter:brightness(88%)

+}

+.body-dark .aplayer-pic,

+.body-dark .post-banner,

+.body-dark iframe {

+	filter:brightness(72%)

+}

diff --git a/assets/css/main/element.css b/assets/css/main/element.css
new file mode 100644
index 0000000..600e4a4
--- /dev/null
+++ b/assets/css/main/element.css
@@ -0,0 +1,182 @@
+@charset 'utf-8';

+/*

+ * Style of all elements

+ * Author:  Eltrac

+ * Used-by: Normalize

+ * License: MIT

+ */

+/* Normalize */

+html {

+  line-height: 1.15; /* 1 */

+  -webkit-text-size-adjust: 100%; /* 2 */

+}

+body {

+  margin: 0;

+}

+main {

+  display: block;

+}

+h1 {

+  font-size: 2em;

+  margin: 0.67em 0;

+}

+hr {

+  box-sizing: content-box; /* 1 */

+  height: 0; /* 1 */

+  overflow: visible; /* 2 */

+}

+pre {

+  font-family: monospace, monospace; /* 1 */

+  font-size: 1em; /* 2 */

+}

+a {

+  background-color: transparent;

+}

+abbr[title] {

+  border-bottom: none; /* 1 */

+  text-decoration: underline; /* 2 */

+  text-decoration: underline dotted; /* 2 */

+}

+b,

+strong {

+  font-weight: bolder;

+}

+code,

+kbd,

+samp {

+  font-family: monospace, monospace; /* 1 */

+  font-size: 1em; /* 2 */

+}

+small {

+  font-size: 80%;

+}

+sub,

+sup {

+  font-size: 75%;

+  line-height: 0;

+  position: relative;

+  vertical-align: baseline;

+}

+sub {

+  bottom: -0.25em;

+}

+sup {

+  top: -0.5em;

+}

+img {

+  border-style: none;

+}

+button,

+input,

+optgroup,

+select,

+textarea {

+  font-family: inherit; /* 1 */

+  font-size: 100%; /* 1 */

+  line-height: 1.15; /* 1 */

+  margin: 0; /* 2 */

+}

+button,

+input { /* 1 */

+  overflow: visible;

+}

+button,

+select { /* 1 */

+  text-transform: none;

+}

+button,

+[type="button"],

+[type="reset"],

+[type="submit"] {

+  -webkit-appearance: button;

+}

+button::-moz-focus-inner,

+[type="button"]::-moz-focus-inner,

+[type="reset"]::-moz-focus-inner,

+[type="submit"]::-moz-focus-inner {

+  border-style: none;

+  padding: 0;

+}

+button:-moz-focusring,

+[type="button"]:-moz-focusring,

+[type="reset"]:-moz-focusring,

+[type="submit"]:-moz-focusring {

+  outline: 1px dotted ButtonText;

+}

+fieldset {

+  padding: 0.35em 0.75em 0.625em;

+}

+legend {

+  box-sizing: border-box; /* 1 */

+  color: inherit; /* 2 */

+  display: table; /* 1 */

+  max-width: 100%; /* 1 */

+  padding: 0; /* 3 */

+  white-space: normal; /* 1 */

+}

+progress {

+  vertical-align: baseline;

+}

+textarea {

+  overflow: auto;

+}

+[type="checkbox"],

+[type="radio"] {

+  box-sizing: border-box; /* 1 */

+  padding: 0; /* 2 */

+}

+[type="number"]::-webkit-inner-spin-button,

+[type="number"]::-webkit-outer-spin-button {

+  height: auto;

+}

+[type="search"] {

+  -webkit-appearance: textfield; /* 1 */

+  outline-offset: -2px; /* 2 */

+}

+[type="search"]::-webkit-search-decoration {

+  -webkit-appearance: none;

+}

+::-webkit-file-upload-button {

+  -webkit-appearance: button; /* 1 */

+  font: inherit; /* 2 */

+}

+details {

+  display: block;

+}

+summary {

+  display: list-item;

+}

+template {

+  display: none;

+}

+[hidden] {

+  display: none;

+}

+/* Elements */

+* {

+	box-sizing: border-box

+}

+a {

+	text-decoration: none;

+	color: #000

+}

+html {

+	font-size: 16px;

+}

+body,html {

+	padding: 0;

+	margin: 0;

+	background: #fafafa;

+	overflow: auto;

+	transition: background 0.2s;

+	width: 100%;

+}

+body {

+	font-family: 'Noto Sans SC',sans-serif;

+	transition: all 0.3s;

+}

+hr {

+	border: none;

+	border-bottom: 1px solid #ccc;

+	margin: 10px 0

+}

diff --git a/assets/css/main/miracles.min.css b/assets/css/main/miracles.min.css
new file mode 100644
index 0000000..ce71045
--- /dev/null
+++ b/assets/css/main/miracles.min.css
@@ -0,0 +1,398 @@
+@charset 'utf-8';

+

+/*

+ * Themain CSS file for Miracles

+ * Author:  Eltrac

+ * License: MIT

+ */

+ 

+@import url("col.css");

+@import url("element.css");

+@import url("component.css");

+@import url("nav.css");

+@import url("post.css");

+@import url("page.css");

+@import url("comment.css");

+@import url("special.css");

+@import url("themes.css");

+

+/* Varriable */

+:root {

+	--theme-color: #4D90FE;

+}

+

+/* ScrollBar */

+::-webkit-scrollbar {

+	width: 9px;

+	height: 5px

+}

+::-webkit-scrollbar-button {

+	display: none

+}

+::-webkit-scrollbar-thumb {

+	background: rgb(150,150,150);

+	border-radius: 3px

+}

+::-webkit-scrollbar-thumb:hover {

+	background: gray

+}

+/* Selection */

+::-moz-selection,

+::-webkit-selection,

+::selection {

+	background-color: var(--theme-color)

+}

+/* Responsive Web design */

+.large-screen {

+	display: none

+}

+.small-screen {

+	display: block

+}

+/* Mobile phone */

+@media (max-width:320) {

+	.drawer {

+		width: 100vw;

+	}

+}

+/* > Pad and up */

+@media (min-width:768px) {

+	.alert {

+		min-width: 300px;

+	    max-width: 700px

+	}

+	.drawer-avatar img {

+		height: 160px;

+		width: 160px;

+	}

+	.drawer {

+		width: 360px;

+	    left: -400px;

+	}

+	.drawer-content a {

+		font-size: 19px;

+	    padding: 11px 0;

+	}

+	.drawer-main {

+		height: 87vh;

+	}

+	.drawer-footer {

+		height: 68px;

+	}

+	.drawer-header {

+		height: 220px;

+	}

+	.fixed-button {

+		height: 60px;

+		width: 60px;

+	}

+	

+	.options {

+	    width: 300px!important;

+		left: auto!important;

+		top: 90px;

+		right: 10px;

+    }

+

+    .options:before {

+    	border-right: 8px solid transparent;

+        border-top: 16px solid rgb(254,254,254,0.96);

+        border-left: 8px solid transparent;

+        position: absolute;

+        top: 80px;

+        right: 40px;

+    }

+

+	.comment-content p {

+		font-size: 18px;

+	}

+	

+	.nav-content a {

+		font-size: 19px;

+		padding: 27.5px 8px

+	}

+

+	.index-banner {

+		text-align: left

+	}

+

+	.banner-content h1 {

+		font-size: 40px

+	}

+

+	.index-content {

+		margin: 10px 80px

+	}

+

+	.post-title {

+		margin: 16px 0;

+		margin-bottom: 10px

+	}

+

+	.post-excerpt {

+		height: 56px

+	}

+

+	.large-screen {

+		display: block

+	}

+

+	.small-screen {

+		display: none

+	}

+

+	.post-content {

+		padding: 36px;

+		font-size: 18px;

+		line-height: 26px;

+		letter-spacing: 2px

+	}

+

+	.fixed-button {

+		padding: 15px 20px;

+		right: 28px

+	}

+

+	.gotop-button {

+		bottom: 20px

+	}

+

+	.options-button {

+		bottom: 90px

+	}

+

+	.pio-container {

+		display: block

+	}

+

+	iframe[src*="//player.bilibili.com/player.html"] {

+		height: 390px

+	}

+	.search-form input,

+    .login-form input,

+    .login-form button	{

+		width: 350px;

+	}

+	.post-list,

+    .post-body {

+	    margin-top: -130px

+    }

+	.links-container {

+	    padding: 10px;

+    }

+}

+/* Desktop and up */

+@media (min-width:992px) {

+	.drawer-content a {

+		font-size: 21px;

+	    padding: 14px 0;

+	}

+	.drawer-avatar img {

+		height: 180px;

+		width: 180px;

+	}

+	.drawer-header {

+		height: 240px;

+	}

+

+	.comment-content p {

+		font-size: 19px;

+	}

+	

+	.nav-content a {

+		font-size: 20px;

+		padding: 28px 8px

+	}

+

+	.index-banner {

+		text-align: left

+	}

+

+	.banner-content h1 {

+		font-size: 50px

+	}

+

+	.index-content {

+		margin: 10px 80px

+	}

+

+	.comment-children,.comment-children li,.comment-children li>li {

+		margin: 5px -40px

+	}

+

+	.post-title {

+		margin: 30px 0;

+		margin-bottom: 25px

+	}

+

+	.post-excerpt {

+		height: 65px

+	}

+

+	.large-screen {

+		display: block

+	}

+

+	.small-screen {

+		display: none

+	}

+

+	.post-content {

+		padding: 48px;

+		font-size: 18px;

+		line-height: 28px;

+		letter-spacing: 2px

+	}

+

+	.fixed-button {

+		padding: 18px 23px;

+		right: 38px

+	}

+

+	.gotop-button {

+		bottom: 40px

+	}

+

+	.options-button {

+		bottom: 120px

+	}

+

+	.pio-container {

+		display: block

+	}

+

+	iframe[src*="//player.bilibili.com/player.html"] {

+		height: 480px

+	}

+	

+	.search-form input,

+    .login-form input,

+    .login-form button	{

+		width: 400px;

+	}

+	.post-list,

+    .post-body {

+	    margin-top: -134px

+    }

+	.links-container {

+	    padding: 12px;

+    }

+	#live2dcanvas {

+		display: block!important;

+		transform: scale(0.8)!important;

+		z-index: 0!important

+	}

+}

+/* Computer screen and up */

+@media (min-width:1200px) {

+	.drawer-header {

+		height: 250px;

+	}

+	.drawer-footer {

+		height: 65px;

+		position: absolute;

+		bottom: 0;

+		left: 0;

+		right: 0;

+	}

+	.drawer-avatar img {

+		height: 190px;

+		width: 190px;

+	}

+	.comment-content p {

+		font-size: 21px;

+	}

+	

+	.nav-content a {

+		font-size: 20px;

+		padding: 28px 8px

+	}

+

+	.index-banner {

+		text-align: left

+	}

+

+	.banner-content h1 {

+		font-size: 50px

+	}

+

+	.index-content {

+		margin: 10px 100px

+	}

+

+	.comment-children,.comment-children li,.comment-children li>li {

+		margin: 15px -35px

+	}

+

+	.post-title {

+		margin: 30px 0;

+		margin-bottom: 25px

+	}

+

+	.post-excerpt {

+		height: 72px

+	}

+

+	.large-screen {

+		display: block

+	}

+

+	.small-screen {

+		display: none

+	}

+

+	.post-content {

+		padding: 50px;

+		font-size: 20px;

+		line-height: 30px;

+		letter-spacing: 2px

+	}

+	.fixed-button {

+		padding: 18px 23px;

+		right: 38px

+	}

+

+	.gotop-button {

+		bottom: 40px

+	}

+

+	.options-button {

+		bottom: 120px

+	}

+

+	.pio-container {

+		display: block

+	}

+

+	iframe[src*="//player.bilibili.com/player.html"] {

+		height: 550px

+	}

+	.search-form input,

+    .login-form input,

+    .login-form button	{

+		width: 550px;

+	}

+	.post-list,

+    .post-body {

+	    margin-top: -140px

+    }

+	.links-container {

+	    padding: 15px;

+    }

+	#live2dcanvas {

+		transform: scale(1);

+	}

+}

+/* 有 Drawer 时的设置面板 */

+.options-with-drawer {

+	background: rgb(246,246,246);

+	box-shadow: 0 0 0 #fff;

+	-moz-box-shadow: 0 0 0 #fff;

+	-webkit-box-shadow: 0 0 0 #fff;

+	width: 360px!important;

+	height: 210px!important;

+	top: auto!important;

+	right: auto!important;

+	bottom: 10vh!important;

+	z-index: 40!important;

+}
\ No newline at end of file
diff --git a/assets/css/main/nav.css b/assets/css/main/nav.css
new file mode 100644
index 0000000..9e7016d
--- /dev/null
+++ b/assets/css/main/nav.css
@@ -0,0 +1,318 @@
+@charset 'utf-8';

+/*

+ * Style of the Nav.

+ * Author:  Eltrac

+ * License: MIT

+ */

+/* Top Nav */

+.nav {

+	background: rgba(255,255,255,0.96);

+	width: 100%;

+	position: absolute;

+	box-shadow: 0 0 20px #ddd;

+	-webkit-box-shadow: 0 0 20px #ddd;

+	-moz-box-shadow: 0 0 30px #ddd;

+	display: table;

+	top: 0;

+	z-index: 10;

+	transition: all .2s;

+}

+.nav-content {

+	margin: 0;

+	display: table-cell;

+	vertical-align: middle;

+	height: 80px;

+	padding: 0;

+	white-space: nowrap;

+	overflow-x: auto;

+	overflow-y: hidden;

+	position: relative

+}

+.nav-content a {

+	text-decoration: none;

+	color: #141414;

+	padding: 30px 8px;

+	transition: background .2s;

+	font-size: 16px

+}

+.nav-content a:hover,

+.nav-mobile-content a:hover,

+.nav-mobile-content button:hover,

+.nav-sorts-content {

+	background: #f0f0f0

+}

+.nav-title {

+	color: #000;

+	font-weight: 700

+}

+.nav-fixed {

+	position: fixed!important

+}

+.nav-icon-button {

+	border-radius: 10000px;

+	border: none;

+	padding: 10px 12px;

+	background: rgb(240,240,240);

+	transition: background .2s;

+	outline: 0;

+	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 { /* On the nav */

+	right: 20px;

+}

+.login-button { /* On the nav */

+	right: 65px;

+}

+.setting-button { /* On the nav */

+	right: 110px;

+}

+.nav-icon-button:hover,.search-close {

+	display: block;

+	background: rgb(230,230,230);

+	cursor: pointer

+}

+

+/* Drawer Nav */

+.drawer {

+	background: rgb(246,246,246);

+	border-right: 1px solid #ddd;

+	position: fixed;

+	top: 0;

+	bottom: 0;

+	z-index: 30;

+	transition: all 0.8s;

+	box-shadow: 0 0 30px #646464;

+	-moz-box-shadow: 0 0 30px #646464;

+	-webkit-box-shadow: 0 0 30px #646464;

+	/* Mobile */

+	width: 100%;

+	left: -120%;

+}

+.drawer-relative {

+	position: relative;

+	height: 100vh;

+}

+.drawer-avatar {

+	padding: 30px 0;

+}

+.drawer-avatar img {

+	display: block;

+	margin: 0 auto;

+	border-radius: 100%;

+	/* Mobile */

+	width: 120px;

+	height: 120px;

+}

+.drawer-button {

+	position: fixed;

+	top: 10px;

+	left: 15px;

+	background: rgba(0,0,0,0);

+	border-radius: 100%;

+	border: none;

+	height: 40px;

+	width: 40px;

+	display: flex;

+	align-items: center;

+	justify-content: center;

+	color: #fff;

+	text-shadow: 0 1px 6px #bababa;

+	transform: scale(1.2);

+	transition: background 0.3s;

+	padding: 3px;

+    outline: none;	

+	transition: all 0.5s;

+}

+.drawer-button:hover {

+	cursor: pointer;

+	background: rgba(200,200,200,0.4);

+}

+.drawer-open .drawer {

+	left: 0;

+}

+.drawer-open .drawer-button {

+	left: 4px;

+	top: 4px;

+	color: rgb(80,80,80);

+	text-shadow: 0 0 0 #fff;

+}

+.drawer-header {

+	height: 180px;

+	background: rgb(253,253,253)

+}

+.drawer-footer {

+	background: rgb(253,253,253);

+	padding: 8px 0;

+	text-align: center;

+	height: 64px;

+	position: absolute;

+	bottom: 0;

+	left: 0;

+	right: 0;

+}

+.drawer-content {

+	margin-top: 10px;

+	overflow-y: auto;

+	height: 50vh;

+}

+.drawer-content a {

+	display: block;

+	text-align: center;

+	font-size: 16px;

+	padding: 14px 0;

+}

+.drawer-content a:hover {

+	background: rgb(240,240,240);

+}

+.drawer-icon {

+	height: 45px;

+	width: 45px;

+	border-radius: 100%;

+	background: rgb(246,246,246);

+	transition: background: 0.2s;

+	margin: 0 3px;

+	border: none;

+	outline: none;

+}

+.drawer-icon:hover {

+	background: rgb(240,240,240);

+}

+

+/* Search/Login/Menu */

+.search,.login,.mobile-menu {

+	position: fixed;

+	top: 0;

+	bottom: 0;

+	right: 0;

+	left: 0;

+	max-height: 100vh;

+	background-color: rgba(255,255,255,0.96);

+	transition: all .2s;

+	z-index: 1000;

+}

+.search,.login {

+	display: flex;

+	align-items: center;

+	justify-content: center;

+}

+.search.ready,

+.login.ready,

+.mobile-menu.ready {

+	bottom: 120vh;

+	top: -120vh;

+	visibility: hidden;

+}

+.search-close.ready,

+.login-close.ready,

+.mobile-menu-close.ready {

+	display: none

+}

+.search-close,

+.login-close,

+.mobile-menu-close {

+	position: fixed;

+	top: 20px;

+	right: 20px;

+	border: none;

+	background: 0 0

+}

+.search-form input,

+.login-form input,

+.login-form button {

+	width: 260px;

+}

+/* Menu */

+.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 */

+.search-form input {

+	border: 1px solid #bababa;

+	padding: 10px 25px;

+	border-radius: 80px

+}

+.search-form button {

+	padding: 10px 15px;

+	padding-top: 5px;

+	background: rgba(0,0,0,0);

+	border: none;

+	margin-left: -100px

+}

+.search-close,

+.search-form button,

+.search-form input {

+	color: gray;

+	font-size: 30px;

+	outline: 0

+}

+/* Login */

+.login-form button,

+.login-form input {

+	display: block;

+	margin: 10px 0;

+	padding: 15px 20px;

+}

+.login-form input {

+	border-radius: 5px;

+	border: 1px solid #ccc;

+}

+.login-form button {

+	border-radius: 5px;

+	border: none;

+	color: white;

+	background: var(--theme-color);

+}

+/* Alert if need-fresh */

+.login-form.need-refresh:before {

+	content: "因为 Pjax 的原因，登陆之前请先刷新页面，否则会导致登陆失败！";

+	background: #DD4B39;

+	padding: 18px 5px;

+	display: block;

+	position: fixed;

+	bottom: 0;

+	left: 0;

+	right: 0;

+	color: white;

+	text-align: center;

+	transition: all .2s;

+}

+/* 404 error page */

+.error-title {

+	text-align: center;

+	font-size: 100px;

+	text-shadow: 0 4px 12px #ccc;

+}

diff --git a/assets/css/main/page.css b/assets/css/main/page.css
new file mode 100644
index 0000000..e288862
--- /dev/null
+++ b/assets/css/main/page.css
@@ -0,0 +1,139 @@
+@charset 'utf-8';

+/*

+ * Style of Some parts of custom pages

+ * Author:  Eltrac

+ * License: MIT

+ */

+/* About Page */

+.about-avatar img {

+	margin: 0 auto;

+	display: block;

+	padding: 2px;

+	border: 3px solid #ddd;

+	border-radius: 100%;

+	height: 200px;

+	width: 200px;

+}

+.about-name {

+	text-align: center;

+	font-size: 35px;

+	margin: 20px 0;

+	margin-bottom: 0;

+}

+.about-social {

+	text-align: center;

+	margin-top: 15px;

+}

+.about-social a {

+	transform: scale(1.2);

+	border-radius: 100%;

+	padding: 5px 10px;

+}

+.about-social a:hover {

+	background: rgb(246,246,246);

+}

+

+/* Tag List */

+.tags-list {

+	margin-left: -30px

+}

+

+.tags-item a {

+	background: rgb(240,240,240);

+	border-radius: 80px;

+	color: rgb(60,60,60);

+	padding: 6px 14px;

+	font-size: 15px;

+	transition: all .2s;

+	margin: 5px 3px;

+}

+.tags-item a:hover {

+	background: rgb(230,230,230);

+}

+.tags-item {

+	position: relative;

+	display: inline-block

+}

+/* Archives */

+.archives-list {

+	list-style-type: none;

+	margin-left: -40px

+}

+.archives-list a {

+	display: block;

+	border-radius: 3px;

+	transition: background .2s;

+	padding: 6px 10px

+}

+.archives-list a:hover {

+	background: #e6e6e6

+}

+.archives-date {

+	color: gray;

+	letter-spacing: 0;

+}

+/* Links */

+.links-box {

+	margin: 10px;

+	margin-left: 0;

+	margin-top: 30px

+}

+.links-box h2 {

+	text-align: Center;

+	border-bottom: 1px solid #e6e6fa;

+	padding-bottom: 20px;

+	font-weight: 700;

+	color: black;

+}

+.links-link {

+	color: black!important;

+}

+.links-link:hover {

+	opacity: 1!important

+}

+.links-item {

+	background: #fff;

+	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: 5px;

+	border-radius: 3px

+}

+.links-item:hover {

+	transform: scale(1.05);

+	box-shadow: 0 6px 28px #ccc;

+	-webkit-box-shadow: 0 6px 28px #ccc;

+	-moz-box-shadow: 0 6px 28px #ccc;

+	transform: translateY(-6px)

+}

+.link-box a {

+	color: #000

+}

+.links-title {

+	text-align: center

+}

+.links-title h4 {

+	font-weight: 700;

+	letter-spacing: 2px;

+	white-space: nowrap;

+	font-size: 15px;

+	margin: 14px 0

+}

+.links-container {

+	padding: 6px;

+}

+/* Archive */

+.archive-title {

+	text-align: center

+}

+.arvchive-item-excerpt {

+	color: gray;

+	font-size: 17px;

+	margin-top: 0

+}

+.archive-item-title {

+	font-size: 25px;

+	margin-bottom: 5px

+}
\ No newline at end of file
diff --git a/assets/css/main/post.css b/assets/css/main/post.css
new file mode 100644
index 0000000..fa9ad4d
--- /dev/null
+++ b/assets/css/main/post.css
@@ -0,0 +1,243 @@
+@charset 'utf-8';

+/*

+ * Style of Posts

+ * Author:  Eltrac

+ * License: MIT

+ */

+/* 文章 */

+.post-list,

+.post-body {

+	margin-top: -110px

+}

+.post-body,.post-item {

+	background: #fff;

+	box-shadow: 0 0 36px #bababa;

+	-moz-box-shadow: 0 0 36px #bababa;

+	-webkit-box-shadow: 0 0 36px #bababa;

+	transition: background .1s

+}

+.post-banner-box {

+	margin-left: -15px;

+	margin-bottom: -2px;

+	max-height: 300px;

+	min-height: 270px;

+	overflow: hidden

+}

+.post-banner img {

+	width: 100%;

+	min-height: 270px;

+	margin-right: -40px

+}

+.post-title {

+	margin-top: 30px;

+	transition: color .2s;

+	overflow: hidden;

+	height: 40px;

+	white-space: nowrap;

+	text-overflow: ellipsis

+}

+.post-excerpt {

+	overflow: hidden;

+	text-overflow: ellipsis

+}

+.post-meta,.post-meta a {

+	color: gray

+}

+.post-button-box {

+	margin-top: 15px

+}

+.post-button {

+	float: right

+}

+.post-footer {

+	color: #c8c8c8;

+	font-size: 14px

+}

+.post-tags a {

+	color: #bebebe;

+	padding: 2px 4px;

+	border-radius: 2px;

+	background: #f0f0f0;

+	transition: background .2s

+}

+.post-tags a:hover {

+	background: #f5f5f5

+}

+/* >文章内容 */

+.post-content {

+	padding: 26px;

+	font-size: 18px;

+	line-height: 28px;

+	letter-spacing: 2px;

+	word-break: break-all

+}

+.post-content hr {

+	display: block;

+	margin: 80px auto;

+	width: 150px;

+	background: #f0f0f0;

+	height: 5px;

+	border: none

+}

+.post-content code {

+	font-size: 0.8em;

+	background: #f0f0f0;

+	border-radius: 3px;

+	font-family: font-family: 'Noto Sans SC',sans-serif!important;

+	padding: 5px 8px;

+	color: var(--theme-color);

+	vertical-align: middle

+}

+.post-content img {

+	display: block;

+	margin: 20px auto;

+	border-radius: 3px;

+	box-shadow: 0 4px 20px #ccc;

+	-moz-box-shadow: 0 4px 20px #ccc;

+	-webkit-box-shadow: 0 4px 20px #ccc;

+	max-width: 90%

+}

+.post-content blockquote p {

+	margin: 0

+}

+.post-content blockquote {

+	border-left: 6px solid #ddd;

+	padding-left: 10px;

+	margin-left: 0;

+	color: gray

+}

+.post-content table {

+	width: 100%;

+	border-left: 1px solid #ccc;

+	border-top: 2px solid #ccc;

+	border-spacing: 0

+}

+.post-content td,.post-content th {

+	border-right: 1px solid #ccc;

+	border-bottom: 1px solid #ccc;

+	padding: 6px 8px

+}

+.post-content th {

+	background: #fff!important

+}

+.post-content tr:nth-child(odd) {

+	background: #f5f5f5

+}

+.post-content a:not(.no-line) {

+	position: relative;

+	color: var(--theme-color)

+}

+.post-content a:not(.no-line)::before {

+	content: '';

+	position: absolute;

+	bottom: 0;

+	left: 0;

+	right: 0;

+	height: 2px;

+	background-color: var(--theme-color);

+	transform-origin: bottom right;

+	transform: scaleX(0);

+	transition: transform .5s ease

+}

+.post-content a:not(.no-line):hover::before {

+	transform-origin: bottom left;

+	transform: scaleX(1)

+}

+.post-content p {

+	vertical-align: middle;

+}

+.post-content .owo-img {

+	box-shadow: 0 0 0 #fff;

+	-moz-box-shadow: 0 0 0 #fff;

+	-webkit-box-shadow: 0 0 0 #fff;

+	display: inline;

+	height: 34px;

+	vertical-align: middle

+}

+/* >短代码 */

+.tip {

+	border: 1px solid rgb(240,240,240);

+	border-radius: 3px;

+	padding: 15px;

+	border-left: 5px solid var(--theme-color);

+}

+.tip-icon {

+	color: var(--theme-color);

+}

+.tip.red {

+	border-left-color: #DD4B39;

+}

+.tip.red .tip-icon {

+	color: #DD4B39;

+}

+.tip.blue {

+	border-left-color: #4D90FE;

+}

+.tip.blue .tip-icon {

+	color: #4D90FE;

+}

+.tip.green {

+	border-left-color: #2FBB4F;

+}

+.tip.green .tip-icon {

+	color: #2FBB4F;

+}

+.tip.yellow {

+	border-left-color: #FFDD11;

+}

+.tip.yellow .tip-icon {

+	color: #FFDD11;

+}

+.post-bubble .saying-content p {

+	padding: 0 20px!important;

+}

+/* >文章分页 */

+.post-pagenav,

+.comment-pagenav {

+	margin-top: 40px;

+	margin-bottom: 60px

+}

+.post-pagenav a {

+	font-size: 20px;

+	background: var(--theme-color);

+	color: #fff;

+	padding: 13px 20px;

+}

+.post-pagenav a,

+.comment-pagenav a {

+	border-radius: 10000px;

+	box-shadow: 0 0 15px #ccc;

+	-moz-box-shadow: 0 0 15px #ccc;

+	-webkit-box-shadow: 0 0 15px #ccc

+}

+.post-pagenav a:hover {

+	box-shadow: 0 0 15px #ccc;

+	-moz-box-shadow: 0 0 15px #ccc;

+	-webkit-box-shadow: 0 0 15px #ccc

+}

+.post-pagenav-left {

+	float: left

+}

+.post-pagenav-right {

+	float: right

+}

+/* -ss */

+.post-banner-ss img {

+	width: 100%

+}

+.post-banner-box-ss {

+	max-height: 280px;

+	overflow: hidden

+}

+.post-item-content-ss {

+	padding: 20px

+}

+.post-title-ss {

+	margin: 12px 0;

+	margin-top: 6px;

+	height: 32px;

+	overflow: hidden;

+	white-space: nowrap;

+	text-overflow: ellipsis;

+	font-size: 25px

+}
\ No newline at end of file
diff --git a/assets/css/main/special.css b/assets/css/main/special.css
new file mode 100644
index 0000000..0f0e862
--- /dev/null
+++ b/assets/css/main/special.css
@@ -0,0 +1,211 @@
+@charset 'utf-8';

+/*

+ * Style of something special

+ * Author:  Eltrac

+ * License: MIT

+ */

+/* Index Banner */

+.index-banner {

+	margin-top: -21px;

+	width: 100%;

+	text-align: center;

+	background-size: cover;

+    background-repeat: no-repeat;

+    background-position: 50% 50%;

+}

+.dark-cover,

+.banner-mask {

+	/* .dark-cover 是旧版本遮罩的类名 */

+	width: 100%;

+	height: 100%;

+	background: rgba(30,30,30,.25);

+	z-index: 1;

+	color: #fff;

+	display: flex;

+	justify-content: center;

+	align-items: center

+}

+.banner-content {

+	vertical-align: middle

+}

+.banner-content h1 {

+	margin-bottom: 0

+}

+.banner-content p {

+	margin-top: 10px

+}

+

+/* Options Pannel */

+.options {

+	transition: all 0.3s;

+	background: #fff;

+	border-radius: 2px;

+	box-shadow: 0 1px 8px #bababa;

+	-moz-box-shadow: 0 1px 8px #bababa;

+	-webkit-box-shadow: 0 1px 8px #bababa;

+	position: fixed;

+	top: 50px;

+	right: 0;

+	left: 0;

+	z-index: 20;

+	width: 100%;

+}

+.options hr {

+	border-color: rgb(245,245,245);

+	margin: 0;

+}

+.options.ready {

+	display: none;

+	top: 40px;

+}

+.options-content {

+	padding: 8px;

+	font-size: 15px;

+}

+.options-content h4 {

+	margin: 0;

+	margin-bottom: 8px;

+}

+.options-family {

+	text-align: center;

+}

+.options-family button,

+.options-contentsize-button {

+	display: block;

+	width: 100%;

+	border: none;

+	background: rgb(254,254,254,0);

+	font-size: 20px;

+	padding: 8px 0;

+	transition: all 0.3s;

+	outline: none;

+	cursor: pointer;

+	border-radius: 3px;

+}

+.options-contentsize-button {

+	font-size: 14px;

+}

+.options-family button:hover {

+	background: rgb(244,244,244,0.96);

+}

+.options-button-active {

+	color: #fff;

+	background: var(--theme-color)!important;

+}

+.options-theme-button.options-button-active {

+	border: 2px solid var(-theme-color);

+}

+.options-themes {

+	text-align: center;

+	margin-top: 20px;

+}

+.options-theme-label {

+	color: #fff;

+	font-size: 12px;

+	transition: color 0.3s;

+}

+.options-theme-item:hover .options-theme-label {

+	color: #bababa;

+}

+.options-theme-button {

+	height: 50px;

+	width: 50px;

+	border-radius: 100%;

+	border: none;

+	outline: none;

+	display: block;

+	margin: 0 auto;

+	cursor: pointer

+}

+.options-theme-normal {

+	background: rgb(240,240,240);

+}

+.options-theme-dark {

+	background: rgb(80,80,80)

+}

+.options-theme-sepia {

+	background: rgb(255,255,200)

+}

+/* Font Size */

+.body-contentsize-small .post-content,

+.body-contentsize-small .comment-content p,

+.body-contentsize-small .banner-content,

+.body-contentsize-small .footer-info,

+.body-contentsize-small .nav-content {

+	font-size: 100%;

+}

+.body-contentsize-normal .post-content,

+.body-contentsize-normal .comment-content p,

+.body-contentsize-normal .banner-content,

+.body-contentsize-normal .footer-info,

+.body-contentsize-normal .nav-content {

+	font-size: 125%;

+}

+.body-contentsize-big .post-content,

+.body-contentsize-big .comment-content p,

+.body-contentsize-big .banner-content,

+.body-contentsize-big .footer-info,

+.body-contentsize-big .nav-content {

+	font-size: 140%;

+}

+.body-contentsize-large .post-content,

+.body-contentsize-large .comment-content p,

+.body-contentsize-large .banner-content,

+.body-contentsize-large .footer-info,

+.body-contentsize-large .nav-content {

+	font-size: 160%;

+}

+/* Footer */

+.footer-info {

+	background: #f0f0f0;

+	color: #000;

+	text-align: center;

+	margin: 0;

+	margin-top: 130px!important;

+	padding: 25px 10px;

+	line-height: 26px;

+	width: 100%;

+}

+.footer-dark a {

+	color: #000

+}

+.footer-info a {

+	color: #1e1e1e;

+	text-decoration: none;

+	transition: opacity .2s

+}

+.footer-info a:hover {

+	opacity: .9

+}

+/* Header Meta */

+.header-meta a {

+	color: #fff;

+	text-decoration: none

+}

+/* Pio Plugin */

+.pio-container .pio-dialog {

+	margin-bottom: -60px;

+	border-color: rgba(255,255,255,.9);

+	border-radius: 4px;

+	text-shadow: 0 0 1px #bababa;

+	border: none;

+	background: rgba(255,255,255,.9);

+	box-shadow: 1px 1px 5px #bababa;

+	-moz-box-shadow: 1px 1px 5px #bababa;

+	-webkit-box-shadow: 1px 1px 5px #bababa

+}

+.pio-container {

+	display: none

+}

+/* Bilibili iframe */

+iframe[src*="//player.bilibili.com/player.html"] {

+	width: 100%;

+	height: 150px;

+	position: relative

+}

+/* Live2D */

+#live2dcanvas {

+	display: none;

+	transition: all 0.3s;

+	z-index: 0!important

+}
\ No newline at end of file
diff --git a/assets/css/main/themes.css b/assets/css/main/themes.css
new file mode 100644
index 0000000..4ae937f
--- /dev/null
+++ b/assets/css/main/themes.css
@@ -0,0 +1,30 @@
+@charset 'utf-8';

+/*

+ * Fonts, Themes and filter

+ * Author:  Eltrac

+ * License: MIT

+ */

+/* Dark theme */

+@import url("dark.css");

+/* Serif */

+.body-serif {

+	font-family: 'Noto Serif SC',serif

+}

+/* Gray Filter */

+.html-filter-gray {

+	filter: grayscale(100%);

+    -webkit-filter: grayscale(100%);

+    -moz-filter: grayscale(100%);

+    -ms-filter: grayscale(100%);

+    -o-filter: grayscale(100%);

+    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

+}

+/* Sepia Filter */

+.html-filter-sepia {

+	filter: sepia(30%);

+    -webkit-filter: sepia(30%);

+    -moz-filter: sepia(30%);

+    -ms-filter: sepia(30%);

+    -o-filter: sepia(30%);

+    filter:progid:DXImageTransform.Microsoft.BasicImage(sepia=0.30);

+}
\ No newline at end of file
diff --git a/assets/js/miracles.min.js b/assets/js/miracles.min.js
index 57d2d60..992c0df 100644
--- a/assets/js/miracles.min.js
+++ b/assets/js/miracles.min.js
@@ -49,9 +49,9 @@ function Dark() {
 	$("body").toggleClass("body-dark");

 	//Add cookie to record

 	if($("body").hasClass("body-dark")) {

-	    addCookie("darkTheme","on",0);

+	    addCookie("darkTheme","on",9);

 	}else{

-		addCookie("darkTheme","off",0);

+		addCookie("darkTheme","off",9);

 	}

 }

 

@@ -290,7 +290,7 @@ function alertSend(content,auto) {
 	$(".alert-content").text(content);

 	$(".alert").removeClass("ready");

 	if (auto===true) {

-		window.setTimeout(function(){$(".alert").addClass("ready");},3500);

+		window.setTimeout(function(){$(".alert").addClass("ready");},2000);

 	}

 }

 function alertClose() {

@@ -298,7 +298,7 @@ function alertClose() {
 }

 

 /**

- *  Listen copy event

+ *  Listen copy event and alert

  */

 $(document).ready(function() {  

     $("body").bind({  

@@ -313,24 +313,24 @@ $(document).ready(function() {
  */

 var config = {

     model: {

-        jsonPath: modelJson // 加载模型的json路径

+        jsonPath: modelJson //  加载模型的json路径

     },

     display: {

-        superSample: 1, // 超采样等级

-        width: modelWidth, // canvas的宽度

+        superSample: 1, //      超采样等级

+        width: modelWidth, //   canvas的宽度

         height: modelHeight, // canvas的高度

-        position: 'left', // 显示位置：左或右

-        hOffset: 12, // canvas水平偏移

-        vOffset: 0, // canvas垂直偏移

+        position: 'left', //    显示位置：左或右

+        hOffset: 12, //         canvas水平偏移

+        vOffset: 0, //          canvas垂直偏移

     },

     mobile: {

-        show: false, // 是否在移动设备上显示

-        scale: 0.6, // 移动设备上的缩放

-        motion: false, // 移动设备是否开启重力感应

+        show: false, //         是否在移动设备上显示

+        scale: 0.6, //          移动设备上的缩放

+        motion: false, //       移动设备是否开启重力感应

     },

     react: {

-        opacityDefault: 1, // 默认透明度

-        opacityOnHover: 1 // 鼠标移上透明度

+        opacityDefault: 1, //   默认透明度

+        opacityOnHover: 1 //    鼠标移上透明度

     }

 }

 L2Dwidget.init(config);

@@ -352,4 +352,6 @@ if(loadPjax = true) {
 	afterPjax();

 	panguLoad();

   });

-}
\ No newline at end of file
+}

+

+console.info("© This site powered by Typecho used by Theme Miracles");
\ No newline at end of file
diff --git a/includes/head.php b/includes/head.php
index e32bef0..efa89b7 100644
--- a/includes/head.php
+++ b/includes/head.php
@@ -47,22 +47,18 @@ if (isset($_POST['action'])) {
 	<?php if($this->options->CDN && $this->options->CDN=1): ?>
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php echo themeVersion(); ?>/assets/css/prism.css" />
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php echo themeVersion(); ?>/assets/css/owo.min.css" />
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php echo themeVersion(); ?>/assets/css/normalize.css" />
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php echo themeVersion(); ?>/assets/css/fancybox.css" />
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php echo themeVersion(); ?>/assets/css/prism.css" />
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php echo themeVersion(); ?>/assets/css/miracles.min.css" />
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php echo themeVersion(); ?>/assets/css/dark.miracles.css" />
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php echo themeVersion(); ?>/assets/css/main/miracles.min.css" />
 	<?php else: ?>
 	<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/normalize.css'); ?>" />
 	<link rel="stylesheet" href="<?php Utils::indexTheme('assets/css/nprogress.css'); ?>" />
 	<link rel="stylesheet" href="<?php Utils::indexTheme('assets/css/fancybox.css'); ?>" />
-	<link rel="stylesheet" href="<?php Utils::indexTheme('assets/css/miracles.min.css'); ?>" />
-	<link rel="stylesheet" href="<?php Utils::indexTheme('assets/css/dark.miracles.css'); ?>" />
+	<link rel="stylesheet" href="<?php Utils::indexTheme('assets/css/main/miracles.min.css'); ?>" />
 	<?php endif; ?>
 	<!-- icon font -->
-	<link rel="stylesheet" href="//at.alicdn.com/t/font_1165190_nczm02by8we.css" />
+	<link rel="stylesheet" href="//at.alicdn.com/t/font_1165190_nsy3b6pbkb.css" />
 	<!-- Google Fonts -->
 	<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:300|Noto+Serif+SC:300&display=swap" rel="stylesheet">
 	<style>.body-dark .pio-action .pio-home{background-image: url(<?php Utils::indexTheme('images/icons/home.png'); ?>);}.body-dark .pio-action .pio-close{background-image: url(<?php Utils::indexTheme('images/icons/remove.png'); ?>);}.body-dark .pio-action .pio-skin{background-image: url(<?php Utils::indexTheme('images/icons/skin.png'); ?>);}.body-dark .pio-action .pio-info{background-image: url(<?php Utils::indexTheme('images/icons/info.png'); ?>);}.body-dark .pio-action .pio-night{background-image: url(<?php Utils::indexTheme('images/icons/night.png'); ?>);}@media (min-width:992px) {.search{background-image:url(<?php Utils::indexTheme('images/search.png'); ?>);}.login{background-image:url(<?php Utils::indexTheme('images/login.png'); ?>)}}.search {background-position: bottom right;background-repeat: no-repeat}.login {background-position: bottom left;background-repeat:no-repeat}<?php $this->options->cssEcho(); ?></style>
diff --git a/includes/header.php b/includes/header.php
index 724c780..26f8590 100644
--- a/includes/header.php
+++ b/includes/header.php
@@ -1,5 +1,5 @@
 <?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
-      <div class="mask" onclick="toggleDrawer()"></div>
+      <div class="mask" onclick="toggleDrawer();$('.options').addClass('ready');"></div>
 	  <div class="alert ready"><p class="alert-content">错误！未定义的 alert 信息</p><button onclick="alertClose()" class="alert-close"><i class="iconfont icon-x"></i></button></div>
       <!-- 搜索 -->
       <div class="search ready">
@@ -128,7 +128,7 @@
 	  <!-- 抽屉栏 -->
 	  <nav class="drawer"><div class="drawer-relative">
 	    <div class="drawer-main">
-	      <button class="drawer-button" onclick="toggleDrawer()"><i class="iconfont icon-list"></i></button>
+	      <button class="drawer-button" onclick="toggleDrawer();$('.options').addClass('ready');"><i class="iconfont icon-list"></i></button>
           <div class="drawer-header">
 	        <div class="drawer-avatar">
 		      <?php echo $this->author->gravatar(500); ?>