working

languages/en.yml

@@ -0,0 +1,28 @@
+index:
+  home: 'home'
+  search: 'Search'
+  archive: 'archive'
+  category: 'category'
+  uncategorized: 'uncategorized'
+  tag: 'tag'
+nav:
+  current_page:
+    other: 'Page %d '
+  total_page:
+    other: 'of %d'
+widget:
+  recents: 'recents'
+  archives: 'archives'
+  categories: 'categories'
+  links: 'links'
+  tags: 'tags'
+  tag_cloud: 'tag cloud'
+article:
+  comments: 'Comments'
+  share: 'Share'
+profile:
+  follow: 'FOLLOW'
+  post: 'post'
+  tag: 'tag'
+  posts: 'posts'
+  tags: 'tags'

languages/zh-CN.yml

@@ -0,0 +1,28 @@
+index:
+  home: '主页'
+  search: '搜索'
+  archive: '归档'
+  category: '分类'
+  uncategorized: '未分类'
+  tag: '标签'
+nav:
+  current_page:
+    other: '第 %d 页，'
+  total_page:
+    other: '共 %d 页'
+widget:
+  recents: '最新文章'
+  archives: '归档'
+  categories: '分类'
+  links: '链接'
+  tags: '标签'
+  tag_cloud: '标签云'
+article:
+  comments: '评论'
+  share: '分享到'
+profile:
+  follow: '关注我'
+  post: '文章'
+  tag: '标签'
+  posts: '文章'
+  tags: '标签'

layout/_partial/header.ejs

@@ -2,18 +2,35 @@
   <div id="header-main" class="header-inner">
     <div class="outer">
       <a href="<%- url_for() %>" id="logo"><i class="logo"></i><span class="site-title"><%= config.title %></span></a>
-      <div id="search-form-wrap">
-        <%- search_form({button: ' '}) %>
-      </div>
       <nav id="main-nav">
         <% for (var i in theme.menu){ %>
           <a class="main-nav-link" href="<%- url_for(theme.menu[i]) %>"><%= i %></a>
         <% } %>
       </nav>
+      <nav id="sub-nav">
+        <div class="profile" id="profile-nav">
+          <a id="profile-anchor" href="#"><img class="avatar" src="<%- url_for(config.avatar) %>"><i class="fa fa-caret-down"></i></a>
         </div>
