uploaded medio theme (#477)

* uploaded medio theme
* cons example
* Added example_pelicanconf.py

16 files changed, 810 insertions, 0 deletions

diff --git a/medio/templates/analytics.html b/medio/templates/analytics.html
new file mode 100755
index 0000000..8101fd9
--- /dev/null
+++ b/medio/templates/analytics.html
@@ -0,0 +1,46 @@
+{% if GOOGLE_ANALYTICS %}
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+      ga('create', '{{GOOGLE_ANALYTICS}}', 'auto');
+      ga('send', 'pageview');
+
+    </script>
+{% endif %}
+{% if GAUGES %}
+    <script type="text/javascript">
+    var _gauges = _gauges || [];
+    (function() {
+        var t   = document.createElement('script');
+        t.type  = 'text/javascript';
+        t.async = true;
+        t.id    = 'gauges-tracker';
+        t.setAttribute('data-site-id', '{{GAUGES}}');
+        t.src = '//secure.gaug.es/track.js';
+        var s = document.getElementsByTagName('script')[0];
+        s.parentNode.insertBefore(t, s);
+    })();
+    </script>
+{% endif %}
+{% if PIWIK_URL and PIWIK_SITE_ID %}
+    <script type="text/javascript">
+    {% if PIWIK_SSL_URL %}
+        var pkBaseURL = "{{ PIWIK_SSL_URL }}";
+    {% else %}
+        var pkBaseURL = "{{ PIWIK_URL }}";
+    {% endif %}
+    var _paq = _paq || [];
+    _paq.push(["trackPageView"]);
+    _paq.push(["enableLinkTracking"]);
+    (function() {
+        var u=(("https:" == document.location.protocol) ? "https" : "http")+"://"+pkBaseURL+"/";
+        _paq.push(["setTrackerUrl", u+"piwik.php"]);
+        _paq.push(["setSiteId", "{{ PIWIK_SITE_ID }}"]);
+        var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
+        g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s);
+    })();
+    </script>
+{% endif %}
diff --git a/medio/templates/archives.html b/medio/templates/archives.html
new file mode 100755
index 0000000..63deb04
--- /dev/null
+++ b/medio/templates/archives.html
@@ -0,0 +1,30 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="page-container archive-container">
+
+    <div class="article-header-container">
+        <div class="background-image-container">
+
+            {# title with big background image #}
+            <div class="background-image-small">
+                <div class="title-container">
+                    <h1>Archives for {{ SITENAME }}</h1>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="entry-content" style="min-height:100vh">
+
+      <ul>
+      {% for article in dates %}
+          <li>
+              <a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a> &mdash; {{ article.locale_date }}
+          </li>
+      {% endfor %}
+      </ul>
+
+    </div>
+
+</div>
+{% endblock %}
diff --git a/medio/templates/article.html b/medio/templates/article.html
new file mode 100755
index 0000000..4269d9a
--- /dev/null
+++ b/medio/templates/article.html
@@ -0,0 +1,154 @@
+{% extends "base.html" %}
+{% block title %}{{ article.title|striptags }}{% endblock %}
+{% block content %}
+<div class="page-container">
+    <div class="entry-content">
+      {% for author in article.authors %}
+      <div class="post-meta pure-u-10-24">
+          {% if author|string in BLOG_AUTHORS %}
+          <div class="pure-u">
+              <img src="{{ BLOG_AUTHORS.get(author|string).image }}" class="post-avatar" alt="Go to the profile of {{ author|striptags }}">
+          </div>
+          {% endif %}
+          <div class="pure-u meta-data">
+              <a href="{{ SITEURL }}/{{ author.url }}" class="category">{{ author }}</a><br />
+              {{ BLOG_AUTHORS.get(author|string).short_description }}<br />
+              <abbr title="{{ article.date.isoformat() }}">{{ article.locale_date }}</abbr>
+              {% if article.readtime_minutes %}
+              &mdash; {{ article.readtime_minutes }} min read
+              {% endif %}
+          </div>
+      </div>
+      {% endfor %}
+    </div>
+
+    <div class="article-header-container">
+        <div class="background-image-container">
+
+            {# title with big background image #}
+            {% if article.cover %}
+            <div class="background-image" style="background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url({{ article.cover }});">
+                <img src="{{ article.cover }}" alt="{{ article.title|striptags }}">
+                <div class="title">
+                <h1>
+                    {{ article.title }}
+                </h1>
+                {% if article.subtitle %}
+                <h2>
+                    {{ article.subtitle }}
+                </h2>
+                {% endif %}
+                </div>
+            </div>
+            {% else %}
+            <div class="background-image-small">
+                {% if article.thumbnail %}
+                <img src="{{ article.thumbnail }}" alt="{{ article.title|striptags }}">
+                {% endif %}
+                <div class="title-container">
+                    <h1>{{ article.title }}</h1>
+                    {% if article.subtitle %}
+                    <h4>{{ article.subtitle }}</h4>
+                    {% endif %}
+                </div>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+
+    <div class="entry-content">
+        <!--
+        <div align="right">
+          {% set i = article.authors|count %}
+          {% if i != 1 %}
+          Authors:<br>
+          {% endif %}
+          {% if i == 1 %}
+          Author:<br>
+          {% endif %}
+          {% if article.authors %}
+            {% for author in article.authors %}
+              <a href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a><br>
+            {% endfor %}
+          {% endif %}
+        </div>
+        -->
+
+        {{ article.content }}
+    </div>
+
+    <footer>
+        {% if article.tags %}
+        <div class="tags">
+            {% for tag in article.tags %}
+            <a href="{{ SITEURL }}/{{ tag.url }}">{{ tag | escape }}</a>
+            {% endfor %}
+        </div>
+        {% endif %}
+        <div class="pure-g post-footer">
+            {% if article.authors %}
+            <div class="pure-g">
+                {% for author in article.authors %}
+                <div class="pure-g poster-info">
+                    {% if author|string in BLOG_AUTHORS %}
+                    <div class="pure-u">
+                        <a href="{{ SITEURL }}/{{ author.url }}"><img src="{{ BLOG_AUTHORS.get(author|string).image }}" alt=""></a>
+                    </div>
+                    {% endif %}
+                    <div class="pure-u">
+                        <h3 class="author-name"><a href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a></h3>
+                        <p class="author-description">
+                          {% if BLOG_AUTHORS %}
+                          {{ BLOG_AUTHORS.get(author|string).description }}
+                          {% endif %}
+                        </p>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+            {% endif %}
+
+
+            <!--
+            {% if article.category|string in BLOG_CATEGORIES %}
+            <div class="pure-u-1 pure-u-md-1-2">
+
+                <div class="pure-g post-category-info">
+                    <div class="pure-u">
+                        <a href="{{ SITEURL }}/{{ article.category.url }}"><img src="{{ BLOG_CATEGORIES.get(article.category|string).thumbnail }}" alt=""></a>
+                    </div>
+                    <div class="pure-u-3-4">
+                        <h3 class="author-name"><a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a></h3>
+                        <p class="author-description">
+                          {{ BLOG_CATEGORIES.get(article.category|string).description }}
+                        </p>
+                    </div>
+                </div>
+
+            </div>
+            {% endif %}
+            -->
+
+        </div>
+
+
+    </footer>
+
+    {% if DISQUS_SITENAME %}
+    <div class="entry-content">
+        <div id="disqus_thread"></div>
+        <script type="text/javascript">
+            var disqus_shortname = '{{ DISQUS_SITENAME }}';
+            (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="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
+    </div>
+    {% endif %}
+
+</div>
+
+{% endblock %}
diff --git a/medio/templates/author.html b/medio/templates/author.html
new file mode 100755
index 0000000..b17d010
--- /dev/null
+++ b/medio/templates/author.html
@@ -0,0 +1,52 @@
+{% extends "base.html" %}
+{% block title %}{{ SITENAME }} - {{ author }}{% endblock %}
+{% block content %}
+<div class="author-page-header">
+    {% if author|string in BLOG_AUTHORS %}
+    <!--
+    {% if BLOG_AUTHORS.get(author|string).cover %}
+    <div class="cover" style="background-image: url({{ BLOG_AUTHORS.get(author|string).cover }});background-color: rgba(102, 102, 102, 0.3);background-blend-mode: multiply;"></div>
+    {% endif %}
+    -->
+    <div class="author-profile" style="text-align:left;padding-top:5%">
+      <div class="pure-u-17-24">
+        <h1>{{ author }}</h1>
+        <p class="author-description">
+            {{ BLOG_AUTHORS.get(author|string).description }}
+            {% for icon, link in BLOG_AUTHORS.get(author|string).links %}
+            <a href="{{ link }}" style="color:rgba(0,0,0,0.6)"><i class="fa fa-{{ icon }}"></i></a>
+            {% endfor %}
+        </p>
+        <!--
+        <ul class="author-links">
+            {% for icon, link in BLOG_AUTHORS.get(author|string).links %}
+            <li><a href="{{ link }}"><i class="fa fa-{{ icon }}"></i></a>
+            {% endfor %}
+        </ul>
+        -->
+      </div>
+      <div class="pure-u-6-24" style="padding-top:1%">
+        <div class="avatar{% if not BLOG_AUTHORS.get(author|string).cover %}-no-cover{% endif %}"><img src="{{ BLOG_AUTHORS.get(author|string).image}}" alt="{{ author|striptags }}"></div>
+      </div>
+    </div>
+    {% endif %}
+</div>
+
+<div class="author-page-divider">
+    <span>Latest Posts</span>
+</div>
+
+
+<div class="main-container">
+    <div class="pure-g">
+        <div class="pure-u-1">
+
+            {% include "includes/posts.html" %}
+
+            {% include "pagination.html" %}
+
+        </div>
+    </div>
+</div>
+
+{% endblock content %}
diff --git a/medio/templates/base.html b/medio/templates/base.html
new file mode 100755
index 0000000..7e6ad02
--- /dev/null
+++ b/medio/templates/base.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="{{ DEFAULT_LANG }}">
+<head>
+        {% block head %}
+        <title>{% block title %}{{ SITENAME }}{% endblock title %}</title>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        {% 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 %}
+        {% endblock head %}
+</head>
+<body>
+
+    <div class="navigation pure-menu pure-menu-horizontal">
+        <a href="{{ SITEURL }}/" class="pure-menu-heading  pure-menu-link">{{ SITENAME }}</a>
+        <ul class="pure-menu-list">
+            <li class="pure-menu-item"><a href="../archives.html" class="pure-menu-link">All posts</a></li>
+            <li class="pure-menu-item"><a href="../categories.html" class="pure-menu-link">Categories</a></li>
+            <li class="pure-menu-item"><a href="../tags.html" class="pure-menu-link">Tags</a></li>
+            <li class="pure-menu-item"><a href="../blogroll.html" class="pure-menu-link">Blogroll</a></li>
+        </ul>
+    </div>
+
+
+    {% block content %}
+    {% endblock %}
+
+
+    <footer class="index-footer">
+        <br><a title="Twitter" href="https://twitter.com/replace-this"><i class="fa fa-twitter fa-2x"></i></a>
+        <a title="GitHub" href="https://github.com/replace-this"><i class="fa fa-github fa-2x"></i></a>
+        <br><p style="margin-top:-2%"><a style="font-size:14px" href="{{ SITEURL }}/" title="{{ SITENAME|striptags }}">Replace these links // <i class="fa fa-creative-commons" aria-hidden="true"></i> {{ SITENAME }}</a></p>
+    </footer>
+
+    <link rel="stylesheet" href="../theme/css/pure-min.css" />
+    <link rel="stylesheet" href="../theme/css/grids-responsive-min.css" />
+    <link rel="stylesheet" href="../theme/font-awesome-4.7.0/css/font-awesome.min.css" />
+    <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/{{ CSS_FILE }}" />
+    {% include "analytics.html" %}
+</body>
+
+{% if article %}
+  {% if article.scripts %}
+    {% for script in article.scripts %}
+    {{ script }}
+    {% endfor %}
+  {% endif %}
+{% endif %}
+
+</html>
diff --git a/medio/templates/blogroll.html b/medio/templates/blogroll.html
new file mode 100755
index 0000000..f355f2f
--- /dev/null
+++ b/medio/templates/blogroll.html
@@ -0,0 +1,26 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="page-container archive-container">
+
+    <div class="article-header-container">
+        <div class="background-image-container">
+
+            {# title with big background image #}
+            <div class="background-image-small">
+                <div class="title-container">
+                    <h1>Blogroll</h1>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="entry-content" style="min-height:100vh">
+
+      <ul>
+        <li><a href="http://replace-this.io/">Replace This</a></li>
+      </ul>
+
+    </div>
+
+</div>
+{% endblock %}
diff --git a/medio/templates/categories.html b/medio/templates/categories.html
new file mode 100755
index 0000000..2ec0eda
--- /dev/null
+++ b/medio/templates/categories.html
@@ -0,0 +1,28 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="page-container archive-container">
+
+    <div class="article-header-container">
+        <div class="background-image-container">
+
+            {# title with big background image #}
+            <div class="background-image-small">
+                <div class="title-container">
+                    <h1>Categories for {{ SITENAME }}</h1>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="entry-content" style="min-height:100vh">
+
+        <ul>
+        {% for category, articles in categories %}
+            <li><a href="{{ SITEURL }}/{{ category.url }}">{{ category }}</a></li>
+        {% endfor %}
+        </ul>
+
+    </div>
+
+</div>
+{% endblock %}
diff --git a/medio/templates/category.html b/medio/templates/category.html
new file mode 100755
index 0000000..96a2a4a
--- /dev/null
+++ b/medio/templates/category.html
@@ -0,0 +1,153 @@
+{% extends "base.html" %}
+{% block title %}{{ category|striptags }}{% endblock %}
+{% block content %}
+<div class="category-page-container">
+    <div class="category-logo">
+        {% if category|string in BLOG_CATEGORIES and BLOG_CATEGORIES.get(category|string).logo %}
+        <a href="{{ SITEURL }}/{{ category.url }}" rel="bookmark" title="Permalink to {{ category|striptags }}"><img src="{{ BLOG_CATEGORIES.get(category|string).logo }}" alt="{{ category|striptags }}"/></a>
+        {% else %}
+        <h1><a href="{{ SITEURL }}/{{ category.url }}" rel="bookmark" title="Permalink to {{ category|striptags }}">{{ category }}</a></h1>
+        {% endif %}
+    </div>
+
+    <div class="section-header">
+        Latest
+    </div>
+
+
+
+    {% set i = 0 %}
+    {% for article in articles_page.object_list %}
+    {% if i == 0 %}
+    <div class="pure-g article-row">
+        {% if article.cover or article.thumbnail %}
+        <div class="pure-u-1 pure-u-md-2-3">
+           <div class="col">
+               {% if article.cover %}
+               <a href="{{ SITEURL }}/{{ article.url }}" class="article-thumbnail article-thumbnail-1" style="background-image:url({{ article.cover }})"><span class="header">{{ article.title }}</span></a>
+               {% elif article.thumbnail %}
+               <a href="{{ SITEURL }}/{{ article.url }}" class="article-thumbnail article-thumbnail-1" style="background-image:url({{ article.thumbnail }})"><span class="header">{{ article.title }}</span></a>
+               {% endif %}
+           </div>
+        </div>
+        {% endif %}
+        <div class="pure-u-1{% if article.cover or article.thumbnail %} pure-u-md-1-3{% endif %} article-info">
+           <div class="col">
+
+               <h1><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></h1>
+
+               {{ article.summary }}
+
+               {% for author in article.authors %}
+               <div class="post-meta pure-g">
+                   {% if author|string in BLOG_AUTHORS %}
+                   <div class="pure-u">
+                       <img src="{{ BLOG_AUTHORS.get(author|string).image }}" class="post-avatar" alt="Go to the profile of {{ author|striptags }}">
+                   </div>
+                   {% endif %}
+                   <div class="pure-u-3-4 meta-data">
+                       <a href="{{ SITEURL }}/{{ author.url }}" class="category">{{ author }}</a><br />
+                       <abbr title="{{ article.date.isoformat() }}">{{ article.locale_date }}</abbr>
+                       {% if article.readtime_minutes %}
+                       &mdash; {{ article.readtime_minutes }} min read
+                       {% endif %}
+                   </div>
+               </div>
+               {% endfor %}
+
+           </div>
+
+        </div>
+
+    </div>
+    {% elif i < 3 %}
+    {% if i == 1 %}
+    <div class="pure-g article-row">
+    {% endif %}
+
+    <div class="pure-u-1 pure-u-sm-1-2 article-info">
+        <div class="col">
+            {% if article.cover %}
+            <a href="{{ SITEURL }}/{{ article.url }}" class="article-thumbnail article-thumbnail-2" style="background-image:url({{ article.cover }})"><span class="header">{{ article.title }}</span></a>
+            {% elif article.thumbnail %}
+            <a href="{{ SITEURL }}/{{ article.url }}" class="article-thumbnail article-thumbnail-2" style="background-image:url({{ article.thumbnail }})"><span class="header">{{ article.title }}</span></a>
+            {% endif %}
+
+            <h2><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></h2>
+            {{ article.summary }}
+
+            {% for author in article.authors %}
+            <div class="post-meta pure-g">
+                {% if author|string in BLOG_AUTHORS %}
+                <div class="pure-u">
+                    <img src="{{ BLOG_AUTHORS.get(author|string).image }}" class="post-avatar" alt="Go to the profile of {{ author|striptags }}">
+                </div>
+                {% endif %}
+                <div class="pure-u-3-4 meta-data">
+                    <a href="{{ SITEURL }}/{{ author.url }}" class="category">{{ author }}</a><br />
+                    <abbr title="{{ article.date.isoformat() }}">{{ article.locale_date }}</abbr>
+                    {% if article.readtime_minutes %}
+                    &mdash; {{ article.readtime_minutes }} min read
+                    {% endif %}
+                </div>
+            </div>
+            {% endfor %}
+
+        </div>
+    </div>
+
+    {% if i == 2 %}
+    </div>
+    {% endif %}
+    {% else %}
+    {% if i % 3 == 0 %}
+    <div class="pure-g article-row">
+    {% endif %}
+
+
+    <div class="pure-u-1 pure-u-lg-1-3 article-info">
+        <div class="col">
+            {% if article.cover %}
+            <a href="{{ SITEURL }}/{{ article.url }}" class="article-thumbnail article-thumbnail-3" style="background-image:url({{ article.cover }})"><span class="header">{{ article.title }}</span></a>
+            {% elif article.thumbnail %}
+            <a href="{{ SITEURL }}/{{ article.url }}" class="article-thumbnail article-thumbnail-3" style="background-image:url({{ article.thumbnail }})"><span class="header">{{ article.title }}</span></a>
+            {% endif %}
+
+            <h2><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></h2>
+            {{ article.summary }}
+
+            {% for author in article.authors %}
+            <div class="post-meta pure-g">
+                {% if author|string in BLOG_AUTHORS %}
+                <div class="pure-u">
+                    <img src="{{ BLOG_AUTHORS.get(author|string).image }}" class="post-avatar" alt="Go to the profile of {{ author|striptags }}">
+                </div>
+                {% endif %}
+                <div class="pure-u-3-4 meta-data">
+                    <a href="{{ SITEURL }}/{{ author.url }}" class="category">{{ author }}</a><br />
+                    <abbr title="{{ article.date.isoformat() }}">{{ article.locale_date }}</abbr>
+                    {% if article.readtime_minutes %}
+                    &mdash; {{ article.readtime_minutes }} min read
+                    {% endif %}
+                </div>
+            </div>
+            {% endfor %}
+
+        </div>
+    </div>
+
+
+    {% if i % 3 == 2 %}
+    </div>
+    {% endif %}
+    {% endif %}
+    {% set i = i + 1 %}
+    {% endfor %}
+
+    {% if articles_page.object_list|length % 3 != 0 %}
+    </div>
+    {% endif %}
+
+    {% include "pagination.html" %}
+</div>
+{% endblock %}
diff --git a/medio/templates/includes/post_metadata.html b/medio/templates/includes/post_metadata.html
new file mode 100755
index 0000000..3fd4efd
--- /dev/null
+++ b/medio/templates/includes/post_metadata.html
@@ -0,0 +1,11 @@
+<div class="pure-u-3-4 meta-data">
+    <a href="{{ SITEURL }}/{{ article.category.url }}" class="category">{{ article.category }}</a><br />
+
+    {% for author in article.authors %}
+    <a class="author" href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a>
+    {% endfor %}
+    &mdash; <abbr title="{{ article.date.isoformat() }}">{{ article.locale_date }}</abbr>
+    {% if article.readtime_minutes %}
+    &mdash; {{ article.readtime_minutes }} min read
+    {% endif %}
+</div>
diff --git a/medio/templates/includes/posts.html b/medio/templates/includes/posts.html
new file mode 100755
index 0000000..9df7b0b
--- /dev/null
+++ b/medio/templates/includes/posts.html
@@ -0,0 +1,24 @@
+{% for article in articles_page.object_list %}
+<div class="post">
+    <div class="post-meta pure-g">
+
+        {% if article.category|string in MEDIUS_CATEGORIES %}
+        <div class="pure-u">
+            <img src="{{ MEDIUS_CATEGORIES.get(article.category|string).thumbnail }}" class="post-avatar" alt="{{ article.category|striptags }}">
+        </div>
+        {% endif %}
+
+        {% include "includes/post_metadata.html" %}
+    </div>
+    {% if article.thumbnail %}
+    <a href="{{ SITEURL }}/{{ article.url }}"><img src="{{ article.thumbnail }}" alt="{{ article.title|striptags }}" class="post-image"/></a>
+    {% endif %}
+    <h2><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h2>
+    <div class="post-content">
+        {{ article.summary }}
+    </div>
+    <div class="post-footer">
+        <a href="{{ SITEURL }}/{{ article.url }}">Read more</a>
+    </div>
+</div>
+{% endfor %}
diff --git a/medio/templates/index.html b/medio/templates/index.html
new file mode 100755
index 0000000..77e1a0b
--- /dev/null
+++ b/medio/templates/index.html
@@ -0,0 +1,67 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="main-container">
+    <div class="pure-g">
+        <div class="pure-u-1 pure-u-lg-2-3">
+
+            {% if tag %}
+            <div class="post heading">
+                <div class="heading-prefix">Tagged in </div>
+                <h3>{{ tag }}</h3>
+            </div>
+            {% endif %}
+
+            {% include "includes/posts.html" %}
+
+            {% include "pagination.html" %}
+
+        </div>
+
+        <div class="pure-u-1 pure-u-lg-1-3">
+            <div class="right-container">
+                <div class="right-bar">
+                    <div class="right-head">
+                         About Me
+                    </div>
+
+                    <div class="tags">
+                      <p>
+                        My name is John Doe and this is dummy text.
+                      </p>
+                    </div>
+
+                    <div class="right-head">
+                         Links
+                    </div>
+
+                    <div class="tags">
+                      <p>
+                      Replace this links
+                      <a title="Twitter" href="https://twitter.com/replace-this"><i class="fa fa-twitter fa-2x"></i></a>
+                      <a title="GitHub" href="https://github.com/replace-this"><i class="fa fa-github fa-2x"></i></a>
+
+                      </p>
+                    </div>
+
+                    <div class="right-head">
+                         Blogroll
+                    </div>
+                    <div class="tags">
+                      <a href="http://replace-this.io/">Replace This</a>
+                    </div>
+                    <div class="right-head">
+                         Tags
+                    </div>
+                    <div class="tags">
+                    {% for tag, null in tags %}
+                    <a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a>
+                    {% endfor %}
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+{% endblock content %}
diff --git a/medio/templates/page.html b/medio/templates/page.html
new file mode 100755
index 0000000..b037bca
--- /dev/null
+++ b/medio/templates/page.html
@@ -0,0 +1,81 @@
+{% extends "base.html" %}
+{% block title %}{{ page.title|striptags }}{% endblock %}
+{% block content %}
+<div class="page-container">
+    <div class="article-header-container">
+        <div class="background-image-container">
+
+            {# title with big background image #}
+            {% if page.image %}
+            <div class="background-image" style="background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url({{ page.image }});">
+                <img src="{{ page.image }}" alt="{{ page.title|striptags }}">
+                <div class="title">
+                <h1>
+                    {{ page.title }}
+                </h1>
+                {% if page.subtitle %}
+                <h2>
+                    {{ page.subtitle }}
+                </h2>
+                {% endif %}
+                </div>
+            </div>
+            {% else %}
+            <div class="background-image-small">
+                {% if page.smallimage %}
+                <img src="{{ page.smallimage }}" alt="{{ page.title|striptags }}">
+                {% endif %}
+                <div class="title-container">
+                    <h1>{{ page.title }}</h1>
+                    {% if page.subtitle %}
+                    <h4>{{ page.subtitle }}</h4>
+                    {% endif %}
+                </div>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+
+    <div class="entry-content">
+        {{ page.content }}
+    </div>
+
+    <footer>
+        {% if page.tags %}
+        <div class="tags">
+            {% for tag in page.tags %}
+            <a href="{{ SITEURL }}/{{ tag.url }}">{{ tag | escape }}</a>
+            {% endfor %}
+        </div>
+        {% endif %}
+        <div class="pure-g post-footer">
+            {% if page.authors %}
+            <div class="pure-u-1">
+                {% for author in page.authors %}
+                <div class="pure-g poster-info">
+                    {% if author|string in BLOG_AUTHORS %}
+                    <div class="pure-u">
+                        <a href="{{ SITEURL }}/{{ author.url }}"><img src="{{ BLOG_AUTHORS.get(author|string).image }}" alt=""></a>
+                    </div>
+                    {% endif %}
+                    <div class="pure-u-3-4">
+                        <h3 class="author-name"><a href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a></h3>
+                        <p class="author-description">
+                          {% if BLOG_AUTHORS %}
+                          {{ BLOG_AUTHORS.get(author|string).description }}
+                          {% endif %}
+                        </p>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+            {% endif %}
+
+        </div>
+
+
+    </footer>
+
+</div>
+
+{% endblock %}
diff --git a/medio/templates/pagination.html b/medio/templates/pagination.html
new file mode 100755
index 0000000..0208df3
--- /dev/null
+++ b/medio/templates/pagination.html
@@ -0,0 +1,16 @@
+{% if DEFAULT_PAGINATION %}
+<div class="pagination">
+    <div class="post-meta pure-g">
+        <div class="pure-u-1-2 left">
+            {% if articles_page.has_previous() %}
+            <a href="{{ SITEURL }}/{{ articles_previous_page.url }}">Previous articles</a>
+            {% endif %}
+        </div>
+        <div class="pure-u-1-2 right">
+            {% if articles_page.has_next() %}
+            <a href="{{ SITEURL }}/{{ articles_next_page.url }}">More articles</a>
+            {% endif %}
+        </div>
+    </div>
+</div>
+{% endif %}
diff --git a/medio/templates/period_archives.html b/medio/templates/period_archives.html
new file mode 100755
index 0000000..e9e6848
--- /dev/null
+++ b/medio/templates/period_archives.html
@@ -0,0 +1,20 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="page-container archive-container">
+
+    <div class="entry-content">
+
+        <h1>Archives for {{ period | reverse | join(' ') }}</h1>
+
+        <ul>
+        {% for article in dates %}
+            <li>
+                <a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a> &mdash; {{ article.locale_date }}
+            </li>
+        {% endfor %}
+        </ul>
+
+    </div>
+
+</div>
+{% endblock %}
diff --git a/medio/templates/tag.html b/medio/templates/tag.html
new file mode 100755
index 0000000..68cdcba
--- /dev/null
+++ b/medio/templates/tag.html
@@ -0,0 +1,2 @@
+{% extends "index.html" %}
+{% block title %}{{ SITENAME }} - {{ tag }}{% endblock %}
diff --git a/medio/templates/tags.html b/medio/templates/tags.html
new file mode 100755
index 0000000..4d94123
--- /dev/null
+++ b/medio/templates/tags.html
@@ -0,0 +1,28 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="page-container archive-container">
+
+    <div class="article-header-container">
+        <div class="background-image-container">
+
+            {# title with big background image #}
+            <div class="background-image-small">
+                <div class="title-container">
+                    <h1>Tags for {{ SITENAME }}</h1>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="entry-content" style="min-height:100vh">
+
+      <ul>
+      {%- for tag, articles in tags|sort %}
+          <li><a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a> ({{ articles|count }})</li>
+      {% endfor %}
+      </ul>
+
+    </div>
+
+</div>
+{% endblock %}