brume 1.1.1 → 1.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 4d5d63e02a62369a001d793bb85d06ad0f55ae45
-  data.tar.gz: e7e3a3fb3e95da9f86e7fd9dbb7ee09486039e94
+SHA256:
+  metadata.gz: bf7ed83a1333063e2a717c1ea0a9992dc985d0c5cd6f880f13364389799c3b6a
+  data.tar.gz: 3940a1c4789f61910e015d2de0afa66aff243e19e6efde711379d1caec388986
 SHA512:
-  metadata.gz: 77c8679087748f17901a2cdcd870d5d72936385e801eccef1e2fdfe0ad6da530cfcd8089c1f6273676eb11f5bc4c8d148edd08d1268306df491e3c2058d951cb
-  data.tar.gz: 4b9d1ffe86cb3f024f7e0f18bc830810b65c30d74ec9a6065554ba7a32f190826293e04b5d1670dc198af17da17c5019f83625a2845e383f92f3453d28181262
+  metadata.gz: ec3d92430af1bf8aa4e2dd07d3f7fde1dbf43388e67dbc7cb73359d7e402b5fc4b3db0614e299768cf5808ba8946fb328652c31e8638e432ebd9f956f44a50c2
+  data.tar.gz: ef2446fddd03b002baef4b932d868cf9639f65672cdcf089227f09065c1b0b3a77f9fb6e00b5acd4c16a6561d071d7ac664197ebfb33e83c1b38dae917463efc

data/LICENSE.md

