文章上下文导航更新

yscoder · Jun 6, 2016 · 00c3b9a · 00c3b9a
1 parent 0905dd1
commit 00c3b9a
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 59 deletions.
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ Material Design 风格的Hexo主题，基于 Hexo 3.0+ 制作。预览 [我的
 
 ## 使用
 
-[document](https://github.com/yscoder/hexo-theme-indigo/wiki)
+[Document](https://github.com/yscoder/hexo-theme-indigo/wiki)
 
 
 ## 截图

diff --git a/layout/_partial/post/nav.ejs b/layout/_partial/post/nav.ejs
@@ -1,25 +1,25 @@
 <% if (post.prev || post.next){ %>
-<nav class="post-nav flex-row">
-  <div class="flex-col waves-block waves-effect prev">
-    <% if (post.prev){
-      var prevTitle = post.prev.title || '(no title)';
-      %>
-      <a href="<%- url_for(post.prev.path) %>" title="<%=prevTitle %>" id="post-prev" class="post-nav-link">
-        <i class="icon icon-chevron-left"></i>
-        <span class="article-nav-title">上一篇</span>
+<nav class="post-nav">
+  <% if (post.prev){
+    var prevTitle = post.prev.title || '[no title]';
+    %>
+    <div class="waves-block waves-effect prev fl">
+      <a href="<%- url_for(post.prev.path) %>" id="post-prev" class="post-nav-link">
+        <div class="tips"><i class="icon icon-angle-left icon-lg icon-pr"></i> Prev</div>
+        <h4 class="title"><%=prevTitle %></h4>
       </a>
-    <% } %>
-  </div>
-  <div class="flex-col waves-block waves-effect next">
-    <% if (post.next){
-        var nextTitle = post.next.title || '(no title)';
-      %>
-      <a href="<%- url_for(post.next.path) %>" title="<%=nextTitle %>" id="post-next" class="post-nav-link">
-        <span class="article-nav-title">下一篇</span>
-        <i class="icon icon-chevron-right"></i>
-      </a>
-    <% } %>
-  </div>
+    </div>
+  <% } %>
 
+  <% if (post.next){
+      var nextTitle = post.next.title || '[no title]';
+    %>
+    <div class="waves-block waves-effect next fr">
+      <a href="<%- url_for(post.next.path) %>" id="post-next" class="post-nav-link">
+        <div class="tips">Next <i class="icon icon-angle-right icon-lg icon-pl"></i></div>
+        <h4 class="title"><%=nextTitle %></h4>
+      </a>
+    </div>
+  <% } %>
 </nav>
 <% } %>
diff --git a/package.json b/package.json
@@ -1,8 +1,5 @@
 {
     "name": "hexo-theme-material-indigo",
-    "version": "0.1.0",
-    "private": true,
-    "dependencies": {
-        "hexo-renderer-less": "*"
-    }
+    "version": "0.3.0",
+    "private": true
 }
diff --git a/source/css/_partial/article.less b/source/css/_partial/article.less
@@ -42,59 +42,50 @@
 
 .post-main {
     overflow: hidden;
+    .post-content {
+        min-height: 100px;
+    }
 }
 
 .post-nav {
-    border-top: 1px solid @borderColor;
+    border-top: 3px solid @borderColor;
+    padding: 16px 0 0;
+    overflow: hidden;
 
-    .prev,
-    .next {
-        padding: 10px 0;
+    .prev, .next {
+        width: 47%;
+        padding-bottom: 300px;
+        margin-bottom: -300px;
+        background: @codeBg;
     }
 
     .next {
         text-align: right;
-
-        .post-nav-link:hover .article-nav-title {
-            .transform(translateX(-20px));
-        }
-
-    }
-
-    .prev {
-        .post-nav-link:hover .article-nav-title {
-            .transform(translateX(20px));
-        }
-
     }
 
 }
 
 .post-nav-link {
-    display: inline-block;
+    display: block;
     line-height: 2em;
-    font-size: 14px;
-    color: @secondaryTextColor;
-    white-space: nowrap;
+    font-size: 16px;
+    padding: 10px 16px;
 
-    .icon {
-        font-size: 14px;
-        padding: 0 12px;
+    .title {
+        .hoverLine(@primaryColor);
     }
 
-    .article-nav-title {
-        display: inline-block;
-        .transition(.4s)
+    .icon {
+        vertical-align: -9%;
     }
 
-    &:hover {
-        color: @accentColor;
+    .tips {
+        color: @secondaryTextColor;
     }
 
 }
 
 .post-content {
-    min-height: 100px;
     line-height: 1.8;
 
     p,
@@ -114,7 +105,7 @@
     }
 
     strong {
-        font-weight: 500;
+        font-weight: 700;
         border-bottom: 1px solid @accentColor;
         a {
             border-color: @accentColor

diff --git a/source/css/_partial/fontawesome.less b/source/css/_partial/fontawesome.less
@@ -8,7 +8,7 @@
 
 /* FONT PATH
  * -------------------------- */
- 
+
 @font-face {
   font-family: 'FontAwesome';
   src: url('@{fa-font-path}/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2'),
@@ -48,6 +48,12 @@
 .@{fa-css-prefix}-5x {
   font-size: 5em;
 }
+.@{fa-css-prefix}-pl {
+  padding-left: 5px;
+}
+.@{fa-css-prefix}-pr {
+  padding-right: 5px;
+}
 
 /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
    readers do not read off random characters that represent icons */
@@ -1188,7 +1194,7 @@
 .@{fa-css-prefix}-gratipay:before { content: @fa-var-gratipay; }
 .@{fa-css-prefix}-sun-o:before { content: @fa-var-sun-o; }
 .@{fa-css-prefix}-moon-o:before { content: @fa-var-moon-o; }
-.@{fa-css-prefix}-archive:before, 
+.@{fa-css-prefix}-archive:before,
 .@{fa-css-prefix}-archives:before { content: @fa-var-archive; }
 .@{fa-css-prefix}-bug:before { content: @fa-var-bug; }
 .@{fa-css-prefix}-vk:before { content: @fa-var-vk; }

diff --git a/source/css/_partial/highlight.less b/source/css/_partial/highlight.less
@@ -16,7 +16,7 @@
     overflow-x: auto;
     position: relative;
     background: @h-background;
-    padding: 10px 15px;
+    padding: 15px;
     line-height: @h-fs*1.6;
     border-radius: 2px;
 }