Code style update, using tablet-mobile() to make CSS cleaner (#724)

source/css/_common/components/components.styl

@@ -4,7 +4,6 @@
 @import "buttons";
 @import "pagination";
 @import "comments";
-@import "tag-cloud";
 @import (hexo-config('back2top.sidebar') ? "back-to-top-sidebar" : "back-to-top") if (hexo-config('back2top.enable'));
 
 @import "header";

source/css/_common/components/header/github-banner.styl

@@ -7,13 +7,13 @@
     animation: octocat-wave 560ms ease-in-out;
   }
   @keyframes octocat-wave {
-    0%,100% {
+    0%, 100% {
       transform: rotate(0);
     }
-    20%,60% {
+    20%, 60% {
       transform: rotate(-25deg);
     }
-    40%,80% {
+    40%, 80% {
       transform: rotate(10deg);
     }
   }

source/css/_common/components/header/menu.styl

@@ -11,7 +11,7 @@
   margin: 0 10px;
   list-style: none;
 
-  @media screen and (max-width: 767px) {
+  +mobile() {
     margin-top: 10px;
   }
 

source/css/_common/components/pages/pages.styl

@@ -5,3 +5,4 @@
 @import "schedule";
 @import "post-detail";
 @import "breadcrumb";
+@import "tag-cloud";

source/css/_common/components/pages/schedule.styl

@@ -7,17 +7,17 @@
   ul#event-list {
     padding-left: 30px
     hr {
-      margin: 20px 0 45px 0!important
+      margin: 20px 0 45px 0 !important
       background: #222
-        &:after {
-          display: inline-block
-          content: 'NOW'
-          background: #222
-          color: #FFF
-          font-weight:bold
-          text-align: right
-          padding: 0 5px
-        }
+      &:after {
+        display: inline-block
+        content: 'NOW'
+        background: #222
+        color: #FFF
+        font-weight:bold
+        text-align: right
+        padding: 0 5px
+      }
     }
     li.event {
       margin: 20px 0px
@@ -94,7 +94,7 @@
         }
       }
       * {
-        color: #FFF!important
+        color: #FFF !important
       }
     }
     li.event-future {
@@ -109,7 +109,7 @@
         }
       }
       * {
-        color: #FFF!important
+        color: #FFF !important
       }
     }
   }

source/css/_common/components/pagination.styl

@@ -41,7 +41,7 @@
   }
 }
 
-@media (max-width: 767px)
++mobile() {
   .pagination { border-top: none; }
 
   .pagination {
@@ -54,3 +54,4 @@
       &:hover { border-bottom-color: $pagination-link-hover-border; }
     }
   }
+}

source/css/_common/components/post/post-collapse.styl

@@ -1,6 +1,6 @@
 // TODO: Refactor.
 
