Fix several style issues (#1190)

layout/_macro/post-collapse.swig

@@ -15,7 +15,7 @@
     <header class="post-header">
 
       <div class="post-meta">
-        <time class="post-time" itemprop="dateCreated"
+        <time itemprop="dateCreated"
               datetime="{{ moment(post.date).format() }}"
               content="{{ date(post.date, config.date_format) }}">
           {{ date(post.date, 'MM-DD') }}

layout/_partials/header/menu-item.swig

@@ -8,7 +8,7 @@
 
     {%- set menuText = __('menu.' + name) | replace('menu.', '') %}
     {%- if theme.menu_settings.icons %}
-      {%- set menuIcon = '<i class="menu-item-icon fa fa-fw fa-' + value.split('||')[1] | trim | default('question-circle') + '"></i> <br>' %}
+      {%- set menuIcon = '<i class="fa fa-fw fa-' + value.split('||')[1] | trim | default('question-circle') + '"></i>' %}
     {%- endif %}
 
     {%- set menuBadge = '' %}

layout/_partials/header/menu.swig

@@ -25,7 +25,7 @@
       <li class="menu-item menu-item-search">
         <a href="javascript:;" class="popup-trigger">
         {%- if theme.menu_settings.icons %}
-          <i class="menu-item-icon fa fa-search fa-fw"></i> <br>{#
+          <i class="fa fa-search fa-fw"></i>{#
         #}{%- endif %}{#
         #}{{ __('menu.search') }}{#
       #}</a>

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

@@ -95,7 +95,6 @@
     display: inline;
     font-size: $font-size-medium;
     font-weight: normal;
-    line-height: inherit;
     margin-bottom: 0;
     margin-top: 0;
 

source/css/_common/components/post/post-title.styl → source/css/_common/components/post/post-header.styl

@@ -1,3 +1,7 @@
+.posts-expand .post-header {
+  font-size: $font-size-large;
+}
+
 .posts-expand .post-title {
   word-wrap();
   font-weight: $font-weight-normal;
@@ -29,7 +33,6 @@
   border-bottom: none;
   color: $black-light;
   display: inline-block;
-  line-height: 1.2;
   position: relative;
   vertical-align: top;
 
@@ -56,3 +59,51 @@
     margin-left: 5px;
   }
 }
+
+.posts-expand .post-meta {
+  color: $grey-dark;
+  font-family: $font-family-posts;
+  margin: 3px 0 60px 0;
+  text-align: center;
+
+  .post-description {
+    font-size: $font-size-small;
+    margin-top: 2px;
+  }
+
+  time {
+    border-bottom: 1px dashed $grey-dark;
+    cursor: help;
+  }
+}
+
+.post-meta .post-meta-item + .post-meta-item::before {
+  content: '|';
+  margin: 0 .5em;
+}
+
+.post-meta .post-meta-item {
+  font-size: $font-size-smallest;
+}
+
+.post-meta-divider {
+  margin: 0 .5em;
+}
+
+.post-meta-item-icon {
+  margin-right: 3px;
+
+  +tablet-mobile() {
+    display: inline-block;
+  }
+}
+
+.post-meta-item-text {
+  if (!hexo-config('post_meta.item_text')) {
+    display: none;
+  }
+
+  +tablet-mobile() {
+    display: none;
+  }
+}

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

@@ -6,10 +6,6 @@
     font-size: $font-size-large;
   }
 
-  +mobile() {
-    font-size: $font-size-small;
-  }
-
   span.exturl .fa {
     font-size: $font-size-small;
     margin-left: 4px;
@@ -65,11 +61,10 @@
 @import 'post-eof';
 @import 'post-expand';
 @import 'post-gallery';
-@import 'post-meta';
+@import 'post-header';
 @import 'post-nav';
 @import 'post-rtl';
 @import 'post-tags';
-@import 'post-title';
 @import 'post-widgets';
 
 @import 'post-reward' if (hexo-config('reward_settings.enable'));

source/css/_common/components/third-party/related-posts.styl

@@ -6,7 +6,7 @@
   margin-top: $post-eof-margin-bottom;
 }
 
-ul.popular-posts {
+.popular-posts {
   padding: 0;
 
   .popular-posts-item {

source/css/_common/outline/footer/footer.styl

@@ -18,7 +18,6 @@
 }
 
 .footer-inner {
-  box-sizing: border-box;
   margin: 0 auto;
   text-align: center;
   width: $content-desktop;

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

@@ -15,7 +15,6 @@
 .github-corner {
   $scheme = hexo-config('scheme');
   $bg-color = unquote(hexo-config('android_chrome_color'));
-  $mobile-layout-economy = hexo-config('mobile_layout_economy');
 
   :hover .octo-arm {
     animation: octocat-wave 560ms ease-in-out;
@@ -47,16 +46,10 @@
     }
   }
 
-  +mobile() {
-    svg {
-      if ($scheme == 'Mist') {
+  if ($scheme == 'Mist') {
+    +mobile() {
+      svg {
         top: inherit;
-
-        if ($mobile-layout-economy) {
-          +mobile-small() {
-            margin-top: initial;
-          }
-        }
       }
     }
   }

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

@@ -16,20 +16,22 @@
   }
 
   a, span.exturl {
-    border-bottom: 1px solid $menu-link-border;
+    border-bottom: 0;
     display: block;
     font-size: $font-size-smaller;
-    line-height: inherit;
     transition-property: border-color;
     the-transition();
 
-    &:hover {
-      border-bottom-color: $menu-link-hover-border;
+    // To prevent hover on external links with touch devices after click.
+    @media (hover: none) {
+      &:hover {
+        border-bottom-color: transparent !important;
+      }
     }
   }
 
   .fa {
-    margin-right: 5px;
+    margin-right: 8px;
   }
 }
 

source/css/_common/outline/header/site-meta.styl

@@ -12,7 +12,7 @@
   border-bottom: none;
   color: $brand-color;
   display: inline-block;
-  line-height: $title-font-size;
+  line-height: $font-size-title;
   padding: 0 40px;
   position: relative;
 
@@ -31,15 +31,15 @@
 .site-title {
   display: inline-block;
   font-family: $font-family-logo;
-  font-size: $title-font-size;
+  font-size: $font-size-title;
   font-weight: normal;
   line-height: 1.5;
   vertical-align: top;
 }
 
 .site-subtitle {
   color: $subtitle-color;
-  font-size: $subtitle-font-size;
+  font-size: $font-size-subtitle;
   margin-top: 10px;
 }
 

source/css/_common/outline/sidebar/sidebar-toc.styl

@@ -30,15 +30,14 @@
   }
 
   .nav-item {
+    line-height: 1.8;
     overflow: hidden;
     text-overflow: ellipsis;
-
     // text-align: justify;
+
     if (!hexo-config('toc.wrap')) {
       white-space: nowrap;
     }
-
-    line-height: 1.8;
   }
 
   .nav {

source/css/_common/scaffolding/pagination.styl

@@ -1,4 +1,4 @@
-.page-number-basic {
+$page-number-basic {
   display: inline-block;
   margin: 0 10px;
   padding: 0 11px;
@@ -16,7 +16,7 @@
   text-align: center;
 
   .prev, .next, .page-number {
-    @extend .page-number-basic;
+    @extend $page-number-basic;
     border-bottom: 0;
     border-top: 1px solid $pagination-link-border;
     transition-property: border-color;
@@ -28,7 +28,7 @@
   }
 
   .space {
-    @extend .page-number-basic;
+    @extend $page-number-basic;
     margin: 0;
     padding: 0;
   }

source/css/_common/scaffolding/scaffolding.styl

@@ -1,6 +1,6 @@
 //
 // Scaffolding
-// =================================================
+// ==================================================
 @import 'normalize';
 @import 'base';
 @import 'tables';

source/css/_common/scaffolding/tags/group-pictures.styl

@@ -1,7 +1,6 @@
 .post-body .group-picture {
   img {
     border: 0;
-    box-sizing: border-box;
     margin: 0 auto;
     padding: 0 3px;
   }

source/css/_common/scaffolding/tags/tabs.styl

@@ -1,5 +1,5 @@
 // Read tabs border_radius from NexT config and set in "$tbr px" to use it as string variable in this CSS section.
-hexo-config('tabs.border_radius') is a 'unit' ? ($tbr = unit(hexo-config('tabs.border_radius'), px)) : ($tbr = 0);
+$tbr = hexo-config('tabs.border_radius') is a 'unit' ? unit(hexo-config('tabs.border_radius'), px) : 0;
 
 .post-body .tabs {
   margin-bottom: 20px;

source/css/_mixins/base.styl

@@ -85,15 +85,6 @@ word-wrap() {
   word-wrap: break-word;
 }
 
-disable-touch-hover() {
-  // To prevent hover on external links with touch devices after click.
-  @media (hover: none) {
-    &:hover {
-      background: none;
-    }
-  }
-}
-
 disable-user-select() {
   -moz-user-select: none;
   -ms-user-select: none;