chore: redesign archive list style

layout/common/archive.ejs

@@ -2,31 +2,23 @@
         case 'archive':
         var last;
         page.posts.each(function(post, i) {
-        var year = post.date.year();
-        if (last != year) {
-            if (last != null) { %>
-                </div></section>
-            <% }
-            last = year; %>
-            <div class="archive-year-wrap">
-                <a href="<%- url_for('archives/' + year) %>" class="archive-year"><%= year %></a>
-            </div>
-            <section class="archives-wrap">
-                <div class="archives">
-        <% } %>
-        <%- partial('summary', {post: post, archive: true}) %>
-    <% });
+            var year = post.date.year();
+            if (last != year) {
+                if (last != null) { %>
+                    </div></section>
+                <% }
+                last = year; %>
+                <div class="archive-year-wrap">
+                    <a href="<%- url_for('archives/' + year) %>" class="archive-year"><%= year %></a>
+                </div>
+                <section class="archives-wrap">
+                    <div class="archives">
+            <% } %>
+            <%- partial('summary', {post: post, archive: true}) %>
+        <% });
         if (page.posts.length) { %>
         </div></section>
     <% }
-        if (page.total > 1) { %>
-            <nav id="page-nav">
-                <%- paginator({
-                    prev_text: '&laquo; ' + __('nav.prev'),
-                    next_text: __('nav.next') + ' &raquo;'
-                }) %>
-            </nav>
-        <% }
         break;
     case 'category': %>
         <section class="archives-wrap">
@@ -38,14 +30,7 @@
             <%- partial('summary', {post: post, archive: false}) %>
         <% }); %>
         </div></section>
-        <% if (page.total > 1) { %>
-            <nav id="page-nav">
-                <%- paginator({
-                    prev_text: '&laquo; ' + __('nav.prev'),
-                    next_text: __('nav.next') + ' &raquo;'
-                }) %>
-            </nav>
-        <% }
+        <%
         break;
     case 'tag': %>
         <section class="archives-wrap">
@@ -57,26 +42,19 @@
             <%- partial('summary', {post: post, archive: false}) %>
         <% }); %>
         </div></section>
-        <% if (page.total > 1) { %>
-            <nav id="page-nav">
-                <%- paginator({
-                    prev_text: '&laquo; ' + __('nav.prev'),
-                    next_text: __('nav.next') + ' &raquo;'
-                }) %>
-            </nav>
-        <% }
+        <%
         break;
     default:
         page.posts.each(function(post) { %>
-            <%- partial('article', {post: post, index: true}) %>
+            <%- partial('article', { post: post, index: true }) %>
         <% })
-        if (page.total > 1) { %>
-            <nav id="page-nav">
-                <%- paginator({
-                    prev_text: '&laquo; ' + __('nav.prev'),
-                    next_text: __('nav.next') + ' &raquo;'
-                }) %>
-            </nav>
-        <% }
         break;
-} %>
+}
+if (page.total > 1) { %>
+    <nav id="page-nav">
+        <%- paginator({
+            prev_text: '&laquo; ' + __('nav.prev'),
+            next_text: __('nav.next') + ' &raquo;'
+        }) %>
+    </nav>
+<% } %>

layout/common/article.ejs

