Redesign ALL the Things

*   Add target _blank for external social links

*   Change color scheme to more Solarized

*   Remove author column

    -   This is moved to the top

*   Update links to images

    -   These are now using Hugo's shortcodes for "figures"

11 files changed, 96 insertions, 157 deletions

diff --git a/blag/content/about-me.markdown b/blag/content/about-me.markdown
index 81b0172..0ae58f2 100644
--- a/blag/content/about-me.markdown
+++ b/blag/content/about-me.markdown
@@ -1,5 +1,5 @@
 ---
-title: "about me"
+title: "About Me"
 keywords: []
 tags: []
 pubdate: "2014-10-10"
@@ -9,8 +9,6 @@ topics: []
 slug: about-me
 ---
 
-# About Me #
-
 I am a life-long learner, developer, mathematician, and overall thinker. I
 enjoy solving problems and learning about technologies and discussing new and
 different ideas.
diff --git a/blag/content/blog/Spark.markdown b/blag/content/blog/Spark.markdown
index cac839b..a8a8262 100644
--- a/blag/content/blog/Spark.markdown
+++ b/blag/content/blog/Spark.markdown
@@ -231,7 +231,7 @@ reporting purposes.
 This project follows a very similar process structure as the Storm Topology
 from last time.
 
-![Sentiment Analysis Topology][satimg]
+{{< figure src="/media/SentimentAnalysisTopology.png" >}}
 
 However, each node in the above graph is actually a transformation on the
 current DStream and not an individual process (or group of processes).
@@ -596,8 +596,6 @@ Spark and Apache Storm.
 
 ## Related Links / References ##
 
-[satimg]: https://kennyballou.com/media/SentimentAnalysisTopology.png
-
 [1]: http://spark.apache.org/
 
 *   [Apache Spark][1]
diff --git a/blag/content/blog/Storm-vs-Spark.markdown b/blag/content/blog/Storm-vs-Spark.markdown
index 03fa082..ea9dc7d 100644
--- a/blag/content/blog/Storm-vs-Spark.markdown
+++ b/blag/content/blog/Storm-vs-Spark.markdown
@@ -142,11 +142,13 @@ order of magnitude less.
 
 Spark Open and Closed JIRA Issues (last 30 days):
 
-[![Spark JIRA Issues][spark_jira_issues]][18]
+{{< figure src="/media/spark_issues_chart.png"
+    link="https://issues.apache.org/jira/browse/SPARK/" >}}
 
 Storm Open and Closed JIRA Issues (last 30 days):
 
-[![Storm JIRA Issues][storm_jira_issues]][17]
+{{< figure src="/media/storm_issues_chart.png"
+    link="https://issues.apache.org/jira/browse/STORM/" >}}
 
 ### Contributor/ Community Size ###
 
diff --git a/blag/content/blog/Storm.markdown b/blag/content/blog/Storm.markdown
index ee40e82..68bb4e8 100644
--- a/blag/content/blog/Storm.markdown
+++ b/blag/content/blog/Storm.markdown
@@ -107,7 +107,7 @@ High-Availability is baked into this virtual cluster.
 
 ### Overview ###
 
-![Sentiment Analysis Topology][satimg]
+{{< figure src="/media/SentimentAnalysisTopology.png" >}}
 
 I wrote a simple Kafka producer that reads files off disk and sends them to the
 Kafka cluster. This is how we feed the whole system and is used in lieu of
@@ -523,8 +523,6 @@ Streaming with Apache Spark.
 
 ## Related Links / References ##
 
-[satimg]: https://kennyballou.com/media/SentimentAnalysisTopology.png
-
 [1]: http://storm.incubator.apache.org/
 
 *   [Apache Storm Project Page][1]
diff --git a/blag/content/blog/git-in-reverse.markdown b/blag/content/blog/git-in-reverse.markdown
index 7157203..88deb04 100644
--- a/blag/content/blog/git-in-reverse.markdown
+++ b/blag/content/blog/git-in-reverse.markdown
@@ -26,11 +26,7 @@ branching.
 
 ## What is Git± ##
 
