blog styles

Author: Evan You

themes/vue/layout/partials/blog.ejs

@@ -1,7 +1,11 @@
+<div class="content blog">
+<h1 style="text-align: center; margin-bottom:.5em">The Vue.js Blog</h1>
 <% site.posts.sort('date', -1).each(function (post) { %>
-    <div class="content">
-        <h4><%- post.date.format('MMM D[,] YYYY') %></h3>
-        <h1><a href="/<%- post.path %>"><%- post.title %></a></h2>
-        <div><%- post.content %></div>
+    <div class="post">
+        <h2><a href="/<%- post.path %>"><%- post.title %></a></h2>
+        <h4><%- post.date.format('MMM D[,] YYYY') %></h4>
+        <div><%- post.excerpt %></div>
+        <a href="/<%- post.path %>">... continue reading</a>
     </div>
-<% }) %>
+<% }) %>
+</div>

themes/vue/layout/partials/header.ejs

@@ -8,7 +8,7 @@
         <li><a href="/api/" class="nav-link<%- page.path.match(/api/) ? ' current' : '' %>">API Reference</a></li>
         <br class="break" />
         <li><a href="/examples/" class="nav-link<%- page.path.match(/examples/) ? ' current' : '' %>">Examples</a></li>
-        <li><a href="/blog/" class="nav-link<%- page.path.match(/blog/) ? ' current' : '' %>">Blog</a></li>
+        <li><a href="/blog/" class="nav-link<%- (page.path.match(/blog/) || is_post()) ? ' current' : '' %>">Blog</a></li>
         <li><a href="https://github.com/yyx990803/vue" target="_blank" class="nav-link">GitHub</a></li>
     </ul>
 </div>

themes/vue/layout/post.ejs

@@ -1,4 +1,18 @@
-<div class="content">
+<div class="sidebar blog">
+    <div class="toggle">···</div>
+    <div class="list">
+        <h2>Recent Posts</h2>
+        <ul>
+        <% site.posts.sort('date', -1).limit(10).each(function (post) { %>
+            <li>
+                <a href="/<%- post.path %>" class="sidebar-link"><%- post.title %></a>
+            </li>
+        <% }) %>
+        </ul>
+    </div>
+</div>
+<div class="content blog">
     <h1><%- page.title %></h1>
+    <h4><%- page.date.format('MMM D[,] YYYY') %></h4>
     <%- page.content %>
 </div>

themes/vue/source/css/_blog.styl

@@ -0,0 +1,23 @@
+.content.blog
+    h1
+        margin 0 0 .5em
+    h2
+        margin .8em 0
+        padding-bottom 0
+        border-bottom none
+        a
+            color $dark
+            &:hover
+                border-bottom 2px solid $green
+    h4
+        color $light
+        margin 1.2em 0
+    figure, p
+        margin-left 0
+    .post
+        padding 1em 0 2em
+        border-bottom 1px solid $border
+
+@media screen and (max-width: 1400px) and (min-width: 720px)
+    .content.blog
+        margin 0 0 0 280px

themes/vue/source/css/page.styl

@@ -1,5 +1,6 @@
 @import "_common"
 @import "_demo"
+@import "_blog"
 
 $header-height = 40px
 
@@ -63,6 +64,8 @@ $header-height = 40px
         &.current
             font-weight 600
             color $green
+        &:hover
+            border-bottom 2px solid $green
 
 .content
     padding 2.2em 0