refactor: article-nav 文章导航样式优化

MOxFIVE/M-Hexo-Blog#7
MOxFIVE · Oct 16, 2015 · a3fdf0f · a3fdf0f
1 parent 340d420
commit a3fdf0f
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 58 deletions.
diff --git a/layout/_partial/post/nav.ejs b/layout/_partial/post/nav.ejs
@@ -1,22 +1,18 @@
 <% if (post.prev || post.next){ %>
 <nav id="article-nav">
   <% if (post.prev){ %>
-    <a href="<%- url_for(post.prev.path) %>" id="article-nav-newer" class="article-nav-link-wrap">
-      <strong class="article-nav-caption"><</strong>
-      <div class="article-nav-title">
-        <% if (post.prev.title){ %>
-          <%= post.prev.title %>
-        <% } else { %>
-          (no title)
-        <% } %>
-      </div>
-    </a>
+    <div id="article-nav-newer" class="article-nav-title">
+      <a href="<%- url_for(post.prev.path) %>">
+        <%= post.prev.title %>
+      </a>
+    </div>
   <% } %>
   <% if (post.next){ %>
-    <a href="<%- url_for(post.next.path) %>" id="article-nav-older" class="article-nav-link-wrap">
-      <div class="article-nav-title"><%= post.next.title %></div>
-      <strong class="article-nav-caption">></strong>
-    </a>
+    <div id="article-nav-older" class="article-nav-title">
+      <a href="<%- url_for(post.next.path) %>">
+        <%= post.next.title %>
+      </a>
+    </div>
   <% } %>
 </nav>
 <% } %>
diff --git a/source/css/_partial/article.styl b/source/css/_partial/article.styl
@@ -321,39 +321,43 @@
   }
 }
 
-#article-nav{
-  margin: 80px 0 30px 0;
-  padding-bottom: 10px;
-  .article-nav-link-wrap{
-    margin: 0px 30px 0px 30px;
-    font-size: 14px;
-    color: #333;
-    .article-nav-title{
-      display: inline-block;
-      font-size: 12px;
-      color: #aaa;
-      transition: color 0.3s;
-    }
-    strong{
-      background: #ddd;
-      color: #fff;
-      border-radius: 100%;
-      width: 15px;
-      height: 15px;
-      display: inline-block;
-      text-align: center;
-      transition: background 0.3s;
-    }
-    &:hover{
-      strong{
-        background: #4d4d4d;
-      }
-      .article-nav-title{
-        color: #4d4d4d;
-      }
-    }
+#article-nav {
+  display: table;
+  width: 100%;
+  height: 2.5em;
+  margin: 1em auto;
+  background: #88acdb;
+}
+.article-nav-title {
+  display: table-cell;
+  vertical-align: middle;
+  a {
+    color: white;
+  }
+  a:hover {
+    font-weight: bold;
+    color: #4d4d4d;
   }
-  #article-nav-older{
-    float: right;
+}
+#article-nav-older {
+  text-align: right;
+  padding-right: 1em;
+  &:after { 
+    padding-left:0.5em;
+    content:"→";
+    color: white;
+    font-weight: bold;
+    font-family: Calibri;
+  }
+}
+#article-nav-newer {
+  text-align: left;
+  padding-left: 1em;
+  &:before { 
+    padding-right:0.5em;
+    content:"←";
+    color: white;
+    font-weight: bold;
+    font-family: Calibri;
   }
 }
diff --git a/source/css/_partial/mobile.styl b/source/css/_partial/mobile.styl
@@ -144,17 +144,6 @@
             }
         }
     }
-    .article-nav-link-wrap{
-        margin: 5px 0;
-        strong{
-            float: left;
-            margin-right: 5px;
-        }
-    }
-    #article-nav-older{
-        float: none;
-        display: block;
-    }
 }
 .share{
     padding: 3px 10px;