-@media (max-width: 767px) {
++mobile() {
   .posts-collapse {
     margin: 0 20px;
 

source/css/_common/components/post/post.styl

@@ -17,7 +17,8 @@
   cursor: zoom-in;
 }
 
-.post-body .image-caption {
+.post-body .image-caption,
+.post-body .figure .caption {
   margin: -20px auto 15px;
   text-align: center;
   font-size: $font-size-base;
@@ -26,10 +27,6 @@
   line-height: 1;
 }
 
-.post-body .figure .caption {
-  @extend .post-body .image-caption;
-}
-
 .post-sticky-flag {
   display: inline-block;
   font-size: 16px;

source/css/_common/components/sidebar/sidebar-chat.styl → source/css/_common/components/sidebar/sidebar-button.styl

@@ -1,4 +1,4 @@
-.chat {
+.feed-link, .chat {
   margin-top: 10px;
 
   a {

source/css/_common/components/sidebar/sidebar.styl

@@ -12,16 +12,13 @@
   a, span.exturl {
     color: $grey-dark;
     border-bottom-color: $black-light;
-    &:hover { color: $gainsboro; }
-  }
-  span.exturl:hover {
-    border-bottom-color: $gainsboro;
+    &:hover {
+      color: $gainsboro;
+      border-bottom-color: $gainsboro;
+    }
   }
 
-  +tablet() {
-    hide() if not hexo-config('sidebar.onmobile');
-  }
-  +mobile() {
+  +tablet-mobile() {
     hide() if not hexo-config('sidebar.onmobile');
   }
 }
@@ -58,11 +55,10 @@
 
 @import "sidebar-toggle";
 @import "sidebar-author";
-@import "site-state";
-@import "sidebar-feed-link";
 @import "sidebar-author-links";
+@import "sidebar-button";
 @import "sidebar-blogroll";
 @import "sidebar-nav";
-@import "sidebar-toc";
+@import "site-state" if hexo-config('site_state');
+@import "sidebar-toc" if hexo-config('toc.enable');
 @import "sidebar-dimmer" if hexo-config('sidebar.dimmer');
-@import "sidebar-chat" if hexo-config('chat.enable');

source/css/_common/components/third-party/needsharebutton.styl

@@ -20,7 +20,7 @@
 
   .btn {
     //display: initial;
-    padding: 0 10px 0 14px
+    padding: 0 10px 0 14px;
     border: 1px solid $btn-default-border-color;
     border-radius: 4px;
   }

source/css/_common/scaffolding/base.styl

@@ -11,8 +11,7 @@ body {
   color: $text-color;
   background: $body-bg-color;
 
-  +mobile() { padding-right: 0 !important; }
-  +tablet() { padding-right: 0 !important; }
+  +tablet-mobile() { padding-right: 0 !important; }
   +desktop-large() { font-size: $font-size-large; }
 }
 

source/css/_common/scaffolding/helpers.styl

@@ -46,7 +46,9 @@
   }
 }
 
-.affix.affix.affix { position: fixed; }
+.affix {
+  position: fixed;
+}
 
 .translation {
   margin-top: -20px;

source/css/_common/scaffolding/tables.styl

@@ -11,7 +11,7 @@ table {
   font-size: $table-font-size;
 }
 
-table>tbody>tr {
+table > tbody > tr {
   &:nth-of-type(odd) { background-color: $table-row-odd-bg-color; }
   &:hover { background-color: $table-row-hover-bg-color; }
 }
@@ -33,4 +33,6 @@ th {
   font-weight: $table-th-font-weight;
 }
 
-td { border-bottom-width: 1px; }
+td {
+  border-bottom-width: 1px;
+}

source/css/_schemes/Pisces/_brand.styl

@@ -7,11 +7,8 @@
   color: white;
   background: $black-deep;
 
-  +tablet() {
-    box-shadow: 0 0 16px rgba(0,0,0,0.5);
-  }
-  +mobile() {
-    box-shadow: 0 0 16px rgba(0,0,0,0.5);
+  +tablet-mobile() {
+    box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
   }
 }
 
@@ -31,10 +28,7 @@
 
 .custom-logo-image {
   margin-top: 20px;
-  +tablet() {
-    display: none;
-  }
-  +mobile() {
+  +tablet-mobile() {
     display: none;
   }
 }

source/css/_schemes/Pisces/_layout.styl

@@ -9,10 +9,7 @@
   +desktop-largest() {
     width: $content-desktop-largest;
   }
-  +tablet() {
-    width: auto;
-  }
-  +mobile() {
+  +tablet-mobile() {
     width: auto;
   }
 }
@@ -30,12 +27,7 @@
   +desktop-large() {
     .container & { width: $sidebar-desktop; }
   }
-  +tablet() {
-    position: relative;
-    width: auto;
-    border-radius: initial;
-  }
-  +mobile() {
+  +tablet-mobile() {
     position: relative;
     width: auto;
     border-radius: initial;
@@ -48,10 +40,7 @@
 
 .container .main-inner {
 
-  +tablet() {
-    width: auto;
-  }
-  +mobile() {
+  +tablet-mobile() {
     width: auto;
   }
 }
@@ -87,10 +76,7 @@
   background: $body-bg-color;
   box-shadow: none;
 
-  +tablet() {
-    display: none;
-  }
-  +mobile() {
+  +tablet-mobile() {
     display: none;
   }
 }
@@ -100,12 +86,7 @@
 .footer-inner {
   padding-left: 260px;
 
-  +tablet() {
-    width: auto;
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-  }
-  +mobile() {
+  +tablet-mobile() {
     width: auto;
     padding-left: 0 !important;
     padding-right: 0 !important;