Commit ead3a569 authored by Jacob Tomlinson's avatar Jacob Tomlinson Committed by Kirk Lange

Initial commit

# Mac Specific
# Icon must end with two \r
# Thumbnails
# Files that might appear on external disk
# Directories potentially created on remote AFP share
Network Trash Folder
Temporary Items
# Jekyll Specific
# Ruby
Copyright (C) 2014 Jacob Tomlinson
The contents of this website, which consists of the files in
* _config.yml
* _data
* _drafts
* _posts
are copyrighted and sole property of its author Jacob Tomlinson. It may not be
used, modified, syndicated or distributed without expressed permission from
the author.
However the website theme built using jekyll is Open Source under the following
GPLv3 license.
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <>.
# [![Build Status](](
The code which powers
## Contact
If you wish to contact me regarding my website please raise an issue on GitHub,
tweet me [@_jacobtomlinson]( or email me
## Contribution
If you see any errors on my website or feel you could make improvements then please
feel free to open an issue or raise a pull request. Or if you wish just leave a comment
on the relevant page.
## Theme
This jekyll theme has been created from scratch. Ideas and inspiration are taken
from other places but the code is my own.
## Tools and Libraries
The following tools and libraries are used on this site
### JavaScript
* [jQuery](
* [MMenu](
* [HighlightJS](
* [Simple Jekyll Search](
### CSS
* [Bootstrap](
* [Font Awesome](
### Social
* [AddThis](
* [Disqus](
### Other
* [Real Favicon Generator](
* [Google Analytics](
## License
All written works and data are not for redistribution without permission, but feel free to link back.
The jekyll theme, HTML, CSS and JavaScript is licensed under GPLv3 (unless stated otherwise in the file).
See the LICENSE file for more information.
# Site settings
title: "Carte Noir"
description: "A dark blog theme for Jekyll."
baseurl: ""
url: ""
author_name: "Jacob Tomlinson"
author_description: A unix system administrator by day and a website and app developer by night. With experience in RHEL and OS X administration, HTML5, CSS3, JavaScript, jQuery, PHP, Python, MySQL, CodeIgniter, Wordpress and much more. When he is not tapping away at his keyboard you can usually find him making music, gaming or spending time with his wonderful fianc&#233;e.
title_image: ""
disqus_account: jacobtomlinson
addthis_id: ra-513c6fa83da6ec67
# Social usernames/URLs
twitter_username: _jacobtomlinson
github_username: jacobtomlinson
# Footer
footer_left: "Made with <i class=\"fa fa-heart\"></i> using jekyll"
footer_right: "Proudly hosted on <a href=\"\">Github</a> &nbsp;<i class=\"fa fa-github-alt\"></i>"
# Build settings
markdown: redcarpet
extensions: ["no_intra_emphasis", "fenced_code_blocks", "autolink", "strikethrough", "superscript"]
permalink: pretty
exclude: [vendor]
add-this: ""
aws: ""
bootcamp: ""
cd: ""
centos: ""
command-line: ""
database: ""
download-festival: ""
gmail: ""
google-analytics: ""
google-developers: ""
hard-drive: ""
internet: ""
jekyll: ""
journal: ""
jquery: ""
monitor: ""
mysql: ""
nasa: ""
osx: ""
paypal: ""
python: ""
sd-card: ""
stack-overflow: ""
twitter: ""
ubuntu: ""
vmware: ""
xbox-controller: ""
<div class="footer clearfix">
<div class="col-md-6">
{{ site.footer_left }}
<div class="col-md-6">
{{ site.footer_right }}
<script src="//"></script>
<script src="//"></script>
<script src="/js/jquery.mmenu.min.all.js"></script>
<script src=""></script>
<script type="text/javascript">
$(document).ready(function() {
$("#my-menu").mmenu().on( "", function() {
$(".menu-button").click(function() {
{% if site.google_analytics %}
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '{{ site.google_analytics }}']);
(function () {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
{% endif %}
<meta charset="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
<meta name="description" content="{{ site.description }}">
<link rel="profile" href="" />
<link rel="stylesheet" href="//">
<link rel="stylesheet" href="//">
<link rel="stylesheet" type="text/css" media="all" href="/css/style.css" />
<link rel="stylesheet" type="text/css" media="all" href="/css/jquery.mmenu.all.css" />
<link rel="stylesheet" href="/css/highlightjs.piperita.css">
<!-- Favicons generated at -->
<link rel="shortcut icon" href="/favicons/favicon.ico">
<link rel="apple-touch-icon" sizes="57x57" href="/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicons/apple-touch-icon-152x152.png">
<link rel="icon" type="image/png" href="/favicons/favicon-196x196.png" sizes="196x196">
<link rel="icon" type="image/png" href="/favicons/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="/favicons/mstile-144x144.png">
<meta name="msapplication-config" content="/favicons/browserconfig.xml">
{% if site.addthis_id %}
<!-- Go to to customize your tools -->
<script type="text/javascript" src="//{{ site.addthis_id }}"></script>
{% endif %}
<nav id="my-menu">
<p>{{ site.title }}</p>
<ul class="pages">
<li><a href="/"><i class="fa fa-home"></i> Home</a></li>
<li><a href="/posts/"><i class="fa fa-archive"></i> All Posts</a></li>
<li><a href="/search/"><i class="fa fa-search"></i> Search</a></li>
<p class="links">
{% if site.twitter_username %}<a href="{{ site.twitter_username }}" target="_new"><i class="fa fa-twitter"></i></a>{% endif %}
{% if site.linkedin_link %}<a href="{{ site.linkedin_link }}" target="_new"><i class="fa fa-linkedin"></i></a>{% endif %}
{% if site.google_plus_link %}<a href="{{ site.google_plus_link }}" target="_new"><i class="fa fa-google-plus"></i></a>{% endif %}
{% if site.github_username %}<a href="{{ site.github_username }}" target="_new"><i class="fa fa-github-alt"></i></a>{% endif %}
{% if site.stackoverflow_link %}<a href="{{ site.stackoverflow_link }}" target="_new"><i class="fa fa-stack-overflow"></i></a>{% endif %}
<a href="" target="_new"><i class="fa fa-rss"></i></a>
<div class="menu-button" href="#menu"><i class="fa fa-bars"></i></div>
<!DOCTYPE html>
{% include head.html %}
{% include header.html %}
<div class="page-content">
<div class="wrap">
{{ content }}
{% include footer.html %}
layout: default
<div class="post">
<header class="post-header">
<h1>{{ page.title }}</h1>
<article class="post-content">
{{ content }}
layout: default
{% if page.minutes %}
{% assign minutes = page.minutes %}
{% else %}
{% assign minutes = content | number_of_words | divided_by: 180 %}
{% if minutes == 0 %}{% assign minutes = 1 %}{% endif %}
{% endif %}
<div class="container-fluid single">
<div class="row">
<div itemscope itemtype="" class="col-md-12 article">
{% if[page.thumbnail] %}
<div class="thumb">
<img itemprop="image" src="{{[page.thumbnail] }}" alt="Thumbnail: {{ page.thumbnail }}" />
{% endif %}
<h1 class="header" itemprop="name">{{ page.title }}</h1>
<div class="author">
<span itemprop="author">
{% if site.google_plus_link %}
<a rel="author" href="{{ site.google_plus_link }}">
{% endif %}
{% if %}
<span itemprop="author" itemscope itemtype="">
<span itemprop="name">{{ }}</span>
{% endif %}
{% if site.google_plus_link %}
{% endif %}
on <span itemprop="datePublished" content="2014-08-28">{{ | date: "%B %-d, %Y" }}</span>
under {% if page.categories %}{% for category in page.categories limit:1 %}{{ category }}{% endfor %}{% endif %}
<div class="read-time">
{{ minutes }} minute read
<div class="content-panel content">
<span itemprop="articleBody">{{ content }}</span>
{% if site.addthis_id %}
<div class="share">
<!-- Go to to customize your tools -->
<div class="addthis_sharing_toolbox"></div>
{% endif %}
<div class="tags"><small>
<i class="fa fa-tags"></i>
{{ page.tags | join: ', ' }}
<div class="content-panel feedback">
I <i class="fa fa-heart"></i> feedback.<br />
Let me know what you think of this article on twitter <a href="{{ site.twitter_username }}">@{{ site.twitter_username }}</a> or leave a comment below!
{% if site.disqus_account %}
<div class="content-panel comments">
<div id="disqus_thread">
<noscript>Please enable JavaScript to view the <a href="">comments powered by Disqus.</a></noscript>
<a href="" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
{% endif %}
<div class="content-panel related clearfix">
{% for post in site.related_posts limit:1 %}
<div class="related-header">
<a href="{{ site.baseurl }}{{ post.url }}">Read More</a>
<div class="title">
<a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
<div class="excerpt">
{{ post.excerpt | strip_html | truncatewords:30 }}
<a href="{{ site.baseurl }}{{ post.url }}">Continue Reading</a>
{% endfor %}
<hr />
<div class="previous previous-next">
{% if page.previous %}
<a href="{{ site.baseurl }}{{ page.previous.url }}">{{ page.previous.title }}</a>
<p class="date">Published {{ | date: "%B %-d, %Y" }}</p>
{% endif %}
<div class="next previous-next">
{% if %}
<a href="{{ site.baseurl }}{{ }}">{{ }}</a>
<p class="date">Published {{ | date: "%B %-d, %Y" }}</p>
{% endif %}
{% if site.disqus_account %}
<script type="text/javascript">
function disqus_config() { this.experiment.enable_scroll_container = true; }
var disqus_shortname = "{{ site.disqus_account }}"; // required: replace example with your forum shortname
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
{% endif %}
layout: post
title: Pixyll has Pagination
date: 2014-06-08 11:21:29
summary: This is an empty post to illustrate the pagination component with Pixyll.
categories: jekyll pixyll
This is an empty post to illustrate the pagination component with Pixyll.
layout: post
title: So, What is Jekyll?
date: 2014-06-09 12:32:18
summary: Transform your plain text into static websites and blogs. Simple, static, and blog-aware.
categories: jekyll pixyll
Jekyll is a tool for transforming your plain text into static websites and
blogs. It is simple, static, and blog-aware. Jekyll uses the
[Liquid]( templating
language and has builtin [Markdown](
and [Textile]( support.
It also ties in nicely to [Github Pages](
Learn more about Jekyll on their [website](
layout: post
title: Pixyll in Action
date: 2014-06-10 12:31:19
summary: See what the different elements looks like. Your markdown has never looked better. I promise.
categories: jekyll pixyll
There is a significant amount of subtle, yet precisely calibrated, styling to ensure
that your content is emphasized while still looking aesthetically pleasing.
All links are easy to [locate and discern](#), yet don't detract from the harmony
of a paragraph. The _same_ goes for italics and __bold__ elements. Even the the strikeout
works if <del>for some reason you need to update your post</del>. For consistency's sake,
<ins>The same goes for insertions</ins>, of course.
### Code, with syntax highlighting
Code blocks use the [solarized]( theme. Both the light and
dark versions are included, so you can swap them out easily. _Solarized Dark_ is the default.
{% highlight ruby %}
class Awesome < ActiveRecord::Base
include EvenMoreAwesome
validates_presence_of :something
validates :email, email_format: true
def initialize(email, name = nil) = email = name
{% endhighlight %}
# Headings!
They're responsive, and well-proportioned (in `padding`, `line-height`, `margin`, and `font-size`).
They also heavily rely on the awesome utility, [BASSCSS](
##### They draw the perfect amount of attention
This allows your content to have the proper informational and contextual hierarchy. Yay.
### There are lists, too
* Apples
* Oranges
* Potatoes
* Milk
1. Mow the lawn
2. Feed the dog
3. Dance
### Images look great, too
### There are also pretty colors
Also the result of [BASSCSS](, you can <span class="bg-dark-gray white">highlight</span> certain components
of a <span class="red">post</span> <span class="mid-gray">with</span> <span class="green">CSS</span> <span class="orange">classes</span>.
I don't recommend using blue, though. It looks like a <span class="blue">link</span>.
### Stylish blockquotes included
You can use the markdown quote syntax, `>` for simple quotes.
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis porta mauris.
However, you need to inject html if you'd like a citation footer. I will be working on a way to
hopefully sidestep this inconvenience.
Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
<footer><cite title="Antoine de Saint-Exupéry">Antoine de Saint-Exupéry</cite></footer>
### There's more being added all the time
Checkout the [Github repository]( to request,
or add, features.
Happy writing.
layout: post
title: Hello, Pixyll
date: 2014-06-11 15:31:19
summary: Pixyll is a simple, beautiful theme for Jekyll that emphasizes content rather than aesthetic fluff.
categories: jekyll pixyll
Pixyll is a simple, beautiful theme for Jekyll that emphasizes content rather than aesthetic fluff. It's mobile _first_, fluidly responsive, and delightfully lightweight.
It's pretty minimal, but leverages large type and drastic contrast to make a statement, on all devices.
Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
<footer><cite title="Antoine de Saint-Exupéry">Antoine de Saint-Exupéry</cite></footer>
## Where is it?
Checkout the [Github repository]( to download it, request a feature, or report a bug.
It's free, and open source ([MIT](
/* Piperita - Theme */
/* by Jacob Tomlinson () */
/* */
/* Colours */
$base-white: #E6E6E6;
$base-red: #FF0028;
$light-black: #737373;
$dark-black: #4C4C4C;
$light-red: #FFA8BA;
$dark-red: #FF6685;
$light-green: #C5EBC5;
$dark-green: #A6EBA6;
$light-yellow: #F9F9A5;
$dark-yellow: #FFDC72;
$light-blue: #8DDBFF;
$dark-blue: #5DC6F5;
$light-purple: #FFABFF;
$dark-purple: #FF8FFF;
$light-aqua: #B0F0F0;
$dark-aqua: #86D1D7;
$light-white: #FFFFFF;
$dark-white: #DBDBDB;
/* Piperita Dark Title */
.hljs-title {
color: $dark-white;
/* Piperita Dark Green */
.ruby .hljs-constant,
.xml .hljs-tag .hljs-title,
.xml .hljs-pi,
.xml .hljs-doctype,
.html .hljs-doctype,
.css .hljs-id,
.css .hljs-class,
.css .hljs-pseudo {
color: $dark-green;
/* Piperita Dark Orange */
.hljs-constant {
color: #df5320;
/* Piperita Dark Yellow */
.hljs-ruby .hljs-class .hljs-title,
.css .hljs-rules .hljs-attribute {
color: $dark-yellow;
/* Piperita Dark Red */
.ruby .hljs-symbol,
.xml .hljs-cdata {
color: $dark-red;
/* Piperita Dark Aqua */
.css .hljs-hexcolor {
color: $dark-aqua;
/* Piperita Dark Blue */
.python .hljs-decorator,
.python .hljs-title,
.ruby .hljs-function .hljs-title,
.ruby .hljs-title .hljs-keyword,
.perl .hljs-sub,
.javascript .hljs-title,
.coffeescript .hljs-title {
color: $dark-blue;
/* Piperita Dark Purple */
.javascript .hljs-function {
color: $dark-purple;
.hljs {
display: block;
overflow-x: auto;
color: $base-white;
-webkit-text-size-adjust: none;
.coffeescript .javascript,
.javascript .xml,
.tex .hljs-formula,
.xml .javascript,
.xml .vbscript,
.xml .css,
.xml .hljs-cdata {
opacity: 0.5;
jQuery.mmenu CSS
jQuery.mmenu panels CSS
*/ > .mm-panel {
-webkit-transition: left 0.4s ease;
-moz-transition: left 0.4s ease;
-ms-transition: left 0.4s ease;
-o-transition: left 0.4s ease;
transition: left 0.4s ease; }
.mm-menu .mm-hidden {
display: none; }
.mm-wrapper {
overflow-x: hidden;
position: relative; }
.mm-menu {
background: inherit;
display: block;
overflow: hidden;
width: 100%;
height: 100%;
padding: 0;
position: absolute;
left: 0;