Added the Backdrop theme.

15 files changed, 714 insertions, 0 deletions

diff --git a/backdrop/templates/archives.html b/backdrop/templates/archives.html
new file mode 100644
index 0000000..0bac32c
--- /dev/null
+++ b/backdrop/templates/archives.html
@@ -0,0 +1,12 @@
+{% extends "base.html" %}
+{% block title %}All Articles{% endblock title %}
+
+{% block content %}
+{% import 'macros.html' as macros %}
+<div class="row">
+    <div class="small-12 columns">
+        <h2>All Articles</h2>
+        {{ macros.page_list(articles_page, articles_paginator.num_pages, page_name, SITEURL, disqus=DISQUS_SITENAME) }}
+    </div>
+</div>
+{% endblock content %}
diff --git a/backdrop/templates/article.html b/backdrop/templates/article.html
new file mode 100644
index 0000000..27dbeee
--- /dev/null
+++ b/backdrop/templates/article.html
@@ -0,0 +1,41 @@
+{% extends "base.html" %}
+{% block title %}{{ article.title|striptags }}{%endblock%}
+{% block description %}
+<meta name="description" content="{{ article.summary|e }}" />
+{% if article.tags %}
+<meta name="keywords" content=" {% for tag in article.tags %}{{ tag }} {% endfor %} "/>
+{% endif %}
+{% endblock description %}
+
+{% block content %}
+{% import 'macros.html' as macros %}
+<div class="row">
+    <div class="small-12 columns article">
+        <h2>{{ article.title }}</h2>
+        {{ macros.article_info(article, SITEURL,disqus=DISQUS_SITENAME) }}
+        <section class="article">
+            {{ article.content }}    
+        </section>
+        {% if DISQUS_SITENAME %}
+        <hr>
+        <div id="disqus_thread"></div>
+        <script type="text/javascript">
+            /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
+            var disqus_shortname = "{{ DISQUS_SITENAME }}"; // required: replace example with your forum shortname
+            var disqus_identifier = "{{ article.title|string|replace('&nbsp;',' ')|replace(' ', '-' )|striptags|lower|e }}";
+            var disqus_url = "{{ SITEURL }}/{{ article.url }}";
+            var disqus_title = "{{ article.title|replace('&nbsp;',' ')|striptags|e }}";
+
+            /* * * DON'T EDIT BELOW THIS LINE * * */
+            (function() {
+                var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+                dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
+                (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+            })();
+        </script>
+        <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+        <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
+        {% endif %}
+    </div>
+</div>
+{% endblock content %}
diff --git a/backdrop/templates/author.html b/backdrop/templates/author.html
new file mode 100644
index 0000000..11e4793
--- /dev/null
+++ b/backdrop/templates/author.html
@@ -0,0 +1,12 @@
+{% extends "base.html" %}
+{% block title %}{{ author|striptags }}{% endblock title %}
+
+{% block content %}
+{% import 'macros.html' as macros %}
+<div class="row">
+    <div class="small-12 columns">
+        <h2>Articles by {{ author }}</h2>
+        {{ macros.page_list(articles_page, articles_paginator.num_pages, page_name, SITEURL, disqus=DISQUS_SITENAME ) }}
+    </div>
+</div>
+{% endblock content %}
diff --git a/backdrop/templates/authors.html b/backdrop/templates/authors.html
new file mode 100644
index 0000000..52895ea
--- /dev/null
+++ b/backdrop/templates/authors.html
@@ -0,0 +1,23 @@
+{% extends "base.html" %}
+{% block title %}Authors{%endblock%}
+
+{% block content %}
+{% import 'macros.html' as macros %}
+<div class="row">
+    <div class="small-12 columns article">
+    {% for author, articles in authors|sort %}
+        <h2><a href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a></h2>
+        {% for a in articles %}
+            {% if loop.index < 4 %}
+              {{ macros.article_summary(a,SITEURL,False,False,disqus=DISQUS_SITENAME) }}
+            {% elif loop.index == 4 %}
+              <a class="button" href="{{ SITEURL }}/{{ author.url }}">See All&hellip;</a>
+            {% endif %}
+        {% endfor %}
+        {% if not loop.last %}
+            <hr>
+        {% endif %}
+    {% endfor %}
+    </div>
+</div>
+{% endblock content %}
diff --git a/backdrop/templates/base.html b/backdrop/templates/base.html
new file mode 100644
index 0000000..92caf9b
--- /dev/null
+++ b/backdrop/templates/base.html
@@ -0,0 +1,183 @@
+<!doctype html>
+<html class="no-js" lang="en">
+    <head>
+        <link rel="shortcut icon" href="{{ FAVICON|replace('{filename}',SITEURL)|replace('|filename|',SITEURL) }}" />
+
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="author" content="{{AUTHOR}}" />
+        <title>{% block title %}{{ SITENAME }}{% endblock title %}</title>
+        
+        {% block description %}
+        <meta name="description" content="{{ SITESUBTITLE }}" />
+        <meta name="keywords" content="Blog{% for keyword in BLOGKEYWORDS %} {{ keyword }}{% endfor %} "/>
+        {% endblock description %}
+
+        <!--[if !IE 7]>
+        <style type="text/css">
+            #main-content {display:table;height:100%}
+        </style>
+        <![endif]-->
+        <link rel="stylesheet" href="{{ SITEURL }}/theme/css/backdrop.css" />
+        <link rel="stylesheet" href="{{ SITEURL }}/theme/css/pygments.css" />
+        <script src="{{ SITEURL }}/theme/js/modernizr.js"></script>
+
+        {% if FEED_ALL_ATOM %}
+        <link href="{{ FEED_DOMAIN }}/{{ FEED_ALL_ATOM }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Full Atom Feed" />
+        {% endif %}
+        {% if FEED_ALL_RSS %}
+        <link href="{{ FEED_DOMAIN }}/{{ FEED_ALL_RSS }}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Full RSS Feed" />
+        {% endif %}
+        {% if FEED_ATOM %}
+        <link href="{{ FEED_DOMAIN }}/{{ FEED_ATOM }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Atom Feed" />
+        {% endif %}
+        {% if FEED_RSS %}
+        <link href="{{ FEED_DOMAIN }}/{{ FEED_RSS }}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} RSS Feed" />
+        {% endif %}
+        {% if CATEGORY_FEED_ATOM and category %}
+        <link href="{{ FEED_DOMAIN }}/{{ CATEGORY_FEED_ATOM|format(category.slug) }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Categories Atom Feed" />
+        {% endif %}
+        {% if CATEGORY_FEED_RSS and category %}
+        <link href="{{ FEED_DOMAIN }}/{{ CATEGORY_FEED_RSS|format(category.slug) }}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Categories RSS Feed" />
+        {% endif %}
+        {% if TAG_FEED_ATOM and tag %}
+        <link href="{{ FEED_DOMAIN }}/{{ TAG_FEED_ATOM|format(tag.slug) }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Tags Atom Feed" />
+        {% endif %}
+        {% if TAG_FEED_RSS and tag %}
+        <link href="{{ FEED_DOMAIN }}/{{ TAG_FEED_RSS|format(tag.slug) }}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Tags RSS Feed" />
+        {% endif %}
+
+        {% if DISQUS_SITENAME %}
+        <script type="text/javascript">
+            var disqus_shortname = '{{ DISQUS_SITENAME }}'; 
+
+            (function () {
+                var s = document.createElement('script'); s.async = true;
+                s.type = 'text/javascript';
+                s.src = '//' + disqus_shortname + '.disqus.com/count.js';
+                (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
+            }());
+        </script>
+        {% endif %}
+    </head>
+      
+
+    <body>
+        <div class="master-row">
+
+            <div class="content-pane main-content">
+                <nav class="top-bar" data-topbar role="navigation">
+                    <ul class="title-area">
+                        <li class="name"><!-- Leave this empty --></li>
+                        <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
+                    </ul>
+                    <section class="top-bar-section">
+                        <ul class="left">
+                        {% for p in pages %}
+                            <li{% if p == page %} class="active"{% endif %}><a href="{{ SITEURL }}/{{ p.url }}">{{ p.title }}</a></li>
+                        {% endfor %}
+                        </ul>
+                        <ul class="right">
+                        {% for cat, null in categories %}
+                            <li{% if cat == category %} class="active"{% endif %}><a href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a></li>
+                        {% endfor %}
+                        </ul>
+                    </section>
+                </nav>
+
+                <div class="row title-bar">
+                    <div class="small-12 columns">
+                        <h1><a href="{{ SITEURL }}">{{ SITENAME }}</a></h1><h2> <small>{{ SITESUBTITLE }}</small></h2>
+                        <hr>
+                    </div>
+                </div>
+            
+                <div id="contents">
+                {% block content %}
+                    <div class="row">
+                    </div>
+                {% endblock content %}
+                </div>
+
+                <footer class="show-for-large-up">
+                    {% include 'footer.html' %}
+                </footer>
+            </div>
+            
+            <div class="image-pane main-content" style="background: url('{{ BACKDROP_IMAGE|replace('{filename}',SITEURL)|replace('|filename|',SITEURL) }}'); background-size:cover; background-position: right;">
+                <div class="row">
+                    <div class="small-12 medium-4 large-12 columns">
+                    {% if SITE_DESCRIPTION or EMAIL or SOCIAL %}
+                        <h5 class='text-center'>About</h5>
+                        <div class="about-me">
+                        {% if PROFILE_IMAGE %}
+                            <div class="hide-for-medium-only small-3 columns no-buffer">
+                                <a class="th" href="{{ PROFILE_IMAGE|replace('{filename}',SITEURL)|replace('|filename|',SITEURL) }}">
+                                    <img src="{{ PROFILE_IMAGE|replace('{filename}',SITEURL)|replace('|filename|',SITEURL) }}">
+                                </a>
+                            </div>
+                        {% endif %}
+                            <div class="{% if PROFILE_IMAGE %}small-9 medium-12 large-9{% else %}small-12{% endif %} columns text-justify">
+                                {{ SITE_DESCRIPTION }}
+                            </div>
+                        {% if EMAIL or SOCIAL %}
+                            <div class="small-12 columns">
+                                <ul class="inline-center social-list">
+                                {% if EMAIL%}
+                                    <li><a href="mailto:{{ EMAIL}}"><i class="fa fa-envelope"></i>&nbsp; Email</a></li>
+                                {% endif %}
+                                {% for name,link in SOCIAL %}
+                                    <li><a href="{{ link }}"><i class="fa fa-{{ name|lower }}"></i>&nbsp; {{ name }}</a></li>
+                                {% endfor %}
+                                </ul>
+                            </div>
+                        {% endif %}
+                        </div>
+                    {% endif %}
+                    </div>
+
+                    <div class="small-12 medium-4  large-12 columns link-list">
+                    {% if LINKS %}
+                        <h5 class='text-center'>Links</h5>
+                        <ul class="inline-center">
+                        {% for name, url in LINKS %}
+                            <li><a href="{{ url }}">{{ name }}</a></li>
+                        {% endfor %}
+                        </ul>
+                    {% endif %}
+                    </div>
+
+<!--
+                    <div class="small-12 medium-3 large-12 columns">
+                    {% if GITHUB_ACTIVITY_FEED %}
+                        <table class='transparent'>
+                            <thead>
+                                <th class='text-center'>GitHub Activity</th>
+                            </thead>
+                            <tbody>
+                            {% for entry in github_activity %}
+                                <tr><td>{{ entry[1] }}</td></tr>
+                            {% endfor %}
+                            </tbody>
+                        </table>
+                    {% endif %}
+                    </div>
+-->
+               </div>
+            </div>
+        </div>
+        
+        
+        <div class="row">
+            <footer class="hide-for-large-up">
+                {% include 'footer.html' %}
+            </footer>
+        </div>
+        
+        
+        <script src="{{ SITEURL }}/theme/js/jquery.min.js"></script>
+        <script src="{{ SITEURL }}/theme/js/foundation.min.js"></script>
+        <script src="{{ SITEURL }}/theme/js/app.js"></script>
+    </body>
+  
+</html>
diff --git a/backdrop/templates/categories.html b/backdrop/templates/categories.html
new file mode 100644
index 0000000..c5a61c4
--- /dev/null
+++ b/backdrop/templates/categories.html
@@ -0,0 +1,23 @@
+{% extends "base.html" %}
+{% block title %}Categories{%endblock%}
+
+{% block content %}
+{% import 'macros.html' as macros %}
+<div class="row">
+    <div class="small-12 columns article">
+    {% for cat, articles in categories|sort %}
+        <h2><a href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a></h2>
+        {% for a in articles %}
+            {% if loop.index < 4 %}
+              {{ macros.article_summary(a,SITEURL,False,False,disqus=DISQUS_SITENAME) }}
+            {% elif loop.index == 4 %}
+              <a class="button" href="{{ SITEURL }}/{{ cat.url }}">See All&hellip;</a>
+            {% endif %}
+        {% endfor %}
+        {% if not loop.last %}
+            <hr>
+        {% endif %}
+    {% endfor %}
+    </div>
+</div>
+{% endblock content %}
diff --git a/backdrop/templates/category.html b/backdrop/templates/category.html
new file mode 100644
index 0000000..cd31ab6
--- /dev/null
+++ b/backdrop/templates/category.html
@@ -0,0 +1,12 @@
+{% extends "base.html" %}
+{% block title %}{{ category|striptags }}{% endblock title %}
+
+{% block content %}
+{% import 'macros.html' as macros %}
+<div class="row">
+    <div class="small-12 columns">
+        <h2>Articles in category &ldquo;{{category}}&rdquo;</h2>
+        {{ macros.page_list(articles_page, articles_paginator.num_pages, page_name, SITEURL, disqus=DISQUS_SITENAME) }}
+    </div>
+</div>
+{% endblock content %}
diff --git a/backdrop/templates/footer.html b/backdrop/templates/footer.html
new file mode 100644
index 0000000..b5db695
--- /dev/null
+++ b/backdrop/templates/footer.html
@@ -0,0 +1,48 @@
+<div class="row">
+    <div class="small-6 medium-3 columns">
+        <ul class="left-nav">
+            <li><a href="{{ SITEURL }}">Home &nbsp;<i class="fa fa-home fa-fw"></i></a></li>
+            <li><a href="{{ SITEURL }}/categories.html">Categories &nbsp;<i class="fa fa-folder-open fa-fw"></i></a></li>
+        </ul>
+    </div>
+    <div class="small-6 medium-3 medium-push-6 columns">
+        <ul class="right-nav">
+        {% if FEED_ALL_ATOM %}
+            <li><a href="{{ FEED_DOMAIN }}/{{ FEED_ALL_ATOM }}"><i class="fa fa-rss fa-fw"></i>&nbsp; Feed</a></li>
+        {% elif FEED_ALL_RSS %}
+            <li><a href="{{ FEED_DOMAIN }}/{{ FEED_ALL_RSS }}"><i class="fa fa-rss fa-fw"></i>&nbsp; Feed</a></li>
+        {% elif FEED_ATOM %}
+            <li><a href="{{ FEED_DOMAIN }}/{{ FEED_ATOM }}"><i class="fa fa-rss fa-fw"></i>&nbsp; Feed</a></li>
+        {% elif FEED_RSS %}
+            <li><a href="{{ FEED_DOMAIN }}/{{ FEED_RSS }}"><i class="fa fa-rss fa-fw"></i>&nbsp; Feed</a></li>
+        {% endif %}
+            <li><a href="{{ SITEURL }}/archives.html"><i class="fa fa-archive fa-fw"></i>&nbsp; Archives</a></li>
+        </ul>
+    </div>
+    <div class="small-12 medium-6 medium-pull-3 columns text-center">
+    {% if tags %}
+        <p class="tag-cloud">
+            <a href="{{ SITEURL }}/tags.html"><i class="fa fa-tags"></i>&nbsp;Tags:</a>&nbsp;&nbsp;
+        {% for tag in tag_cloud %}
+            <a href="{{ SITEURL }}/tag/{{ tag.0|string|replace(" ", "-" )|lower }}.html"><span class="label">{{ tag.0 }}</span></a>
+        {% endfor %}
+            &nbsp;&hellip;
+        </p>
+    {% endif %}
+    </div>
+    <div class="small-12 columns sub-footer">
+        <hr>
+        <div class="small-12 medium-6 columns">
+            <p class="small-text-center medium-text-left">
+                &copy; {{ YEAR }} {{ AUTHOR }} {{ LICENSE }}
+                <!-- <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="cc.png" /></a>-->
+            </p>
+        </div>
+        <div class="small-12 medium-6 columns">
+            <p class="small-text-center medium-text-right">
+                Proudly powered by <a href="http://blog.getpelican.com/">Pelican</a>,
+                which takes great advantage of <a href="https://www.python.org/">Python</a>.
+            </p>
+        </div>
+    </div>
+</div>
diff --git a/backdrop/templates/index.html b/backdrop/templates/index.html
new file mode 100644
index 0000000..e7846ec
--- /dev/null
+++ b/backdrop/templates/index.html
@@ -0,0 +1,20 @@
+{% extends "base.html" %}
+{% block content %}
+{% import 'macros.html' as macros %}
+<div class="row">
+    <div class="small-12 medium-12 columns">
+        {{ macros.article_summary(articles[0],SITEURL,True,disqus=DISQUS_SITENAME) }}
+    </div>
+    <div class="small-12 medium-6 columns small-articles">
+        {{ macros.article_summary(articles[1],SITEURL,False,False,disqus=DISQUS_SITENAME) }}
+    </div>
+    <div class="small-12 medium-6 columns small-articles">
+        {{ macros.article_summary(articles[2],SITEURL,False,False,disqus=DISQUS_SITENAME) }}
+    </div>
+</div>
+<div class="row">
+    <div class="small-12 columns">
+        <a class="button" href="{{ SITEURL }}/archives.html">Older Articles&hellip;</a>
+    </div>
+</div>
+{% endblock content %}
diff --git a/backdrop/templates/macros.html b/backdrop/templates/macros.html
new file mode 100644
index 0000000..43da2de
--- /dev/null
+++ b/backdrop/templates/macros.html
@@ -0,0 +1,88 @@
+{% macro article_info(article, url, disqus=None) -%}
+<div class="row info-bar" style="margin-left:0rem;margin-bottom:6px;">
+    <div class="small-12 columns">
+        <ul class="inline-list">
+            <li><span><i class="fa fa-calendar"></i>&nbsp; {{ article.locale_date }}</span></li>
+            <li><span><i class="fa fa-folder-open"></i>&nbsp; <a href="{{ url }}/{{ article.category.url }}">{{ article.category }}</a></span></li>
+        {% if disqus %}
+            <li><span><i class="fa fa-comments"></i>&nbsp; <a href="{{ url }}/{{ article.url }}#disqus_thread" rel="bookmark" title="Disqus Comments">{{ article.title }}</a></span></li>
+        {% endif %}
+        {% if article.tags %}
+            <li>
+                <span>
+                    <i class="fa fa-tags"></i>&nbsp;
+                {% for tag in article.tags %}
+                    <a href="{{ url }}/{{ tag.url }}"><span class="label">{{ tag }}</span></a>
+                {% endfor %}
+                </span>
+            </li>
+        {% endif %}
+        </ul>
+    </div>
+</div>
+{%- endmacro %}
+
+{% macro article_summary(article,url,showimg=False,imgside=True,disqus=None) -%}
+{% if showimg and imgside and article.featured_image %}
+    {% set numcols1 = 7 %}
+    {% set numcols2 = 12 - numcols1 %}
+{% else %}
+    {% set numcols1 = 12 %}
+    {% set numcols2 = 12 %}
+{% endif %}
+<section class="summary">
+    <h3><a href="{{ url }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h3>
+    {{ article_info(article, url, disqus) }}
+    <div class="row summary">
+        <div class="small-12 medium-{{ numcols1 }} columns">
+            {{ article.summary }}
+            <p class='text-right'><a href="{{ url }}/{{ article.url }}">Continue reading&hellip;</a></p>
+        </div>
+    {% if showimg and article.featured_image %}
+        <div class="small-12 medium-{{ numcols2 }} columns">
+            <a class="th" href="{{ url }}/{{ article.url }}">
+                <img src="{{ article.featured_image }}">
+            </a>
+        </div>
+    {% endif %}
+    </div>
+</section>
+{%- endmacro %}
+
+
+{% macro pagination(pobj, num_pages, page_name, url) %}
+{% if num_pages > 1 %}
+<div class="pagination-centered">
+    <ul class="pagination">
+    {% if pobj.has_previous() %}
+        {% set num = pobj.previous_page_number() %}
+        <li class="arrow"><a href="{{ url }}/{{ page_name }}{{ num if num > 1 else '' }}.html">&laquo;</a></li>
+    {% else %}
+        <li class="arrow unavailable"><a href="#">&laquo;</a></li>
+    {% endif %}
+    {% for num in range( 1, 1 + num_pages ) %}
+      {% if num in [1,2,pobj.number-1,pobj.number,pobj.number+1,num_pages-1,num_pages] %}
+        <li class="{{ 'current' if num == pobj.number else '' }}"><a href="{{ url }}/{{ page_name }}{{ num if num > 1 else '' }}.html">{{ num }}</a></li>
+        {% set prevellip = False %}
+      {% elif not prevellip %}
+        <li class="unavailable"><a href="">&hellip;</a></li>
+        {% set prevellip = True %}
+      {% endif %}
+    {% endfor %}
+    {% if pobj.has_next() %}
+        <li class="arrow"><a href="{{ url }}/{{ page_name }}{{ pobj.next_page_number() }}.html">&raquo;</a></li>
+    {% else %}
+        <li class="arrow unavailable"><a href="#">&raquo;</a></li>
+    {% endif %}
+    </ul>
+</div>
+{% endif %}
+{% endmacro %}
+
+
+{% macro page_list(pobj, num_pages, page_name, url, disqus=None) %}
+{% for a in pobj.object_list %}
+  {{ article_summary(a, url, True, True, disqus) }}
+{% endfor %}
+{{ pagination(pobj, num_pages, page_name, url) }}
+{% endmacro %}
diff --git a/backdrop/templates/page.html b/backdrop/templates/page.html
new file mode 100644
index 0000000..b0f09ea
--- /dev/null
+++ b/backdrop/templates/page.html
@@ -0,0 +1,13 @@
+{% extends "base.html" %}
+{% block title %}{{ page.title|striptags }}{%endblock%}
+
+{% block content %}
+<div class="row">
+    <div class="small-12 columns article">
+        <h2>{{ page.title }}</h2>
+        <section>
+            {{ page.content }}    
+        </section>
+    </div>
+</div>
+{% endblock content %}
diff --git a/backdrop/templates/period_archives.html b/backdrop/templates/period_archives.html
new file mode 100644
index 0000000..c2fdf06
--- /dev/null
+++ b/backdrop/templates/period_archives.html
@@ -0,0 +1,16 @@
+{% extends "base.html" %}
+{% block title %}Archives{% endblock title %}
+
+{% block content %}
+<div class="row">
+    <div class="small-12 columns">
+        <h1>Archives for {{ period | reverse | join(' ') }}</h1>
+        <dl>
+        {% for article in dates %}
+            <dt>{{ article.locale_date }}</dt>
+            <dd><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></dd>
+        {% endfor %}
+        </dl>
+    </div>
+</div>
+{% endblock %}
diff --git a/backdrop/templates/sample.html b/backdrop/templates/sample.html
new file mode 100644
index 0000000..8ed4640
--- /dev/null
+++ b/backdrop/templates/sample.html
@@ -0,0 +1,194 @@
+<!doctype html>
+<html class="no-js" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Foundation</title>
+    <!--[if !IE 7]>
+	<style type="text/css">
+		#main-content {display:table;height:100%}
+	</style>
+    <![endif]-->
+    <link rel="stylesheet" href="css/app.css" />
+    <script src="bower_components/modernizr/modernizr.js"></script>
+  </head>
+  <body>
+    <div class="master-row">
+        <div class="content-pane main-content">
+    <nav class="top-bar" data-topbar role="navigation">
+        <ul class="title-area">
+            <li class="name"><!-- Leave this empty --></li>
+            <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
+        </ul>
+        <section class="top-bar-section">
+            <ul class="left">
+                <li class="active"><a href="#">Home</a></li>
+                <li><a href="#">About Me</a></li>
+                <li><a href="#">Research</a></a></li>
+                <li><a href="#">CV</a></a></li>
+                <li><a href="#">Software</a></a></li>
+                <li><a href="#">Contact</a></a></li>
+            </ul>
+            <ul class="right">
+                <li><a href="#">News</a></a></li>
+            </ul>
+
+        </section>
+    </nav>
+    <div class="row title-bar">
+        <div class="small-12 columns">
+            <h1><a href="#">Chris MacMackin</a></h1><h2> <small>DPhil Student in Atmospheric, Ocean, and Planetary Physics</small></h2>
+            <hr>
+        </div>
+    </div>
+    
+    <div class="row">
+        <div class="small-12 columns">
+            <p>This that the other thing. This that the other thing. 
+               This that the other thing. This that the other thing.</p>
+            <p>This that the other thing.</p>
+            <p>This that the other thing. <em>This should be italic.</em>
+               This that the other thing. <a href="http://en.wikipedia.org/wiki/Main_Page">Wikipedia</a>
+               This that the other thing. This that the other thing.</p>
+            <p>This that the other thing. <strong>This should be bold.</strong></p>
+            <p>This that the other thing.</p>
+        </div>
+    </div>
+    <footer class="show-for-large-up">
+            <div class="row">
+            <div class="small-6 medium-3 columns">
+                    <ul class="left-nav">
+                        <li><a href="#">Home <i class="fa fa-home fa-fw"></i></a></li>
+                        <li><a href="#">Categories &nbsp;<i class="fa fa-folder-open fa-fw"></i></a></li>
+                    </ul>
+            </div>
+            <div class="small-6 medium-3 medium-push-6 columns">
+                    <ul class="right-nav">
+                        <li><a href="#"><i class="fa fa-rss fa-fw"></i>&nbsp;Feed</a></li>
+                        <li><a href="#"><i class="fa fa-archive fa-fw"></i>&nbsp;Archives</a></li>
+                    </ul>
+            </div>
+            <div class="small-12 medium-6 medium-pull-3 columns text-center">
+                <p class="tag-cloud"><a href="#"><i class="fa fa-tags"></i>&nbsp;Tags: </a>
+                <span class="label"><a href="#">Writing</a></span>
+                <a href="#"><span class="label">Brazil</span></a>
+                <span class="label">Linux</span>
+                <span class="label">Programming</span>
+                <span class="label">Socialism</span>
+                <span class="label">Mathematical Models</span>
+                <span class="label">gfortran</span>
+                <span class="label">Blogging</span>
+                <span class="label">Thoughts</span>
+                <span class="label">Nuclear Power</span>
+                <span class="label">Mathematics</span>
+                <span class="label">Guards! Guards!</span>
+                <span class="label">Canada Post</span>&nbsp;&hellip;
+                </p>
+            </div>
+        <div class="small-12 columns sub-footer">
+            <hr>
+            <div class="small-12 medium-6 columns">
+                <p class="small-text-center medium-text-left">&copy; 2015 Chris MacMackin 
+                <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="cc.png" /></a></p>
+            </div>
+            <div class="small-12 medium-6 columns">
+                <p class="small-text-center medium-text-right">Proudly powered by 
+                <a href="http://blog.getpelican.com/">Pelican</a>,
+                which takes great advantage of
+                <a href="https://www.python.org/">Python</a>.</p>
+            </div>
+        </div>
+        </div>
+    </footer>
+        </div>
+        <div class="image-pane main-content" style="background: url('oxford.jpg'); background-size:cover; background-position: center;">
+            <div class="row">
+                <div class="small-12 medium-6 medium-push-3 large-reset-order large-12 columns">
+                    <div class="panel transparent" id="about-me"><div class="row">
+                        <div class="show-for-medium-up medium-3 columns no-buffer"><a class="th" href="gradChoice.jpg">
+                        <img src="gradChoice.jpg">
+                        </a></div>
+                        <div class="small-12 medium-9 columns">
+                            This is a blurb about me. I'm a student studying
+                            physics. You may know me. You may not. Whatever. This
+                            that the other thing. This that the other thing.
+                        </div>
+                        <div class="small-12 columns">
+                            <ul class="link-list">
+                                <li><a href="#"><i class="fa fa-envelope"></i>&nbsp; Email</a></li>
+                                <li><a href="#"><i class="fa fa-github"></i>&nbsp; GitHub</a></li>
+
+                            </ul>
+                        </div>
+                    </div></div>
+                </div>
+                <div class="small-12 medium-3 medium-pull-9 large-reset-order large-12 columns">
+                    <ul class="blogroll">
+                        <li class="heading">What I've been reading&hellip;</li>
+                        <li><a href="#">Button</a></li>
+                        <li><a href="#">New Button</a></li>
+                        <li><a href="#">Third Button</a></li>
+                        <li><a href="#">Button 4</a></li>
+                    </ul>
+                </div>
+<!--
+                <div class="small-12 medium-3 large-12 columns">
+                    <div class="small-6 medium-12 large-6 small-centered columns">
+                        <a class="th" href="http://www.ox.ac.uk/"><img src="oxford.png"></a>
+                    </div>
+                </div>
+-->
+           </div>
+        </div>
+    </div>
+        <div class="row"><footer class="hide-for-large-up">
+            <div class="row">
+            <div class="small-6 medium-3 columns">
+                    <ul class="left-nav">
+                        <li><a href="#">Home <i class="fa fa-home fa-fw"></i></a></li>
+                        <li><a href="#">Categories &nbsp;<i class="fa fa-folder-open fa-fw"></i></a></li>
+                    </ul>
+            </div>
+            <div class="small-6 medium-3 medium-push-6 columns">
+                    <ul class="right-nav">
+                        <li><a href="#"><i class="fa fa-rss fa-fw"></i>&nbsp;Feed</a></li>
+                        <li><a href="#"><i class="fa fa-archive fa-fw"></i>&nbsp;Archives</a></li>
+                    </ul>
+            </div>
+            <div class="small-12 medium-6 medium-pull-3 columns text-center">
+                <p class="tag-cloud"><a href="#"><i class="fa fa-tags"></i>&nbsp;Tags: </a>
+                <span class="label">Writing</span>
+                <span class="label">Brazil</span>
+                <span class="label">Linux</span>
+                <span class="label">Programming</span>
+                <span class="label">Socialism</span>
+                <span class="label">Mathematical Models</span>
+                <span class="label">gfortran</span>
+                <span class="label">Blogging</span>
+                <span class="label">Thoughts</span>
+                <span class="label">Nuclear Power</span>
+                <span class="label">Mathematics</span>
+                <span class="label">Guards! Guards!</span>
+                <span class="label">Canada Post</span>&nbsp;&hellip;
+                </p>
+            </div>
+        <div class="small-12 columns sub-footer">
+            <hr>
+            <div class="small-12 medium-6 columns">
+                <p class="small-text-center medium-text-left">&copy; 2015 Chris MacMackin 
+                <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="cc.png" /></a></p>
+            </div>
+            <div class="small-12 medium-6 columns">
+                <p class="small-text-center medium-text-right">Proudly powered by 
+                <a href="http://blog.getpelican.com/">Pelican</a>,
+                which takes great advantage of
+                <a href="https://www.python.org/">Python</a>.</p>
+            </div>
+        </div>
+        </div>
+        </footer></div>
+   <script src="bower_components/jquery/dist/jquery.min.js"></script>
+    <script src="bower_components/foundation/js/foundation.min.js"></script>
+    <script src="js/app.js"></script>
+  </body>
+</html>
diff --git a/backdrop/templates/tag.html b/backdrop/templates/tag.html
new file mode 100644
index 0000000..e98d878
--- /dev/null
+++ b/backdrop/templates/tag.html
@@ -0,0 +1,12 @@
+{% extends "base.html" %}
+{% block title %}{{ tag|striptags }}{% endblock title %}
+
+{% block content %}
+{% import 'macros.html' as macros %}
+<div class="row">
+    <div class="small-12 columns">
+        <h2>Articles with tag &ldquo;{{ tag }}&rdquo;</h2>
+        {{ macros.page_list(articles_page, articles_paginator.num_pages, page_name, SITEURL, DISQUS_SITENAME ) }}
+    </div>
+</div>
+{% endblock content %}
diff --git a/backdrop/templates/tags.html b/backdrop/templates/tags.html
new file mode 100644
index 0000000..3483990
--- /dev/null
+++ b/backdrop/templates/tags.html
@@ -0,0 +1,17 @@
+{% extends "base.html" %}
+{% block title %}Tags{%endblock%}
+
+{% block content %}
+<div class="row">
+    <div class="small-12 columns article">
+        <h2>Tags</h2>
+        <section>
+            <p class='tag-page'>
+            {% for tag, articles in tags|sort %}
+                <a href="{{ SITEURL }}/{{ tag.url }}"><span class="label">{{ tag }}&nbsp;&nbsp;<span class="label round secondary">{{ articles|count }}</span></span></a>
+            {% endfor %}
+            </p>    
+        </section>
+    </div>
+</div>
+{% endblock content %}