From 88b8517fa537ec80437bd2442c544ade7e1ea994 Mon Sep 17 00:00:00 2001 From: Ryan Voots Date: Mon, 25 Sep 2017 20:55:36 -0700 Subject: [PATCH] Initial start of blog --- .gitignore | 2 + blog/2017/09/25/first-post/index.markdown | 11 + page/index.markdown | 11 + site.yml | 146 ++++++ theme/blog/index.atom.ep | 57 +++ theme/blog/index.html.ep | 120 +++++ theme/blog/index.rss.ep | 54 +++ theme/blog/post.html.ep | 95 ++++ theme/css/normalize.css | 427 +++++++++++++++++ theme/css/skeleton.css | 418 ++++++++++++++++ theme/css/statocles-default.css | 292 ++++++++++++ theme/layout/default.html.ep | 89 ++++ theme/layout/full-width.html.ep | 82 ++++ theme/perldoc/pod.html.ep | 16 + theme/perldoc/source.html.ep | 4 + theme/plugin/highlight/default.css | 76 +++ theme/plugin/highlight/solarized-dark.css | 83 ++++ theme/plugin/highlight/solarized-light.css | 83 ++++ theme/site/footer.html.ep | 0 theme/site/head_after.html.ep | 0 theme/site/header_after.html.ep | 0 theme/site/navbar_extra.html.ep | 0 theme/site/robots.txt.ep | 4 + theme/site/sidebar_before.html.ep | 0 theme/site/sitemap.xml.ep | 11 + theme/site/style.html | 525 +++++++++++++++++++++ 26 files changed, 2606 insertions(+) create mode 100644 .gitignore create mode 100644 blog/2017/09/25/first-post/index.markdown create mode 100644 page/index.markdown create mode 100644 site.yml create mode 100644 theme/blog/index.atom.ep create mode 100644 theme/blog/index.html.ep create mode 100644 theme/blog/index.rss.ep create mode 100644 theme/blog/post.html.ep create mode 100644 theme/css/normalize.css create mode 100644 theme/css/skeleton.css create mode 100644 theme/css/statocles-default.css create mode 100644 theme/layout/default.html.ep create mode 100644 theme/layout/full-width.html.ep create mode 100644 theme/perldoc/pod.html.ep create mode 100644 theme/perldoc/source.html.ep create mode 100644 theme/plugin/highlight/default.css create mode 100644 theme/plugin/highlight/solarized-dark.css create mode 100644 theme/plugin/highlight/solarized-light.css create mode 100644 theme/site/footer.html.ep create mode 100644 theme/site/head_after.html.ep create mode 100644 theme/site/header_after.html.ep create mode 100644 theme/site/navbar_extra.html.ep create mode 100644 theme/site/robots.txt.ep create mode 100644 theme/site/sidebar_before.html.ep create mode 100644 theme/site/sitemap.xml.ep create mode 100644 theme/site/style.html diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..7b40570 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ + +.statocles diff --git a/blog/2017/09/25/first-post/index.markdown b/blog/2017/09/25/first-post/index.markdown new file mode 100644 index 0000000..b63cf6d --- /dev/null +++ b/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) diff --git a/page/index.markdown b/page/index.markdown new file mode 100644 index 0000000..65d6034 --- /dev/null +++ b/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) diff --git a/site.yml b/site.yml new file mode 100644 index 0000000..35172da --- /dev/null +++ b/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 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' diff --git a/theme/blog/index.atom.ep b/theme/blog/index.atom.ep new file mode 100644 index 0000000..5bfa8d2 --- /dev/null +++ b/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 %> + <%= $self->date->strftime('%Y-%m-%dT%H:%M:%SZ') %> + + + % if ( $page->author ) { + + <%= $page->author->name %> + + % } + Statocles + + % for my $p ( @$pages ) { + + <%= $site->url( $p->path ) %> + <%== $p->title %> + % if ( $p->author ) { + <%= $p->author %> + % } + + sections; + <%= $sections[0] %> + % if ( $p->links( 'crosspost' ) ) { + + % } + % elsif ( $p->sections > 1 ) { +