@@ -6,9 +6,9 @@
         <%- partial('post/gallery') %>
         <% if (post.link || post.title) { %>
             <header class="article-header">
-                <%- partial('post/title', {class_name: 'article-title'}) %>
+                <%- partial('post/title', { class_name: 'article-title' }) %>
                 <div class="article-meta">
-                    <%- partial('post/date', {class_name: 'article-date', date_format: null}) %>
+                    <%- partial('post/date', { class_name: 'article-date', date_format: null }) %>
                     <%- partial('post/category') %>
                     <%- partial('post/tag') %>
                 </div>

layout/common/head.ejs

@@ -3,18 +3,19 @@
 <head>
     <meta charset="utf-8">
     <%
+        function capitalize (str) { return str.charAt(0).toUpperCase() + str.substring(1).toLowerCase() }
         var title = page.title;
         if (is_archive()) {
-            title = __('index.archive');
+            title = capitalize(__('index.archive'));
             if (is_month()) {
                 title += ': ' + page.year + '/' + page.month;
             } else if (is_year()) {
                 title += ': ' + page.year;
             }
         } else if (is_category()) {
-            title = __('index.category') + ': ' + page.category;
+            title = capitalize(__('index.category')) + ': ' + page.category;
         } else if (is_tag()) {
-            title = __('index.tag') + ': ' + page.tag;
+            title = capitalize(__('index.tag')) + ': ' + page.tag;
         }
     %>
     <title><% if (title) { %><%= title %> | <% } %><%= config.title %></title>

layout/common/summary.ejs

@@ -1,17 +1,23 @@
-<article class="archive-article archive-type-<%= post.layout %>">
-    <div class="archive-article-inner">
-        <% if(theme.customize.thumbnail == true) { %>
-        <div class="archive-article-thumbnail">
-            <%- partial('thumbnail.ejs', {post: post}) %>
-        </div>
-        <% } %>
+<article class="archive-article archive-type-summary">
+    <% if(theme.customize.thumbnail == true) { %>
+    <div class="archive-article-thumbnail">
+        <%- partial('thumbnail.ejs', { post: post }) %>
+    </div>
+    <% } %>
+    <div class="archive-article-content">
         <header class="archive-article-header">
-            <%- partial('post/title', {class_name: 'archive-article-title'}) %>
-            <% if(archive) { %>
-                <%- partial('post/date', {class_name: 'archive-article-date', date_format: 'MMM D'}) %>
-            <% } else { %>
-                <%- partial('post/date', {class_name: 'archive-article-date', date_format: 'YYYY MMM D'}) %>
-            <% } %>
+            <%- partial('post/title', { class_name: 'archive-article-title' }) %>
+            <div class="article-meta">
+                <%- partial('post/date', { class_name: 'article-date', date_format: null }) %>
+                <%- partial('post/category') %>
+                <%- partial('post/tag') %>
+            </div>
         </header>
+        <div class="article-entry">
+            <p><%- excerpt(post) %></p>
+            <p class="article-more-link">
+                <a href="<%- url_for(post.path) %>#more"><%= __('article.more') %></a>
+            </p>
+        </div>
     </div>
 </article>

source/css/_extend.styl

@@ -9,7 +9,7 @@ $link-dark
 
 $block-caption
     line-height: 1em
-    color: color-grey
+    // color: color-grey
     text-decoration: none
     text-transform: uppercase
 

source/css/_partial/archive.styl

@@ -22,54 +22,63 @@
     @media mq-mini
         padding: 0 15px
 
-.archive-year
-    @extend $block-caption
-
 .archive-article
     clearfix()
     avoid-column-break()
     @extend $block
     padding: 0
     margin-bottom: 15px
-
-.archive-article-thumbnail
-    float: left
-    margin-right: 10px
-    .thumbnail
+    &.archive-type-summary
+        padding: 15px
+        .article-entry
+            padding: 0
+            p
+                margin: 12px 0
+    .archive-article-content,
+    .archive-article-thumbnail
+        display: table-cell
+        vertical-align: top
+        @media mq-mini
+            display: block
+    .archive-article-thumbnail
         width: 160px
-        height: 90px
-        display: block
-        position: relative
-        overflow: hidden
-        span
+        padding-right: 15px
+        @media mq-mini
             width: 100%
-            height: 100%
-            display: block
-        .thumbnail-image
-            position: absolute
-            background-size: cover
-            background-position: center
-        .thumbnail-none
-            background-image: url(thumbnail-default-small)
-    @media mq-mini
+            padding-bottom: 15px
         .thumbnail
-            width: 120px
-            height: 67.5px
+            height: 0
+            width: 100%
+            padding-bottom: 56.25%
+            display: block
+            position: relative
+            overflow: hidden
+            span
+                width: 100%
+                height: 100%
+                display: block
+            .thumbnail-image
+                position: absolute
+                background-size: cover
+                background-position: center
+            .thumbnail-none
+                background-image: url(thumbnail-default-small)
+
+.archive-year
+    @extend $block-caption
 
 .archive-article-header
-    padding: 10px
     a
         @extend $link-dark
 
 .archive-article-title
-    font-size: 1.2em
-    line-height: 1.2em
+    display: block
+    font-size: 1.6em
+    line-height: 1.4em
+    margin-bottom: 12px
     @media mq-mini
-        font-size: 1em
-        line-height: 1em
-        height: 1em
-        overflow: hidden
         display: block
+        font-size: 1.3em
 
 .archive-article-date
     display: block

source/css/_partial/article.styl

@@ -19,7 +19,6 @@
     font-size: 2em
     color: color-default
     text-decoration: none
-    transition: color 0.2s
     line-height: line-height-title
     a&:visited
         color: color-default
@@ -37,11 +36,10 @@
     & > div
         float: left
         margin-right: 10px
-        color: color-default + #444
         .fa
             margin-right: 3px
     a
-        color: color-default + #444
+        color: color-default
         &:hover
             color: color-link