dropcaster 0.0.6 → 0.0.7

data/VISION.markdown

@@ -2,13 +2,13 @@
 
 [![Build Status](https://travis-ci.org/nerab/dropcaster.png?branch=master)](https://travis-ci.org/nerab/dropcaster)
 
-  _This project is developed with the [readme-driven development](http://tom.preston-werner.com/2010/08/23/readme-driven-development.html) method. This file contains the vision, whereas the [README](README.md) reflects the functionality that is actually implemented._
+  _This project is developed with the [readme-driven development](http://tom.preston-werner.com/2010/08/23/readme-driven-development.html) method. This file contains the vision, whereas the [README](README.markdown) reflects the functionality that is actually implemented._
 
-[Dropcaster](http://rubydoc.info/gems/dropcaster/file/README.md) is a podcast feed generator for the command line. It is most simple to use with Dropbox, but works equally well with any other hoster.
+[Dropcaster](http://nerab.github.io/dropcaster/) is a podcast feed generator for the command line. It is most simple to use with Dropbox, but works equally well with any other (static file) web hoster.
 
 Author: Nicolas E. Rabenau <nerab@gmx.at>
 
-# What is the problem Dropcaster is trying to solve?
+# What is the problem that Dropcaster is trying to solve?
 
 You have a number of podcast episodes that you would like to publish as a feed. Nothing else - no fancy website, no stats, nothing but the pure podcast.
 
@@ -28,7 +28,7 @@ Once installed, you can use the `dropcaster` command to generate a new podcast f
 
 Once Dropcaster is installed, the only two other things you will need are a channel definition and one or more mp3 files to publish.
 
-Let's start with the channel definition. It is a simple [YAML](http://yaml.org/) file that holds the general information about your podcast channel. According to the [RSS 2.0 spec](http://feedvalidator.org/docs/rss2.html#requiredChannelElements), the only mandatory information that your channel absolutely needs are a title, a description and a link to a web site where the channel belongs to.
+Let's start with the channel definition. It is a simple [YAML](http://yaml.org/) file that holds the general information about your podcast channel. According to the [RSS 2.0 spec](http://blogs.law.harvard.edu/tech/rss#requiredChannelElements), the only mandatory information that your channel absolutely needs are a title, a description and a link to a web site where the channel belongs to.
 
 The simplest channel file looks like this:
 
@@ -45,19 +45,19 @@ With all required pieces in place, we could generate the podcast feed. Just befo
     $ cd ~/Dropbox/Public
     $ dropcaster
 
-(The above lines assume that you are using Dropbox, and that there is at least one mp3 file in ~/Dropbox/Public).
+(The above lines assume that you are using Dropbox, and that there is at least one mp3 file in `~/Dropbox/Public`).
 
 Dropcaster will print the feed to standard-out, without writing it to disk. When you are happy with the results, call Dropcaster again, but redirect the output to a file, this time:
 
     $ dropcaster > index.rss
 
-If all went well, you will now have a valid podcast feed in your Dropbox, listing all mp3 files as podcast episodes. Please see the section [Publish Your Feed] for details on how to find the public URL of your feed.
+If all went well, you will now have a valid podcast feed in your Dropbox, listing all mp3 files as podcast episodes. Please see the section [Publish Your Feed](#publish-your-feed) for details on how to find the public URL of your feed.
 
 # Use Cases
 
 ## Publish a New Episode
 
-1. Drop the mp3 file into the Dropbox Public folder (e.g. ~/Dropbox/Public), and then run the following command in the directory where the mp3 files reside:
+1. Drop the mp3 file into the Dropbox Public folder (e.g. `~/Dropbox/Public`), and then run the following command in the directory where the mp3 files reside:
 
         $ dropcaster > index.rss
 
@@ -138,6 +138,48 @@ As discussed above, the output of this command can be written to a file, too:
 
 Dropcaster works exactly the same, whether it generates an RSS feed or a HTML page. Therefore, all options discussed before also apply when generating HTML.
 
+## Generate a HTML page for each episode
+
+If the `--episode-pages` switch is present, dropcaster will generate a separate page for each episode. The result will not appear on STDOUT, but will be written to files that are named like he episode files, but with a file extension of `.html`.
+
+For example, let's assume the following directory structure:
+
+    channel.yml
+    episodes/episode1/AAE001 Hello World.mp3
+    episodes/episode2/AAE002 Getting started.mp3
+    episodes/episode3/AAE003 Advanced Topics.mp3
+
+With this directory structure, Dropcaster would typically be called like this:
+
+    dropcaster episodes/episode* --channel channel.yml
+
+In order to generate episode pages, the command would need to be modified to look as follows:
+
+    dropcaster episodes/episode* --channel channel.yml --episode-pages
+
+If any of the files to be generated already exist, Dropcaster will not overwrite them. Adding the `--force` option forces dropcaster to overwrite existing files.
+
+The index.html page could be written with the same command by redirecting dropcaster's output to a file:
+
+    dropcaster episodes/episode* --channel channel.yml --episode-pages --channel-template hannel.html.erb > index.html
+
+As a result, each episode will get an HTML page next to the MP3 file. The default HTML channel template will write links pointing to each episode. After calling the example command above, the esulting directory structure would look like this:
+
+        channel.yml
+        index.html
+        episodes/episode1/AAE001 Hello World.mp3
+        episodes/episode1/AAE001 Hello World.html
+        episodes/episode2/AAE002 Getting started.mp3
+        episodes/episode2/AAE002 Getting started.html
+        episodes/episode3/AAE003 Advanced Topics.mp3
+        episodes/episode3/AAE003 Advanced Topics.html
+
+Please note that the example above only deals with HTML pages. The RSS feed would still have to be generated with a second call to dropcaster (see the earlier sections of this page).
+
+Dropcaster will use its default template for generating the episode pages. It is also possible to specify a custom episode template with the `--episode-template=FILE` switch, passing the name of a custom episode template file (similar to a custom channel template).
+
+The major difference between the channel and episode HTML templates is that the episodes write out lyrics. For podcasts, lyrics are used for an in-depth description of the episode. Any text is treated as [Markdown](http://daringfireball.net/projects/markdown/) and converted to HTML.
+
 ## Sidecar files
 
 You may override the meta data for any episode by providing a YAML file with the same name as the mp3 file, but with an extension of yml or yaml (ususally refered to as [sidecar file](http://en.wikipedia.org/wiki/Sidecar_file)). Any attributes specified in this file override the ID tags in the mp3 file.
@@ -172,18 +214,10 @@ For writing the output to a file, just redirect the ouput of the above command:
 
     dropcaster | xmllint --format - > index.rss
 
-# Contributing to Dropcaster
-
-Dropcaster is hosted at [Github](http://github.com/nerab/dropcaster):
+# Web site
 
-* Check out the latest master to make sure the feature hasn't been implemented or the bug hasn't been fixed yet
-* Check out the issue tracker to make sure someone already hasn't requested it and/or contributed it
-* Fork the project
-* Start a feature/bugfix branch
-* Commit and push until you are happy with your contribution
-* Make sure to add tests for it. This is important so I don't break it in a future version unintentionally.
-* Please try not to mess with the Rakefile, version, or history. If you want to have your own version, or is otherwise necessary, that is fine, but please isolate to its own commit so I can cherry-pick around it.
+Dropcaster uses Steve Klabnik's [approach](https://github.com/steveklabnik/automatically_update_github_pages_with_travis_example) for publishing the site with [Travis CI](http://travis-ci.org/).
 
 # Copyright
 
-Copyright (c) 2011-2014 Nicolas E. Rabenau. See [LICENSE.txt](https://raw.github.com/nerab/dropcaster/master/LICENSE.txt) for further details.
+Copyright (c) 2011-2015 Nicolas E. Rabenau. See [LICENSE.txt](https://raw.github.com/nerab/dropcaster/master/LICENSE.txt) for further details.

data/Vagrantfile

@@ -0,0 +1,8 @@
+# -*- mode: ruby -*-
+# vi: set ft=ruby :
+
+Vagrant.configure(2) do |config|
+  config.vm.provider 'docker' do |d|
+    d.build_dir = '.'
+  end
+end

data/bin/dropcaster

@@ -8,7 +8,7 @@ help = <<HELP
 Dropcaster is a podcast feed generator for the command line.
 
 Author: Nicolas E. Rabenau nerab@gmx.at
-Homepage: http://rubydoc.info/gems/dropcaster/file/README.md
+Homepage: http://nerab.github.io/dropcaster/
 
 Basic Usage:
 

data/dropcaster.gemspec

@@ -1,22 +1,24 @@
 # coding: utf-8
+# frozen_string_literal: true
+
 lib = File.expand_path('../lib', __FILE__)
 $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
 require 'dropcaster/version'
 
 Gem::Specification.new do |spec|
-  spec.name          = "dropcaster"
+  spec.name          = 'dropcaster'
   spec.version       = Dropcaster::VERSION
-  spec.authors       = ["Nicholas E. Rabenau"]
-  spec.email         = ["nerab@gmx.at"]
-  spec.summary       = %q{Simple Podcast Publishing with Dropbox}
-  spec.description   = %q{Dropcaster is a podcast feed generator for the command line. It is most simple to use with Dropbox, but works equally well with any other hoster.}
-  spec.homepage      = "https://github.com/nerab/dropcaster"
-  spec.license       = "MIT"
+  spec.authors       = ['Nicholas E. Rabenau']
+  spec.email         = ['nerab@gmx.at']
+  spec.summary       = 'Simple Podcast Publishing with Dropbox'
+  spec.description   = 'Dropcaster is a podcast feed generator for the command line. It is most simple to use with Dropbox, but works equally well with any other hoster.'
+  spec.homepage      = 'https://github.com/nerab/dropcaster'
+  spec.license       = 'MIT'
 
   spec.files         = `git ls-files -z`.split("\x0")
   spec.executables   = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
   spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
-  spec.require_paths = ["lib"]
+  spec.require_paths = ['lib']
 
   spec.add_dependency 'ruby-mp3info'
   spec.add_dependency 'activesupport'
@@ -31,7 +33,9 @@ Gem::Specification.new do |spec|
   spec.add_development_dependency 'rb-inotify'
   spec.add_development_dependency 'rb-fsevent'
   spec.add_development_dependency 'pry'
-  spec.add_development_dependency 'pry-nav'
-  spec.add_development_dependency 'pry-stack_explorer'
+  spec.add_development_dependency 'pry-byebug'
   spec.add_development_dependency 'rb-readline'
+  spec.add_development_dependency 'github-pages'
+  spec.add_development_dependency 'octokit'
+  spec.add_development_dependency 'rubocop'
 end

data/lib/dropcaster/contributors.rb

@@ -0,0 +1,12 @@
+require 'octokit'
+
+module Dropcaster
+  def self.contributors
+    cbtors = Octokit.contributors('nerab/dropcaster', true)
+
+    cbtors.sort!{|x,y| y.contributions <=> x.contributions }
+    cbtors.map!{|c| "* [#{Octokit.user(c.login).name}](#{c.html_url}) (#{c.contributions} contributions)"}
+
+    cbtors.join("\n")
+  end
+end

data/lib/dropcaster/version.rb

@@ -1,3 +1,3 @@
 module Dropcaster
-  VERSION = '0.0.6'
+  VERSION = '0.0.7'
 end

data/lib/dropcaster.rb

@@ -10,6 +10,7 @@ require 'active_support/core_ext/module/attribute_accessors'
 
 require 'logger'
 
+require 'dropcaster/contributors'
 require 'dropcaster/errors'
 require 'dropcaster/log_formatter'
 require 'dropcaster/channel'

data/templates/channel.rss.erb

@@ -45,7 +45,7 @@
   <% end %>
   <% items.each{|item| %>
     <item>
-      <title><%= item.tag.title || item.tag2.TIT2%></title>
+      <title><%= item.tag.title || item.tag2.TIT2 || item.file_name%></title>
       <itunes:author><%= h(item.tag2.TP1 || item.tag2.TPE1) %></itunes:author>
     <% unless item.tag2.TT3.blank? %>
       <itunes:subtitle><%= h(truncate(item.tag2.TT3, 50)) %></itunes:subtitle>
@@ -53,6 +53,7 @@
     <% end %>
       <itunes:image href="<%= item.image_url %>"/>
       <enclosure url="<%= item.url %>" length="<%= item.file_size %>" type="audio/mp3"/>
+      <link><%= item.url %></link>
       <guid isPermaLink="false"><%= h(item.uuid) %></guid>
       <pubDate><%= h(item.pub_date.to_formatted_s(:rfc822)) %></pubDate>
       <itunes:duration><%= item.duration.to_i %></itunes:duration>

data/website/.gitignore

@@ -0,0 +1,2 @@
+_site
+.sass-cache

data/website/README.markdown

@@ -0,0 +1,8 @@
+Markdown pages are generated from the README.markdown etc. and then served my Jekyll. Therefore, after each change to the source files, we need to regenerate the pages using the following rake task:
+
+    rake clobber web:generate
+
+Run local test site:
+
+    # http://jekyllrb.com/docs/github-pages/
+    jekyll serve --baseurl ''

data/website/_config.yml

@@ -0,0 +1,14 @@
+# Site settings
+title: Dropcaster
+email: nerab@gmx.at
+description: > # this means to ignore newlines until "baseurl:"
+  Dropcaster is a podcast feed generator for the command line. It is most
+  simple to use with Dropbox, but works equally well with any other (static
+  file) web hoster.
+baseurl: "/dropcaster" # the subpath of your site, e.g. /blog/
+# url: "http://yourdomain.com" # the base hostname & protocol for your site
+# twitter_username: jekyllrb
+github_username:  nerab
+
+# Build settings
+markdown: kramdown

data/website/_front_matter/contributing.yaml

@@ -0,0 +1,5 @@
+---
+layout: page
+title: Contributing
+permalink: /contributing.html
+---

data/website/_front_matter/index.yaml

@@ -0,0 +1,3 @@
+---
+layout: page
+---

data/website/_front_matter/vision.yaml

@@ -0,0 +1,5 @@
+---
+layout: page
+title: Vision
+permalink: /vision.html
+---

data/website/_includes/footer.html

@@ -0,0 +1,55 @@
+<footer class="site-footer">
+
+  <div class="wrapper">
+
+    <h2 class="footer-heading">{{ site.title }}</h2>
+
+    <div class="footer-col-wrapper">
+      <div class="footer-col  footer-col-1">
+        <ul class="contact-list">
+          <li>{{ site.title }}</li>
+          <li><a href="mailto:{{ site.email }}">{{ site.email }}</a></li>
+        </ul>
+      </div>
+
+      <div class="footer-col  footer-col-2">
+        <ul class="social-media-list">
+          {% if site.github_username %}
+          <li>
+            <a href="https://github.com/{{ site.github_username }}">
+              <span class="icon  icon--github">
+                <svg viewBox="0 0 16 16">
+                  <path fill="#828282" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/>
+                </svg>
+              </span>
+
+              <span class="username">{{ site.github_username }}</span>
+            </a>
+          </li>
+          {% endif %}
+
+          {% if site.twitter_username %}
+          <li>
+            <a href="https://twitter.com/{{ site.twitter_username }}">
+              <span class="icon  icon--twitter">
+                <svg viewBox="0 0 16 16">
+                  <path fill="#828282" d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809
+                  c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/>
+                </svg>
+              </span>
+
+              <span class="username">{{ site.twitter_username }}</span>
+            </a>
+          </li>
+          {% endif %}
+        </ul>
+      </div>
+
+      <div class="footer-col  footer-col-3">
+        <p class="text">{{ site.description }}</p>
+      </div>
+    </div>
+
+  </div>
+
+</footer>

data/website/_includes/head.html

@@ -0,0 +1,11 @@
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width initial-scale=1" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+    <title>{{ site.title }}{% if page.title %} - {{ page.title }}{% endif %}</title>
+    <meta name="description" content="{{ site.description }}">
+
+    <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
+    <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
+</head>

data/website/_includes/header.html

@@ -0,0 +1,27 @@
+<header class="site-header">
+
+  <div class="wrapper">
+
+    <a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a>
+
+    <nav class="site-nav">
+      <a href="#" class="menu-icon">
+        <svg viewBox="0 0 18 15">
+          <path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
+          <path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
+          <path fill="#424242" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
+        </svg>
+      </a>
+
+      <div class="trigger">
+        {% for page in site.pages %}
+          {% if page.title %}
+          <a class="page-link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
+          {% endif %}
+        {% endfor %}
+      </div>
+    </nav>
+
+  </div>
+
+</header>

data/website/_layouts/default.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+
+  {% include head.html %}
+
+  <body>
+
+    {% include header.html %}
+
+    <div class="page-content">
+      <div class="wrapper">
+        {{ content }}
+      </div>
+    </div>
+
+    {% include footer.html %}
+
+  </body>
+
+</html>

data/website/_layouts/page.html

@@ -0,0 +1,14 @@
+---
+layout: default
+---
+<div class="post">
+
+  <header class="post-header">
+    <h1 class="post-title">{{ page.title }}</h1>
+  </header>
+
+  <article class="post-content">
+    {{ content }}
+  </article>
+
+</div>

data/website/_layouts/post.html

@@ -0,0 +1,15 @@
+---
+layout: default
+---
+<div class="post">
+
+  <header class="post-header">
+    <h1 class="post-title">{{ page.title }}</h1>
+    <p class="post-meta">{{ page.date | date: "%b %-d, %Y" }}{% if page.author %} • {{ page.author }}{% endif %}{% if page.meta %} • {{ page.meta }}{% endif %}</p>
+  </header>
+
+  <article class="post-content">
+    {{ content }}
+  </article>
+
+</div>

data/website/_sass/_base.scss

@@ -0,0 +1,204 @@
+/**
+ * Reset some basic elements
+ */
+body, h1, h2, h3, h4, h5, h6,
+p, blockquote, pre, hr,
+dl, dd, ol, ul, figure {
+    margin: 0;
+    padding: 0;
+}
+
+
+
+/**
+ * Basic styling
+ */
+body {
+    font-family: $base-font-family;
+    font-size: $base-font-size;
+    line-height: $base-line-height;
+    font-weight: 300;
+    color: $text-color;
+    background-color: $background-color;
+    -webkit-text-size-adjust: 100%;
+}
+
+
+
+/**
+ * Set `margin-bottom` to maintain vertical rhythm
+ */
+h1, h2, h3, h4, h5, h6,
+p, blockquote, pre,
+ul, ol, dl, figure,
+%vertical-rhythm {
+    margin-bottom: $spacing-unit / 2;
+}
+
+
+
+/**
+ * Images
+ */
+img {
+    max-width: 100%;
+    vertical-align: middle;
+}
+
+
+
+/**
+ * Figures
+ */
+figure > img {
+    display: block;
+}
+
+figcaption {
+    font-size: $small-font-size;
+}
+
+
+
+/**
+ * Lists
+ */
+ul, ol {
+    margin-left: $spacing-unit;
+}
+
+li {
+    > ul,
+    > ol {
+         margin-bottom: 0;
+    }
+}
+
+
+
+/**
+ * Headings
+ */
+h1, h2, h3, h4, h5, h6 {
+    font-weight: 300;
+}
+
+
+
+/**
+ * Links
+ */
+a {
+    color: $brand-color;
+    text-decoration: none;
+
+    &:visited {
+        color: darken($brand-color, 15%);
+    }
+
+    &:hover {
+        color: $text-color;
+        text-decoration: underline;
+    }
+}
+
+
+
+/**
+ * Blockquotes
+ */
+blockquote {
+    color: $grey-color;
+    border-left: 4px solid $grey-color-light;
+    padding-left: $spacing-unit / 2;
+    font-size: 18px;
+    letter-spacing: -1px;
+    font-style: italic;
+
+    > :last-child {
+        margin-bottom: 0;
+    }
+}
+
+
+
+/**
+ * Code formatting
+ */
+pre,
+code {
+    font-size: 15px;
+    border: 1px solid $grey-color-light;
+    border-radius: 3px;
+    background-color: #eef;
+}
+
+code {
+    padding: 1px 5px;
+}
+
+pre {
+    padding: 8px 12px;
+    overflow-x: scroll;
+
+    > code {
+        border: 0;
+        padding-right: 0;
+        padding-left: 0;
+    }
+}
+
+
+
+/**
+ * Wrapper
+ */
+.wrapper {
+    max-width: -webkit-calc(800px - (#{$spacing-unit} * 2));
+    max-width:         calc(800px - (#{$spacing-unit} * 2));
+    margin-right: auto;
+    margin-left: auto;
+    padding-right: $spacing-unit;
+    padding-left: $spacing-unit;
+    @extend %clearfix;
+
+    @include media-query($on-laptop) {
+        max-width: -webkit-calc(800px - (#{$spacing-unit}));
+        max-width:         calc(800px - (#{$spacing-unit}));
+        padding-right: $spacing-unit / 2;
+        padding-left: $spacing-unit / 2;
+    }
+}
+
+
+
+/**
+ * Clearfix
+ */
+%clearfix {
+
+    &:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+}
+
+
+
+/**
+ * Icons
+ */
+.icon {
+
+    > svg {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        vertical-align: middle;
+
+        path {
+            fill: $grey-color;
+        }
+    }
+}