Nofated095
/
hexo-theme-amane
mirror of https://github.com/Nofated095/hexo-theme-amane.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: redesign archive list style

This commit is contained in:
ppoffice 2016-02-06 00:11:56 +08:00
parent f095d234e3
commit ae697d4523
7 changed files with 94 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
layout/common/archive.ejs
View File

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

4
layout/common/article.ejs
View File

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

7
layout/common/head.ejs
View File

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

32
layout/common/summary.ejs
View File

@ -1,17 +1,23 @@
<article class="archive-article archive-type-<%= post.layout %>"> <article class="archive-article archive-type-summary">
<div class="archive-article-inner"> <% if(theme.customize.thumbnail == true) { %>
<% if(theme.customize.thumbnail == true) { %> <div class="archive-article-thumbnail">
<div class="archive-article-thumbnail"> <%- partial('thumbnail.ejs', { post: post }) %>
<%- partial('thumbnail.ejs', {post: post}) %> </div>
</div> <% } %>
<% } %> <div class="archive-article-content">
<header class="archive-article-header"> <header class="archive-article-header">
<%- partial('post/title', {class_name: 'archive-article-title'}) %> <%- partial('post/title', { class_name: 'archive-article-title' }) %>
<% if(archive) { %> <div class="article-meta">
<%- partial('post/date', {class_name: 'archive-article-date', date_format: 'MMM D'}) %> <%- partial('post/date', { class_name: 'article-date', date_format: null }) %>
<% } else { %> <%- partial('post/category') %>
<%- partial('post/date', {class_name: 'archive-article-date', date_format: 'YYYY MMM D'}) %> <%- partial('post/tag') %>
<% } %> </div>
</header> </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> </div>
</article> </article>

2
source/css/_extend.styl
View File

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

73
source/css/_partial/archive.styl
View File

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

4
source/css/_partial/article.styl
View File

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