@@ -1,20 +1,20 @@
-The MIT License (MIT)
-
-Copyright (c) 2013 Aigars
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
-the Software, and to permit persons to whom the Software is furnished to do so,
-subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
-IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+The MIT License (MIT)
+
+Copyright (c) 2013 Aigars
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -1,40 +1,40 @@
-# brume
-
-I am not a designer so I cannot impress you with breathtaking Jekyll themes, but brume is something that just came to my mind and I had to build it. It is a clean and simple theme, which has an index page that lists all your blog posts divided by the year, a single post page and a layout for any additional pages you might need.
-
-This is how the "Home" page looks like.
-
-![Home](https://raw.githubusercontent.com/aigarsdz/brume/master/screenshots/home.png)
-
-And this is a single post.
-
-![Post](https://raw.githubusercontent.com/aigarsdz/brume/master/screenshots/post_1.png)
-
-![Post. More content examples.](https://raw.githubusercontent.com/aigarsdz/brume/master/screenshots/post_2.png)
-
-## Usage
-
-Brume can be installed just like any other Jekyll theme as described [here](https://jekyllrb.com/docs/themes/#installing-a-theme),
-but there are a couple of additional steps you have to take.
-
-1. All the links are defined in a file *_data/links.yml*, therefore you'll have to create a *_data*
-directory and put this file there in order for navigation to be displayed.
-2. Brume uses `home` layout for the home page (like the default Jekyll theme). All you need to do
-is create an *index.html* or *index.md* file with `layout: home`. If you want the home page to be
-listed in the navigation you have to add `title` to it's front matter that matches
-the title you used for the home page link in the *links.yml* file. Titles are used to indicate
-the current page.
-
-## Theme customization
-
-This theme has 4 predefined colors that can be used for links:
-
-- azul
-- ruby
-- amber
-- avocado
-
-By default it uses *avocado*, but if you want to select another one just change the `color_scheme` setting in
-*_config.yml* file.
-
-Express your thoughts about brume on Twitter [@aigarsdz](http://twitter.com/aigarsdz), and help me make it better!
+# brume
+
+I am not a designer so I cannot impress you with breathtaking Jekyll themes, but brume is something that just came to my mind and I had to build it. It is a clean and simple theme, which has an index page that lists all your blog posts divided by the year, a single post page and a layout for any additional pages you might need.
+
+This is how the "Home" page looks like.
+
+![Home](https://raw.githubusercontent.com/aigarsdz/brume/master/screenshots/home.png)
+
+And this is a single post.
+
+![Post](https://raw.githubusercontent.com/aigarsdz/brume/master/screenshots/post_1.png)
+
+![Post. More content examples.](https://raw.githubusercontent.com/aigarsdz/brume/master/screenshots/post_2.png)
+
+## Usage
+
+Brume can be installed just like any other Jekyll theme as described [here](https://jekyllrb.com/docs/themes/#installing-a-theme),
+but there are a couple of additional steps you have to take.
+
+1. All the links are defined in a file *_data/links.yml*, therefore you'll have to create a *_data*
+directory and put this file there in order for navigation to be displayed.
+2. Brume uses `home` layout for the home page (like the default Jekyll theme). All you need to do
+is create an *index.html* or *index.md* file with `layout: home`. If you want the home page to be
+listed in the navigation you have to add `title` to it's front matter that matches
+the title you used for the home page link in the *links.yml* file. Titles are used to indicate
+the current page.
+
+## Theme customization
+
+This theme has 4 predefined colors that can be used for links:
+
+- azul
+- ruby
+- amber
+- avocado
+
+By default it uses *avocado*, but if you want to select another one just change the `color_scheme` setting in
+*_config.yml* file.
+
+Express your thoughts about brume on Twitter [@aigarsdz](http://twitter.com/aigarsdz), and help me make it better!

data/_includes/head.html

@@ -1,32 +1,32 @@
-<!-- meta information -->
-<meta charset="utf-8">
-<meta name="description" {% if page.title == "Home" %}
-      content="{{ site.description }}" {% else %}
-      content="{{ page.content | strip_html | strip_newlines | truncate: 120 }}" {% endif %}>
-<meta name="author" content="{{ site.author }}">
-
-<!-- Enable responsiveness on mobile devices-->
-<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
-
-<!-- title -->
-<title>{% if page.title %}{{ page.title }} &middot; {% endif %}{{ site.title }}</title>
-
-<!-- icons -->
-<link rel="shortcut icon" href="{{ '/assets/images/favicon.ico' | relative_url }}">
-
-<!-- stylesheets -->
-<link rel="stylesheet" href="{{ '/assets/css/responsive.gs.12col.css' | relative_url }}">
-<link rel="stylesheet" href="{{ '/assets/css/animate.min.css' | relative_url }}">
-<link rel="stylesheet" href="{{ '/assets/css/syntax.css' | relative_url }}">
-<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
-
-<!-- Google fonts -->
-<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic&subset=latin-ext">
-
-{% if site.paginate %}
-<!-- font Awesome -->
-<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
-{% endif %}
-
-<!-- feed links -->
-<link rel="alternate" href="{{ 'feed.xml' | absolute_url }}" type="application/rss+xml" title="{{ site.title }}">
+<!-- meta information -->
+<meta charset="utf-8">
+<meta name="description" {% if page.title == "Home" %}
+      content="{{ site.description }}" {% else %}
+      content="{{ page.content | strip_html | strip_newlines | truncate: 120 }}" {% endif %}>
+<meta name="author" content="{{ site.author }}">
+
+<!-- Enable responsiveness on mobile devices-->
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
+
+<!-- title -->
+<title>{% if page.title %}{{ page.title }} &middot; {% endif %}{{ site.title }}</title>
+
+<!-- icons -->
+<link rel="shortcut icon" href="{{ '/assets/images/favicon.ico' | relative_url }}">
+
+<!-- stylesheets -->
+<link rel="stylesheet" href="{{ '/assets/css/responsive.gs.12col.css' | relative_url }}">
+<link rel="stylesheet" href="{{ '/assets/css/animate.min.css' | relative_url }}">
+<link rel="stylesheet" href="{{ '/assets/css/syntax.css' | relative_url }}">
+<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
+
+<!-- Google fonts -->
+<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic&subset=latin-ext">
+
+{% if site.paginate %}
+<!-- font Awesome -->
+<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
+{% endif %}
+
+<!-- feed links -->
+<link rel="alternate" href="{{ 'feed.xml' | absolute_url }}" type="application/rss+xml" title="{{ site.title }}">

data/_includes/navigation.html

@@ -1,9 +1,9 @@
-<nav id="main-navigation">
-  {% for link in site.data.links %}
-  {% if page.title == link.title %}
-  <a href="{{ link.url }}" title="{{ link.title }}" class="current">{{ link.title }}</a>
-  {% else %}
-  <a href="{{ link.url }}" title="{{ link.title }}">{{ link.title }}</a>
-  {% endif %}
-  {% endfor %}
-</nav>
+<nav id="main-navigation">
+  {% for link in site.data.links %}
+  {% if page.title == link.title %}
+  <a href="{{ link.url }}" title="{{ link.title }}" class="current">{{ link.title }}</a>
+  {% else %}
+  <a href="{{ link.url }}" title="{{ link.title }}">{{ link.title }}</a>
+  {% endif %}
+  {% endfor %}
+</nav>

data/_layouts/default.html

@@ -1,39 +1,39 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    {% include head.html %}
-  </head>
-  <body>
-    <main class="container {% if site.color_scheme %}{{ site.color_scheme }}{% else %}avocado{% endif %}">
-      {% if page.title == "Home" %}
-      <header class="fadeInLeft animated">
-      {% else %}
-      <header>
-      {% endif %}
-        <div>
-          <a href="{{ site.url }}" id="logo" title="{{ site.title }}"
-             style="background-image: url({{ '/assets/images/logo.png' | relative_url }});"></a>
-        </div>
-
-        {% include navigation.html %}
-      </header>
-
-      {{ content }}
-
-      <footer>
-        <p>
-          This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/deed.en_US">Creative Commons Attribution-NonCommercial 4.0 International License</a>.
-        </p>
-      </footer>
-    </main>
-
-    <!-- scripts -->
-    <script src="{{ '/assets/js/fluidvids.min.js' | relative_url }}"></script>
-    <script>
-      fluidvids.init({
-        selector: ['iframe', 'object'],
-        players: ['www.youtube.com', 'player.vimeo.com']
-      });
-    </script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html>
+  <head>
+    {% include head.html %}
+  </head>
+  <body>
+    <main class="container {% if site.color_scheme %}{{ site.color_scheme }}{% else %}avocado{% endif %}">
+      {% if page.title == "Home" %}
+      <header class="fadeInLeft animated">
+      {% else %}
+      <header>
+      {% endif %}
+        <div>
+          <a href="{{ site.url }}" id="logo" title="{{ site.title }}"
+             style="background-image: url({{ '/assets/images/logo.png' | relative_url }});"></a>
+        </div>
+
+        {% include navigation.html %}
+      </header>
+
+      {{ content }}
+
+      <footer>
+        <p>
+          This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/deed.en_US">Creative Commons Attribution-NonCommercial 4.0 International License</a>.
+        </p>
+      </footer>
+    </main>
+
+    <!-- scripts -->
+    <script src="{{ '/assets/js/fluidvids.min.js' | relative_url }}"></script>
+    <script>
+      fluidvids.init({
+        selector: ['iframe', 'object'],
+        players: ['www.youtube.com', 'player.vimeo.com']
+      });
+    </script>
+  </body>
+</html>

data/_layouts/home.html

@@ -1,51 +1,51 @@
----
-layout: default
-title: Home
----
-
-<section class="archive">
-{% for post in site.posts %}
-{% unless post.next %}
-
-  {% unless forloop.first %}
-    </div>
-  </div>
-  {% endunless %}
-
-  <div class="archive-item fadeInDown animated">
-    <h2>{{ post.date | date: '%Y' }}</h2>
-    <div>
-
-{% else %}
-
-{% capture year %}{{ post.date | date: '%Y' }}{% endcapture %}
-{% capture next_year %}{{ post.next.date | date: '%Y' }}{% endcapture %}
-
-{% if year != next_year %}
-
-  {% unless forloop.first %}
-    </div>
-  </div>
-  {% endunless %}
-
-  <div class="archive-item fadeInDown animated">
-    <h2>{{ post.date | date: '%Y' }}</h2>
-    <div>
-
-{% endif %}
-{% endunless %}
-
-  <article>
-    <a href="{{ post.url | absolute_url }}" title="{{ post.title }}">{{ post.title }}</a>
-    <div class="post-date">
-      <time datetime="{{ post.date | date: '%Y-%m-%d' }}">{{ post.date | date: "%-d %B" }}</time>
-    </div>
-  </article>
-
-  {% if forloop.last %}
-    </div>
-  </div>
-  {% endif %}
-
-{% endfor %}
-</section>
+---
+layout: default
+title: Home
+---
+
+<section class="archive">
+{% for post in site.posts %}
+{% unless post.next %}
+
+  {% unless forloop.first %}
+    </div>
+  </div>
+  {% endunless %}
+
+  <div class="archive-item fadeInDown animated">
+    <h2>{{ post.date | date: '%Y' }}</h2>
+    <div>
+
+{% else %}
+
+{% capture year %}{{ post.date | date: '%Y' }}{% endcapture %}
+{% capture next_year %}{{ post.next.date | date: '%Y' }}{% endcapture %}
+
+{% if year != next_year %}
+
+  {% unless forloop.first %}
+    </div>
+  </div>
+  {% endunless %}
+
+  <div class="archive-item fadeInDown animated">
+    <h2>{{ post.date | date: '%Y' }}</h2>
+    <div>
+
+{% endif %}
+{% endunless %}
+
+  <article>
+    <a href="{{ post.url | absolute_url }}" title="{{ post.title }}">{{ post.title }}</a>
+    <div class="post-date">
+      <time datetime="{{ post.date | date: '%Y-%m-%d' }}">{{ post.date | date: "%-d %B" }}</time>
+    </div>
+  </article>
+
+  {% if forloop.last %}
+    </div>
+  </div>
+  {% endif %}
+
+{% endfor %}
+</section>

data/_layouts/page.html

@@ -1,9 +1,9 @@
----
-layout: default
----
-
-<article class="single row gutters">
-  <h2>{{ page.title }}</h2>
-
-  {{ content }}
-</article>
+---
+layout: default
+---
+
+<article class="single row gutters">
+  <h2>{{ page.title }}</h2>
+
+  {{ content }}
+</article>

data/_layouts/post.html

@@ -1,10 +1,10 @@
----
-layout: default
----
-
-<article class="single row gutters">
-  <time class="published" datetime="{{ page.date | date: '%Y-%m-%d' }}">{{ page.date | date_to_long_string }}</time>
-  <h2>{{ page.title }}</h2>
-
-  {{ content }}
-</article>
+---
+layout: default
+---
+
+<article class="single row gutters">
+  <time class="published" datetime="{{ page.date | date: '%Y-%m-%d' }}">{{ page.date | date_to_long_string }}</time>
+  <h2>{{ page.title }}</h2>
+
+  {{ content }}
+</article>

data/assets/css/main.css

@@ -1,371 +1,383 @@
-/*
-================================================================================
-  Global styles
-================================================================================
-*/
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  background-color: #f5f5f5;
-  color: #333;
-  border-top: 5px solid #333;
-  font-family: 'Source Sans Pro', sans-serif;
-  font-weight: 400;
-  line-height: 1.5;
-
-  -webkit-font-smoothing: antialiased;
-}
-
-h1, h2, h3, h4, h5, h6, p, ul, ol, dl,
-blockquote,
-table,
-img,
-hr,
-.fluid-width-video-wrapper,
-.highlight {
-  margin-bottom: 20px;
-}
-
-blockquote {
-  padding: 0 30px;
-  border-left: 2px solid #C6C6C6;
-}
-
-
-ul, ol {
-  margin-left: 40px;
-}
-
-img {
-  max-width: 100%;
-  height: auto;
-  border: none;
-  outline: none;
-}
-
-a {
-  text-decoration: none;
-}
-
-hr {
-  border : 0;
-  height: 25px;
-  background : url(/assets/images/eagle.png) center center no-repeat;
-}
-
-code {
-  font-family: Consolas, "Liberation Mono", Courier, monospace;
-  font-size: .8rem;
-}
-
-p code {
-  padding: 0px 5px;
-  border: 1px solid #ddd;
-  background-color: #f8f8f8;
-  border-radius: 3px;
-  white-space: nowrap;
-}
-
-table {
-  border-collapse: collapse;
-  border: 1px solid #333;
-}
-
-thead {
-  background-color: #C6C6C6;
-}
-
-td,
-th {
-  border: 1px solid #333;
-  padding: 5px 10px;
-}
-
-.container {
-  max-width: 750px;
-  padding: 0 20px;
-}
-
-dl {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-}
-
-dt {
-  -ms-flex-preferred-size: 30%;
-      flex-basis: 30%;
-  font-weight: bold;
-}
-
-dd {
-  -ms-flex-preferred-size: 70%;
-      flex-basis: 70%;
-}
-
-/*
-================================================================================
-  Colour styles
-================================================================================
-*/
-.azul a {
-  color: #0070bb;
-}
-
-.azul a:hover {
-  color: #0F9EFB;
-}
-
-.ruby a {
-  color: #e0115f;
-}
-
-.ruby a:hover {
-  color: #930036;
-}
-
-.amber a {
-  color: #ff7e00;
-}
-
-.amber a:hover {
-  color: #C66200;
-}
-
-.avocado a {
-  color: #568203;
-}
-
-.avocado a:hover {
-  color: #8FBE36;
-}
-
-/*
-================================================================================
-  Header
-
-  Including logo and navigation.
-================================================================================
-*/
-header {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-header > div {
-  -ms-flex-preferred-size: 110px;
-      flex-basis: 110px;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-  -webkit-box-flex: 0;
-      -ms-flex-positive: 0;
-          flex-grow: 0;
-}
-
-#logo {
-  display: inline-block;
-  height: 110px;
-  width: 110px;
-  background-size: 90px 90px;
-  background-position: left center;
-  background-repeat: no-repeat;
-}
-
-header > nav#main-navigation {
-  margin-bottom: 40px;
-  height: 110px;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-header > nav#main-navigation a {
-  display: inline-block;
-  color: #333;
-  padding: 66px 20px 25px;
-  margin-right: 10px;
-  margin-top: -5px;
-  text-transform: uppercase;
-  border-radius: 0 0 5px 5px;
-  border-bottom: 1px solid #333;
-  -webkit-transition: all ease-in-out .3s;
-  transition: all ease-in-out .3s;
-}
-
-header > nav#main-navigation a:hover,
-header > nav#main-navigation a.current {
-  color: #f5f5f5;
-  border-bottom: none;
-}
-
-header > nav#main-navigation a:hover {
-  background-color: #333;
-  transform: translateY(5px);
-}
-
-header > nav#main-navigation a.current {
-  background-color: #333;
-}
-
-nav#main-navigation a.trigger {
-  display: none;
-}
-
-/*
-================================================================================
-  Footer
-================================================================================
-*/
-footer {
-  font-size: .8rem;
-  text-align: center;
-}
-
-/*
-================================================================================
-  Home page main content (post list).
-================================================================================
-*/
-.archive {
-  margin-bottom: 100px;
-}
-
-.archive-item {
-  border-top: 1px solid #333;
-  padding-top: 10px;
-  margin-bottom: 10px;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.archive-item h2 {
-  margin-bottom: 0;
-  -ms-flex-preferred-size: 110px;
-      flex-basis: 110px;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-}
-
-.archive-item > div {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-}
-
-.archive-item article {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  margin-bottom: 10px;
-}
-
-.archive-item article a {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-}
-
-.post-date {
-  text-align: right;
-  -ms-flex-preferred-size: 110px;
-      flex-basis: 110px;
-}
-
-/*
-================================================================================
-  Code highlighting
-================================================================================
-*/
-.highlight {
-  padding: 30px;
-  border-radius: 6px;
-  background-color: #272822;
-  color: #f8f8f2;
-  line-height: 1;
-}
-
-.highlight code {
-  font-size: .7rem;
-}
-
-/*
-================================================================================
-  Single page styles
-================================================================================
-*/
-.single {
-  margin-bottom: 100px;
-}
-
-.single {
-  font-size: 1.125rem;
-  line-height: 28px;
-}
-
-.single time {
-  color: #999;
-  font-size: .9rem;
-}
-
-.not-found {
-  margin-top: 150px;
-  text-align: center;
-  font-size: 2rem;
-}
-
-.not-found h1 {
-  font-size: 8rem;
-}
-
-/*
-================================================================================
-  Responsive styling
-================================================================================
-*/
-@media screen and (max-width: 580px) {
-  header {
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-  }
-
-  #logo {
-    background-position: center;
-  }
-
-  header > nav#main-navigation {
-    height: auto;
-    margin-bottom: 40px;
-    padding-bottom: 20px;
-    max-width: 100%;
-    overflow-x: auto;
-  }
-
-  header > nav#main-navigation a {
-    margin-top: 0;
-    padding: 8px 18px;
-    border-radius: 5px;
-    white-space: nowrap;
-    border-bottom: none;
-  }
-
-  .archive-item h2 {
-    -ms-flex-preferred-size: 80px;
-      flex-basis: 80px;
-  }
-}
+/*
+================================================================================
+  Global styles
+================================================================================
+*/
+* {
+  margin: 0;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #f5f5f5;
+  color: #333;
+  border-top: 5px solid #333;
+  font-family: 'Source Sans Pro', sans-serif;
+  font-weight: 400;
+  line-height: 1.5;
+
+  -webkit-font-smoothing: antialiased;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+ol,
+dl,
+blockquote,
+table,
+img,
+hr,
+.fluid-width-video-wrapper,
+.highlight {
+  margin-bottom: 20px;
+}
+
+blockquote {
+  padding: 0 30px;
+  border-left: 2px solid #c6c6c6;
+}
+
+ul,
+ol {
+  margin-left: 40px;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  border: none;
+  outline: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+hr {
+  border: 0;
+  height: 25px;
+  background: url(/assets/images/eagle.png) center center no-repeat;
+}
+
+code {
+  font-family: Consolas, 'Liberation Mono', Courier, monospace;
+  font-size: 0.8rem;
+}
+
+p code {
+  padding: 0px 5px;
+  border: 1px solid #ddd;
+  background-color: #f8f8f8;
+  border-radius: 3px;
+  white-space: nowrap;
+}
+
+table {
+  border-collapse: collapse;
+  border: 1px solid #333;
+}
+
+thead {
+  background-color: #c6c6c6;
+}
+
+td,
+th {
+  border: 1px solid #333;
+  padding: 5px 10px;
+}
+
+.container {
+  max-width: 750px;
+  padding: 0 20px;
+}
+
+dl {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+dt {
+  -ms-flex-preferred-size: 30%;
+  flex-basis: 30%;
+  font-weight: bold;
+}
+
+dd {
+  -ms-flex-preferred-size: 70%;
+  flex-basis: 70%;
+}
+
+/*
+================================================================================
+  Colour styles
+================================================================================
+*/
+.azul a {
+  color: #0070bb;
+}
+
+.azul a:hover {
+  color: #0f9efb;
+}
+
+.ruby a {
+  color: #e0115f;
+}
+
+.ruby a:hover {
+  color: #930036;
+}
+
+.amber a {
+  color: #ff7e00;
+}
+
+.amber a:hover {
+  color: #c66200;
+}
+
+.avocado a {
+  color: #568203;
+}
+
+.avocado a:hover {
+  color: #8fbe36;
+}
+
+/*
+================================================================================
+  Header
+
+  Including logo and navigation.
+================================================================================
+*/
+header {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+header > div {
+  -ms-flex-preferred-size: 110px;
+  flex-basis: 110px;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-flex: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+}
+
+#logo {
+  display: inline-block;
+  height: 110px;
+  width: 110px;
+  background-size: 90px 90px;
+  background-position: left center;
+  background-repeat: no-repeat;
+}
+
+header > nav#main-navigation {
+  margin-bottom: 40px;
+  height: 110px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+header > nav#main-navigation a {
+  display: inline-block;
+  color: #333;
+  padding: 66px 20px 25px;
+  margin-right: 10px;
+  margin-top: -5px;
+  text-transform: uppercase;
+  border-radius: 0 0 5px 5px;
+  border-bottom: 1px solid #333;
+  -webkit-transition: all ease-in-out 0.3s;
+  transition: all ease-in-out 0.3s;
+}
+
+header > nav#main-navigation a:hover,
+header > nav#main-navigation a.current {
+  color: #f5f5f5;
+  border-bottom: none;
+}
+
+header > nav#main-navigation a:hover {
+  background-color: #333;
+  -webkit-transform: translateY(5px);
+  transform: translateY(5px);
+}
+
+header > nav#main-navigation a.current {
+  background-color: #333;
+}
+
+nav#main-navigation a.trigger {
+  display: none;
+}
+
+/*
+================================================================================
+  Footer
+================================================================================
+*/
+footer {
+  font-size: 0.8rem;
+  text-align: center;
+}
+
+/*
+================================================================================
+  Home page main content (post list).
+================================================================================
+*/
+.archive {
+  margin-bottom: 100px;
+}
+
+.archive-item {
+  border-top: 1px solid #333;
+  padding-top: 10px;
+  margin-bottom: 10px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.archive-item h2 {
+  margin-bottom: 0;
+  -ms-flex-preferred-size: 110px;
+  flex-basis: 110px;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.archive-item > div {
+  -webkit-box-flex: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.archive-item article {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin-bottom: 10px;
+}
+
+.archive-item article a {
+  -webkit-box-flex: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.post-date {
+  text-align: right;
+  -ms-flex-preferred-size: 110px;
+  flex-basis: 110px;
+}
+
+/*
+================================================================================
+  Code highlighting
+================================================================================
+*/
+.highlight {
+  padding: 30px;
+  border-radius: 6px;
+  background-color: #272822;
+  color: #f8f8f2;
+  line-height: 1;
+}
+
+.highlight code {
+  font-size: 0.7rem;
+  white-space: pre-wrap;
+}
+
+/*
+================================================================================
+  Single page styles
+================================================================================
+*/
+.single {
+  margin-bottom: 100px;
+}
+
+.single {
+  font-size: 1.125rem;
+  line-height: 28px;
+}
+
+.single time {
+  color: #999;
+  font-size: 0.9rem;
+}
+
+.not-found {
+  margin-top: 150px;
+  text-align: center;
+  font-size: 2rem;
+}
+
+.not-found h1 {
+  font-size: 8rem;
+}
+
+/*
+================================================================================
+  Responsive styling
+================================================================================
+*/
+@media screen and (max-width: 580px) {
+  header {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+
+  #logo {
+    background-position: center;
+  }
+
+  header > nav#main-navigation {
+    height: auto;
+    margin-bottom: 40px;
+    padding-bottom: 20px;
+    max-width: 100%;
+    overflow-x: auto;
+  }
+
+  header > nav#main-navigation a {
+    margin-top: 0;
+    padding: 8px 18px;
+    border-radius: 5px;
+    white-space: nowrap;
+    border-bottom: none;
+  }
+
+  .archive-item h2 {
+    -ms-flex-preferred-size: 80px;
+    flex-basis: 80px;
+  }
+}