From ae697d45237bef1847a4672dcfefbf5d670d2f7b Mon Sep 17 00:00:00 2001 From: ppoffice Date: Sat, 6 Feb 2016 00:11:56 +0800 Subject: [PATCH] chore: redesign archive list style --- layout/common/archive.ejs | 74 +++++++++++--------------------- layout/common/article.ejs | 4 +- layout/common/head.ejs | 7 +-- layout/common/summary.ejs | 32 ++++++++------ source/css/_extend.styl | 2 +- source/css/_partial/archive.styl | 73 +++++++++++++++++-------------- source/css/_partial/article.styl | 4 +- 7 files changed, 94 insertions(+), 102 deletions(-) diff --git a/layout/common/archive.ejs b/layout/common/archive.ejs index e7ba0d9..4d00123 100644 --- a/layout/common/archive.ejs +++ b/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) { %> - - <% } - last = year; %> -
- <%= year %> -
-
-
- <% } %> - <%- partial('summary', {post: post, archive: true}) %> - <% }); + var year = post.date.year(); + if (last != year) { + if (last != null) { %> +
+ <% } + last = year; %> +
+ <%= year %> +
+
+
+ <% } %> + <%- partial('summary', {post: post, archive: true}) %> + <% }); if (page.posts.length) { %>
<% } - if (page.total > 1) { %> - - <% } break; case 'category': %>
@@ -38,14 +30,7 @@ <%- partial('summary', {post: post, archive: false}) %> <% }); %>
- <% if (page.total > 1) { %> - - <% } + <% break; case 'tag': %>
@@ -57,26 +42,19 @@ <%- partial('summary', {post: post, archive: false}) %> <% }); %>
- <% if (page.total > 1) { %> - - <% } + <% break; default: page.posts.each(function(post) { %> - <%- partial('article', {post: post, index: true}) %> + <%- partial('article', { post: post, index: true }) %> <% }) - if (page.total > 1) { %> - - <% } break; -} %> \ No newline at end of file +} +if (page.total > 1) { %> + +<% } %> \ No newline at end of file diff --git a/layout/common/article.ejs b/layout/common/article.ejs index 06db4f4..ed801da 100644 --- a/layout/common/article.ejs +++ b/layout/common/article.ejs @@ -6,9 +6,9 @@ <%- partial('post/gallery') %> <% if (post.link || post.title) { %>
- <%- partial('post/title', {class_name: 'article-title'}) %> + <%- partial('post/title', { class_name: 'article-title' }) %>
- <%- 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') %>
diff --git a/layout/common/head.ejs b/layout/common/head.ejs index 3a5a005..33bda69 100644 --- a/layout/common/head.ejs +++ b/layout/common/head.ejs @@ -3,18 +3,19 @@ <% + 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; } %> <% if (title) { %><%= title %> | <% } %><%= config.title %> diff --git a/layout/common/summary.ejs b/layout/common/summary.ejs index 0be9d10..be38b83 100644 --- a/layout/common/summary.ejs +++ b/layout/common/summary.ejs @@ -1,17 +1,23 @@ -
-
- <% if(theme.customize.thumbnail == true) { %> -
- <%- partial('thumbnail.ejs', {post: post}) %> -
- <% } %> +
+ <% if(theme.customize.thumbnail == true) { %> +
+ <%- partial('thumbnail.ejs', { post: post }) %> +
+ <% } %> +
- <%- 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' }) %> +
+ <%- partial('post/date', { class_name: 'article-date', date_format: null }) %> + <%- partial('post/category') %> + <%- partial('post/tag') %> +
+
+

<%- excerpt(post) %>

+

+ <%= __('article.more') %> +

+
\ No newline at end of file diff --git a/source/css/_extend.styl b/source/css/_extend.styl index 9349d5f..2a6cedc 100644 --- a/source/css/_extend.styl +++ b/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 diff --git a/source/css/_partial/archive.styl b/source/css/_partial/archive.styl index f967aed..b20031b 100644 --- a/source/css/_partial/archive.styl +++ b/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 - width: 160px - height: 90px - display: block - position: relative - overflow: hidden - span - width: 100% - height: 100% + &.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 - .thumbnail-image - position: absolute - background-size: cover - background-position: center - .thumbnail-none - background-image: url(thumbnail-default-small) - @media mq-mini + .archive-article-thumbnail + width: 160px + padding-right: 15px + @media mq-mini + width: 100% + 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 diff --git a/source/css/_partial/article.styl b/source/css/_partial/article.styl index f5b9a23..e501161 100644 --- a/source/css/_partial/article.styl +++ b/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