Continue reading...

+ % } + + % if ( $p->tags ) { +

Tags: + % for my $tag ( $p->tags ) { + <%== $tag->text %> + % } +

+ % } + + ]]> + <%= $p->date->strftime('%Y-%m-%dT%H:%M:%SZ') %> + % for my $t ( $p->tags ) { + + % } + + % } + diff --git a/theme/blog/index.html.ep b/theme/blog/index.html.ep new file mode 100644 index 0000000..3363654 --- /dev/null +++ b/theme/blog/index.html.ep @@ -0,0 +1,120 @@ + +% if ( my $tag_text = $self->data->{ tag_text } ) { +<%= markdown $tag_text %> +% } + +% for my $page ( @$pages ) { +
+
+

<%== $page->title %>

+ + + +

Tags: + % for my $tag ( $page->tags ) { + + % } +

+ + % if ( $page->links( 'crosspost' ) ) { +

Originally posted as: + % for my $link ( $page->links( 'crosspost' ) ) { + + <%= $page->title %> on <%= $link->title %>. + + % } +

+ % } +
+ + % my @sections = $page->sections; + <%= $sections[0] %> + + % if ( @sections > 1 ) { +

Continue reading <%= $page->title %>...

+ % } + +
+% } + + + +% if ( $site->data->{disqus}{shortname} ) { + +% } + +% content tags => begin + +% end + +% if ( my @links = $self->links( 'feed' ) ) { + % content feeds => begin +

Feeds

+ + % end +% } + diff --git a/theme/blog/index.rss.ep b/theme/blog/index.rss.ep new file mode 100644 index 0000000..337d4f6 --- /dev/null +++ b/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' ); + + + + <%= $site->title %> + <%= $site->url( $self->links( 'alternate' )->href ) %> + + Blog feed of <%= $site->title %> + Statocles <%= $Statocles::VERSION %> + % for my $p ( @$pages ) { + + <%== $p->title %> + <%= $site->url( $p->path ) %> + <%= $site->url( $p->path ) %> + sections; + <%= $sections[0] %> + % if ( $p->links( 'crosspost' ) ) { + + % } + % elsif ( $p->sections > 1 ) { +

Continue reading...

+ % } + + % if ( $p->tags ) { +

Tags: + % for my $tag ( $p->tags ) { + <%== $tag->text %> + % } +

+ % } + + ]]> + + <%= $p->date->strftime('%a, %d %b %Y %H:%M:%S ') . sprintf q{%+05d}, $p->date->offset / 3600 %> + + + % } + + +% setlocale( LC_TIME, $current_locale ); diff --git a/theme/blog/post.html.ep b/theme/blog/post.html.ep new file mode 100644 index 0000000..7788aef --- /dev/null +++ b/theme/blog/post.html.ep @@ -0,0 +1,95 @@ +
+

<%== $self->title %>

+ + + +

Tags: + % for my $tag ( $self->tags ) { + + % } +

+ + % if ( $self->links( 'crosspost' ) ) { +

Originally posted as: + % for my $link ( $self->links( 'crosspost' ) ) { + + <%= $self->title %> on <%= $link->title %>. + + % } +

+ % } + +
+% my @sections = $self->sections; +% for my $i ( 0..$#sections ) { +
+ <%= $sections[$i] %> +
+% } + + + +% if ( $site->data->{disqus}{shortname} ) { +

Comments

+
+ + +% } + +% content tags => begin + +% end diff --git a/theme/css/normalize.css b/theme/css/normalize.css new file mode 100644 index 0000000..81c6f31 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/theme/css/skeleton.css b/theme/css/skeleton.css new file mode 100644 index 0000000..f28bf6c --- /dev/null +++ b/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) {} diff --git a/theme/css/statocles-default.css b/theme/css/statocles-default.css new file mode 100644 index 0000000..a29ffa9 --- /dev/null +++ b/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

