perf: imporve post list float animation

use css will-change to improve performance
issue #199

js/sakura-app.js

@@ -78,10 +78,12 @@ function post_list_show_animation() {
         function callback(entries) {
             entries.forEach((article) => {
                 if (article.target.classList.contains("post-list-show")) {
+                    article.target.style.willChange = 'auto';
                     io.unobserve(article.target)
                 } else {
                     if (article.isIntersecting) {
                         article.target.classList.add("post-list-show");
+                        article.target.style.willChange = 'auto';
                         io.unobserve(article.target)
                     }
                 }

style.css

@@ -1086,6 +1086,7 @@ a:hover {
     display: block
 }
 
+
 .m-nav {
     display: none
 }
@@ -1142,6 +1143,22 @@ a:hover {
     max-width: 100%
 }
 
+@media(max-width:1200px) {
+    .site-top .lower nav{
+        right: calc(-150px - 100%);
+        position: absolute;
+        float: right;
+        animation: searchbox .2s;
+        min-width: 860px;
+    }
+    .site-top .lower nav.navbar {
+        right: calc(-50px - 100%);
+    }
+    .site-top .lower nav.navbar ul {
+        background: #fff;
+    }
+}
+
 #show-nav {
     position: relative;
     float: right;
@@ -1443,6 +1460,7 @@ i.iconfont.hotpost {
 }
 
 .post-list-thumb {
+    will-change: transform;
     float: left;
     width: 100%;
     height: 300px;
@@ -1456,7 +1474,7 @@ i.iconfont.hotpost {
 
 @media (max-width:860px) {
     .post-list-thumb {
-        margin: 0;
+        margin: 10px 0 10px;
         height: auto
     }
 }
@@ -6839,9 +6857,9 @@ input[type=radio]:checked:before {
     margin-right: 22px
 }
 
-@media (max-width:800px) {
+@media (max-width:860px) {
     .changeSkin-gear {
-        visibility: hidden
+        visibility: hidden !important
     }
     .changeSkin-gear span::before {
         content: ""