add pages

_config.yml

@@ -14,7 +14,7 @@ github_username:  sipp11
 markdown: kramdown
 permalink: /:year/:month/:day/:title/
 
-paginate: 8
+paginate: 5
 paginate_path: "post/page/:num/"
 
 sass:

archive.html

@@ -0,0 +1,41 @@
+---
+layout: default
+title : Archive
+---
+<section id="archive">
+{% assign posts_collate = site.posts %}
+
+{% for post in posts_collate  %}
+    {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
+    {% capture this_month %}{{ post.date | date: "%B" }}{% endcapture %}
+    {% capture this_month_num %}{{ post.date | date: "%m" }}{% endcapture %}
+    {% capture next_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
+    {% capture next_month %}{{ post.previous.date | date: "%B" }}{% endcapture %}
+  
+    {% if forloop.first %}
+      <h1 id="{{this_year}}">{{this_year}}</h1>
+      <h2 id ="{{this_year}}:{{this_month_num}}">{{this_month}}</h2>
+      <ul>
+    {% endif %}
+  
+    <li id="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%B %e, %Y" }} &raquo; <a href="{{ BASE_PATH }}{{ post.url }}">{{ post.title }}</a></li>
+  
+    {% if forloop.last %}
+      </ul>
+    {% else %}
+      {% if this_year != next_year %}
+        </ul>
+        <h1 id="{{ next_year }}">{{next_year}}</h1>
+        <h2 id="{{ next_year }}:{{ next_month }}">{{next_month}}</h2>
+        <ul>
+      {% else %}    
+        {% if this_month != next_month %}
+          </ul>
+          <h2 id="{{ next_year }}:{{ next_month }}">{{next_month}}</h2>
+          <ul>
+        {% endif %}
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+ {% assign posts_collate = nil %}
+ </section>

css/main.scss

@@ -28,6 +28,89 @@ $on-palm:          600px;
 $on-laptop:        800px;
 
 
+form#cse-search-box {
+    display: inline;
+}
+
+form#cse-search-box input {
+    font-size: $base-font-size;
+    font-family: $base-font-family;
+    color: $brand-color;
+    max-width:200px;
+    border-bottom-color: $grey-color-light;
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    border-collapse: collapse;
+    border-image-outset: 0 0 0 0;
+    border-image-repeat: stretch stretch;
+    border-image-slice: 100% 100% 100% 100%;
+    border-image-source: none;
+    border-image-width: 1 1 1 1;
+    border-left-color: rgb(85, 85, 85);
+    border-left-style: none;
+    border-left-width: 0px;
+    border-right-color: rgb(85, 85, 85);
+    border-right-style: none;
+    border-right-width: 0px;
+    border-spacing: 0px 0px;
+    border-top-color: rgb(85, 85, 85);
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+    border-top-style: none;
+    border-top-width: 0px;
+    box-shadow: rgba(0, 0, 0, 0.075) 0px 0px 0px 0px inset;
+    margin: 0px;
+    padding: 4px 6px;
+    text-align: start;
+    transition-delay: 0s, 0s;
+    transition-duration: 0.2s, 0.2s;
+    transition-property: border, box-shadow;
+    transition-timing-function: cubic-bezier(0, 0, 1, 1), cubic-bezier(0, 0, 1, 1);
+    vertical-align: middle;
+    -moz-border-bottom-colors: none;
+    -moz-border-left-colors: none;
+    -moz-border-right-colors: none;
+    -moz-border-top-colors: none;
+}
+
+ul.post-list>li {
+    display: block;
+    padding-top: 1em;
+    padding-bottom: 1em;
+    border-bottom: 1px solid $grey-color-light;
+}
+
+ul.tag_box {
+    list-style: none;
+}
+
+ul.tag_box>li {
+    display: inline-block;
+}
+
+span.label-success {
+    background-color: $grey-color-light;
+}
+
+span.label-success a, span.label-success a:hover {
+    color: $text-color;
+    text-decoration: none;
+}
+
+span.label {
+    display: inline;
+    padding: 0.2em 0.6em 0.3em;
+    font-size: 75%;
+    font-weight: 700;
+    line-height: 1;
+    color: $text-color;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: 0.25em;
+}
 
 // Using media queries with like this:
 // @include media-query($on-palm) {

index.html

@@ -13,6 +13,8 @@ layout: default
   <li>
     <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }} • <small>{{ post.categories | array_to_sentence_string }} • <a href="{% if post.disqus_url %}{{ post.disqus_url | prepend: site.baseurl }}{% else %}{{ post.url | prepend: site.baseurl }}{% endif %}#disqus_thread">comments</a></small></span>
     <h2><a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></h2>
+
+    {{ post.content }}
   </li>
   {% endfor %}
 

tags.html

@@ -0,0 +1,29 @@
+---
+layout: default
+title: Tags
+---
+<!--TODO: Find a fix to tags with spaces-->
+<ul class="tag_box inline">
+    {% if site.categories.first[0] != null %}{% comment %} If tags exist {% endcomment %}
+        {% for tag in site.categories %}{% comment %} add an element like the following for each tag item {% endcomment %}
+            <li><a href="#{{ tag[0] }}"><span class="label label-success">{{ tag[0] }}</span> {% comment %} This is just the tag name {% endcomment %}
+            <span>{{ tag[1].size }}</span>{% comment %} This counts the number of posts in a given tag {% endcomment %}
+            </a></li>
+        {% endfor %}
+    {% endif %}
+</ul>
+
+{% for tag in site.categories %} 
+<h1 id="{{ tag[0] }}">{{ tag[0] }}</h1>
+<ul>  
+    {% for tag_post in tag[1] %}
+        {% if tag_post.title != null %}
+            {% if page.url == tag_post.url %}
+            <li class="active"><a href="#" class="active">{{tag_post.title}}</a></li>
+            {% else %}
+            <li>{{ tag_post.date | date: "%B %e, %Y" }} &raquo; <a href="{{tag_post.url}}">{{tag_post.title}}</a></li>
+            {% endif %}
+        {% endif %}
+    {% endfor %}
+</ul>
+{% endfor %}