inside

  • 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 
     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;
+    }
+}
diff --git a/theme/layout/default.html.ep b/theme/layout/default.html.ep
new file mode 100644
index 0000000..03d922a
--- /dev/null
+++ b/theme/layout/default.html.ep
@@ -0,0 +1,89 @@
+
+
+    
+        
+        
+        
+        
+        
+        
+        <%== $self->title ? $self->title . ' - ' : '' %><%== $site->title %>
+        % if ( my $author = $self->author ) {
+        
+        % }
+        
+        % for my $link ( $self->links( 'feed' ) ) {
+        
+        % }
+        % if ( my $img = $site->images->{ 'icon' } ) {
+        
+        % }
+        %= include 'site/head_after.html.ep'
+        % for my $link ( $site->links( 'stylesheet' ) ) {
+        
+        % }
+        % for my $link ( $self->links( 'stylesheet' ) ) {
+        
+        % }
+        % for my $link ( $site->links( 'script' ) ) {
+        
+        % }
+        % for my $link ( $self->links( 'script' ) ) {
+        
+        % }
+    
+    
+        
    
+            
+            %= include 'site/header_after.html.ep'
+        
    
+        
    
+            
    
+                
    
+                    
    
+                        <%= content %>
+                    
    
+                
    
+
+                
    
+                    %= include 'site/sidebar_before.html.ep';
+                    %= content 'tags';
+                    %= content 'feeds';
+                
    
+            
    
+        
    
+        
+
+        % if ( $site->data->{google_analytics_id} ) {
+        
+        % }
+
+    
+
diff --git a/theme/layout/full-width.html.ep b/theme/layout/full-width.html.ep
new file mode 100644
index 0000000..7fd1257
--- /dev/null
+++ b/theme/layout/full-width.html.ep
@@ -0,0 +1,82 @@
+
+
+    
+        
+        
+        
+        
+        
+        <%== $self->title ? $self->title . ' - ' : '' %><%== $site->title %>
+        % if ( my $author = $self->author ) {
+        
+        % }
+        
+        % for my $link ( $self->links( 'feed' ) ) {
+        
+        % }
+        % if ( my $img = $site->images->{ 'icon' } ) {
+        
+        % }
+        %= include 'site/head_after.html.ep'
+        % for my $link ( $site->links( 'stylesheet' ) ) {
+        
+        % }
+        % for my $link ( $self->links( 'stylesheet' ) ) {
+        
+        % }
+        % for my $link ( $site->links( 'script' ) ) {
+        
+        % }
+        % for my $link ( $self->links( 'script' ) ) {
+        
+        % }
+    
+    
+        
    
+            
+            %= include 'site/header_after.html.ep'
+        
    
+        
    
+            
    
+                
    
+                    
    
+                        <%= content %>
+                    
    
+                
    
+            
    
+        
    
+        
+
+        % if ( $site->data->{google_analytics_id} ) {
+        
+        % }
+
+    
+
diff --git a/theme/perldoc/pod.html.ep b/theme/perldoc/pod.html.ep
new file mode 100644
index 0000000..e3a9959
--- /dev/null
+++ b/theme/perldoc/pod.html.ep
@@ -0,0 +1,16 @@
+
    
+
      
+% for my $trail ( @{ $self->data->{ crumbtrail } } ) {
+    
    • 
+        % if ( $trail->{href} ) {
+        <%= $trail->{text} %>
+        % }
+        % else {
+        <%= $trail->{text} %>
+        % }
+    
      • 
+% }
+
    
+(source)
+
    
+<%= $content %>
diff --git a/theme/perldoc/source.html.ep b/theme/perldoc/source.html.ep
new file mode 100644
index 0000000..18b7858
--- /dev/null
+++ b/theme/perldoc/source.html.ep
@@ -0,0 +1,4 @@
+
+    Back to documentation
+
+
    <%== $content %>
    
