refactor: Introduced css style on demand

scripts/filters/external-link.js

@@ -17,10 +17,15 @@ hexo.extend.filter.register('after_post_render', function(data) {
 
   $('a').each(function() {
     var href = $(this).attr('href');
-    var className = $(this).attr('class');
 
     if (!href) return;
-    if (className && className.indexOf('friends-item') !== -1) return;
+
+    var className = $(this).attr('class');
+    var classNameWhitelist = [
+      'friends-plugin__item',
+    ];
+
+    if (className && classNameWhitelist.includes(className)) return;
 
     var data = url.parse(href);
 

scripts/tags/friends.js

@@ -25,11 +25,11 @@ function friends(args) {
     var result = '<div class="friends-plugin">';
 
     datas.forEach(data => {
-      result += `<a class="friends-item" href="${data.url}">`;
-      result += `<img class="avatar" src="${data.avatar}">`;
-      result += '<div class="info">';
-      result += `<p class="name">${data.name}</p>`;
-      result += `<p class="intro">${data.introduction}</p>`;
+      result += `<a class="friends-plugin__item" href="${data.url}">`;
+      result += `<img class="friends-plugin__item-avatar" src="${data.avatar}">`;
+      result += '<div class="friends-plugin__item-info">';
+      result += `<p class="friends-plugin__item-info__name">${data.name}</p>`;
+      result += `<p class="friends-plugin__item-info__intro">${data.introduction}</p>`;
       result += '</div>';
       result += '</a>';
     });

source/css/_common/components/plugins/friends.styl

 .friends-plugin {
   overflow: hidden;
   max-width: 100%;
-}
 
-.friends-item {
-  display: block;
-  float: left;
-  padding: .5rem;
-  width: calc(50% - 10px);
-  height: 100px;
-  transition: background-color .3s;
+  &__item {
+    display: block;
+    float: left;
+    padding: .5rem;
+    width: 50%;
+    height: 100px;
+    transition: background-color .3s;
 
-  &:hover {
-    background-color: alpha($blue-light, .1);
-  }
+    &:hover {
+      background-color: alpha($blue-light, .1);
+    }
 
-  p {
-    margin: 0;
-  }
+    p {
+      margin: 0;
+    }
 
-  .avatar {
-    display: inline-block;
-    border-radius: 50%;
-    width: 60px;
-    height: 60px;
-    vertical-align: middle;
-  }
+    avatar-width = 60px;
 
-  .info {
-    display: inline-block;
-    margin-left: 1rem;
-    padding-top: .6rem;
-    width: calc(100% - 60px - 1rem);
-    height: 100%;
-    vertical-align: middle;
-    color: $font-color;
-  }
+    &-avatar {
+      display: inline-block;
+      border-radius: 50% !important;
+      width: avatar-width;
+      height: avatar-width;
+      vertical-align: middle;
+    }
 
-  .name,
-  .intro {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
+    info-margin = 20px;
+
+    &-info {
+      display: inline-block;
+      margin-left: info-margin;
+      padding-top: .6rem;
+      width: 'calc(100% - %s)' % (avatar-width + info-margin);
+      height: 100%;
+      vertical-align: middle;
+      color: $font-color;
+
+      &__name,
+      &__intro {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
 
-  .intro {
-    font-size: .9em;
-    color: #999;
+      &__intro {
+        font-size: .9em;
+        color: #999;
+      }
+    }
   }
 }

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

@@ -49,10 +49,13 @@
       font-weight: 700;
     }
 
+    time-width = 3em;
+    time-margin = 1em;
+
     &__time {
       display: inline-block;
-      margin-right: 1em; /* Affect the width of title */
-      width: 3em; /* Affect the width of title */
+      margin-right: time-margin;
+      width: time-width;
       vertical-align: middle;
       color: #99a9bf;
       transform: translateY(3%);
@@ -61,7 +64,7 @@
     &-title {
       display: inline-block;
       margin: 0;
-      width: calc(100% - 4em);
+      width: 'calc(100% - %s)' % (time-width + time-margin);
       font-size: 1em;
       font-weight: normal;
       vertical-align: middle;

source/css/_common/components/widgets/comments.styl

-.comments {
-  margin: 1.5rem 0 0;
-  width: $content-width;
-  layout-card();
+if (hexo-config('gitalk.enable') || hexo-config('valine.enable') || hexo-config('livere.enable') || hexo-config('disqus.enable')) {
+  .comments {
+    margin: 1.5rem 0 0;
+    width: $content-width;
+    layout-card();
 
-  if (hexo-config('sidebar.position') == 'left') {
-    float: right;
-  } else if (hexo-config('sidebar.position') == 'right') {
-    float: left;
+    if (hexo-config('sidebar.position') == 'left') {
+      float: right;
+    } else if (hexo-config('sidebar.position') == 'right') {
+      float: left;
+    }
   }
 }
 
-// Disqus
-#disqus_thread {
-  width: 100%;
-}
+if (hexo-config('gitalk.enable')) {
+  // Gitalk
+  #gitalk-container {
+    width: 100%;
 
-// Gitalk
-#gitalk-container {
-  width: 100%;
+    .gt-meta {
+      margin-top: 0;
+      padding-top: 0;
+    }
+  }
+}
 
-  .gt-meta {
-    margin-top: 0;
-    padding-top: 0;
+if (hexo-config('livere.enable')) {
+  // Livere
+  #lv-container {
+    width: 100%;
   }
 }
 
-// Livere
-#lv-container {
-  width: 100%;
+if (hexo-config('disqus.enable')) {
+  // Disqus
+  #disqus_thread {
+    width: 100%;
+  }
 }

source/css/_common/components/widgets/index.styl

@@ -6,8 +6,8 @@
 @import './zoom-image.styl' if (hexo-config('zoom_image.enable'));
 @import './gallery-image.styl' if (hexo-config('gallery_waterfall.enable'));
 @import './lazyload.styl' if (hexo-config('lazyload.enable'));
+@import './loading-bar.styl' if (hexo-config('pjax.enable'));
 @import './comments.styl';
 @import './copy-button.styl'
-@import './loading-bar.styl';
 @import './sticky-top.styl';
 @import './pagination.styl';

source/css/_common/outline/macro.styl

@@ -26,14 +26,16 @@
   font-size: $font-size-main;
 }
 
-.sidebar {
-  float: convert(hexo-config('sidebar.position'));
-
-  &.sticky {
-    position: fixed;
-    top: convert(hexo-config('sidebar.offsetTop') || '30px');
-    z-index: $z-index0;
-    transform: translateZ(0);
+if (hexo-config('sidebar.enable')) {
+  .sidebar {
+    float: convert(hexo-config('sidebar.position'));
+
+    &.sticky {
+      position: fixed;
+      top: convert(hexo-config('sidebar.offsetTop') || '30px');
+      z-index: $z-index0;
+      transform: translateZ(0);
+    }
   }
 }
 

source/css/_common/responsive.styl

@@ -32,8 +32,10 @@
     width: 100%;
   }
 
-  .sidebar {
-    display: none;
+  if (hexo-config('sidebar.enable')) {
+    .sidebar {
+      display: none;
+    }
   }
 
   .post-list .post {
@@ -91,18 +93,20 @@
     font-size: .9rem;
   }
 
-  .search-popup {
-    top: 0;
-    left: 0;
-    margin: 0;
-    border-radius: 0;
-    width: 100%;
-    height: 100vh;
-    max-height: 100vh;
-  }
+  if (hexo-config('algolia_search.enable') || hexo-config('local_search.enable')) {
+    .search-popup {
+      top: 0;
+      left: 0;
+      margin: 0;
+      border-radius: 0;
+      width: 100%;
+      height: 100vh;
+      max-height: 100vh;
+    }
 
-  .search-results {
-    max-height: 'calc(100vh - %s)' % search-results-height;
+    .search-results {
+      max-height: 'calc(100vh - %s)' % search-results-height;
+    }
   }
 }
 
@@ -145,8 +149,10 @@
     padding: .8rem;
   }
 
-  .algolia-hit-item {
-    margin: 0;
+  if (hexo-config('algolia_search.enable')) {
+    .algolia-hit-item {
+      margin: 0;
+    }
   }
 
   .gallery__img {

source/css/_common/scaffolding/animation.styl

 // avatar animation
 // ----------------------------------------
 if (hexo-config('author.enable')) {
-  // shake
-  @keyframes avatar-shake {
-    0% {
-      transform: scale(1);
-    }
-
-    10%,
-    20% {
-      transform: scale(.9) rotate(3deg);
-    }
-
-    30%,
-    50%,
-    70%,
-    90% {
-      transform: scale(1.1) rotate(-3deg);
-    }
-
-    40%,
-    60%,
-    80% {
-      transform: scale(1.1) rotate(3deg);
-    }
-
-    100% {
-      transform: scale(1);
-    }
-  }
-
-  // trun
-  @keyframes avatar-turn {
-    100% {
-      transform: rotate(1turn);
+  if (hexo-config('author.animation') == 'shake') {
+    @keyframes avatar-shake {
+      0% {
+        transform: scale(1);
+      }
+
+      10%,
+      20% {
+        transform: scale(.9) rotate(3deg);
+      }
+
+      30%,
+      50%,
+      70%,
+      90% {
+        transform: scale(1.1) rotate(-3deg);
+      }
+
+      40%,
+      60%,
+      80% {
+        transform: scale(1.1) rotate(3deg);
+      }
+
+      100% {
+        transform: scale(1);
+      }
+    }
+  } else if (hexo-config('author.animation') == 'turn') {
+    @keyframes avatar-turn {
+      100% {
+        transform: rotate(1turn);
+      }
     }
   }
 }
 
 // footer heart beat animation
 // ----------------------------------------
-if (hexo-config('footer.icon.enable')) {
+if (hexo-config('footer.icon.enable') && hexo-config('footer.icon.animation')) {
   @keyframes footer-heart-beat {
     0% {
       transform: scale(1);