Use purecss as base

10 files changed, 199 insertions, 1053 deletions

diff --git a/LICENSE.md b/LICENSE.md
deleted file mode 100644
index 32fea66..0000000
--- a/LICENSE.md
+++ /dev/null
@@ -1,20 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2014 YOUR_NAME_HERE
-
-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.
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index a19b73e..9daa528 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -2,10 +2,10 @@
 {{ partial "navbar.html" . }}
 
 
-<div class="container away">
-  <div class="row">
-	<div class="eight columns offset-by-two">
-	  <p style="margin-bottom:1em;font-weight:bold;color:#333">{{ .Title }}:</p>
+<div class="pure-g">
+    <div class="pure-u-1-24 pure-u-md-5-24"></div>
+	<div class="pure-u-11-12 pure-u-md-5-8">
+	  <p class="posts-name">{{ .Title }}:</p>
 
 	  <ul class="posts">
 		{{ $baseurl := .Site.BaseUrl }}
@@ -15,22 +15,22 @@
 		  <a href="{{ .Permalink }}">{{ $page.Title }}</a>
 
 		  <p class="footnote">
-			submitted <time datetime="{{ $page.Date.Format "2006-01-02T15:04:05Z07:00" }}" class="pull-right post-list timeago">{{ $page.Date.Format "2006-01-02T15:04:05Z07:00" }}</time>
+			submitted <time datetime="{{ $page.Date.Format "2006-01-02T15:04:05Z07:00" }}" class="post-list timeago">{{ $page.Date.Format "2006-01-02T15:04:05Z07:00" }}</time>
 
 			{{ if or $page.Params.tags $page.Params.categories $page.Params.series }}
 			to
 			{{ end }}
 
 			{{ with $page.Params.tags }}
-			tags:[ {{ range $page.Params.tags}}<a href="{{ $baseurl }}/tags/{{ . | urlize }}">{{ . }}</a> {{ end }}]
+			tags:[ {{ range $page.Params.tags}}<a href="{{ $baseurl }}tags/{{ . | urlize }}">{{ . }}</a> {{ end }}]
 			{{ end }}
 
 			{{ with $page.Params.categories }}
-			categories:[ {{ range $page.Params.categories }}<a href="{{ $baseurl }}/categories/{{ . | urlize }}">{{ . }}</a> {{ end }}]
+			categories:[ {{ range $page.Params.categories }}<a href="{{ $baseurl }}categories/{{ . | urlize }}">{{ . }}</a> {{ end }}]
 			{{ end }}
 
 			{{ with $page.Params.series }}
-			series:[ {{ range $page.Params.series }}<a href="{{ $baseurl }}/series/{{ . | urlize }}">{{ . }}</a> {{ end }}]
+			series:[ {{ range $page.Params.series }}<a href="{{ $baseurl }}series/{{ . | urlize }}">{{ . }}</a> {{ end }}]
 			{{ end }}
 
 		  </p>
@@ -39,7 +39,7 @@
 		{{ end }}
 	  </ul>
 	</div>
