Merge branch 'dev'

iissnan · Jan 31, 2015 · af52e56 · af52e56
2 parents 54ca586 + 1e908eb
commit af52e56
Show file tree

Hide file tree

Showing 12 changed files with 207 additions and 17 deletions.
diff --git a/_config.yml b/_config.yml
@@ -21,4 +21,4 @@ fancybox: true
 # Specify the date when the site was setup
 since: 2015
 
-version: 0.1.2
+version: 0.1.3
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "isn-next",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "homepage": "https://github.com/iissnan/hexo-theme-next",
   "authors": [
     "iissnan <iissnan@gmail.com>"

diff --git a/layout/_layout.swig b/layout/_layout.swig
@@ -6,7 +6,7 @@
 </head>
 
 <body>
-  <div class="container one-column">
+  <div class="container one-column {% block page_class %}{% endblock %}">
 
     <div id="header" class="header">
       <div class="header-inner">
@@ -46,5 +46,6 @@
   </div>
 
   {% include '_partials/scripts.swig' %}
+  {% block script_extra %}{% endblock %}
 </body>
 </html>
diff --git a/layout/_macro/post.swig b/layout/_macro/post.swig
@@ -1,6 +1,6 @@
-{% macro post(post) %}
+{% macro post(post, post_extra_class) %}
 
-  <div class="post post-type-{{ post.type | default('normal') }}">
+  <div class="post post-type-{{ post.type | default('normal') }} {{ post_extra_class | default('') }}">
     <div class="post-header">
 
       <div class="post-meta">
@@ -34,7 +34,7 @@
       {% endif %}
     </div>
 
-    {% if not (is_archive() or is_category() or is_tag()) %}
+    {% if is_home() or is_post() %}
       <div class="post-body">
 
         {# Gallery support #}

diff --git a/layout/archive.swig b/layout/archive.swig
@@ -3,18 +3,47 @@
 
 {% block title %} Archive | {{ config.title }} {% endblock %}
 
+{% block page_class %} page-archive {% endblock %}
+
 {% block content %}
+
+  <span class="archive-move-on"></span>
+  <span class="archive-page-counter">
+    Great! {{ site.posts.length }} posts in total. <br />
+    Keep on posting.
+  </span>
+
   {% for post in page.posts %}
 
     {# Show year #}
     {% set year %}
     {% set post.year = post.date | date('Y') %}
+
     {% if post.year !== year %}
       {% set year = post.year %}
-      <h2 class="collection-title">{{ year }}</h2>
+      <div class="archive-year">
+        <h2 class="collection-title">{{ year }}</h2>
+      </div>
     {% endif %}
     {# endshow #}
 
     {{ render.post(post) }}
+
   {% endfor %}
+{% endblock %}
+
+{% block script_extra %}
+  <script type="text/javascript">
+    $(document).ready(function () {
+      var clock = 0;
+      function moveOn() {
+        $('.archive-move-on').animate({
+          opacity: clock ? 1 : 0.1
+        }, 1000);
+        clock = !clock;
+        setTimeout(moveOn, 1000);
+      }
+      moveOn();
+    });
+  </script>
 {% endblock %}
diff --git a/layout/page.swig b/layout/page.swig
@@ -10,7 +10,7 @@
   {% if page.type === "tags" %}
     <div class="tag-cloud">
       <div class="tag-cloud-title">
-        Totally {{ site.tags.length }} tags
+        <div class="collection-title">Totally {{ site.tags.length }} tags</div>
       </div>
       <div class="tag-cloud-tags">
         {{ tagcloud({min_font: 12, max_font: 30, amount: 200, color: true, start_color: '#ccc', end_color: '#111'}) }}

diff --git a/source/css/_component/posts-collapse.styl b/source/css/_component/posts-collapse.styl
@@ -12,11 +12,11 @@
 
 .posts-collapse .collection-title {
   display: inline-block;
-  margin: 30px 0;
-  padding: 5px;
-  color: white;
+  margin: 30px 0 70px;
+  padding: 5px 30px;
+  color: $colorDeepBlack;
   font-family: $fontFamilyPost;
-  background: $colorDeepBlack;
+  border: 2px solid $colorDeepBlack;
 }
 
 .posts-collapse .post {
@@ -25,12 +25,11 @@
 
 .posts-collapse .post a {
   display: inline-block;
-  color: $colorLightBlack;
-  border-bottom-color: white;
+  color: $colorDimGray;
+  border-bottom: none;
 
   &:hover {
-    color: $colorDeepBlack;
-    border-bottom-color: $colorDeepBlack;
+    color: black;
   }
 }
 

diff --git a/source/css/_core/helpers.styl b/source/css/_core/helpers.styl
@@ -1,3 +1,11 @@
 .center {
   text-align: center;
 }
+
+.align-left {
+  text-align: left;
+}
+
+.align-right {
+  text-align: right;
+}
diff --git a/source/css/_core/mixins.styl b/source/css/_core/mixins.styl
@@ -33,4 +33,8 @@ the-transition() {
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
+}
+
+mobile() {
+  {block}
 }
diff --git a/source/css/_page/archive.styl b/source/css/_page/archive.styl
@@ -0,0 +1,148 @@
+.page-archive {
+
+  $left = 55px;
+  $left-mobile = 30px;
+
+  .archive-page-counter {
+    position: relative;
+    top: -20px;
+    left: 50px;
+  }
+
+  .posts-collapse {
+    position: relative;
+
+    &::after {
+      top: 0;
+      left: $left;
+      margin-left: -2px;
+      width: 4px;
+      height: 100%;
+      background: $colorWhiteSmoke;
+      z-index: -1;
+
+      +mobile() {
+        left: $left-mobile;
+      }
+    }
+
+    .archive-move-on {
+      position: absolute;
+      top: -12px;
+      left: $left;
+      margin-left: -6px;
+      width: 12px;
+      height: 12px;
+      opacity: 0.5;
+      background: $colorLightBlack;
+
+      +mobile() {
+        left: $left-mobile;
+      }
+    }
+
+    .post {
+      margin: 30px 0 30px $left;
+
+      +mobile() {
+        margin-left: $left-mobile;
+      }
+    }
+
+    &::before, &::after {
+      content: " ";
+      position: absolute;
+    }
+
+    .archive-year {
+      position: relative;
+      text-align: center;
+      margin-left: $left;
+
+      +mobile() {
+        margin-left: $left-mobile;
+      }
+
+      &::before {
+        content: " ";
+        position: absolute;
+        left: 0;
+        top: 50%;
+        margin-left: -4px;
+        margin-top: -4px;
+        width: 8px;
+        height: 8px;
+        background: $colorGray;
+      }
+
+      &::after {
+        content: " ";
+        position: absolute;
+        top: 50%;
+        left: 0;
+        z-index: -1;
+        margin-top: -1px;
+        width: 50%;
+        height: 2px;
+        background: $colorWhiteSmoke;
+      }
+    }
+
+    .collection-title {
+      margin: 30px 0;
+      margin-left: -54px;
+      padding: 5px 30px;
+      background: white;
+      border: 2px solid $colorDimGray;
+      color: $colorDimGray;
+      font-size: 20px;
+    }
+
+    .post-header {
+      position: relative;
+      border-bottom: 1px dashed $colorLightGray;
+
+      &::before {
+        content: " ";
+        position: absolute;
+        left: 0;
+        top: 13px;
+        width: 6px;
+        height: 6px;
+        margin-left: -3px;
+        background: $colorGray;
+      }
+    }
+
+    .post-header:hover {
+
+      border-bottom-color: $colorDimGray;
+
+      &::before {
+        background: $colorDeepBlack;
+      }
+    }
+
+    .post-meta {
+      position: absolute;
+      font-size: 12px;
+      left: 20px;
+      top: 5px;
+    }
+
+    .post-title {
+      margin-left: 60px;
+      font-size: 16px;
+      font-weight: normal;
+      font-family: $fontFamilyPost;
+      line-height: inherit;
+
+      &::after {
+        margin-left: 3px;
+        opacity: 0.6;
+      }
+    }
+  }
+}
+
+
diff --git a/source/css/_section/layout.styl b/source/css/_section/layout.styl
@@ -15,7 +15,6 @@
   }
 
   .content {
-    overflow: hidden;
     width: $desktopContentWidth;
   }
 

diff --git a/source/css/main.styl b/source/css/main.styl
@@ -13,6 +13,8 @@
 @import "_section/body";
 @import "_section/footer";
 
+@import "_page/archive";
+
 @import "_component/button";
 @import "_component/posts-expand";
 @import "_component/posts-collapse";