+      </nav>
+      <div id="search-form-wrap">
+        <%- search_form({button: ' '}) %>
+      </div>
+    </div>
+  </div>
+  <div id="main-nav-mobile" class="header-sub header-inner">
+    <table class="menu outer">
+      <tr>
+      <% for (var i in theme.menu){ %>
+        <td><a class="main-nav-link" href="<%- url_for(theme.menu[i]) %>"><%= i %></a></td>
+      <% } %>
+      <td>
+        <%- search_form() %>
+      </td>
+      </tr>
+    </table>
   </div>
   <% if(page.category || page.archive) { %>
-  <div id="header-sub" class="header-inner">
+  <div id="header-sub" class="header-sub header-inner">
     <div class="outer">
       <%- list_categories({depth: 1}) %>
     </div>

layout/_partial/post/category.ejs

@@ -1,10 +1,11 @@
 <% if (post.categories && post.categories.length){ %>
   <div class="article-category">
+  	<i class="fa fa-folder"></i>
     <%- list_categories(post.categories, {
       show_count: false,
       class: 'article-category',
       style: 'none',
-      separator: '►'
+      separator: '<i class="fa fa-angle-right"></i>'
     }) %>
   </div>
 <% } %>

layout/_partial/post/date.ejs

@@ -1,3 +1,6 @@
-<a href="<%- url_for(post.path) %>" class="<%= class_name %>">
+<div class="<%= class_name %>">
+  <i class="fa fa-calendar"></i>
+  <a href="<%- url_for(post.path) %>">
     <time datetime="<%= date_xml(post.date) %>" itemprop="datePublished"><%= date(post.date, date_format) %></time>
-</a>
+  </a>
+</div>

layout/_partial/profile.ejs

@@ -5,16 +5,16 @@
       <h2 id="name"><%= config.author %></h2>
       <h3 id="title"><%= config.author_title %></h3>
       <span id="location"><i class="fa fa-map-marker"></i><%= config.location %></span>
-      <a id="follow" href="http://github.com/ppoffice">FOLLOW</a>
+      <a id="follow" href="http://github.com/ppoffice"><%=__('profile.follow')%></a>
   	</div>
     <div class="article-info profile-block">
       <div class="article-info-block">
         <%= site.posts.length %>
-        <span>post<%= (site.posts.length > 1?'s':'') %></span>
+        <span><%= (site.posts.length > 1?__('profile.posts'):__('profile.post')) %></span>
       </div>
       <div class="article-info-block">
         <%= site.tags.length %>
-        <span>tag<%= (site.tags.length > 1?'s':'') %></span>
+        <span><%= (site.tags.length > 1?__('profile.tags'):__('profile.tag')) %></span>
       </div>
     </div>
     <div class="contact-info profile-block">

layout/_widget/archive.ejs

@@ -1,6 +1,6 @@
 <% if (site.posts.length){ %>
   <div class="widget-wrap">
-    <h3 class="widget-title">Archives</h3>
+    <h3 class="widget-title"><%= __('widget.archives') %></h3>
     <div class="widget">
       <%- list_archives() %>
     </div>

layout/_widget/category.ejs

@@ -1,6 +1,6 @@
 <% if (site.categories.length){ %>
   <div class="widget-wrap">
-    <h3 class="widget-title">Categories</h3>
+    <h3 class="widget-title"><%= __('widget.categories') %></h3>
     <div class="widget">
       <%- list_categories() %>
     </div>

layout/_widget/recent_posts.ejs

@@ -1,6 +1,6 @@
 <% if (site.posts.length){ %>
   <div class="widget-wrap">
-    <h3 class="widget-title"><%= __('sidebar.recents') %></h3>
+    <h3 class="widget-title"><%= __('widget.recents') %></h3>
     <div class="widget">
       <ul id="recent-post">
         <% site.posts.sort('date', -1).limit(5).each(function(post){ %>
@@ -9,7 +9,7 @@
               <%- partial('../_partial/post/thumbnail.ejs', {post: post}) %>
             </div>
             <div class="item-inner">
-              <p class="item-category"><%- list_categories(post.categories, {show_count: false, depth:2, class: 'article-category', style: 'none', separator: '<i class="icon" id="icon-angle-right"></i>'}) %></p>
+              <p class="item-category"><%- list_categories(post.categories, {show_count: false, depth:2, class: 'article-category', style: 'none', separator: '<i class="fa fa-angle-right"></i>'}) %></p>
               <p class="item-title"><a href="<%- url_for((post.link?post.link:post.path)) %>" class="title"><%= post.title %></a></p>
               <p class="item-date"><time datetime="<%= date_xml(post.date) %>" itemprop="datePublished"><%= date(post.date) %></time></p>
             </div>

layout/_widget/tag.ejs

@@ -1,6 +1,6 @@
 <% if (site.tags.length){ %>
   <div class="widget-wrap">
-    <h3 class="widget-title">Tags</h3>
+    <h3 class="widget-title"><%= __('widget.tags') %></h3>
     <div class="widget">
       <%- list_tags() %>
     </div>

layout/_widget/tagcloud.ejs

@@ -1,6 +1,6 @@
 <% if (site.tags.length){ %>
   <div class="widget-wrap">
-    <h3 class="widget-title">Tag Cloud</h3>
+    <h3 class="widget-title"><%= __('widget.tag_cloud') %></h3>
     <div class="widget tagcloud">
       <%- tagcloud() %>
     </div>

source/css/_extend.styl

@@ -2,10 +2,7 @@ $block-caption
   text-decoration: none
   text-transform: uppercase
   color: color-grey
-  margin-bottom: 1em
   line-height: 1em
-  text-shadow: 0 1px #fff
-  font-weight: bold
 
 $block
   background: #fff

source/css/_partial/article.styl

@@ -7,6 +7,13 @@
 
 .article-meta
   clearfix()
+  .article-date, .article-category
+    margin-right: 10px
+    color: color-default
+  a
+    color: color-default
+    &:hover
+      color: color-link
 
 .article-date
   @extend $block-caption
@@ -15,16 +22,16 @@
 .article-category
   float: left
   line-height: 1em
-  color: #ccc
+  color: color-default
-  text-shadow: 0 1px #fff
-  &:before
-    content: "\2022"
 
 .article-category-link
   @extend $block-caption
 
 .article-header
   padding: article-padding article-padding 0
+  .article-title
+    display: block
+    margin-bottom: 14px
 
 .article-title
   text-decoration: none
@@ -32,6 +39,8 @@
   color: color-default
   line-height: line-height-title
   transition: color 0.2s
+  a&:visited
+    color: color-default
   a&:hover
     color: color-link
 

source/css/_partial/header.styl

@@ -15,11 +15,9 @@ $header-block
 
 $header-block-left
   float: left
-  border-right: 1px solid color-border
 
 $header-block-right
   float: right
-  border-left: 1px solid color-border
   
 .header-inner
   height: 100%
@@ -47,9 +45,10 @@ $header-block-right
   left: 0
   margin-top: logo-size * -0.5
   
-#header-sub
+.header-sub
   border-top: 1px solid color-border
   ul
+    clearfix()
     margin: 0 15px
     li
       float: left
@@ -57,10 +56,55 @@ $header-block-right
       a
         display: inline-block
         line-height: header-sub-height
+  .main-nav-link
+    display: inline-block
+    line-height: header-sub-height
+    
+#header-sub
+  @media mq-mobile
+    display: none
+  @media mq-mini
+    display: none
+
+#main-nav-mobile
+  overflow-y: hidden
+  overflow-x: auto
+  .menu
+    clearfix()
+    margin: 0
+    height: header-sub-height
+    .search-form-input
+      display: none
+      @media mq-mini
+        display: block
+      border: none
+      outline: none
+      padding: 0 10px
+      background: none
+      margin-right: 15px
+      color: color-default
+      font: font-size font-sans
+      border: 1px solid color-border
+      line-height: header-sub-height - 16
+      border-radius: ((header-sub-height - 16)/2)
+      &::-webkit-search-results-decoration
+      &::-webkit-search-cancel-button
+        -webkit-appearance: none
 
 #main-nav
   @extend $header-block
   @extend $header-block-left
+  @media mq-mobile
+    display: none
+  @media mq-mini
+    display: none
+    
+#main-nav-mobile
+  @media mq-tablet
+    display: none
+  @media mq-normal
+    display: none
+  
 
 $nav-link
   float: left
@@ -81,23 +125,32 @@ $nav-link
 .main-nav-link
   @extend $nav-link
   font-weight: 300
-  @media mq-mobile
-    display: none
-
-#main-nav-toggle
-  display: none
-  &:before
-    content: "\f0c9"
-  @media mq-mobile
-    display: block
 
 #sub-nav
+  @media mq-normal
+    display: none
   @extend $header-block
   @extend $header-block-right
+  #profile-nav
+    #profile-anchor
+      clearfix()
+      display: block
+      height: logo-size
+      line-height: logo-size
+    .avatar, .fa
+      float: left
+    .avatar
+      width: logo-size
+      height: logo-size
+      margin-right: 8px
+    .fa
+      line-height: logo-size
 
 #search-form-wrap
+  @media mq-mini
+    display: none
   @extend $header-block
-  @extend $header-block-left
+  @extend $header-block-right
   width: 200px
   .search-form
     position: relative
@@ -109,7 +162,7 @@ $nav-link
       background: none
       color: color-default
       width: 100%
-      font: 13px font-sans
+      font: font-size font-sans
       outline: none
       &::-webkit-search-results-decoration
       &::-webkit-search-cancel-button

source/css/_partial/profile.styl

@@ -5,7 +5,9 @@
     border-bottom: none
 
 #profile
+  display: none
   @media mq-normal
+    display: block
     column(profile-column)
   .inner
     @extend $block

source/css/_partial/sidebar.styl

@@ -1,6 +1,8 @@
 #sidebar
   @media mq-normal
     column(sidebar-column)
+  @media mq-tablet
+    column(sidebar-column-tablet)
 
 .widget
   @extend $base-style
@@ -34,6 +36,8 @@
 
 .widget-wrap
   margin: block-margin 10px
+  @media mq-mini
+    margin: block-margin 20px
 
 .widget-title
   @extend $block-caption
@@ -112,7 +116,7 @@
           color: color-link
           &:hover
             color: color-sidebar-text-dark
-        a, .icon
+        a, .fa
           margin-right: 5px
       .item-title
         font-size: 15px

source/css/_variables.styl

@@ -19,7 +19,7 @@ color-pinterest = #cb2027
 color-google = #dd4b39
 
 // Fonts
-font-sans = "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif
+font-sans = "open sans", "Helvetica Neue", "Microsoft Yahei", Helvetica, Arial, sans-serif
 font-serif = Georgia, "Times New Roman", serif
 font-mono = "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace
 font-size = 14px
@@ -43,9 +43,11 @@ profile-avatar-size = 128px
 block-margin = 40px
 article-padding = 20px
 mobile-nav-width = 280px
-main-column = 7
 profile-column = 3
 sidebar-column = 3
+sidebar-column-tablet = 4
+main-column = 7
+main-column-tablet = 9
 
 if sidebar and sidebar isnt bottom
   _sidebar-column = sidebar-column
@@ -58,6 +60,7 @@ gutter-width = 20px
 columns = main-column + _sidebar-column + profile-column
 
 // Media queries
-mq-mobile = "screen and (max-width: 479px)"
+mq-mini = "screen and (max-width: 559px)"
-mq-tablet = "screen and (min-width: 480px) and (max-width: 767px)"
+mq-mobile = "screen and (min-width: 560px) and (max-width: 799px)"
-mq-normal = "screen and (min-width: 768px)"
+mq-tablet = "screen and (min-width: 800px) and (max-width: 1199px)"
+mq-normal = "screen and (min-width: 1200px)"

source/css/style.styl

@@ -32,6 +32,9 @@ a
   max-width: (column-width + gutter-width) * columns + gutter-width
   margin: 0 auto
   padding: 0 gutter-width
+  @media mq-mini
+    padding: 0
+    
 
 .inner
   column(columns)
@@ -58,6 +61,8 @@ if sidebar and sidebar isnt bottom
   #main
     @media mq-normal
       column(main-column)
+    @media mq-tablet
+      column(main-column-tablet)
 
 @import "_extend"
 @import "_partial/header"