front page & styling

.gitignore

@@ -1,2 +1,3 @@
 _site
 .sass-cache
+.DS_Store

_config.yml

@@ -13,3 +13,10 @@ github_username:  sipp11
 # Build settings
 markdown: kramdown
 permalink: /:year/:month/:day/:title.html
+
+paginate: 8
+paginate_path: "post/page:num/"
+
+sass:
+    style: :compressed
+    sass_dir: _sass

_includes/footer.html

@@ -9,6 +9,7 @@
         <ul class="contact-list">
           <li>{{ site.title }}</li>
           <li><a href="mailto:{{ site.email }}">{{ site.email }}</a></li>
+          <li class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></li>
         </ul>
       </div>
 

_includes/paginator.html

@@ -0,0 +1,25 @@
+{% if paginator.total_pages > 1 %}
+<div class="pagination">
+  {% if paginator.previous_page %}
+    <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&laquo; Prev</a>
+  {% else %}
+    <span>&laquo; Prev</span>
+  {% endif %}
+
+  {% for page in (1..paginator.total_pages) %}
+    {% if page == paginator.page %}
+      <em>{{ page }}</em>
+    {% elsif page == 1 %}
+      <a href="{{ '/index.html' | prepend: site.baseurl | replace: '//', '/' }}">{{ page }}</a>
+    {% else %}
+      <a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a>
+    {% endif %}
+  {% endfor %}
+
+  {% if paginator.next_page %}
+    <a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">Next &raquo;</a>
+  {% else %}
+    <span>Next &raquo;</span>
+  {% endif %}
+</div>
+{% endif %}

_sass/_base.scss

@@ -1,3 +1,4 @@
+
 /**
  * Reset some basic elements
  */
@@ -98,7 +99,7 @@ a {
 
     &:hover {
         color: $text-color;
-        text-decoration: underline;
+        text-decoration: none;
     }
 }
 

_sass/_layout.scss

@@ -4,6 +4,7 @@
 .site-header {
     border-top: 5px solid $grey-color-dark;
     border-bottom: 1px solid $grey-color-light;
+    background: $limeLightest;
     min-height: 56px;
 
     // Positioning context for the mobile navigation icon
@@ -93,6 +94,7 @@
  */
 .site-footer {
     border-top: 1px solid $grey-color-light;
+    background: $limeLightest;
     padding: $spacing-unit 0;
 }
 

_sass/_limes.scss

@@ -0,0 +1,15 @@
+// Lime 9
+// -------------------------
+
+$lime:               	#B8E62E !default;
+$limeDark:            	#7A991F !default;
+$limeDarker:          	#3D4C0F !default;
+$limeLight:           	#D6FF5C !default;
+$limeLighter:         	#E0FF85 !default;
+$limeLightest:          #ecfeda !default;
+$limeDull:           	#A6C44B !default;
+$limeDuller:         	#94A856 !default;
+$limeBright:         	#BFFF00 !default;
+$limeBrighter:          #D7FF5E !default;
+
+$brand-color:           #B8E62E !default;

css/main.scss

@@ -13,9 +13,9 @@ $base-line-height: 1.5;
 
 $spacing-unit:     30px;
 
-$text-color:       #111;
+$text-color:       #111111;
-$background-color: #fdfdfd;
+$background-color: #FDFDFD;
-$brand-color:      #2a7ae2;
+$brand-color:      #3eb489;
 
 $grey-color:       #828282;
 $grey-color-light: lighten($grey-color, 40%);
@@ -46,6 +46,7 @@ $on-laptop:        800px;
 
 // Import partials from `sass_dir` (defaults to `_sass`)
 @import
+        "limes",
         "base",
         "layout",
         "syntax-highlighting"

index.html

@@ -6,18 +6,16 @@ layout: default
 
   <h1 class="page-heading">Posts</h1>
 
-  <ul class="post-list">
+  {% include paginator.html %}
-    {% for post in site.posts %}
-      <li>
-        <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
 
-        <h2>
+  <ul class="post-list">
-          <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
+  {% for post in paginator.posts %}
-        </h2>
+  <li>
-      </li>
+    <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }} • <small>{{ post.categories | array_to_sentence_string }}</small></span>
-    {% endfor %}
+    <h2><a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></h2>
-  </ul>
+  </li>
+  {% endfor %}
 
-  <p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p>
+  {% include paginator.html %}
 
 </div>