diff --git a/theme/plugin/highlight/default.css b/theme/plugin/highlight/default.css
new file mode 100644
index 0000000..d770925
--- /dev/null
+++ b/theme/plugin/highlight/default.css
@@ -0,0 +1,76 @@
+/*
+
+Original highlight.js style (c) Ivan Sagalaev 
+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;
+}
diff --git a/theme/plugin/highlight/solarized-dark.css b/theme/plugin/highlight/solarized-dark.css
new file mode 100644
index 0000000..14495ab
--- /dev/null
+++ b/theme/plugin/highlight/solarized-dark.css
@@ -0,0 +1,83 @@
+/*
+
+Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull 
+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;
+}
diff --git a/theme/plugin/highlight/solarized-light.css b/theme/plugin/highlight/solarized-light.css
new file mode 100644
index 0000000..f0a7b6a
--- /dev/null
+++ b/theme/plugin/highlight/solarized-light.css
@@ -0,0 +1,83 @@
+/*
+
+Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull 
+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;
+}
diff --git a/theme/site/footer.html.ep b/theme/site/footer.html.ep
new file mode 100644
index 0000000..e69de29
diff --git a/theme/site/head_after.html.ep b/theme/site/head_after.html.ep
new file mode 100644
index 0000000..e69de29
diff --git a/theme/site/header_after.html.ep b/theme/site/header_after.html.ep
new file mode 100644
index 0000000..e69de29
diff --git a/theme/site/navbar_extra.html.ep b/theme/site/navbar_extra.html.ep
new file mode 100644
index 0000000..e69de29
diff --git a/theme/site/robots.txt.ep b/theme/site/robots.txt.ep
new file mode 100644
index 0000000..93fe60f
--- /dev/null
+++ b/theme/site/robots.txt.ep
@@ -0,0 +1,4 @@
+Sitemap: <%= $site->url( 'sitemap.xml' ) %>
+User-Agent: *
+Disallow:
+
diff --git a/theme/site/sidebar_before.html.ep b/theme/site/sidebar_before.html.ep
new file mode 100644
index 0000000..e69de29
diff --git a/theme/site/sitemap.xml.ep b/theme/site/sitemap.xml.ep
new file mode 100644
index 0000000..f006268
--- /dev/null
+++ b/theme/site/sitemap.xml.ep
@@ -0,0 +1,11 @@
+
+
+% for my $page ( @$pages ) {
+    
+        <%= $site->url( $page->path ) %>
+        <%= $page->search_change_frequency %>
+        <%= $page->search_priority %>
+        <%= $page->date->strftime( '%Y-%m-%d' ) %>
+    
+% }
+
diff --git a/theme/site/style.html b/theme/site/style.html
new file mode 100644
index 0000000..427c531
--- /dev/null
+++ b/theme/site/style.html
@@ -0,0 +1,525 @@
+
+
+    
+        
+        
+        
+        
+        Style Demo
+    
+    
+
+        
    
+            
+        
    
+
+        
    
+
+            
    Style Demo
    
+
+            
    Text
    
+
+            
    These are plain styles for plain HTML. No formatting classes
+            involved in this section!
    
+
+            
    
+                
    
+                    
    
+                        
    Headings
    
+
+                        
    Heading 1
    
+                        
    # Heading 1
+<h1>Heading 1</h1>
    
+
+                        
    Heading 2
    
+                        
    ## Heading 2
+<h2>Heading 2</h2>
    
+
+                        
    Heading 3
    
+                        
    ### Heading 3
+<h3>Heading 3</h3>
    
+
+                        
    Heading 4
    
+                        
    #### Heading 4
+<h4>Heading 4</h4>
    
+
+                        
    Heading 5
    
+                        
    ##### Heading 5
+<h5>Heading 5</h5>
    
+
+                    
    
+
+                    
    
+                        
    Formatting
    
+
+                        
    Links
    
+                        
    [Link text](http://example.com)
+<a href="http://example.com">Link text</a>
    
+
+                        
    Emphasis
    
+                        
    _Emphasis_
+<em>Emphasis</em>
    
+
+                        
    Strong Emphasis
    
+                        
    *Strong Emphasis*
+<strong>Strong Emphasis</strong>
    
+
+                        
    Inline code
    
+                        
    `Inline code`
+<code>Inline code</code>
    
+
+                        
    Keyboard input
    
+                        
    <kbd>...</kbd>
    
+
+                        
    Sample output
    
+                        
    <samp>...</samp>
    
+
+                    
    
+
+                
    
+
+                
    Text Blocks
    
+
+                
    Paragraphs
    
+
+                
    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.
    
+
+                
    Lorem ipsum dolor sit amet...
+
+<p>Lorem ipsum dolor sit amet...</p>
    
+
+                
    Code
    
+
+                
    use strict;
+use warnings;
+use feature qw( say );
+
+package Hash::Object;
+
+sub new {
+    my ( $class, %self ) = @_;
+    return bless { %self }, $class;
+}
+
    
+
+
    use strict; use warnings; use feature qw( say ); package Hash::Object; sub new { my ( $class, %self ) = @_; return bless { %self }, $class; }
    
+
+                
        # 4-space indent
+    use strict;
+    use warnings;
+
+<pre><code>use strict;
+use warnings;</code></pre>
    
+
+                
    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. Some Author
    
+
+                
    > Lorem ipsum dolor sit amet...
+
+<blockquote>
+Lorem ipsum dolor sit amet...
+<cite>Citation</cite>
+</blockquote>
    
+
+                
    Lists
    
+
+                
    
+                    
    
+                        
    Ordered
    
+
+                        
      
+                            
    1. Lorem ipsum dolor sit amet
      2. 
+                            
    2. Vivamus quis hendrerit quam
      3. 
+                            
    3. Aenean sed velit lobortis, interdum
      4. 
+                            
    4. Vivamus nunc purus, malesuada at lacinia
      5. 
+                            
    5. Aenean nec arcu quis
      6. 
+                        
    
+
+                        
    1. Lorem ipsum dolor sit amet
+2. Vivamus quis hendrerit quam
+3. Aenean sed velit lobortis, interdum
+
+<ol>
+    <li>Lorem ipsum dolor sit amet</li>
+    <li>Vivamus quis hendrerit quam</li>
+    <li>Aenean sed velit lobortis, interdum</li>
+</ol>
    
+
+                    
    
+
+                    
    
+                        
    Unordered
    
+
+                        
      
+                            
    • Maecenas consequat, quam id rhoncus
      • 
+                            
    • Massa finibus justo, a interdum
      • 
+                            
    • Nullam consequat lacus mattis
      • 
+                            
    • Proin viverra tincidunt mauris ac interdum
      • 
+                            
    • Interdum ante in, ullamcorper tortor
      • 
+                        
    
+
+                        
    * Lorem ipsum dolor sit amet
+* Vivamus quis hendrerit quam
+* Aenean sed velit lobortis, interdum
+
+<ul>
+    <li>Lorem ipsum dolor sit amet</li>
+    <li>Vivamus quis hendrerit quam</li>
+    <li>Aenean sed velit lobortis, interdum</li>
+</ul>
    
+
+                    
    
+                
    
+            
    
+
+            
    Classes
    
+
+            
    
+                
    Lists
    
+
+                
    Inline lists
    
+
+                
    
+                    
    
+                        
      
+                            
    • Lorem
      • 
+                            
    • Ipsum
      • 
+                            
    • Dolor
      • 
+                        
    
+
+                        
    <ul class="list-inline">
+    <li>Lorem</li>
+    <li>Ipsum</li>
+    <li>Dolor</li>
+</ul>
    
+                    
    
+                    
    
+                        
      
+                            
    1. Lorem
      2. 
+                            
    2. Ipsum
      3. 
+                            
    3. Dolor
      4. 
+                        
    
+
+                        
    <ol class="list-inline">
+    <li>Lorem</li>
+    <li>Ipsum</li>
+    <li>Dolor</li>
+</ol>
    
+                    
    
+                
    
+
+            
    
+
+            
    
+                
    Images
    
+
+                
    
+
+                    
    
+                        
     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.
    
+                        
    
+                        
    <img src="#" 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.
    
+                        
    
+                        
    <img src="#" class="u-pull-right">
    
+                    
    
+
+                
    
+
+            
    
+
+            
    Widgets
    
+
+            
    
+                
    Pager
    
+
+                
    
+                    
    
+                        
    Enabled
    
+
+                        
+
+                        
    
+
+                        
    <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>
    
+
+                    
    
+
+                    
    
+                        
    Disabled
    
+
+                        
+
+                        
    
+
+                        
    <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>
    
+
+                    
    
+
+                
    
+
+                
    Sidebar
    
+
+                
    Recommended width is class="three
+                columns".
    
+
+                
    <div class="three columns sidebar">...</div>
    
+
+                
    
+                    
    
+                        
    Heading 1
    
+                        
    Lorem ipsum dolor sit amet, consectetur
+                        adipiscing elit. Vivamus quis hendrerit quam, ac
+                        tristique nisl. Aenean sed velit lobortis, interdum
+                        ante in, ullamcorper tortor.
    
+                        
      
+                            
    • Maecenas consequat, quam id rhoncus
      • 
+                            
    • Massa finibus justo, a interdum
      • 
+                            
    • Proin viverra tincidunt mauris ac interdum
      • 
+                            
    • Interdum ante in, ullamcorper tortor
      • 
+                        
    
+                    
    
+
+                    
    
+                        
    Heading 2
    
+                        
    Vivamus nunc purus, malesuada at lacinia a,
+                        pellentesque nec enim. Vestibulum et est euismod,
+                        ultrices lectus non, aliquam magna. Proin viverra
+                        tincidunt mauris ac interdum. Aenean nec arcu quis
+                        turpis accumsan dignissim et ut risus.
    
+                    
    
+
+                    
    
+                        
    Heading 3
    
+                        
+                        
      
+                            
    1. Lorem ipsum dolor sit amet
      2. 
+                            
    2. Vivamus quis hendrerit quam
      3. 
+                            
    3. Aenean sed velit lobortis, interdum
      4. 
+                            
    4. Vivamus nunc purus, malesuada at lacinia
      5. 
+                            
    5. Aenean nec arcu quis
      6. 
+                        
    
+                    
    
+
+                    
    
+                        
    Heading 4
    
+                        
    Maecenas consequat, quam id rhoncus convallis,
+                        erat massa finibus justo, a interdum justo est eget
+                        tellus. Ut mattis dolor dolor. Maecenas vitae
+                        congue diam. Nullam consequat lacus mattis,
+                        faucibus arcu ut, auctor ex.
    
+
+                        
    Heading 5
    
+
+                    
    
+                
    
+
+                
    Crumbtrail
    
+                
    
+                    
      
+                        
    • 
+                            Foo
+                        
      • 
+                        
    • 
+                            Bar
+                        
      • 
+                        
    • 
+                            Baz
+                        
      • 
+                    
    
+                    (extras)
+                
    
+
+            
    
+
+            
    Blog
    
+
+            
    
+
+                
    
+                    
    
+                        
    
+
+                            
    
+                                
    A Blog Post
    
+
+                                
    Tags:
+                                    
+                                    
+                                    
+                                
    
+
+                                
+
+                                
    Originally posted as:
+                                    
+                                        Another Blog Post on medium.com.
+                                    
+                                
    
+
+                            
    
+
+                            
    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.
    
+
+                            
    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.
    
+
+                            
    Continue reading A Blog Post...
    
+
+                        
    
+
+                        
+
+                    
    
+
+                    
    
+                        
    Tags
    
+                        
+
+                        
    Feeds
    
+                        
+
+                    
    
+                
    
+
+            
    
+
+        
    
+
+        
+
+    
+