-![XKCD on Git](http://imgs.xkcd.com/comics/git.png "If that doesn't fix it,
-git.txt contains the phone number of a friend of mine who understands git. Just
-wait through a few minutes of 'It's really pretty simple, just think of
-branches as...' and eventually you'll learn the commands that will fix
-everything.")
+{{< figure src="http://imgs.xkcd.com/comics/git.png" caption="If that doesn't fix it, git.txt contains the phone number of a friend of mine who understands git.  Just wait through a few minutes of 'It's really pretty simple, just think of branches as...' and eventually you'll learn the commands that will fix everything." >}}
 
 Git is a few things to many people, and creating a standard definition is our
 first step to fully understanding the nebulous Git.
@@ -179,7 +175,7 @@ filename for `foo.txt`.
 
 Visually, this may look like something similar to the following image:
 
-![Git Tree 1][git-tree-1]
+{{< figure src="/media/git-tree-1.png" >}}
 
 If we inspect the `.git/objects` directory, we should see a new object:
 
@@ -205,7 +201,7 @@ filename of the object or folder name if the element is a tree.
 
 A more complicated example of a Git tree may look like the following image:
 
-![Git Tree 2][git-tree-2]
+{{< figure src="/media/git-tree-2.png" >}}
 
 Now we have file names and the ability to track folders, however, we are still
 managing and holding onto the checksums ourselves. Furthermore, we have no
@@ -262,7 +258,7 @@ Finally, after a blank line, the rest of the file is reserved for the commit
 message; since "our first commit" message is short, it only takes a single
 line.
 
-![git commit 1][git-commit-1]
+{{< figure src="/media/git-commit-1.png" >}}
 
 To inform Git that we have created a commit, we need to add some information to
 a few files. First, we need create the `master` reference. We do this by
@@ -557,7 +553,7 @@ isn't yet made aware, the code has diverged from a single path of existence to
 multiple paths. This is a form of implicit branching and explicit branching
 isn't much different.
 
-![Code Branching][code-branching]
+{{< figure src="/media/code-branching.png" >}}
 
 The structure of Git makes branching trivial, in fact, all that's required is
 to create a file that marks the branch point of the code. That is, to create a
@@ -565,7 +561,7 @@ file under `.git/refs/heads` that contains the branch's base commit hash. From
 there, the code can safely move forward without changing anything of the other
 branches.
 
-![Git Branching][git-branching-1]
+{{< figure src="/media/git-branching-1.png" >}}
 
 Branching in Git is accomplished with [`git-branch(1)`][20] and
 [`git-checkout(1)`][21].
@@ -598,9 +594,9 @@ The first Git will try is called "fast-forward" merging, where Git will attempt
 to play the source branch's commits against the target branch, from the common
 history point forward.
 
-![Git Fast Forward Merge Initial][git-ff-merge-1]
+{{< figure src="/media/git-ff-merge-1.png" >}}
 
-![Git Fast Forward Merge Replay][git-ff-merge-2]
+{{< figure src="/media/git-ff-merge-2.png" >}}
 
 However, this can only be accomplished if the target branch doesn't have any
 changes of its own.
@@ -612,7 +608,7 @@ and attempt to re-apply the merge, the resolution of the merge will be in the
 merge commit. For more information on merging, see the [`git-merge(1)`][22]
 documentation.
 
-![Git Resolve Merge][git-resolve-merge]
+{{< figure src="/media/git-resolve-merge.png" >}}
 
 ## Summary ##
 
@@ -686,19 +682,3 @@ Beyond these problems, Git is a very powerful and capable source control tool.
 [22]: https://www.kernel.org/pub/software/scm/git/docs/git-merge.html
 
 [23]: https://kennyballou.com/git-in-reverse.pdf
-
-[code-branching]: https://kennyballou.com/media/code-branching.png
-
-[git-branching-1]: https://kennyballou.com/media/git-branching-1.png
-
-[git-commit-1]: https://kennyballou.com/media/git-commit-1.png
-
-[git-ff-merge-1]: https://kennyballou.com/media/git-ff-merge-1.png
-
-[git-ff-merge-2]: https://kennyballou.com/media/git-ff-merge-2.png
-
-[git-resolve-merge]: https://kennyballou.com/media/git-resolve-merge.png
-
-[git-tree-1]: https://kennyballou.com/media/git-tree-1.png
-
-[git-tree-2]: https://kennyballou.com/media/git-tree-2.png
diff --git a/blag/layouts/_default/single.html b/blag/layouts/_default/single.html
index 00aaabc..73f61b8 100644
--- a/blag/layouts/_default/single.html
+++ b/blag/layouts/_default/single.html
@@ -1,17 +1,11 @@
 {{ partial "header.html" . }}
 <body>
 {{ partial "subheader.html" . }}
-<section id="main">
+<div id="content">
+    <h1>{{ .Title }}</h1>
     <div>
-        <div class="colleft">
-            <article id="content">
-                {{ .Content}}
-            </article>
-        </div>
-        <div class="colright">
-            {{ partial "author.html" . }}
-        </div>
+        {{ .Content}}
     </div>
-</section>
+</div>
 </body>
 {{ partial "footer.html" . }}
diff --git a/blag/layouts/blog/single.html b/blag/layouts/blog/single.html
index 1086aa8..12abff0 100644
--- a/blag/layouts/blog/single.html
+++ b/blag/layouts/blog/single.html
@@ -1,27 +1,18 @@
 {{ partial "header.html" . }}
 <body>
 {{ partial "subheader.html" . }}
-<section id="main">
-    <div>
-        <div class="colleft">
-            <article id="content">
-                <h1 id="title"> {{ .Title }}</h1>
-                <div class="post-meta">
-                    <ul class="tags">
-                        <li><i class="fa fa-tags"></i></li>
-                        {{ range .Params.tags }}
-                        <li>{{ . }}</li>
-                        {{ end }}
-                    </ul>
-                    <h4 id="date"> {{ .Date.Format "Mon Jan 2, 2006" }}</h4>
-                </div>
-                {{ .Content}}
-            </article>
-        </div>
-        <div class="colright">
-            {{ partial "author.html" . }}
-        </div>
+<article id="content">
+    <h1 id="title"> {{ .Title }}</h1>
+    <div class="post-meta">
+        <ul class="tags">
+            <li><i class="fa fa-tags"></i></li>
+            {{ range .Params.tags }}
+            <li>{{ . }}</li>
+            {{ end }}
+        </ul>
+        <h4 id="date"> {{ .Date.Format "Mon Jan 2, 2006" }}</h4>
     </div>
-</section>
+    {{ .Content}}
+</article>
 </body>
 {{ partial "footer.html" . }}
diff --git a/blag/layouts/index.html b/blag/layouts/index.html
index 528a97c..3e0966b 100644
--- a/blag/layouts/index.html
+++ b/blag/layouts/index.html
@@ -2,19 +2,10 @@
 <body>
 {{ partial "subheader.html" . }}
 <section id="main">
-    <div>
-        <div class="colleft">
-            {{ range first 10 .Data.Pages }}
-                {{ if eq .Section "blog" }}
-                    {{ .Render "summary" }}
-                {{ end }}
-            {{ end }}
-        </div>
-        <div class="colright">
-            {{ partial "author.html" . }}
-        </div>
-    <div>
+    {{ range first 10 .Data.Pages }}
+        {{ if eq .Section "blog" }}
+            {{ .Render "summary" }}
+        {{ end }}
+    {{ end }}
 </section>
-
-
 {{ partial "footer.html" . }}
diff --git a/blag/layouts/partials/author.html b/blag/layouts/partials/author.html
deleted file mode 100644
index 88a2736..0000000
--- a/blag/layouts/partials/author.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<section>
-    <div id="author">
-        <a class="fade" href="about-me/"><h3 class="fade">Kenny Ballou</h3></a>
-        <h4><code>:(){ :|:&amp; };:</code></h4>
-        <a href="https://github.com/kennyballou">
-            <i class="fade fa fa-github-square fa-2x"></i>
-        </a>
-        <a href="https://bitbucket.org/kballou">
-            <i class="fade fa fa-bitbucket-square fa-2x"></i>
-        </a>
-        <a href="http://www.linkedin.com/in/kennyballou">
-            <i class="fade fa fa-linkedin-square fa-2x"></i>
-        </a>
-        <a href="https://plus.google.com/+KennyBallou">
-            <i class="fade fa fa-google-plus-square fa-2x"></i>
-        </a>
-        <a href="https://twitter.com/kennyballou">
-            <i class="fade fa fa-twitter-square fa-2x"></i>
-        </a>
-    </div>
-</section>
diff --git a/blag/layouts/partials/subheader.html b/blag/layouts/partials/subheader.html
index 4cbdd9e..ab29ead 100644
--- a/blag/layouts/partials/subheader.html
+++ b/blag/layouts/partials/subheader.html
@@ -1,5 +1,29 @@
 <div id="header">
-    <header>
-        <a class="fade" href="{{ .Site.BaseURL }}">~kballou</a>
-    </header>
+    <div class="colleft">
+        <header>
+            <a class="fade" href="{{ .Site.BaseURL }}">~</a>
+            <a class="fade" href="about-me/"> kballou</a>
+        </header>
+    </div>
+    <div class="colright">
+        <header>
+            <div id="author">
+                <a href="https://github.com/kennyballou" target="_blank">
+                    <i class="fade fa fa-github-square fa-1x"></i>
+                </a>
+                <a href="https://bitbucket.org/kballou" target="_blank">
+                    <i class="fade fa fa-bitbucket-square fa-1x"></i>
+                </a>
+                <a href="http://www.linkedin.com/in/kennyballou" target="_blank">
+                    <i class="fade fa fa-linkedin-square fa-1x"></i>
+                </a>
+                <a href="https://plus.google.com/+KennyBallou" target="_blank">
+                    <i class="fade fa fa-google-plus-square fa-1x"></i>
+                </a>
+                <a href="https://twitter.com/kennyballou" target="_blank">
+                    <i class="fade fa fa-twitter-square fa-1x"></i>
+                </a>
+            </div>
+        </header>
+    </div>
 </div>
diff --git a/blag/static/css/site.css b/blag/static/css/site.css
index 009072c..0da7274 100644
--- a/blag/static/css/site.css
+++ b/blag/static/css/site.css
@@ -1,20 +1,17 @@
-body {
+html, body {
     box-sizing: border-box;
     font: 13px Helvetica, Arial;
-    background-color: #282828;
-    color: #F8F8F2;
-}
-h1 {
-    color: #F92672;
-}
-h2, h4 {
-    color: #66D9EF;
-}
-h3, h5 {
-    color: #A6E22E;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: auto;
+    margin-bottom: -2.5em;
+    width: 80%;
+    background-color: #FDF6E3;
+    color: #586E75;
+    height: 94%;
 }
 a {
-    color: #AE81FF;
+    color: #268BD2;
     text-decoration: none;
 }
 a:hover {
@@ -22,52 +19,40 @@ a:hover {
 }
 blockquote {
     padding: 1em 1em;
-    border-left: 5px solid #333333;
+    border-left: 5px solid #D33682;
     margin: 0 0 1em;
 }
 .post-meta {
     font-style: italic;
 }
-#author {
-    padding: 5em;
-}
-#content {
-    margin: 2em 2em 5em 3em;
-    width: 100%;
-}
 #header {
-    background-color: #282828;
     display: block;
-    height: auto;
+    height: 2em;
     overflow: visible;
     padding-right: 2em;
     padding-left: 0.7em;
-    border-bottom: 1px solid #292929;
+    margin: auto;
 }
 #footer {