-  </div>
+    <div class="pure-u-1-24 pure-u-md-1-6"></div>
 </div>
 
 {{ partial "footer.html" . }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 2ba2acc..8369073 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,38 +1,39 @@
 {{ partial "header.html" . }}
 {{ partial "navbar.html" . }}
 
-<div class="container post-wrapper">
-  <div class="row">
-	<div class="eight columns offset-by-two">
-	  <div id="post-title">
-		<p class="footnote">
-		  <!--<time class="pull-right post-list">{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}</time>-->
-		  <time class="">{{ .Date.Format "2006-01-02" }}</time>
-		  {{ $baseurl := .Site.BaseUrl }}
-		  {{ if or .Params.tags .Params.categories .Params.series }}
-		  |
-		  {{ end }}
-		  {{ if isset .Params "tags" }}
-		  tags:{{ range .Params.tags }}<a href="{{ $baseurl }}/tags/{{ . | urlize }}">{{ . }}</a> {{ end }}
-		  {{ end }}
+<div class="pure-g">
+    <div class="pure-u-1-24 pure-u-md-5-24"></div>
+	<div class="pure-u-11-12 pure-u-md-5-8">
+        <div class="post">
 
-		  {{ if isset .Params "categories" }}
-		  categories:{{ range .Params.categories }}<a href="{{ $baseurl }}/categories/{{ . | urlize }}">{{ . }}</a> {{ end }}
-		  {{ end }}
+            <div class="post-title">
+                <p class="footnote">
+                    <time class="">{{ .Date.Format "2006-01-02" }}</time>
+		            {{ $baseurl := .Site.BaseUrl }}
+                    {{ if or .Params.tags .Params.categories .Params.series }}
+                    |
+                    {{ end }}
+                    {{ if isset .Params "tags" }}
+                    tags:{{ range .Params.tags }}<a href="{{ $baseurl }}tags/{{ . | urlize }}">{{ . }}</a> {{ end }}
+                    {{ end }}
 
-		  {{ if isset .Params "series" }}
-		  series:{{ range .Params.series }}<a href="{{ $baseurl }}/series/{{ . | urlize }}">{{ . }}</a> {{ end }}
-		  {{ end }}
+                    {{ if isset .Params "categories" }}
+                    categories:{{ range .Params.categories }}<a href="{{ $baseurl }}categories/{{ . | urlize }}">{{ . }}</a> {{ end }}
+                    {{ end }}
 
-		</p>
-		<h5>{{ .Title }}</h5>
-	  </div>
+                    {{ if isset .Params "series" }}
+                    series:{{ range .Params.series }}<a href="{{ $baseurl }}series/{{ . | urlize }}">{{ . }}</a> {{ end }}
+                    {{ end }}
+                </p>
+                <h1>{{ .Title }}</h1>
+            </div>
 
-	  <div class="post">
-		{{ .Content }}
-	  </div>
+            <div class="post-content">
+                {{ .Content }}
+            </div>
+        </div>
 	</div>
-  </div>
+    <div class="pure-u-1-24 pure-u-md-1-6"></div>
 </div>
 
 {{ partial "footer.html" . }}
diff --git a/layouts/index.html b/layouts/index.html
index 889845a..5795119 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -2,10 +2,10 @@
 {{ partial "navbar.html" . }}
 
 
-<div class="container away">
-  <div class="row">
-	<div class="eight columns offset-by-two">
-	  <p style="margin-bottom:1em;font-weight:bold;color:#333">Recent posts:</p>
+<div class="pure-g">
+    <div class="pure-u-1-24 pure-u-md-5-24"></div>
+	<div class="pure-u-11-12 pure-u-md-5-8">
+	  <p class="posts-name">Recent posts:</p>
 
 	  <ul class="posts">
 		{{ $baseurl := .Site.BaseUrl }}
@@ -15,22 +15,22 @@
 		  <a href="{{ .Permalink }}">{{ $page.Title }}</a>
 
 		  <p class="footnote">
-			submitted <time datetime="{{ $page.Date.Format "2006-01-02T15:04:05Z07:00" }}" class="pull-right post-list timeago">{{ $page.Date.Format "2006-01-02T15:04:05Z07:00" }}</time>
+			submitted <time datetime="{{ $page.Date.Format "2006-01-02T15:04:05Z07:00" }}" class="post-list timeago">{{ $page.Date.Format "2006-01-02T15:04:05Z07:00" }}</time>
 
 			{{ if or $page.Params.tags $page.Params.categories $page.Params.series }}
 			to
 			{{ end }}
 
 			{{ with $page.Params.tags }}
-			tags:[ {{ range $page.Params.tags}}<a href="{{ $baseurl }}/tags/{{ . | urlize }}">{{ . }}</a> {{ end }}]
+			tags:[ {{ range $page.Params.tags}}<a href="{{ $baseurl }}tags/{{ . | urlize }}">{{ . }}</a> {{ end }}]
 			{{ end }}
 
 			{{ with $page.Params.categories }}
-			categories:[ {{ range $page.Params.categories }}<a href="{{ $baseurl }}/categories/{{ . | urlize }}">{{ . }}</a> {{ end }}]
+			categories:[ {{ range $page.Params.categories }}<a href="{{ $baseurl }}categories/{{ . | urlize }}">{{ . }}</a> {{ end }}]
 			{{ end }}
 
 			{{ with $page.Params.series }}
-			series:[ {{ range $page.Params.series }}<a href="{{ $baseurl }}/series/{{ . | urlize }}">{{ . }}</a> {{ end }}]
+			series:[ {{ range $page.Params.series }}<a href="{{ $baseurl }}series/{{ . | urlize }}">{{ . }}</a> {{ end }}]
 			{{ end }}
 
 		  </p>
@@ -39,7 +39,7 @@
 		{{ end }}
 	  </ul>
 	</div>
-  </div>
+    <div class="pure-u-1-24 pure-u-md-1-6"></div>
 </div>
 
 {{ partial "footer.html" . }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index bbd044e..79c2604 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,8 +1,7 @@
-<div class="footer">
-  <div class="container">
-	<div class="row">
-	  <div class="ten columns offset-by-two">
-		<p class="footnote">
+<div class="footer pure-g">
+    <div class="pure-u-1-24 pure-u-md-5-24"></div>
+    <div class="pure-u-11-12 pure-u-md-5-8">
+        <p class="footnote">
 		  {{ if .Site.Copyright }}
 		  {{ .Site.Copyright }}
 		  {{ else }}
@@ -30,25 +29,27 @@
 		  {{ end }}
 		</p>
 	  </div>
-	</div>
-  </div>
+      <div class="pure-u-1-24 pure-u-md-1-6"></div>
 </div>
 
 
-<script src="{{ .Site.BaseUrl }}/js/jquery.min.js" type="text/javascript"></script>
-<script src="{{ .Site.BaseUrl }}/js/jquery.timeago.js" type="text/javascript"></script>
+<script src="{{ .Site.BaseUrl }}js/jquery.min.js" type="text/javascript"></script>
+<script src="{{ .Site.BaseUrl }}js/jquery.timeago.js" type="text/javascript"></script>
 <script type="text/javascript">
   $(function(){
     $("time.timeago").timeago();
   })
-  $("#menu").click(function(){
-    $(".brand").text("HOME");
-    $(".navbar ul li").removeClass("cate");
-    $(".navbar").toggle();
+  $("#toggle-btn").click(function(){
+    $("#toggle-content").toggle();
+    if($(this).html() === "☰") {
+        $(this).html("X")
+    } else {
+        $(this).html("☰")
+    }
   });
   $(window).resize(function(){
     if(window.innerWidth > 768) {
-      $(".navbar").removeAttr("style");
+      $(".desktop").removeAttr("style");
     }
   });
 </script>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index bcc5ecd..e3507be 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -12,19 +12,25 @@
 
   <!-- FONT –––––––––––––––––––––––––––––––––––––––––––––––––– -->
   <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
+  <link rel="stylesheet" href="{{ .Site.BaseUrl }}css/fonts.css">
+  
   <!-- CSS –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-  <link rel="stylesheet" href="{{ .Site.BaseUrl }}/css/fonts.css">
-  <link rel="stylesheet" href="{{ .Site.BaseUrl }}/css/normalize.css">
-  <link rel="stylesheet" href="{{ .Site.BaseUrl }}/css/skeleton.css">
-  <link rel="stylesheet" href="{{ .Site.BaseUrl }}/css/custom.css">
+  <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
+  <!--[if lte IE 8]>
+    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
+<![endif]-->
+<!--[if gt IE 8]><!-->
+    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
+<!--<![endif]-->
+  <link rel="stylesheet" href="{{ .Site.BaseUrl }}css/custom.css">
 
-  <!--- highlight js ------------------------------------------------------------->
+  <!--- highlight js -->
   {{ if .Site.Params.highlight }}
-  <link rel="stylesheet" href="{{ .Site.BaseUrl }}/highlight/styles/{{ .Site.Params.highlight }}.css">
+  <link rel="stylesheet" href="{{ .Site.BaseUrl }}highlight/styles/{{ .Site.Params.highlight }}.css">
   {{ else }}
-  <link rel="stylesheet" href="{{ .Site.BaseUrl }}/highlight/styles/default.css">
+  <link rel="stylesheet" href="{{ .Site.BaseUrl }}highlight/styles/default.css">
   {{ end }}
-  <script src="{{ .Site.BaseUrl }}/highlight/highlight.pack.js"></script>
+  <script src="{{ .Site.BaseUrl }}highlight/highlight.pack.js"></script>
   <script>hljs.initHighlightingOnLoad();</script>
 
 </head>
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index 9f0cb06..296e810 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -1,23 +1,64 @@
+<!--
 <header id="menu">
-  <div class="container">
-	<span class="logo">{{ .Site.Title }}</span>
-	<a>&#9776;</a>
+  <div class="pure-g">
+      <div class="pure-u-1-24"></div>
+      <div class="pure-u-11-12">
+          <span class="logo">{{ .Site.Title }}</span>
+	      <a>&#9776;</a>
+      </div>
+      <div class="pure-u-1-24"></div>
   </div>
 </header>
 
 <nav class="navbar">
-  <div class="container">
-	<div class="row">
-	  <div class="eight columns offset-by-two">
+  <div class="pure-g">
+      <div class="pure-u-1-24 pure-u-md-1-6"></div>
+	  <div class="pure-u-11-12 pure-u-md-2-3">
 		<ul class="">
 		  {{ $burl := .Site.BaseUrl }}
-		  <li class="u-pull-left"> <a href="{{ $burl }}" class="brand" style="font-weight:bold;font-size:normal"> {{ .Site.Title }} </a></li>
-		  <li class="u-pull-right cate"> <a href="{{ $burl }}/about/" class=""> About </a></li>
+		  <li class=""> <a href="{{ $burl }}" class="brand" style="font-weight:bold;font-size:normal"> {{ .Site.Title }} </a></li>
+		  <li class="pull-right cate"> <a href="{{ $burl }}about/" class=""> About </a></li>
 		  {{ range $name, $pages := .Site.Taxonomies.categories }}
-		  <li class="u-pull-right cate"> <a href="{{ $burl }}/categories/{{ $name | urlize }}" class=""> {{ $name | title }} </a></li>
+		  <li class="pull-right cate"> <a href="{{ $burl }}categories/{{ $name | urlize }}" class=""> {{ $name | title }} </a></li>
 		  {{ end }}
 		</ul>
 	  </div>
-	</div>
+      <div class="pure-u-1-24 pure-u-md-1-6"></div>
   </div>
 </nav>
+-->
+<div class="header pure-g">
+    <div class="pure-u-1-24 pure-u-md-5-24"></div>
+    <div class="pure-u-11-12 pure-u-md-5-8">
+        <div class="desktop pure-menu pure-menu-horizontal nav-menu">
+            {{ $baseurl := .Site.BaseUrl }}
+            <a href="/" class="site-title pure-menu-heading">{{ .Site.Title }}</a>
+            <ul class="pure-menu-list">
+                {{ range $name,$page := .Site.Taxonomies.categories }}
+                <li class="pure-menu-item">
+                    <a href="{{ $baseurl }}categories/{{ $name | urlize }}" class="pure-menu-link">{{ $name | title }}</a>
+                </li>
+                {{ end }}
+                <li class="pure-menu-item">
+                    <a href="{{ $baseurl }}about/" class="pure-menu-link">About</a>
+                </li>
+            </ul>
+        </div>
+        <div class="mobile pure-menu nav-menu">
+            <a href="/" class="pure-menu-heading" id="toggle-home">{{ .Site.Title }}</a>
+            <a href="#" id="toggle-btn">&#9776;</a>
+            <ul class="pure-menu-list" id="toggle-content" style="display:none;">
+                {{ $baseurl := .Site.BaseUrl }}
+                {{ range $name,$page := .Site.Taxonomies.categories }}
+                <li class="pure-menu-item">
+                    <a href="{{ $baseurl }}categories/{{ $name | urlize }}" class="pure-menu-link">{{ $name | title }}</a>
+                </li>
+                {{ end }}
+                <li class="pure-menu-item">
+                    <a href="{{ .Site.BaseUrl }}about" class="pure-menu-link">About</a>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <div class="pure-u-1-24 pure-u-md-1-6"></div>
+</div>
diff --git a/static/css/custom.css b/static/css/custom.css
index 88b3df1..bcc5d61 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -1,7 +1,8 @@
+/*
 footer {
 	display:block;
 }
-
+*/
 html {
 	min-height:100%;
 	width:100%;
@@ -10,59 +11,54 @@ html {
 
 body {
 	background-color: rgb(249,249,249);
+	color: #484848;
 }
 
-.navbar {
-	top:0;
-	left:0;
-	display:block;
-	border-bottom: 1px solid #eee;
-	margin-bottom:10px;
-	height:2em;
-	width:100%;
+.nav-menu {
+	box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
 }
 
-.navbar ul {
-	list-style-type:none;
-	display: block;
-	margin:0;
-	padding:0;
-	overflow:hidden;
-	height:100%;
+.header {
+	text-align: left;
+	max-height: 2em;
+	color: #484848;
+	margin-bottom: 2em;
 }
 
-.navbar li {
-	display: inline-block;
-	position: relative;
-	margin-right:10px;
-	margin-bottom: 0;
-	top:50%;
-	-webkit-transform: translateY(-50%);
-	-ms-transform: translateY(-50%);
-	transform: translateY(-50%);
+.header .desktop ul {
+	float: right;
 }
 
-.navbar a {
-	color:#333;
-	text-transform:uppercase;
-	text-decoration:none;
-	font-size:bold;
+.header ul li a {
+	font-weight: bold;
+	color: #484848;
+	font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
-.brand {
-	font-weight:bold;
-	font-size:normal !important;
+.header .site-title {
+	font-weight: bold;
+	color: #484848;
+	font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
-.cate {
-	font-weight:bold;
-	font-size:small;
+.pull-right {
+	float: right;
 }
 
+.posts-name {
+	text-transform: capitalize;
+	font-weight: bold;
+	font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
 
 .posts {
 	font-family: verdana,arial,helvetica,sans-serif;
 	list-style-type:none;
+	padding-left: 1em;
+}
+
+.posts-name {
+	padding-left: 1em;
 }
 
 .posts li a {
@@ -98,14 +94,23 @@ body {
 }
 
 .post {
-	z-index:9;
-	display:block;
 	font-family: proxima-nova,"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
 	color:#484848;
+	letter-spacing:normal;
+	padding-left: 0.5em;
+	padding-right: 0.5em;
+}
+
+.post h1,h2,h3,h4,h5,h6 {
+	font-weight: bold;
+	letter-spacing:normal;
+}
+
+.post-content {
+	z-index:9;
 	overflow:auto;
 	padding:0;
 	padding-bottom:1em;
-	padding-top:1em;
 	font-size:16px;
 	line-height:25px;
 }
@@ -122,115 +127,72 @@ body {
 
 .post h1 {
 	font-size:28px;
-	font-weight: bold;
-	color:#2d2d2d;
-	letter-spacing:normal;
 }
 
 .post h2 {
 	font-size:25px;
-	font-weight: bold;
-	color:#2d2d2d;
-	letter-spacing:normal;
 }
 
 .post h3 {
 	font-size:23px;
-	font-weight: bold;
-	color:#2d2d2d;
-	letter-spacing:normal;
 }
 
 .post h4 {
 	font-size:21px;
-	font-weight: boldl;
-	color:#2d2d2d;
-	letter-spacing:normal;
 }
 
 .post h5 {
 	font-size:19px;
-	font-weight: bold;
-	color:#2d2d2d;
-	letter-spacing:normal;
 }
 
 .post h6 {
 	font-size:18px;
-	font-weight: bold;
-	color:#2d2d2d;
-	letter-spacing:normal;
 }
 
-.away {
-	margin-top:2em;
-}
-
-
-.post-wrapper {
-	margin-top:2em;
+.post-title{
+		margin-top: 1em;
+		margin-bottom: 1em;
 }
 
-#post-title h5 {
+.post-title h1 {
 	font-weight:bold;
-	font-family: proxima-nova, 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
-	color:#2d2d2d;
-	font-size:35px;
-	letter-spacing:normal;
+	font-size:39px;
+	line-height: 40px;
+	margin-top: 0;
+	margin-bottom: 0;
 }
 
 
 @media screen and (max-width:767px){
-	.navbar {
-		display:none;
-		overflow:visible;
-		height:auto;
-	}
-
-	.navbar li {
-		width:100%;
-		clear:both;
-		margin-bottom:5px;
-		margin-right:0;
-		transform: translateY(0);
-		-webkit-transform: translateY(0);
-		-ms-transform: translateY(0);
-	}
-
-	.navbar ul {
-		height:auto;
-		overflow:auto;
+	.desktop {
+		display: none;
 	}
-
-	.navbar .brand {
-		font-weight:normal !important;
+	.mobile {
+		display: block;
 	}
-
-	#menu {
-		text-align:center;
-		display:block;
-		padding:0;
-		margin-bottom:10px;
-		height:1.5em;
-		padding-bottom:4px;
-		border-bottom: 1px solid #eee;
+	#toggle-btn {
+		display: inline-block;
+		float: right;
+		padding: .5em 1em;
+		text-decoration: none;
+		color: #484848;
+		font-weight: bold;
 	}
-
-	#menu a {
-		float:right;
-		cursor:pointer;
-		font-size:large;
+	#toggle-content li {
+		clear: both;
+		height: auto;
+		background-color: rgb(249,249,249);
 	}
-
-	#menu span {
-		float:left;
-		text-transform:uppercase;
-		font-weight:bold;
+	#toggle-home {
+		display: inline-block;
 	}
 }
 
 @media screen and (min-width:768px){
-	#menu {
+	.mobile {
 		display:none;
 	}
+	.desktop {
+		display: block;
+	}
 }
diff --git a/static/css/normalize.css b/static/css/normalize.css
deleted file mode 100644
index 81c6f31..0000000
--- a/static/css/normalize.css
+++ /dev/null
@@ -1,427 +0,0 @@
-/*! 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/static/css/skeleton.css b/static/css/skeleton.css
deleted file mode 100644
index f28bf6c..0000000
--- a/static/css/skeleton.css
+++ /dev/null
@@ -1,418 +0,0 @@
-/*
-* 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) {}