Initial start of blog

.gitignore

@@ -0,0 +1,2 @@
+
+.statocles

blog/2017/09/25/first-post/index.markdown

@@ -0,0 +1,11 @@
+---
+title: First Post
+---
+
+# Welcome To Your Blog
+
+This is your first post. To edit this post, open up <%= $app->url( $self->path ) %>
+in your text editor.
+
+[Check the documentation for how to write Statocles
+content](http://preaction.me/statocles/pod/Statocles/Help/Content)

page/index.markdown

@@ -0,0 +1,11 @@
+---
+title: Main Page
+---
+
+# Welcome To Your Site
+
+This is your first page. To edit this page, open up <%= $self->path %>
+in your text editor.
+
+[Check the documentation for how to write Statocles
+content](http://preaction.me/statocles/pod/Statocles/Help/Content)

site.yml

@@ -0,0 +1,146 @@
+
+### Generated by Statocles version 0.086
+
+# This is the site configuration file. The format is YAML, and the config is
+# read by Beam::Wire, a dependency-injection library that builds complete
+# objects. For full details on how to edit this file, see
+# Statocles::Help::Config.
+#
+# This file contains configuration for objects. Each object has a name, like
+# "site", "theme", or "blog_app". This name can be used to refer to the object
+# later, for example, using "$ref: name".
+#
+# Every object has a "class". Developers can customize behavior by changing the
+# class or creating their own classes. If you need help with an object, look at
+# the class's documentation.
+#
+# Every object has "args", which are the object's attributes. See the class's
+# documentation for a full list of attributes and what they do.
+#
+# Many objects have events. Event handlers can be configured using the "on"
+# key. See the class's documentation for a list of possible events. Every
+# event handler should have at least "$class" and a "$sub". "$class" is the
+# plugin class. "$sub" is the plugin method to run. If necessary, you can
+# add "$args" to configure the plugin object.
+
+# site: This is the main site object. Site objects handle building and
+# deploying, and store global site data like themes and navigation. See
+# Statocles::Site for a full list of attributes and what they do.
+site:
+    class: 'Statocles::Site'
+
+    args:
+
+        # title: This is the title of the site, shown in the <title> tag
+        title: 'My Statocles Site'
+
+        # base_url: This is the base URL the site will be deployed to. It
+        # should be a full URL, and may contain a path, like:
+        #
+        #   http://example.com/username
+        #
+        # If the base_url contains a path, all internal links will be
+        # rewritten appropriately.
+        base_url: 'https://perlbot.pl/blog'
+
+        # apps: These are the applications in this site. The name of the app,
+        # "blog", "page", or "static", is used to refer to it in commands.
+        apps:
+
+            # blog: This is the blog app
+            blog:
+                $ref: 'blog_app'
+
+            # page: This app turns any Markdown page into HTML
+            page:
+                $ref: 'page_app'
+
+            # static: This app does no processing at all. Good for images
+            static:
+                $ref: 'static_app'
+
+        # plugins: These are plugins that can add features and alter the
+        # content of the site.
+        plugins:
+            link_check:
+                $class: 'Statocles::Plugin::LinkCheck'
+
+        # theme: The theme builds and manages the templates. Use themes to
+        # change how your site looks.
+        theme:
+            $ref: 'theme'
+
+        # index: The path to the page that should be used for the site index.
+        index: '/page'
+
+        # nav: These are lists of navigation links used by the theme.
+        # Navigations are used to move between applications, or to go to
+        # specific, important pages.
+        #
+        # The "main" nav is the primary navigation for the site. Every theme
+        # should have this one.
+        #
+        # Each nav consists of an array of links. See the Statocles::Link class
+        # for a list of attributes and what they mean. The most important are
+        # "text", the text of the link, and "href", the URL to link to.
+        nav:
+            main:
+                - text: 'Blog'
+                  href: '/blog'
+
+        # deploy: This is the deploy object, used to deploy this site.
+        deploy:
+            $ref: 'deploy'
+
+# theme: These are the settings for the theme.  See Statocles::Help::Theme for
+# more information, and Statocles::Theme for a full list of attributes and what
+# they do
+theme:
+    class: 'Statocles::Theme'
+    args:
+        # store: The store points to the directory where the theme's
+        # templates are kept. Under-the-hood, this is a Statocles::Store
+        # object.
+        #
+        # Themes have a special syntax to refer to themes that come bundled with
+        # Statocles. See Statocles::Help::Theme for more information
+        store: 'theme'
+
+# deploy: These are the settings for the site's deploy. See Statocles::Deploy::File
+# for a full list of attributes and what they do.
+deploy:
+    class: 'Statocles::Deploy::Git'
+    args:
+        branch: 'deploy'
+
+#----------------------------------------------------------------------------
+# Applications
+#----------------------------------------------------------------------------
+#
+# All applications have a "url_root" attribute, which is the root URL of the
+# app. All the app's pages will be under this URL.
+#
+# Most applications have a "store" attribute. The store points to the directory
+# where the application's data is kept. Under-the-hood, this is a
+# Statocles::Store object, but you only need to specify the directory path.
+
+# blog_app: These are the settings for the blog application.
+blog_app:
+    class: 'Statocles::App::Blog'
+    args:
+        url_root: '/blog'
+        store: 'blog'
+
+# page_app: These are the settings for the page application.
+page_app:
+    class: 'Statocles::App::Basic'
+    args:
+        store: 'page'
+        url_root: '/page'
+
+# static_app: These are the settings for the static application.
+static_app:
+    class: 'Statocles::App::Basic'
+    args:
+        store: 'static'
+        url_root: '/static'

theme/blog/index.atom.ep

@@ -0,0 +1,57 @@
+<?xml version="1.0"?>
+<feed xmlns="http://www.w3.org/2005/Atom">
+    <id><%= $site->url( $self->links( 'alternate' )->href ) %></id>
+    <title><%= $site->title %></title>
+    <updated><%= $self->date->strftime('%Y-%m-%dT%H:%M:%SZ') %></updated>
+    <link rel="self" href="<%= $site->url( $self->path ) %>"/>
+    <link rel="alternate" href="<%= $site->url( $self->links( 'alternate' )->href ) %>"/>
+    % if ( $page->author ) {
+    <author>
+        <name><%= $page->author->name %></name>
+    </author>
+    % }
+    <generator version="<%= $Statocles::VERSION %>">Statocles</generator>
+
+    % for my $p ( @$pages ) {
+    <entry>
+        <id><%= $site->url( $p->path ) %></id>
+        <title><%== $p->title %></title>
+        % if ( $p->author ) {
+        <author><name><%= $p->author %></name></author>
+        % }
+        <link rel="alternate" href="<%= $site->url( $p->path ) %>" />
+        <content type="html"><![CDATA[
+            % my @sections = $p->sections;
+            <%= $sections[0] %>
+            % if ( $p->links( 'crosspost' ) ) {
+                <ul>
+                % for my $link ( $p->links( 'crosspost' ) ) {
+                    <li><a href="<%= $link->href %>">
+                        Continue reading <em><%= $p->title %></em> on <%= $link->title %>...
+                    </a></li>
+                % }
+                    <li><a href="<%= $site->url( $p->path ) %>#section-2">
+                        Continue reading on <%= $site->title %>
+                    </a></li>
+                </ul>
+            % }
+            % elsif ( $p->sections > 1 ) {
+                <p><a href="<%= $site->url( $p->path ) %>#section-2">Continue reading...</a></p>
+            % }
+
+            % if ( $p->tags ) {
+                <p>Tags:
+                % for my $tag ( $p->tags ) {
+                    <a href="<%= $site->url( $tag->href ) %>"><%== $tag->text %></a>
+                % }
+                </p>
+            % }
+
+        ]]></content>
+        <updated><%= $p->date->strftime('%Y-%m-%dT%H:%M:%SZ') %></updated>
+        % for my $t ( $p->tags ) {
+        <category term="<%= $t->text %>" />
+        % }
+    </entry>
+    % }
+</feed>

theme/blog/index.html.ep

@@ -0,0 +1,120 @@
+
+% if ( my $tag_text = $self->data->{ tag_text } ) {
+<%= markdown $tag_text %>
+% }
+
+% for my $page ( @$pages ) {
+<article>
+    <header>
+        <h1><a href="<%= $app->page_url( $page ) %>"><%== $page->title %></a></h1>
+
+        <aside>
+            <time datetime="<%= $page->date->strftime('%Y-%m-%d') %>">
+                Posted on <%= $page->date->strftime('%Y-%m-%d') %>
+            </time>
+            % if ( $page->author ) {
+                <span class="author">
+                    by <%= $page->author %>
+                </span>
+            % }
+            % if ( $site->data->{disqus}{shortname} ) {
+            <a data-disqus-identifier="<%= $page->document->path %>" href="<%= $app->page_url( $page ) %>#disqus_thread">0 comments</a>
+            % }
+        </aside>
+
+        <p class="tags">Tags:
+        % for my $tag ( $page->tags ) {
+            <a href="<%= $tag->href %>" rel="tag"><%== $tag->text %></a>
+        % }
+        </p>
+
+        % if ( $page->links( 'crosspost' ) ) {
+        <p>Originally posted as:
+            % for my $link ( $page->links( 'crosspost' ) ) {
+                <a href="<%= $link->href %>">
+                    <em><%= $page->title %></em> on <%= $link->title %>.
+                </a>
+            % }
+        </p>
+        % }
+    </header>
+
+    % my @sections = $page->sections;
+    <%= $sections[0] %>
+
+    % if ( @sections > 1 ) {
+        <p><a href="<%= $app->page_url( $page ) %>#section-2">Continue reading <%= $page->title %>...</a></p>
+    % }
+
+</article>
+% }
+
+<ul class="pager">
+    <li class="prev">
+        % if ( $self->next ) {
+            <a class="button button-primary" rel="prev"
+                href="<%= $self->next %>"
+            >
+                &larr; Older
+            </a>
+        % }
+        % else {
+            <button disabled>
+                &larr; Older
+            </button>
+        % }
+    </li>
+    <li class="next">
+        % if ( $self->prev ) {
+            <a class="button button-primary" rel="next"
+                href="<%= $self->prev %>"
+            >
+                Newer &rarr;
+            </a>
+        % }
+        % else {
+            <button disabled>
+                Newer &rarr;
+            </button>
+        % }
+    </li>
+</ul>
+
+% if ( $site->data->{disqus}{shortname} ) {
+<script type="text/javascript">
+    var disqus_shortname = '<%= $site->data->{disqus}{shortname} %>';
+    (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>
+% }
+
+% content tags => begin
+    <nav id="tags">
+        <h1>Tags</h1>
+        <ul class="list-inline">
+        % for my $tag ( $app->tags ) {
+            <li><a href="<%= $tag->href %>"><%== $tag->text %></a></li>
+        % }
+        </ul>
+    </nav>
+% end
+
+% if ( my @links = $self->links( 'feed' ) ) {
+    % content feeds => begin
+        <h1>Feeds</h1>
+        <ul class="list-inline">
+            % for my $link ( @links ) {
+            <li>
+                <a href="<%= $link->href %>" rel="alternate" type="<%= $link->type %>">
+                    <%= $link->text %>
+                </a>
+            </li>
+            % }
+        </ul>
+    % end
+% }
+

theme/blog/index.rss.ep

@@ -0,0 +1,54 @@
+%# RSS requires date/time in the 'C' locale as per RFC822. strftime() is one of
+%# the few things that actually cares about locale.
+% use POSIX qw( locale_h );
+% my $current_locale = setlocale( LC_TIME );
+% setlocale( LC_TIME, 'C' );
+<?xml version="1.0"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+    <channel>
+        <title><%= $site->title %></title>
+        <link><%= $site->url( $self->links( 'alternate' )->href ) %></link>
+        <atom:link href="<%= $site->url( $self->path ) %>" rel="self" type="application/rss+xml" />
+        <description>Blog feed of <%= $site->title %></description>
+        <generator>Statocles <%= $Statocles::VERSION %></generator>
+        % for my $p ( @$pages ) {
+        <item>
+            <title><%== $p->title %></title>
+            <link><%= $site->url( $p->path ) %></link>
+            <guid><%= $site->url( $p->path ) %></guid>
+            <description><![CDATA[
+                % my @sections = $p->sections;
+                <%= $sections[0] %>
+                % if ( $p->links( 'crosspost' ) ) {
+                    <ul>
+                    % for my $link ( $p->links( 'crosspost' ) ) {
+                        <li><a href="<%= $link->href %>">
+                            Continue reading <em><%= $p->title %></em> on <%= $link->title %>...
+                        </a></li>
+                    % }
+                        <li><a href="<%= $site->url( $p->path ) %>#section-2">
+                            Continue reading on <%= $site->title %>
+                        </a></li>
+                    </ul>
+                % }
+                % elsif ( $p->sections > 1 ) {
+                    <p><a href="<%= $site->url( $p->path ) %>#section-2">Continue reading...</a></p>
+                % }
+
+                % if ( $p->tags ) {
+                    <p>Tags:
+                    % for my $tag ( $p->tags ) {
+                        <a href="<%= $site->url( $tag->href ) %>"><%== $tag->text %></a>
+                    % }
+                    </p>
+                % }
+
+            ]]></description>
+            <pubDate>
+                <%= $p->date->strftime('%a, %d %b %Y %H:%M:%S ') . sprintf q{%+05d}, $p->date->offset / 3600 %>
+            </pubDate>
+        </item>
+        % }
+    </channel>
+</rss>
+% setlocale( LC_TIME, $current_locale );

theme/blog/post.html.ep

@@ -0,0 +1,95 @@
+<header>
+    <h1><%== $self->title %></h1>
+
+    <aside>
+        <time datetime="<%= $self->date->strftime('%Y-%m-%d') %>">
+            Posted on <%= $self->date->strftime('%Y-%m-%d') %>
+        </time>
+        % if ( $self->author ) {
+            <span class="author">
+                by <%= $self->author %>
+            </span>
+        % }
+    </aside>
+
+    <p class="tags">Tags:
+    % for my $tag ( $self->tags ) {
+        <a href="<%= $tag->href %>" rel="tag"><%== $tag->text %></a>
+    % }
+    </p>
+
+    % if ( $self->links( 'crosspost' ) ) {
+    <p>Originally posted as:
+        % for my $link ( $self->links( 'crosspost' ) ) {
+            <a href="<%= $link->href %>">
+                <em><%= $self->title %></em> on <%= $link->title %>.
+            </a>
+        % }
+    </p>
+    % }
+
+</header>
+% my @sections = $self->sections;
+% for my $i ( 0..$#sections ) {
+<section id="section-<%= $i+1 %>">
+    <%= $sections[$i] %>
+</section>
+% }
+
+<ul class="pager">
+    <li class="prev">
+        % if ( $self->next ) {
+            <a class="button button-primary" rel="prev"
+                href="<%= $self->next %>"
+            >
+                &larr; Older
+            </a>
+        % }
+        % else {
+            <button disabled>
+                &larr; Older
+            </button>
+        % }
+    </li>
+    <li class="next">
+        % if ( $self->prev ) {
+            <a class="button button-primary" rel="next"
+                href="<%= $self->prev %>"
+            >
+                Newer &rarr;
+            </a>
+        % }
+        % else {
+            <button disabled>
+                Newer &rarr;
+            </button>
+        % }
+    </li>
+</ul>
+
+% if ( $site->data->{disqus}{shortname} ) {
+<h1>Comments</h1>
+<div id="disqus_thread"></div>
+<script type="text/javascript">
+    var disqus_shortname = '<%= $site->data->{disqus}{shortname} %>';
+    var disqus_identifier = '<%= $self->document->path %>';
+    var disqus_url = '<%= $site->url( $self->path ) %>';
+    (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>
+% }
+
+% content tags => begin
+    <nav id="tags">
+        <h1>Tags</h1>
+        <ul class="list-inline">
+        % for my $tag ( $app->tags ) {
+            <li><a href="<%= $tag->href %>"><%== $tag->text %></a></li>
+        % }
+        </ul>
+    </nav>
+% end

theme/css/normalize.css

@@ -0,0 +1,427 @@
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}

theme/css/skeleton.css

@@ -0,0 +1,418 @@
+/*
+* Skeleton V2.0.4
+* Copyright 2014, Dave Gamache
+* www.getskeleton.com
+* Free to use under the MIT license.
+* http://www.opensource.org/licenses/mit-license.php
+* 12/29/2014
+*/
+
+
+/* Table of contents
+––––––––––––––––––––––––––––––––––––––––––––––––––
+- Grid
+- Base Styles
+- Typography
+- Links
+- Buttons
+- Forms
+- Lists
+- Code
+- Tables
+- Spacing
+- Utilities
+- Clearing
+- Media Queries
+*/
+
+
+/* Grid
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.container {
+  position: relative;
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 20px;
+  box-sizing: border-box; }
+.column,
+.columns {
+  width: 100%;
+  float: left;
+  box-sizing: border-box; }
+
+/* For devices larger than 400px */
+@media (min-width: 400px) {
+  .container {
+    width: 85%;
+    padding: 0; }
+}
+
+/* For devices larger than 550px */
+@media (min-width: 550px) {
+  .container {
+    width: 80%; }
+  .column,
+  .columns {
+    margin-left: 4%; }
+  .column:first-child,
+  .columns:first-child {
+    margin-left: 0; }
+
+  .one.column,
+  .one.columns                    { width: 4.66666666667%; }
+  .two.columns                    { width: 13.3333333333%; }
+  .three.columns                  { width: 22%;            }
+  .four.columns                   { width: 30.6666666667%; }
+  .five.columns                   { width: 39.3333333333%; }
+  .six.columns                    { width: 48%;            }
+  .seven.columns                  { width: 56.6666666667%; }
+  .eight.columns                  { width: 65.3333333333%; }
+  .nine.columns                   { width: 74.0%;          }
+  .ten.columns                    { width: 82.6666666667%; }
+  .eleven.columns                 { width: 91.3333333333%; }
+  .twelve.columns                 { width: 100%; margin-left: 0; }
+
+  .one-third.column               { width: 30.6666666667%; }
+  .two-thirds.column              { width: 65.3333333333%; }
+
+  .one-half.column                { width: 48%; }
+
+  /* Offsets */
+  .offset-by-one.column,
+  .offset-by-one.columns          { margin-left: 8.66666666667%; }
+  .offset-by-two.column,
+  .offset-by-two.columns          { margin-left: 17.3333333333%; }
+  .offset-by-three.column,
+  .offset-by-three.columns        { margin-left: 26%;            }
+  .offset-by-four.column,
+  .offset-by-four.columns         { margin-left: 34.6666666667%; }
+  .offset-by-five.column,
+  .offset-by-five.columns         { margin-left: 43.3333333333%; }
+  .offset-by-six.column,
+  .offset-by-six.columns          { margin-left: 52%;            }
+  .offset-by-seven.column,
+  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
+  .offset-by-eight.column,
+  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
+  .offset-by-nine.column,
+  .offset-by-nine.columns         { margin-left: 78.0%;          }
+  .offset-by-ten.column,
+  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
+  .offset-by-eleven.column,
+  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }
+
+  .offset-by-one-third.column,
+  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
+  .offset-by-two-thirds.column,
+  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }
+
+  .offset-by-one-half.column,
+  .offset-by-one-half.columns     { margin-left: 52%; }
+
+}
+
+
+/* Base Styles
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+/* NOTE
+html is set to 62.5% so that all the REM measurements throughout Skeleton
+are based on 10px sizing. So basically 1.5rem = 15px :) */
+html {
+  font-size: 62.5%; }
+body {
+  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
+  line-height: 1.6;
+  font-weight: 400;
+  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #222; }
+
+
+/* Typography
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 2rem;
+  font-weight: 300; }
+h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
+h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
+h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
+h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
+h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
+h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
+
+/* Larger than phablet */
+@media (min-width: 550px) {
+  h1 { font-size: 5.0rem; }
+  h2 { font-size: 4.2rem; }
+  h3 { font-size: 3.6rem; }
+  h4 { font-size: 3.0rem; }
+  h5 { font-size: 2.4rem; }
+  h6 { font-size: 1.5rem; }
+}
+
+p {
+  margin-top: 0; }
+
+
+/* Links
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+a {
+  color: #1EAEDB; }
+a:hover {
+  color: #0FA0CE; }
+
+
+/* Buttons
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.button,
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  display: inline-block;
+  height: 38px;
+  padding: 0 30px;
+  color: #555;
+  text-align: center;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 38px;
+  letter-spacing: .1rem;
+  text-transform: uppercase;
+  text-decoration: none;
+  white-space: nowrap;
+  background-color: transparent;
+  border-radius: 4px;
+  border: 1px solid #bbb;
+  cursor: pointer;
+  box-sizing: border-box; }
+.button:hover,
+button:hover,
+input[type="submit"]:hover,
+input[type="reset"]:hover,
+input[type="button"]:hover,
+.button:focus,
+button:focus,
+input[type="submit"]:focus,
+input[type="reset"]:focus,
+input[type="button"]:focus {
+  color: #333;
+  border-color: #888;
+  outline: 0; }
+.button.button-primary,
+button.button-primary,
+input[type="submit"].button-primary,
+input[type="reset"].button-primary,
+input[type="button"].button-primary {
+  color: #FFF;
+  background-color: #33C3F0;
+  border-color: #33C3F0; }
+.button.button-primary:hover,
+button.button-primary:hover,
+input[type="submit"].button-primary:hover,
+input[type="reset"].button-primary:hover,
+input[type="button"].button-primary:hover,
+.button.button-primary:focus,
+button.button-primary:focus,
+input[type="submit"].button-primary:focus,
+input[type="reset"].button-primary:focus,
+input[type="button"].button-primary:focus {
+  color: #FFF;
+  background-color: #1EAEDB;
+  border-color: #1EAEDB; }
+
+
+/* Forms
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea,
+select {
+  height: 38px;
+  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
+  background-color: #fff;
+  border: 1px solid #D1D1D1;
+  border-radius: 4px;
+  box-shadow: none;
+  box-sizing: border-box; }
+/* Removes awkward default styles on some inputs for iOS */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none; }
+textarea {
+  min-height: 65px;
+  padding-top: 6px;
+  padding-bottom: 6px; }
+input[type="email"]:focus,
+input[type="number"]:focus,
+input[type="search"]:focus,
+input[type="text"]:focus,
+input[type="tel"]:focus,
+input[type="url"]:focus,
+input[type="password"]:focus,
+textarea:focus,
+select:focus {
+  border: 1px solid #33C3F0;
+  outline: 0; }
+label,
+legend {
+  display: block;
+  margin-bottom: .5rem;
+  font-weight: 600; }
+fieldset {
+  padding: 0;
+  border-width: 0; }
+input[type="checkbox"],
+input[type="radio"] {
+  display: inline; }
+label > .label-body {
+  display: inline-block;
+  margin-left: .5rem;
+  font-weight: normal; }
+
+
+/* Lists
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+ul {
+  list-style: circle inside; }
+ol {
+  list-style: decimal inside; }
+ol, ul {
+  padding-left: 0;
+  margin-top: 0; }
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+  margin: 1.5rem 0 1.5rem 3rem;
+  font-size: 90%; }
+li {
+  margin-bottom: 1rem; }
+
+
+/* Code
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+code {
+  padding: .2rem .5rem;
+  margin: 0 .2rem;
+  font-size: 90%;
+  white-space: nowrap;
+  background: #F1F1F1;
+  border: 1px solid #E1E1E1;
+  border-radius: 4px; }
+pre > code {
+  display: block;
+  padding: 1rem 1.5rem;
+  white-space: pre; }
+
+
+/* Tables
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+th,
+td {
+  padding: 12px 15px;
+  text-align: left;
+  border-bottom: 1px solid #E1E1E1; }
+th:first-child,
+td:first-child {
+  padding-left: 0; }
+th:last-child,
+td:last-child {
+  padding-right: 0; }
+
+
+/* Spacing
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+button,
+.button {
+  margin-bottom: 1rem; }
+input,
+textarea,
+select,
+fieldset {
+  margin-bottom: 1.5rem; }
+pre,
+blockquote,
+dl,
+figure,
+table,
+p,
+ul,
+ol,
+form {
+  margin-bottom: 2.5rem; }
+
+
+/* Utilities
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.u-full-width {
+  width: 100%;
+  box-sizing: border-box; }
+.u-max-full-width {
+  max-width: 100%;
+  box-sizing: border-box; }
+.u-pull-right {
+  float: right; }
+.u-pull-left {
+  float: left; }
+
+
+/* Misc
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+hr {
+  margin-top: 3rem;
+  margin-bottom: 3.5rem;
+  border-width: 0;
+  border-top: 1px solid #E1E1E1; }
+
+
+/* Clearing
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+/* Self Clearing Goodness */
+.container:after,
+.row:after,
+.u-cf {
+  content: "";
+  display: table;
+  clear: both; }
+
+
+/* Media Queries
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+/*
+Note: The best way to structure the use of media queries is to create the queries
+near the relevant code. For example, if you wanted to change the styles for buttons
+on small devices, paste the mobile query code up in the buttons section and style it
+there.
+*/
+
+
+/* Larger than mobile */
+@media (min-width: 400px) {}
+
+/* Larger than phablet (also point when grid becomes active) */
+@media (min-width: 550px) {}
+
+/* Larger than tablet */
+@media (min-width: 750px) {}
+
+/* Larger than desktop */
+@media (min-width: 1000px) {}
+
+/* Larger than Desktop HD */
+@media (min-width: 1200px) {}

theme/css/statocles-default.css

@@ -0,0 +1,292 @@
+
+/************************************************
+ * Basic style
+ ************************************************/
+
+body {
+    /* Raleway looks terrible, and in some cases is hard to read */
+    font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+h1 {
+    font-size: 3.5em;
+}
+
+h2 {
+    font-size: 2.75em;
+}
+
+h3 {
+    font-size: 2.25em;
+}
+
+h4 {
+    font-size: 1.75em;
+}
+
+h5 {
+    font-size: 1.3em;
+}
+
+code {
+    /* Only pre should set nowrap */
+    white-space: normal;
+}
+
+/* Fix <p> inside <li> leaving the list bullet on its own line in Firefox */
+ul {
+    list-style: circle outside;
+    margin-left: 1.4em;
+}
+ol {
+    list-style: decimal outside;
+    margin-left: 1.4em;
+}
+
+ul ul, ul ol, ol ul, ol ol {
+    /* Fix each successive layer of lists getting smaller and smaller.
+     * After three layers of lists, it's too small to read well
+     */
+    font-size: 100%;
+}
+
+.button.disabled {
+    cursor: not-allowed;
+}
+
+/** Blog header */
+main header {
+    margin-bottom: 1.8em;
+    font-size: 12pt;
+    overflow: hidden;
+}
+
+main header h1 {
+    border-bottom: 1px solid #045578;
+    margin-bottom: 0.2em;
+}
+
+main header h1 a {
+    text-decoration: none;
+}
+
+header aside {
+    margin-top: 0;
+    font-size: 12pt;
+}
+
+header aside * {
+    float: left;
+    display: inline-block;
+    margin-right: 0.5em;
+    margin-bottom: 0;
+}
+
+/** Add a line when using the "Continue reading..." link */
+section:target {
+    padding-top: 0.5em;
+    border-top: 2px dashed #777;
+}
+
+/** Don't allow <pre> to push too much */
+pre {
+    max-width: 100%;
+    overflow-x: scroll;
+}
+
+/**
+ * Don't allow main content images to push things around
+ */
+main img {
+    max-width: 100%;
+}
+
+a[rel=external]::after {
+    content: '\f08e';
+    padding-left: 0.2em;
+    font-family: "FontAwesome";
+    display: inline-block;
+    font-size: smaller;
+    vertical-align: top;
+}
+
+/************************************************
+ * Classes
+ ************************************************/
+
+ol.bare, ul.bare {
+    list-style-type: none;
+    margin-left: 0;
+}
+
+ol.list-inline, ul.list-inline {
+    margin: 0 0 2.5rem 0;
+}
+
+ol.list-inline li, ul.list-inline li {
+    display: inline-block;
+    margin: 0;
+}
+
+img.u-pull-left, img.u-pull-right {
+    /* Give some padding so the text isn't too close */
+    padding: 0.2em;
+}
+
+/************************************************
+ * Grid
+ ************************************************/
+
+.column, .columns {
+    margin-left: 2%;
+    padding-left: 1%;
+    padding-right: 1%;
+}
+
+/************************************************
+ * Widgets
+ ************************************************/
+
+/** Navbar widget */
+.navbar {
+    overflow: hidden;
+    border-bottom: 1px solid #bbb;
+    color: #777;
+    background-color: white;
+    margin-bottom: 1em;
+}
+
+.navbar a {
+    color: #777;
+    text-decoration: none;
+}
+
+.navbar a:hover {
+    color: #1EAEDB;
+}
+
+.navbar .brand {
+    font-size: 18px;
+    line-height: 20px;
+    margin-right: 0.5em;
+}
+
+.navbar ul {
+    list-style: none;
+    display: inline-block;
+    margin: 1em 0;
+}
+
+.navbar li {
+    display: inline-block;
+    padding: 0 1em;
+    margin: 0;
+}
+
+/** Sidebar widget */
+.sidebar h1,
+.sidebar h2,
+.sidebar h3,
+.sidebar h4,
+.sidebar h5,
+.sidebar h6 {
+    margin-bottom: 0.2em;
+}
+
+.sidebar h1 {
+    font-size: 2.25em;
+}
+
+.sidebar h2 {
+    font-size: 1.75em;
+}
+
+.sidebar h3 {
+    font-size: 1.3em;
+}
+
+.sidebar h4 {
+    font-size: 1.1em;
+}
+
+.sidebar h5 {
+    font-size: 1em;
+}
+
+.sidebar {
+    font-size: 0.8em;
+}
+
+/** Pager widget */
+ul.pager {
+    list-style: none;
+    margin-left: 0;
+}
+
+.pager .prev {
+    float: left;
+}
+
+.pager .next {
+    float: right;
+}
+
+.pager::after {
+    /* Clear the floated pager items */
+    content: "";
+    clear: both;
+    display: table;
+}
+
+/** Footer */
+footer {
+    margin-top: 1em;
+    padding-bottom: 0.5em;
+    font-size: 0.7em;
+}
+
+footer .tagline {
+    font-size: smaller;
+    line-height: 1.3;
+    text-align: right;
+}
+
+/** Crumbtrail widget */
+
+.crumbtrail ul {
+    display: inline-block;
+    list-style: none;
+    margin: 0;
+}
+
+.crumbtrail li {
+    display: inline-block;
+}
+
+.crumbtrail li::before {
+    content: '::';
+    display: inline-block;
+}
+
+.crumbtrail li:first-child::before {
+    content: '';
+}
+
+/************************************************
+ * Applications
+ */
+
+/** Blog */
+.tags {
+    float: right;
+    margin-bottom: 0;
+}
+
+/************************************************
+ * Reponsive
+ */
+@media ( max-width: 549px ) {
+    .column, .columns {
+        margin-left: 0;
+    }
+}

theme/layout/default.html.ep

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="stylesheet" href="/theme/css/normalize.css" />
+        <link rel="stylesheet" href="/theme/css/skeleton.css" />
+        <link rel="stylesheet" href="/theme/css/statocles-default.css" />
+        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+        <title><%== $self->title ? $self->title . ' - ' : '' %><%== $site->title %></title>
+        % if ( my $author = $self->author ) {
+        <meta name="author" content="<%== $author->name %>">
+        % }
+        <meta name="generator" content="Statocles <%= $Statocles::VERSION %>" />
+        % for my $link ( $self->links( 'feed' ) ) {
+        <link rel="alternate" href="<%= $link->href %>" type="<%= $link->type %>" />
+        % }
+        % if ( my $img = $site->images->{ 'icon' } ) {
+        <link rel="shortcut icon" href="<%= $img->src %>" />
+        % }
+        %= include 'site/head_after.html.ep'
+        % for my $link ( $site->links( 'stylesheet' ) ) {
+        <link rel="stylesheet" href="<%= $link->href %>" type="<%= $link->type || 'text/css' %>" />
+        % }
+        % for my $link ( $self->links( 'stylesheet' ) ) {
+        <link rel="stylesheet" href="<%= $link->href %>" type="<%= $link->type || 'text/css' %>" />
+        % }
+        % for my $link ( $site->links( 'script' ) ) {
+        <script src="<%= $link->href %>"></script>
+        % }
+        % for my $link ( $self->links( 'script' ) ) {
+        <script src="<%= $link->href %>"></script>
+        % }
+    </head>
+    <body>
+        <header>
+            <nav class="navbar">
+                <div class="container">
+                    <a class="brand" href="/"><%= $site->title %></a>
+                    % if ( my @nav_links = $site->nav( 'main' ) ) {
+                    <ul>
+                        % for my $nav ( @nav_links ) {
+                        <li>
+                            <a href="<%= $nav->href %>"><%= $nav->text %></a>
+                        </li>
+                        % }
+                    </ul>
+                    % }
+                    %= include 'site/navbar_extra.html.ep'
+                </div>
+            </nav>
+            %= include 'site/header_after.html.ep'
+        </header>
+        <div class="main container">
+            <div class="row">
+                <div class="nine columns">
+                    <main>
+                        <%= content %>
+                    </main>
+                </div>
+
+                <div class="three columns sidebar">
+                    %= include 'site/sidebar_before.html.ep';
+                    %= content 'tags';
+                    %= content 'feeds';
+                </div>
+            </div>
+        </div>
+        <footer>
+            %= include 'site/footer.html.ep'
+            <div class="container tagline">
+                <a href="http://preaction.me/statocles">Made with Statocles</a><br/>
+                <a href="http://www.perl.org">Powered by Perl</a>
+            </div>
+        </footer>
+
+        % if ( $site->data->{google_analytics_id} ) {
+        <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', '<%= $site->data->{google_analytics_id} %>', 'auto');
+          ga('send', 'pageview');
+        </script>
+        % }
+
+    </body>
+</html>

theme/layout/full-width.html.ep

@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <link rel="stylesheet" href="/theme/css/normalize.css" />
+        <link rel="stylesheet" href="/theme/css/skeleton.css" />
+        <link rel="stylesheet" href="/theme/css/statocles-default.css" />
+        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+        <title><%== $self->title ? $self->title . ' - ' : '' %><%== $site->title %></title>
+        % if ( my $author = $self->author ) {
+        <meta name="author" content="<%== $author->name %>">
+        % }
+        <meta name="generator" content="Statocles <%= $Statocles::VERSION %>" />
+        % for my $link ( $self->links( 'feed' ) ) {
+        <link rel="alternate" href="<%= $link->href %>" type="<%= $link->type %>" />
+        % }
+        % if ( my $img = $site->images->{ 'icon' } ) {
+        <link rel="shortcut icon" href="<%= $img->src %>" />
+        % }
+        %= include 'site/head_after.html.ep'
+        % for my $link ( $site->links( 'stylesheet' ) ) {
+        <link rel="stylesheet" href="<%= $link->href %>" type="<%= $link->type || 'text/css' %>" />
+        % }
+        % for my $link ( $self->links( 'stylesheet' ) ) {
+        <link rel="stylesheet" href="<%= $link->href %>" type="<%= $link->type || 'text/css' %>" />
+        % }
+        % for my $link ( $site->links( 'script' ) ) {
+        <script src="<%= $link->href %>"></script>
+        % }
+        % for my $link ( $self->links( 'script' ) ) {
+        <script src="<%= $link->href %>"></script>
+        % }
+    </head>
+    <body>
+        <header>
+            <nav class="navbar">
+                <div class="container">
+                    <a class="brand" href="/"><%= $site->title %></a>
+                    % if ( my @nav_links = $site->nav( 'main' ) ) {
+                    <ul>
+                        % for my $nav ( @nav_links ) {
+                        <li>
+                            <a href="<%= $nav->href %>"><%= $nav->text %></a>
+                        </li>
+                        % }
+                    </ul>
+                    % }
+                    %= include 'site/navbar_extra.html.ep'
+                </div>
+            </nav>
+            %= include 'site/header_after.html.ep'
+        </header>
+        <div class="main container">
+            <div class="row">
+                <div class="twelve columns">
+                    <main>
+                        <%= content %>
+                    </main>
+                </div>
+            </div>
+        </div>
+        <footer>
+            %= include 'site/footer.html.ep'
+            <div class="container tagline">
+                <a href="http://preaction.me/statocles">Made with Statocles</a><br/>
+                <a href="http://www.perl.org">Powered by Perl</a>
+            </div>
+        </footer>
+
+        % if ( $site->data->{google_analytics_id} ) {
+        <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', '<%= $site->data->{google_analytics_id} %>', 'auto');
+          ga('send', 'pageview');
+        </script>
+        % }
+
+    </body>
+</html>

theme/perldoc/pod.html.ep

@@ -0,0 +1,16 @@
+<div class="crumbtrail">
+<ul>
+% for my $trail ( @{ $self->data->{ crumbtrail } } ) {
+    <li>
+        % if ( $trail->{href} ) {
+        <a href="<%= $trail->{href} %>"><%= $trail->{text} %></a>
+        % }
+        % else {
+        <%= $trail->{text} %>
+        % }
+    </li>
+% }
+</ul>
+(<a href="<%= $self->data->{ source_path } %>">source</a>)
+</div>
+<%= $content %>

theme/perldoc/source.html.ep

@@ -0,0 +1,4 @@
+<a class="button" href="<%= $self->data->{ doc_path } %>">
+    Back to documentation
+</a>
+<pre><%== $content %></pre>

theme/plugin/highlight/default.css

@@ -0,0 +1,76 @@
+/*
+
+Original highlight.js style (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
+Modified for Statocles
+
+*/
+
+.hljs {
+  overflow-x: auto;
+  background: #F0F0F0;
+}
+
+.hljs,
+.hljs-subst {
+  color: #444;
+}
+
+.hljs-keyword,
+.hljs-attribute,
+.hljs-selector-tag,
+.hljs-meta-keyword,
+.hljs-doctag,
+.hljs-name {
+  font-weight: bold;
+}
+
+.hljs-built_in,
+.hljs-literal,
+.hljs-bullet,
+.hljs-code,
+.hljs-addition {
+  color: #1F811F;
+}
+
+.hljs-regexp,
+.hljs-symbol,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-link,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #BC6060;
+}
+
+.hljs-type,
+.hljs-string,
+.hljs-number,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-quote,
+.hljs-template-tag,
+.hljs-deletion {
+  color: #880000;
+}
+
+.hljs-title,
+.hljs-section {
+  color: #880000;
+  font-weight: bold;
+}
+
+.hljs-comment {
+  color: #888888;
+}
+
+.hljs-meta {
+  color: #2B6EA1;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}

theme/plugin/highlight/solarized-dark.css

@@ -0,0 +1,83 @@
+/*
+
+Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>
+Modified for Statocles
+
+*/
+
+.hljs {
+  overflow-x: auto;
+  background: #002b36;
+  color: #839496;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #586e75;
+}
+
+/* Solarized Green */
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-addition {
+  color: #859900;
+}
+
+/* Solarized Cyan */
+.hljs-number,
+.hljs-string,
+.hljs-meta .hljs-meta-string,
+.hljs-literal,
+.hljs-doctag,
+.hljs-regexp {
+  color: #2aa198;
+}
+
+/* Solarized Blue */
+.hljs-title,
+.hljs-section,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #268bd2;
+}
+
+/* Solarized Yellow */
+.hljs-attribute,
+.hljs-attr,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-class .hljs-title,
+.hljs-type {
+  color: #b58900;
+}
+
+/* Solarized Orange */
+.hljs-symbol,
+.hljs-bullet,
+.hljs-subst,
+.hljs-meta,
+.hljs-meta .hljs-keyword,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-link {
+  color: #cb4b16;
+}
+
+/* Solarized Red */
+.hljs-built_in,
+.hljs-deletion {
+  color: #dc322f;
+}
+
+.hljs-formula {
+  background: #073642;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}

theme/plugin/highlight/solarized-light.css

@@ -0,0 +1,83 @@
+/*
+
+Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>
+Modified for Statocles
+
+*/
+
+.hljs {
+  overflow-x: auto;
+  background: #fdf6e3;
+  color: #657b83;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #93a1a1;
+}
+
+/* Solarized Green */
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-addition {
+  color: #859900;
+}
+
+/* Solarized Cyan */
+.hljs-number,
+.hljs-string,
+.hljs-meta .hljs-meta-string,
+.hljs-literal,
+.hljs-doctag,
+.hljs-regexp {
+  color: #2aa198;
+}
+
+/* Solarized Blue */
+.hljs-title,
+.hljs-section,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #268bd2;
+}
+
+/* Solarized Yellow */
+.hljs-attribute,
+.hljs-attr,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-class .hljs-title,
+.hljs-type {
+  color: #b58900;
+}
+
+/* Solarized Orange */
+.hljs-symbol,
+.hljs-bullet,
+.hljs-subst,
+.hljs-meta,
+.hljs-meta .hljs-keyword,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-link {
+  color: #cb4b16;
+}
+
+/* Solarized Red */
+.hljs-built_in,
+.hljs-deletion {
+  color: #dc322f;
+}
+
+.hljs-formula {
+  background: #eee8d5;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}

theme/site/robots.txt.ep

@@ -0,0 +1,4 @@
+Sitemap: <%= $site->url( 'sitemap.xml' ) %>
+User-Agent: *
+Disallow:
+

theme/site/sitemap.xml.ep

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+% for my $page ( @$pages ) {
+    <url>
+        <loc><%= $site->url( $page->path ) %></loc>
+        <changefreq><%= $page->search_change_frequency %></changefreq>
+        <priority><%= $page->search_priority %></priority>
+        <lastmod><%= $page->date->strftime( '%Y-%m-%d' ) %></lastmod>
+    </url>
+% }
+</urlset>

theme/site/style.html

@@ -0,0 +1,525 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="stylesheet" href="../css/normalize.css" />
+        <link rel="stylesheet" href="../css/skeleton.css" />
+        <link rel="stylesheet" href="../css/statocles-default.css" />
+        <style type="text/css">
+            .section-head { border-bottom: 2px solid #222 }
+            .section-sub { border-bottom: 1px solid #222 }
+            .example { background-color: white; font-size: 80%; }
+        </style>
+        <title>Style Demo</title>
+    </head>
+    <body>
+
+        <header>
+            <nav class="navbar">
+                <div class="container">
+                    <a class="brand" href="/">Brand</a>
+                    <ul>
+                        <li><a href="#text">Text</a></li>
+                        <li><a href="#widgets">Widgets</a></li>
+                        <li><a href="#blog">Blog</a></li>
+                    </ul>
+                </div>
+            </nav>
+        </header>
+
+        <main class="container">
+
+            <h1>Style Demo</h1>
+
+            <h2 id="text" class="section-head">Text</h2>
+
+            <p>These are plain styles for plain HTML. No formatting classes
+            involved in this section!</p>
+
+            <section>
+                <div class="row">
+                    <div class="one-half column">
+                        <h3 class="section-sub">Headings</h3>
+
+                        <h1>Heading 1</h1>
+                        <pre><code class="example"># Heading 1
+&lt;h1&gt;Heading 1&lt;/h1&gt;</code></pre>
+
+                        <h2>Heading 2</h2>
+                        <pre><code class="example">## Heading 2
+&lt;h2&gt;Heading 2&lt;/h2&gt;</code></pre>
+
+                        <h3>Heading 3</h3>
+                        <pre><code class="example">### Heading 3
+&lt;h3&gt;Heading 3&lt;/h3&gt;</code></pre>
+
+                        <h4>Heading 4</h4>
+                        <pre><code class="example">#### Heading 4
+&lt;h4&gt;Heading 4&lt;/h4&gt;</code></pre>
+
+                        <h5>Heading 5</h5>
+                        <pre><code class="example">##### Heading 5
+&lt;h5&gt;Heading 5&lt;/h5&gt;</code></pre>
+
+                    </div>
+
+                    <div class="one-half column">
+                        <h3 class="section-sub">Formatting</h3>
+
+                        <p><a href="#">Links</a></p>
+                        <pre><code class="example">[Link text](http://example.com)
+&lt;a href="http://example.com"&gt;Link text&lt;/a&gt;</code></pre>
+
+                        <p><em>Emphasis</em></p>
+                        <pre><code class="example">_Emphasis_
+&lt;em&gt;Emphasis&lt;/em&gt;</code></pre>
+
+                        <p><strong>Strong Emphasis</strong></p>
+                        <pre><code class="example">*Strong Emphasis*
+&lt;strong&gt;Strong Emphasis&lt;/strong&gt;</code></pre>
+
+                        <p><code>Inline code</code></p>
+                        <pre><code class="example">`Inline code`
+&lt;code&gt;Inline code&lt;/code&gt;</code></pre>
+
+                        <p><kbd>Keyboard input</kbd></p>
+                        <pre><code class="example">&lt;kbd&gt;...&lt;/kbd&gt;</code></pre>
+
+                        <p><samp>Sample output</samp></p>
+                        <pre><code class="example">&lt;samp&gt;...&lt;/samp&gt;</code></pre>
+
+                    </div>
+
+                </div>
+
+                <h3 class="section-sub">Text Blocks</h3>
+
+                <h4>Paragraphs</h4>
+
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                Vestibulum vestibulum nunc at velit sagittis, id pulvinar augue
+                volutpat. In lobortis semper scelerisque. Praesent pharetra
+                augue vitae hendrerit aliquet. Aliquam vel ex felis. Nam
+                gravida accumsan odio eu semper. Sed id leo tellus. Suspendisse
+                pretium ligula et cursus hendrerit. Ut commodo metus a
+                efficitur tempus.  Fusce vel enim eget velit fringilla
+                congue.</p>
+
+                <pre><code class="example">Lorem ipsum dolor sit amet...
+
+&lt;p&gt;Lorem ipsum dolor sit amet...&lt;/p&gt;</code></pre>
+
+                <h4>Code</h4>
+
+                <pre><code>use strict;
+use warnings;
+use feature qw( say );
+
+package Hash::Object;
+
+sub new {
+    my ( $class, %self ) = @_;
+    return bless { %self }, $class;
+}
+</code></pre>
+
+<pre><code>use strict; use warnings; use feature qw( say ); package Hash::Object; sub new { my ( $class, %self ) = @_; return bless { %self }, $class; }</code></pre>
+
+                <pre><code class="example">    # 4-space indent
+    use strict;
+    use warnings;
+
+&lt;pre&gt;&lt;code&gt;use strict;
+use warnings;&lt;/code&gt;&lt;/pre&gt;</code></pre>
+
+                <h4>Blockquote</h4>
+
+                <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing
+                elit. Vestibulum vestibulum nunc at velit sagittis, id
+                pulvinar augue volutpat. In lobortis semper scelerisque.
+                Praesent pharetra augue vitae hendrerit aliquet. Aliquam
+                vel ex felis. Nam gravida accumsan odio eu semper. Sed id
+                leo tellus. Suspendisse pretium ligula et cursus hendrerit. Ut
+                commodo metus a efficitur tempus.  Fusce vel enim eget velit
+                fringilla congue. <cite>Some Author</cite></blockquote>
+
+                <pre><code class="example">&gt; Lorem ipsum dolor sit amet...
+
+&lt;blockquote&gt;
+Lorem ipsum dolor sit amet...
+&lt;cite&gt;Citation&lt;/cite&gt;
+&lt;/blockquote&gt;</code></pre>
+
+                <h3 class="section-sub">Lists</h3>
+
+                <div class="row">
+                    <div class="one-half column">
+                        <h4>Ordered</h4>
+
+                        <ol>
+                            <li>Lorem ipsum dolor sit amet</li>
+                            <li>Vivamus quis hendrerit quam</li>
+                            <li>Aenean sed velit lobortis, interdum</li>
+                            <li>Vivamus nunc purus, malesuada at lacinia</li>
+                            <li>Aenean nec arcu quis</li>
+                        </ol>
+
+                        <pre><code class="example">1. Lorem ipsum dolor sit amet
+2. Vivamus quis hendrerit quam
+3. Aenean sed velit lobortis, interdum
+
+&lt;ol&gt;
+    &lt;li&gt;Lorem ipsum dolor sit amet&lt;/li&gt;
+    &lt;li&gt;Vivamus quis hendrerit quam&lt;/li&gt;
+    &lt;li&gt;Aenean sed velit lobortis, interdum&lt;/li&gt;
+&lt;/ol&gt;</code></pre>
+
+                    </div>
+
+                    <div class="one-half column">
+                        <h4>Unordered</h4>
+
+                        <ul>
+                            <li>Maecenas consequat, quam id rhoncus</li>
+                            <li>Massa finibus justo, a interdum</li>
+                            <li>Nullam consequat lacus mattis</li>
+                            <li>Proin viverra tincidunt mauris ac interdum</li>
+                            <li>Interdum ante in, ullamcorper tortor</li>
+                        </ul>
+
+                        <pre><code class="example">* Lorem ipsum dolor sit amet
+* Vivamus quis hendrerit quam
+* Aenean sed velit lobortis, interdum
+
+&lt;ul&gt;
+    &lt;li&gt;Lorem ipsum dolor sit amet&lt;/li&gt;
+    &lt;li&gt;Vivamus quis hendrerit quam&lt;/li&gt;
+    &lt;li&gt;Aenean sed velit lobortis, interdum&lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+
+                    </div>
+                </div>
+            </section>
+
+            <h2 id="classes" class="section-head">Classes</h2>
+
+            <section>
+                <h3 class="section-sub">Lists</h3>
+
+                <h4>Inline lists</h4>
+
+                <div class="row">
+                    <div class="one-half column">
+                        <ul class="list-inline">
+                            <li>Lorem</li>
+                            <li>Ipsum</li>
+                            <li>Dolor</li>
+                        </ul>
+
+                        <pre><code class="example">&lt;ul class="list-inline"&gt;
+    &lt;li&gt;Lorem&lt;/li&gt;
+    &lt;li&gt;Ipsum&lt;/li&gt;
+    &lt;li&gt;Dolor&lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+                    </div>
+                    <div class="one-half column">
+                        <ol class="list-inline">
+                            <li>Lorem</li>
+                            <li>Ipsum</li>
+                            <li>Dolor</li>
+                        </ol>
+
+                        <pre><code class="example">&lt;ol class="list-inline"&gt;
+    &lt;li&gt;Lorem&lt;/li&gt;
+    &lt;li&gt;Ipsum&lt;/li&gt;
+    &lt;li&gt;Dolor&lt;/li&gt;
+&lt;/ol&gt;</code></pre>
+                    </div>
+                </div>
+
+            </section>
+
+            <section>
+                <h3 class="section-sub">Images</h3>
+
+                <div class="row">
+
+                    <div class="one-half column">
+                        <p><img src="http://placehold.it/150x150"
+                        class="u-pull-left"> Lorem ipsum dolor sit amet,
+                        consectetur adipiscing elit.  Vestibulum vestibulum
+                        nunc at velit sagittis, id pulvinar augue volutpat. In
+                        lobortis semper scelerisque. Praesent pharetra augue
+                        vitae hendrerit aliquet.</p>
+                        <div class="u-cf"></div>
+                        <pre><code class="example">&lt;img src="#" class="u-pull-left"&gt;</code></pre>
+                    </div>
+
+                    <div class="one-half column">
+                        <p><img src="http://placehold.it/150x150"
+                        class="u-pull-right"> Lorem ipsum dolor sit amet,
+                        consectetur adipiscing elit.  Vestibulum vestibulum
+                        nunc at velit sagittis, id pulvinar augue volutpat. In
+                        lobortis semper scelerisque. Praesent pharetra augue
+                        vitae hendrerit aliquet.</p>
+                        <div class="u-cf"></div>
+                        <pre><code class="example">&lt;img src="#" class="u-pull-right"&gt;</code></pre>
+                    </div>
+
+                </div>
+
+            </section>
+
+            <h2 id="widgets" class="section-head">Widgets</h2>
+
+            <section>
+                <h3 class="section-sub">Pager</h3>
+
+                <div class="row">
+                    <div class="one-half column">
+                        <h4>Enabled</h4>
+
+                        <ul class="pager">
+                            <li class="prev">
+                                <a class="button button-primary" rel="next" href="#">
+                                    &larr; Older
+                                </a>
+                            </li>
+                            <li class="next">
+                                <a class="button button-primary" rel="prev" href="#">
+                                    Newer &rarr;
+                                </a>
+                            </li>
+                        </ul>
+
+                        <div class="u-cf"></div>
+
+                        <pre><code class="example">&lt;ul class="pager"&gt;
+  &lt;li class="prev"&gt;
+    &lt;a class="button button-primary" rel="next" href="#"&gt;
+      &amp;larr; Older
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li class="next"&gt;
+    &lt;a class="button button-primary" rel="prev" href="#"&gt;
+      Newer &amp;rarr;
+    &lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+
+                    </div>
+
+                    <div class="one-half column">
+                        <h4>Disabled</h4>
+
+                        <ul class="pager">
+                            <li class="prev">
+                                <a class="button disabled" rel="next" href="#">
+                                    &larr; Older
+                                </a>
+                            </li>
+                            <li class="next">
+                                <a class="button disabled" rel="prev">
+                                    Newer &rarr;
+                                </a>
+                            </li>
+                        </ul>
+
+                        <div class="u-cf"></div>
+
+                        <pre><code class="example">&lt;ul class="pager"&gt;
+  &lt;li class="prev"&gt;
+    &lt;a class="button disabled" rel="next" href="#"&gt;
+      &amp;larr; Older
+    &lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li class="next"&gt;
+    &lt;a class="button disabled" rel="prev"&gt;
+      Newer &amp;rarr;
+    &lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+
+                    </div>
+
+                </div>
+
+                <h3 class="section-sub">Sidebar</h3>
+
+                <p>Recommended width is <code class="example">class="three
+                columns"</code>.</p>
+
+                <pre><code class="example">&lt;div class="three columns sidebar"&gt;...&lt;/div&gt;</code></pre>
+
+                <div class="row">
+                    <div class="three columns sidebar">
+                        <h1>Heading 1</h1>
+                        <p>Lorem ipsum dolor sit amet, consectetur
+                        adipiscing elit. Vivamus quis hendrerit quam, ac
+                        tristique nisl. <code>Aenean sed velit lobortis, interdum
+                        ante in, ullamcorper tortor.</code></p>
+                        <ul>
+                            <li>Maecenas consequat, quam id rhoncus</li>
+                            <li>Massa finibus justo, a interdum</li>
+                            <li>Proin viverra tincidunt mauris ac interdum</li>
+                            <li>Interdum ante in, ullamcorper tortor</li>
+                        </ul>
+                    </div>
+
+                    <div class="three columns sidebar">
+                        <h2>Heading 2</h2>
+                        <p>Vivamus nunc purus, malesuada at lacinia a,
+                        pellentesque nec enim. <em>Vestibulum</em> et est euismod,
+                        ultrices lectus non, aliquam magna. Proin viverra
+                        tincidunt mauris ac interdum. Aenean nec arcu quis
+                        turpis accumsan dignissim et ut risus.</p>
+                    </div>
+
+                    <div class="three columns sidebar">
+                        <h3>Heading 3</h3>
+                        <img src="http://placehold.it/200x200">
+                        <ol>
+                            <li>Lorem ipsum dolor sit amet</li>
+                            <li>Vivamus quis hendrerit quam</li>
+                            <li>Aenean sed velit lobortis, interdum</li>
+                            <li>Vivamus nunc purus, malesuada at lacinia</li>
+                            <li>Aenean nec arcu quis</li>
+                        </ol>
+                    </div>
+
+                    <div class="three columns sidebar">
+                        <h4>Heading 4</h4>
+                        <p>Maecenas consequat, quam id rhoncus convallis,
+                        erat massa finibus justo, a interdum justo est eget
+                        tellus. Ut mattis <strong>dolor dolor</strong>. Maecenas vitae
+                        congue diam. <kbd>Nullam consequat lacus mattis,
+                        faucibus arcu ut, auctor ex.</kbd></p>
+
+                        <h5>Heading 5</h5>
+
+                    </div>
+                </div>
+
+                <h3 class="section-sub">Crumbtrail</h3>
+                <div class="crumbtrail">
+                    <ul>
+                        <li>
+                            <a href="http://example.com">Foo</a>
+                        </li>
+                        <li>
+                            Bar
+                        </li>
+                        <li>
+                            <a href="http://example.com">Baz</a>
+                        </li>
+                    </ul>
+                    (<a href="http://example.com">extras</a>)
+                </div>
+
+            </section>
+
+            <h2 id="blog" class="section-head">Blog</h2>
+
+            <section>
+
+                <div class="row">
+                    <div class="nine columns">
+                        <article>
+
+                            <header>
+                                <h1><a href="#">A Blog Post</a></h1>
+
+                                <p class="tags">Tags:
+                                    <a href="#" rel="tag">massa</a>
+                                    <a href="#" rel="tag">efficitur</a>
+                                    <a href="#" rel="tag">semper</a>
+                                </p>
+
+                                <aside>
+                                    <p><time datetime="2014-01-01T00:00:00Z">
+                                        Posted on 2014-01-01
+                                    </time>
+                                    by preaction</p>
+                                </aside>
+
+                                <p>Originally posted as:
+                                    <a href="#">
+                                        <em>Another Blog Post</em> on medium.com.
+                                    </a>
+                                </p>
+
+                            </header>
+
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                            Vestibulum vestibulum nunc at velit sagittis, id pulvinar
+                            augue volutpat. In lobortis semper scelerisque. Praesent
+                            pharetra augue vitae hendrerit aliquet. Aliquam vel ex
+                            felis. Nam gravida accumsan odio eu semper. Sed id leo
+                            tellus. Suspendisse pretium ligula et cursus hendrerit. Ut
+                            commodo metus a efficitur tempus. Fusce vel enim eget velit
+                            fringilla congue.</p>
+
+                            <p>Nullam massa neque, viverra id efficitur in, bibendum
+                            eget odio. Suspendisse potenti. Nunc suscipit, erat eu
+                            pulvinar scelerisque, orci leo tempor ante, eget rutrum
+                            massa purus vitae velit. Curabitur nec ex vitae ipsum
+                            blandit aliquet ut eu sem. Cras vel orci lorem. In dictum
+                            iaculis massa, tempor faucibus mi tempus sit amet. Donec
+                            porttitor diam et nulla facilisis mattis.</p>
+
+                            <p><a href="#">Continue reading A Blog Post...</a></p>
+
+                        </article>
+
+                        <ul class="pager">
+                            <li class="prev">
+                                <a class="button button-primary" rel="next" href="#">&larr; Older</a>
+                            </li>
+                            <li class="next">
+                                <a class="button disabled" rel="next">Newer &rarr;</a>
+                            </li>
+                        </ul>
+
+                    </div>
+
+                    <div class="three columns sidebar">
+                        <h3>Tags</h3>
+                        <ul class="list-inline">
+                            <li><a href="#">bibendum</a></li>
+                            <li><a href="#">orci</a></li>
+                            <li><a href="#">lorem</a></li>
+                            <li><a href="#">vitae</a></li>
+                            <li><a href="#">efficitur</a></li>
+                            <li><a href="#">massa</a></li>
+                            <li><a href="#">semper</a></li>
+                        </ul>
+
+                        <h3>Feeds</h3>
+                        <ul class="list-inline">
+                            <li>
+                                <a href="#" rel="alternate" type="">
+                                    Atom
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#" rel="alternate" type="">
+                                    RSS
+                                </a>
+                            </li>
+                        </ul>
+
+                    </div>
+                </div>
+
+            </section>
+
+        </main>
+
+        <footer>
+            <div class="container tagline">
+                <a href="http://preaction.me/statocles">Made with Statocles</a><br/>
+                <a href="http://www.perl.org">Powered by Perl</a>
+            </div>
+        </footer>
+
+    </body>
+</html>