归档的加载更多

app/assets/stylesheets/archives.css.scss

@@ -0,0 +1,37 @@
+.archives-field {
+  padding-top: 0.5rem;
+  margin-top: 1rem;
+  padding-bottom: 0.5rem;
+
+  i {
+    margin-right: 0.5rem;
+  }
+
+  span {
+    margin-right: 1rem;
+  }
+
+  .blog-title {
+    color: #111111;
+    font-size: 1.2rem;
+    font-weight: 500;
+    border: none;
+  }
+
+  li {
+    list-style: none;
+    color: #666666;
+    border-bottom: 1px dashed #CCCCCC;
+    margin-bottom: 1rem;
+  }
+
+  .load-more {
+    width: 100%;
+    text-align: center;
+    button {
+      background-color: transparent;
+      color: #333333;
+      border: 1px solid #DDDDDD;
+    }
+  }
+}

app/assets/stylesheets/foundation_and_overrides.scss

@@ -1205,4 +1205,8 @@
     border: 1px solid #e79385;
     border-radius: 10rem;
   }
+  &:active {
+    border: 1px solid #e79385;
+    border-radius: 10rem;
+  }
 }

app/views/archives/index.html.slim

@@ -1,23 +1,19 @@
-ul
-  li
-    a href="#" 科学是什么
-    p
-      i.fi-list
-      span 技术
-      i.fi-pricetag-multiple
-      span 生活, 感悟
-      i.fi-torsos
-      span 1010
-      i.fi-heart
-      span 10
-  li
-    a href="#" 科学是什么
-    p
-      | 分类:
-      span 技术
-      | 标签:
-      span 生活, 感悟
-      | 浏览数:
-      span 1010
-      | 喜欢:
-      span 10
+.row
+  .small-12.large-8.columns
+    ul.archives-field
+      - 3.times do
+        li
+          a.blog-title href="#" 科学是什么
+          p.tags-field
+            i.fi-calendar
+            span 2014-2-12
+            i.fi-list
+            span 技术
+            i.fi-pricetag-multiple
+            span 生活, 感悟
+            i.fi-torsos
+            span 1010
+            i.fi-heart
+            span 10
+      .load-more
+        button.small Load More