style: labels(tags) layout 标签布局样式优化

A tidier and clearer labels layout. 调整多处样式，使标签显示得更紧凑。
MOxFIVE · Oct 16, 2015 · 3446b21 · 3446b21
1 parent 06fc249
commit 3446b21
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 53 deletions.
diff --git a/layout/_partial/archive-post.ejs b/layout/_partial/archive-post.ejs
@@ -5,9 +5,9 @@
 	      	<%- partial('post/date', {class_name: 'archive-article-date', date_format: 'MMM D'}) %>
         </div>
     	 <%- partial('post/title', {class_name: 'archive-article-title'}) %>
-        <div class="article-info info-on-right">
-          <%- partial('post/tag') %>
+        <div class="article-info info-on-archive">
           <%- partial('post/category') %>
+          <%- partial('post/tag') %>
         </div>
         <div class="clearfix"></div>
     </header>

diff --git a/layout/_partial/article.ejs b/layout/_partial/article.ejs
@@ -14,8 +14,8 @@
       </header>
       <% if (!index){ %>
       <div class="article-info article-info-post">
-        <%- partial('post/tag') %>
         <%- partial('post/category') %>
+        <%- partial('post/tag') %>
         <div class="clearfix"></div>
       </div>
       <% } %>
@@ -34,8 +34,8 @@
           <a class="">置顶</a>
         </div>
       <% } %>
-      <%- partial('post/tag') %>
       <%- partial('post/category') %>
+      <%- partial('post/tag') %>
       <% if (post.excerpt && index){ %>
         <p class="article-more-link">
           <a <% if (!theme.excerpt_link){ %>class="hidden"<% } %> href="<%- url_for(post.path) %>#more"><%= theme.excerpt_link %> >></a>

diff --git a/source/css/_partial/article.styl b/source/css/_partial/article.styl
@@ -117,9 +117,8 @@
   border-left: 5px solid;
   padding: 15px 8.2em 15px 25px;
 }
-.article-info.info-on-right{
+.article-info.info-on-archive{
   margin: 10px 0 0 0;
-  float: right;
 }
 .article-info-index.article-info{
   padding-top: 20px;
@@ -291,8 +290,9 @@
     &:before{
       color: #999;
       content: "\f073";
-      font: 17px FontAwesome;
-      margin-right: 10px;
+      font: 1em FontAwesome;
+      margin-right: 4px;
+      margin-top: 0px;
     }
   }
 }
@@ -301,17 +301,19 @@
   margin-top: 5px;
   float: right;
   a{
-    background: #4d4d4d;
+    background: #88acdb;
     color: #fff;
-    font-size: 12px;
-    padding: 2px 8px 4px;
-    line-height: 16px;
+    font-size: .9em;
+    padding: 2px 4px;
+    line-height: 1em;
     -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
     border-radius: 2px;
     transition: background 0.3s;
+    opacity: 0.6;
     &:hover{
-      background: #3c3c3c;
+      background: #9c9;
+      opacity: 1;
     }
     &.hidden{
       visibility: hidden;

diff --git a/source/css/_partial/mobile.styl b/source/css/_partial/mobile.styl
@@ -222,3 +222,12 @@
         float: initial;
     }
 }
+.article-category::before{
+  display: none;
+}
+.article-tag::before {
+  display: none;
+}
+.article-meta time:before {
+  display: none;
+}
diff --git a/source/css/_partial/tagcloud.styl b/source/css/_partial/tagcloud.styl
@@ -239,9 +239,10 @@
         position:relative;  
         border-radius:0 5px 5px 0; 
         margin: 5px 9px 5px 8px;
-        font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
+        opacity: 0.8;
+        font-family: inherit;
         &:hover{
-            opacity: 0.8;
+            opacity: 1;
         }
         &:before{
             content: " ";
@@ -289,57 +290,31 @@
         }
     }
     a.color5{
-        background: #7B5D5F;
+        background: #88acdb;
         &:before{
-            border-right-color:#7B5D5F;  
+            border-right-color:#88acdb;  
         }
     }
 }
-
-.article-tag-list{
-    .article-tag-list-item{
-        float: left;
-    }
-}
-.article-tag{
-    float: left;
-    .article-tag-list{
-        float: left;
-    }
-    &:before{
+.article-tag {
+    &::before {
         float: left;
         color: #999;
-        content: "\f06c";
+        content: "\f02b";
         font: 16px FontAwesome;
-        float: left;
-        margin-right: 10px;
-        margin-top: 9px;
-    }
-    &:after{
-        float: left;
-        content: "";
-        margin-right: 20px;
-        margin-top: 9px;
-        float: left;
+        margin-left: 1em;
+        margin-right: 5px;
+        margin-top: 6px;
     }
 }
-.article-category{
-    float: left;
-    &:before{
+.article-category {
+    &::before {
         float: left;
         color: #999;
         content: "\f02d";
         font: 16px FontAwesome;
-        float: left;
-        margin-right: 10px;
-        margin-top: 9px;
-    }
-    &:after{
-        float: left;
-        content: "";
-        margin-right: 20px;
-        margin-top: 9px;
-        float: left;
+        margin-right: 5px;
+        margin-top: 6px;
     }
 }
 .article-pop-out {