chore: redesign archive list style
This commit is contained in:
parent
f095d234e3
commit
ae697d4523
|
@ -18,14 +18,6 @@
|
|||
<% });
|
||||
if (page.posts.length) { %>
|
||||
</div></section>
|
||||
<% }
|
||||
if (page.total > 1) { %>
|
||||
<nav id="page-nav">
|
||||
<%- paginator({
|
||||
prev_text: '« ' + __('nav.prev'),
|
||||
next_text: __('nav.next') + ' »'
|
||||
}) %>
|
||||
</nav>
|
||||
<% }
|
||||
break;
|
||||
case 'category': %>
|
||||
|
@ -38,14 +30,7 @@
|
|||
<%- partial('summary', {post: post, archive: false}) %>
|
||||
<% }); %>
|
||||
</div></section>
|
||||
<% if (page.total > 1) { %>
|
||||
<nav id="page-nav">
|
||||
<%- paginator({
|
||||
prev_text: '« ' + __('nav.prev'),
|
||||
next_text: __('nav.next') + ' »'
|
||||
}) %>
|
||||
</nav>
|
||||
<% }
|
||||
<%
|
||||
break;
|
||||
case 'tag': %>
|
||||
<section class="archives-wrap">
|
||||
|
@ -57,19 +42,14 @@
|
|||
<%- partial('summary', {post: post, archive: false}) %>
|
||||
<% }); %>
|
||||
</div></section>
|
||||
<% if (page.total > 1) { %>
|
||||
<nav id="page-nav">
|
||||
<%- paginator({
|
||||
prev_text: '« ' + __('nav.prev'),
|
||||
next_text: __('nav.next') + ' »'
|
||||
}) %>
|
||||
</nav>
|
||||
<% }
|
||||
<%
|
||||
break;
|
||||
default:
|
||||
page.posts.each(function(post) { %>
|
||||
<%- partial('article', { post: post, index: true }) %>
|
||||
<% })
|
||||
break;
|
||||
}
|
||||
if (page.total > 1) { %>
|
||||
<nav id="page-nav">
|
||||
<%- paginator({
|
||||
|
@ -77,6 +57,4 @@
|
|||
next_text: __('nav.next') + ' »'
|
||||
}) %>
|
||||
</nav>
|
||||
<% }
|
||||
break;
|
||||
} %>
|
||||
<% } %>
|
|
@ -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>
|
||||
|
|
|
@ -1,17 +1,23 @@
|
|||
<article class="archive-article archive-type-<%= post.layout %>">
|
||||
<div class="archive-article-inner">
|
||||
<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'}) %>
|
||||
<% } %>
|
||||
<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>
|
|
@ -9,7 +9,7 @@ $link-dark
|
|||
|
||||
$block-caption
|
||||
line-height: 1em
|
||||
color: color-grey
|
||||
// color: color-grey
|
||||
text-decoration: none
|
||||
text-transform: uppercase
|
||||
|
||||
|
|
|
@ -22,22 +22,34 @@
|
|||
@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-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
|
||||
float: left
|
||||
margin-right: 10px
|
||||
.thumbnail
|
||||
width: 160px
|
||||
height: 90px
|
||||
padding-right: 15px
|
||||
@media mq-mini
|
||||
width: 100%
|
||||
padding-bottom: 15px
|
||||
.thumbnail
|
||||
height: 0
|
||||
width: 100%
|
||||
padding-bottom: 56.25%
|
||||
display: block
|
||||
position: relative
|
||||
overflow: hidden
|
||||
|
@ -51,25 +63,22 @@
|
|||
background-position: center
|
||||
.thumbnail-none
|
||||
background-image: url(thumbnail-default-small)
|
||||
@media mq-mini
|
||||
.thumbnail
|
||||
width: 120px
|
||||
height: 67.5px
|
||||
|
||||
.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
|
||||
@media mq-mini
|
||||
font-size: 1em
|
||||
line-height: 1em
|
||||
height: 1em
|
||||
overflow: hidden
|
||||
display: block
|
||||
font-size: 1.6em
|
||||
line-height: 1.4em
|
||||
margin-bottom: 12px
|
||||
@media mq-mini
|
||||
display: block
|
||||
font-size: 1.3em
|
||||
|
||||
.archive-article-date
|
||||
display: block
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
Loading…
Reference in New Issue