主题CSS优化

themes/yilia/postcss.config.js

@@ -2,6 +2,8 @@ module.exports = {
   plugins: [
     // require('postcss-smart-import')({ /* ...options */ }),
     // require('precss')({ /* ...options */ }),
-    require('autoprefixer')({ /* ...options */ })
+    require('autoprefixer')({
+      browsers:['last 2 versions', '> 1%', 'iOS >= 7', 'Android >= 4', 'not ie <= 8']
+    })
   ]
 }

themes/yilia/source-src/css/archive.scss

@@ -93,7 +93,6 @@
     }
     .archive-article-date, .article-tag-list{
       margin-right: 30px;
-      display: -moz-inline-stack;
       display: inline-block;
       vertical-align: middle;
       zoom: 1;

themes/yilia/source-src/css/article-main.scss

@@ -112,15 +112,13 @@
   text-align: left;
   float: right;
   a{
-    background: #4d4d4d;
+    background-color: #4d4d4d;
     color: $colorF;
     font-size: 12px;
     padding: 5px 8px 5px;
     line-height: 16px;
-    -webkit-border-radius: 2px;
-    -moz-border-radius: 2px;
     border-radius: 2px;
-    transition: background 0.3s;
+    transition: background-color 0.3s;
     &:hover{
       background: #3c3c3c;
     }

themes/yilia/source-src/css/aside.scss

@@ -19,13 +19,10 @@
     width: 40px;
     text-align: center;
 }
-.jump-container {
+.jump-container:hover .icon-back {
-    &:hover {
+    background: rgba(36, 193, 246, 0.9);
-        .icon-back {
-            background: rgba(36, 193, 246, 0.9);
-        }
-    }
 }
+
 .jump-container, .toc-container {
     position: relative;
     cursor: pointer;
@@ -49,21 +46,19 @@
         left: -2px;
     }
 }
-.mod-side-operation__jump-to-top {
+.mod-side-operation__jump-to-top .icon-back {
-    .icon-back {
+    transition: 0.3s;
-        transition: 0.3s;
+    color: $colorF;
-        color: $colorF;
+    background: #ccc;
-        background: #ccc;
+    transform: rotate(90deg);
-        transform: rotate(90deg);
+    font-size: 32px;
-        font-size: 32px;
+    line-height: 40px;
-        line-height: 40px;
+    width: 40px;
-        width: 40px;
+    text-align: center;
-        text-align: center;
+    display: block;
-        display: block;
+    &:hover {
-        &:hover {
+        background: #24c1f6;
-            background: #24c1f6;
+        color: #24c1f6;
-            color: #24c1f6;
-        }
     }
 }
 

themes/yilia/source-src/css/global.scss

@@ -1 +0,0 @@
-@import "core";

themes/yilia/source-src/css/grid.scss

@@ -1,18 +1,18 @@
 body, button, input, select, textarea {
-    color: #1a1a1a;
+	color: #1a1a1a;
-    font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
+	font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
-    font-size: 16px;
+	font-size: 16px;
-    font-size: 1rem;
+	font-size: 1rem;
-    line-height: 1.75;
+	line-height: 1.75;
 }
 body {
 	overflow-y: hidden;
 	background:#eaeaea;
 }
 html, body, #container {
-    height: 100%;
+	height: 100%;
-    overflow-x: hidden;
+	overflow-x: hidden;
-    overflow-y: auto;
+	overflow-y: auto;
 }
 #mobile-nav {
 	display: none;

themes/yilia/source-src/css/left.scss

@@ -1,5 +1,5 @@
 .left-col {
-	background: #fff;
+	background: $colorBg;
 	width: 300px;
 	position:fixed;
 	opacity:1;
@@ -85,7 +85,7 @@
 		.profilepic{
 			text-align: center;
 			display: block;
-			border: 5px solid #fff;
+			border: 5px solid $colorF;
 			border-radius: 300px;
 			width: 128px;
 			height: 128px;

themes/yilia/source-src/css/main.scss

@@ -1,4 +1,4 @@
-@import "./global";
+@import "core";
 @import "./fonts";
 @import "./grid";
 @import "./left";

themes/yilia/source-src/css/mobile-slider.scss

@@ -1,7 +1,7 @@
 .profilepic {
     text-align: center;
     display: block;
-    border: 5px solid #fff;
+    border: 5px solid $colorF;
     border-radius: 300px;
     width: 128px;
     height: 128px;

themes/yilia/source-src/css/mobile.scss

@@ -16,10 +16,8 @@ html, body, #container {
   left: 0;
   position: relative;
 }
-#header{
+#header .header-nav{
-  .header-nav{
+  position: relative;
-    position: relative;
-  }
 }
 .wrap-side-operation {
   display: none;
@@ -275,11 +273,9 @@ html, body, #container {
     }
   }
 }
-.archives{
+.archives .archive-article{
-  .archive-article{
+  padding: 10px 0;
-    padding: 10px 0;
+  margin-left: 0;
-    margin-left: 0;
-  }
 }
 
 #footer {

themes/yilia/source-src/css/page.scss

@@ -33,9 +33,7 @@
 	.prev.disabled,.next.disabled {
 		visibility: hidden;
 	}
-	&:hover{
+	&:hover .extend {
-		.extend{
+		opacity: 1;
-			opacity: 1;
-		}
 	}
 }

themes/yilia/source-src/css/scroll.scss

@@ -1,6 +1,6 @@
 /* 设置滚动条的样式 */
 ::-webkit-scrollbar {
-    width: 10px;
+	width: 10px;
 	height: 10px;
 }
 

themes/yilia/source-src/css/social.scss

@@ -10,7 +10,6 @@
         justify-content: center;
         a {
             border-radius:50%;
-            display:-moz-inline-stack;
             display:inline-block;
             vertical-align:middle;
             *vertical-align:auto;

themes/yilia/webpack.config.js

@@ -15,7 +15,6 @@ module.exports = {
     main: "./source-src/js/main.js",
     slider: "./source-src/js/slider.js",
     mobile: ["babel-polyfill", "./source-src/js/mobile.js"],
-    // comment: "./source-src/js/comment.js",
     viewer: "./source-src/js/viewer.js",
     waifu: "./source-src/js/waifu.js"
   },