From 9995fcd4337f3550ac909b24dffb55b3bb2be406 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=B4=8D=C9=AA=E1=B4=8D=C9=AA?= <1119186082@qq.com>
Date: Sat, 23 Mar 2019 01:13:32 +0800
Subject: [PATCH] Code style update, using `tablet-mobile()` to make CSS
 cleaner (#724)

---
 source/css/_common/components/components.styl |  1 -
 .../components/header/github-banner.styl      |  6 +--
 .../css/_common/components/header/menu.styl   |  2 +-
 .../css/_common/components/pages/pages.styl   |  1 +
 .../_common/components/pages/schedule.styl    | 24 +++++-----
 .../components/{ => pages}/tag-cloud.styl     |  0
 source/css/_common/components/pagination.styl |  3 +-
 .../components/post/post-collapse.styl        |  2 +-
 source/css/_common/components/post/post.styl  |  7 +--
 ...{sidebar-chat.styl => sidebar-button.styl} |  2 +-
 .../components/sidebar/sidebar-feed-link.styl | 23 ----------
 .../_common/components/sidebar/sidebar.styl   | 20 ++++-----
 .../third-party/needsharebutton.styl          |  2 +-
 source/css/_common/scaffolding/base.styl      |  3 +-
 source/css/_common/scaffolding/helpers.styl   |  4 +-
 source/css/_common/scaffolding/tables.styl    |  6 ++-
 source/css/_schemes/Pisces/_brand.styl        | 12 ++---
 source/css/_schemes/Pisces/_layout.styl       | 29 +++---------
 source/css/_schemes/Pisces/_sidebar.styl      | 45 ++++++-------------
 19 files changed, 61 insertions(+), 131 deletions(-)
 rename source/css/_common/components/{ => pages}/tag-cloud.styl (100%)
 rename source/css/_common/components/sidebar/{sidebar-chat.styl => sidebar-button.styl} (94%)
 delete mode 100644 source/css/_common/components/sidebar/sidebar-feed-link.styl

diff --git a/source/css/_common/components/components.styl b/source/css/_common/components/components.styl
index 6143b961d4..1a399abfb2 100644
--- a/source/css/_common/components/components.styl
+++ b/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";
diff --git a/source/css/_common/components/header/github-banner.styl b/source/css/_common/components/header/github-banner.styl
index 2866d8ce19..f0926a3561 100644
--- a/source/css/_common/components/header/github-banner.styl
+++ b/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);
     }
   }
diff --git a/source/css/_common/components/header/menu.styl b/source/css/_common/components/header/menu.styl
index 6505bd7a49..e159939d44 100644
--- a/source/css/_common/components/header/menu.styl
+++ b/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;
   }
 
diff --git a/source/css/_common/components/pages/pages.styl b/source/css/_common/components/pages/pages.styl
index 1cffd0721c..4fba2544dd 100644
--- a/source/css/_common/components/pages/pages.styl
+++ b/source/css/_common/components/pages/pages.styl
@@ -5,3 +5,4 @@
 @import "schedule";
 @import "post-detail";
 @import "breadcrumb";
+@import "tag-cloud";
diff --git a/source/css/_common/components/pages/schedule.styl b/source/css/_common/components/pages/schedule.styl
index 76e9a5fbf2..632627797d 100644
--- a/source/css/_common/components/pages/schedule.styl
+++ b/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
       }
     }
   }
diff --git a/source/css/_common/components/tag-cloud.styl b/source/css/_common/components/pages/tag-cloud.styl
similarity index 100%
rename from source/css/_common/components/tag-cloud.styl
rename to source/css/_common/components/pages/tag-cloud.styl
diff --git a/source/css/_common/components/pagination.styl b/source/css/_common/components/pagination.styl
index a054ef009a..22972b3c05 100644
--- a/source/css/_common/components/pagination.styl
+++ b/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; }
     }
   }
+}
diff --git a/source/css/_common/components/post/post-collapse.styl b/source/css/_common/components/post/post-collapse.styl
index 7acde06f22..3a59036b73 100644
--- a/source/css/_common/components/post/post-collapse.styl
+++ b/source/css/_common/components/post/post-collapse.styl
@@ -1,6 +1,6 @@
 // TODO: Refactor.
 