-    background-color: #282828;
     height: 2.5em;
     padding: 1em 0;
-    overflow: hidden;
-    border-top: 1px solid #292929;
-    position: fixed;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    z-index: 1030;
-    margin-bottom: 0;
     margin-left: 2em;
     border-width: 1px 0 0:
 }
 #header header a {
-    color: #F92672;
     font-size: 210%;
 }
 #header header a:hover {
     text-decoration: none;
 }
-div#author a:hover {
-    text-decoration: none;
+#content {
+    min-height: 100%;
+    margin-bottom: -2.5em;
+}
+#content:after {
+    content: "";
+    display: block;
+    height: 2.5em;
 }
 .fade {
     opacity: 0.5;
@@ -84,13 +69,12 @@ pre {
     word-break: break-all;
     word-wrap: break-word;
     color: #2b2b2b;
-    background-color: #F5F5F5;
-    border: 1px solid #CCCCCC;
+    background-color: #073642;
+    border: 1px solid #073642;
     border-radius: 4px;
 }
 code {
     padding: 0.25em;
-    color: #F8F8F2;
     font-family: DejaVu Sans Mono, Consolas;
     white-space: pre-wrap;
     border: 0;
@@ -98,13 +82,8 @@ code {
 }
 pre code {
     display: block;
-    background-color: #303030;
-}
-.post {
-    width: 100%;
-    margin-left: 3em;
-    margin-right: 3em;
-    margin-bottom: 3em;
+    color: #657B83;
+    background-color: #002B36;
 }
 .tags {
     display: inline-block;
@@ -117,7 +96,7 @@ pre code {
     padding-left: 0.3em;
 }
 .tags li:nth-child(even) {
-    color: #66D9EF;
+    color: #6C71C4;
 }
 .colleft {
     float: left;
@@ -126,7 +105,7 @@ pre code {
 }
 .colright {
     float: right;
-    width: 20%;
+    width: 30%;
     position: relative;
 }
 .embed-video {
@@ -134,3 +113,8 @@ pre code {
     margin-left: auto;
     margin-right: auto;
 }
+figure {
+    width: 75%;
+    text-align: center;
+    margin: auto;
+}