👒 Perf: 细节优化

1 files changed, 495 insertions, 0 deletions

diff --git a/assets/css/miracles.min.css b/assets/css/miracles.min.css
new file mode 100644
index 0000000..cb4d6fa
--- /dev/null
+++ b/assets/css/miracles.min.css
@@ -0,0 +1,495 @@
+@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;

+	--shadow-color: rgb(180,180,180);

+}

+

+/* Icon Font */

+@font-face {

+  font-family: 'iconfont';  /* project id 1165190 */

+  src: url('//at.alicdn.com/t/font_1165190_t5sh6mq8n6i.eot');

+  src: url('//at.alicdn.com/t/font_1165190_t5sh6mq8n6i.eot?#iefix') format('embedded-opentype'),

+  url('//at.alicdn.com/t/font_1165190_t5sh6mq8n6i.woff2') format('woff2'),

+  url('//at.alicdn.com/t/font_1165190_t5sh6mq8n6i.woff') format('woff'),

+  url('//at.alicdn.com/t/font_1165190_t5sh6mq8n6i.ttf') format('truetype'),

+  url('//at.alicdn.com/t/font_1165190_t5sh6mq8n6i.svg#iconfont') format('svg');

+}

+

+::selection{

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

+    color:black;

+}

+/* 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:767px) {

+	.drawer {

+		width: 100vw;

+	}

+	.mobile-menu-close {

+	right: 20px;

+    left: auto;

+	}

+	.post-title{

+		font-size: 1.5rem;

+	}

+}

+/* > Pad and up */

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

+	.post-share .iconfont {

+		font-size: 30px;

+	}

+	

+	.post-share .social-share.copyright i {

+		display: block;

+	}

+	

+	.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;

+	}

+	

+	.comment-input input {

+	    display: inline-block;

+	    width: 33.23%;

+        padding: 10px 5px;

+        max-width: 100%;

+    }

+	

+	.comment-input #url {

+	    width: 32.39%;

+    }

+	

+	.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: 25px 0;

+		margin-bottom: 10px;

+		font-size: 2rem;

+	}

+

+	.post-excerpt {

+		height: 38px

+	}

+	

+	.post-banner-box,

+    .post-banner img {

+		height: 230px

+	}

+

+	.large-screen {

+		display: block

+	}

+

+	.small-screen {

+		display: none

+	}

+

+	.post-content {

+		padding: 36px;

+		padding-top: 25px;

+		font-size: 18px;

+		line-height: 26px;

+		letter-spacing: 2px

+	}

+	

+	.page-content {

+		padding-bottom: 25px!important;

+	}

+	

+	.post-footer {

+		padding: 36px;

+	}

+

+	.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,

+    .saying-body {

+	    margin-top: -130px

+    }

+	.links-container {

+	    padding: 10px;

+    }

+	.comment-children {

+		margin-left: 80px;

+	}

+	.search-close,

+	.login-close,

+	.mobile-menu-close{

+		right: 20px;

+        left: auto;

+	}

+}

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

+	}

+	

+	.comment-input #url {

+	    width: 32.47%;

+    }

+	

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

+	}

+

+

+	.post-title {

+		margin: 30px 0;

+		margin-bottom: 25px

+	}

+

+	.post-excerpt {

+		height: 75px

+	}

+	

+	.post-banner-box,

+    .post-banner img {

+		height: 280px

+	}

+

+	.large-screen {

+		display: block

+	}

+

+	.small-screen {

+		display: none

+	}

+

+	.post-content {

+		padding: 48px;

+		padding-top: 30px;

+		font-size: 18px;

+		line-height: 28px;

+		letter-spacing: 2px

+	}

+	

+	.page-content {

+		padding-bottom: 30px!important;

+	}

+	

+	.post-footer {

+		padding: 48px;

+	}

+

+	.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,

+    .saying-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) {

+	.login-entrance {

+		width: 250px!important;

+		display: block!important;

+		margin: 20px auto!important;

+	}

+	

+	.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;

+	}

+	.comment-input #url {

+	    width: 32.56%;

+    }

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

+	}

+	

+	.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;

+		padding-top: 35px;

+	}

+	.page-content {

+		padding-bottom: 38px!important;

+	}

+	

+	.post-footer {

+		padding: 50px;

+	}

+	

+	.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,

+	.saying-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;

+}