-@media (max-width: 767px) {
++mobile() {
   .posts-collapse {
     margin: 0 20px;
 
diff --git a/source/css/_common/components/post/post.styl b/source/css/_common/components/post/post.styl
index fc0ba1ed97..27e270e3ee 100644
--- a/source/css/_common/components/post/post.styl
+++ b/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;
diff --git a/source/css/_common/components/sidebar/sidebar-chat.styl b/source/css/_common/components/sidebar/sidebar-button.styl
similarity index 94%
rename from source/css/_common/components/sidebar/sidebar-chat.styl
rename to source/css/_common/components/sidebar/sidebar-button.styl
index 1b20317841..918f6a668a 100644
--- a/source/css/_common/components/sidebar/sidebar-chat.styl
+++ b/source/css/_common/components/sidebar/sidebar-button.styl
@@ -1,4 +1,4 @@
-.chat {
+.feed-link, .chat {
   margin-top: 10px;
 
   a {
diff --git a/source/css/_common/components/sidebar/sidebar-feed-link.styl b/source/css/_common/components/sidebar/sidebar-feed-link.styl
deleted file mode 100644
index f9b81af5ea..0000000000
--- a/source/css/_common/components/sidebar/sidebar-feed-link.styl
+++ /dev/null
@@ -1,23 +0,0 @@
-.feed-link {
-  margin-top: 10px;
-
-  a {
-    display: inline-block;
-    padding: 0 15px;
-    color: rgb(252, 100, 35);
-    border: 1px solid rgb(252, 100, 35);
-    border-radius: 4px;
-
-    i {
-      color: rgb(252, 100, 35);
-      font-size: 14px;
-    }
-
-    &:hover {
-      color: white;
-      background: rgb(252, 100, 35);
-
-      i { color: white; }
-    }
-  }
-}
diff --git a/source/css/_common/components/sidebar/sidebar.styl b/source/css/_common/components/sidebar/sidebar.styl
index 198b64ea4f..a74c4ced73 100644
--- a/source/css/_common/components/sidebar/sidebar.styl
+++ b/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');
diff --git a/source/css/_common/components/third-party/needsharebutton.styl b/source/css/_common/components/third-party/needsharebutton.styl
index 2caae446f9..7f2f48c81e 100644
--- a/source/css/_common/components/third-party/needsharebutton.styl
+++ b/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;
   }
diff --git a/source/css/_common/scaffolding/base.styl b/source/css/_common/scaffolding/base.styl
index 31b43cb31c..1d6d29eaa4 100644
--- a/source/css/_common/scaffolding/base.styl
+++ b/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; }
 }
 
diff --git a/source/css/_common/scaffolding/helpers.styl b/source/css/_common/scaffolding/helpers.styl
index e5d669e64f..7959cdc0ca 100644
--- a/source/css/_common/scaffolding/helpers.styl
+++ b/source/css/_common/scaffolding/helpers.styl
@@ -46,7 +46,9 @@
   }
 }
 
-.affix.affix.affix { position: fixed; }
+.affix {
+  position: fixed;
+}
 
 .translation {
   margin-top: -20px;
diff --git a/source/css/_common/scaffolding/tables.styl b/source/css/_common/scaffolding/tables.styl
index 96103fe96b..a563abcef2 100644
--- a/source/css/_common/scaffolding/tables.styl
+++ b/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;
+}
diff --git a/source/css/_schemes/Pisces/_brand.styl b/source/css/_schemes/Pisces/_brand.styl
index 68bcbf92ce..11904d87dd 100644
--- a/source/css/_schemes/Pisces/_brand.styl
+++ b/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;
   }
 }
diff --git a/source/css/_schemes/Pisces/_layout.styl b/source/css/_schemes/Pisces/_layout.styl
index 31c37e5ac4..9b2c5b01b9 100644
--- a/source/css/_schemes/Pisces/_layout.styl
+++ b/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;
diff --git a/source/css/_schemes/Pisces/_sidebar.styl b/source/css/_schemes/Pisces/_sidebar.styl
index a8411d91fb..7b8b5861ef 100644
--- a/source/css/_schemes/Pisces/_sidebar.styl
+++ b/source/css/_schemes/Pisces/_sidebar.styl
@@ -11,13 +11,15 @@
   a, span.exturl {
     color: $black-light;
 
-    &:hover { color: $black-deep; }
+    &:hover {
+      color: $black-deep;
+      border-bottom-color: $black-deep;
+    }
   }
-  span.exturl:hover { border-bottom-color: $black-deep; }
 }
 
 .sidebar-inner {
-//padding: 20px 10px 0;
+  //padding: 20px 10px 0;
   box-sizing: border-box;
   width: $sidebar-desktop;
   color: $text-color;
@@ -49,40 +51,13 @@
   padding: 0 10px;
 }
 
-.links-of-author-item {
-  a:before, span.exturl:before { display: none; }
-  a, span.exturl {
-    border-bottom: none;
-    text-decoration: underline;
-  }
-}
-
-.feed-link {
+.feed-link, .chat {
   border-top: 1px dotted $grey-light;
   border-bottom: 1px dotted $grey-light;
   text-align: center;
 }
 
-.feed-link a {
-  display: block;
-  color: $orange;
-  border: none;
-
-  &:hover {
-    background: none;
-    color: darken($orange, 20%);
-
-    i { color: darken($orange, 20%); }
-  }
-}
-
-.chat {
-  border-top: 1px dotted $grey-light;
-  border-bottom: 1px dotted $grey-light;
-  text-align: center;
-}
-
-.chat a {
+.feed-link a, .chat a {
   display: block;
   color: $orange;
   border: none;
@@ -105,8 +80,14 @@
     font-size: 13px;
   }
 }
+
 .links-of-author-item {
   sidebar-inline-links-item();
+  a:before, span.exturl:before { display: none; }
+  a, span.exturl {
+    border-bottom: none;
+    text-decoration: underline;
+  }
 
   a, span.exturl {
     display: block;