New theme and updated tags

Gemfile.lock

@@ -26,7 +26,7 @@ GEM
       maruku (~> 0.5)
     kramdown (0.13.7)
     liquid (2.3.0)
-    maruku (0.6.0)
+    maruku (0.6.1)
       syntax (>= 1.0.0)
     posix-spawn (0.3.6)
     pygments.rb (0.2.13)

sass/_base.scss

@@ -1,5 +1,5 @@
-@import "base/utilities";
-@import "base/solarized";
-@import "base/theme";
-@import "base/typography";
+@import "base/color";
+@import "base/font";
 @import "base/layout";
+@import "base/typography";
+@import "base/utilities";

sass/_greyshade.scss

@@ -0,0 +1,293 @@
+//This is the main GREYSHADE css file.
+
+$greyshade: #51618e;
+
+html {
+  height: 100%;
+}
+
+body {
+	background: #596B87;
+	font-family: "Open Sans", "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;
+	height: 100%;
+}
+
+::selection, ::-moz-selection, ::-webkit-selection {
+  background-color: $greyshade;
+  color: $color-background;
+}
+
+#header {
+	height: auto;
+	border-bottom: none;
+	.subtitle {
+		color: #999;
+		font-style: italic;
+	}
+	#sub-nav {
+		float: none;
+		position: relative;
+		.social {
+			float: none;
+		}
+		.search {
+			float: none;
+			.alignright {
+				float: none;
+			}
+		}
+	}
+
+	h1 {
+		float: none;
+	}
+
+	#main-nav {
+		float: none;
+		margin-left: 0px;
+
+		ul {
+			li {
+				margin-left: 0px;
+				display: block;
+				a {
+					padding: 0px 0px;
+				}
+			}
+		}
+	}
+}
+
+.container {
+  position: relative;
+  min-height: 100%;
+
+	.credit-box {
+		color: #AAA;
+		font-size: .8em;
+		position: fixed;
+		bottom: 20px;
+		left: 40px;
+		a {
+			color: inherit;
+			text-decoration: underline;
+		}
+	}
+	.mid-col {
+		position: absolute;
+  	right: 0;
+  	min-height: 100%;
+		width: 77%;
+		background: whitesmoke;
+		#banner {
+			width: 100%;
+			small {
+			margin-right: 70px;
+			}
+		}
+		footer.inner {
+		  text-align: center;
+		  margin: 0px 70px 0px 40px;
+		  width: auto;
+		}
+		.mid-col-container {
+			padding: 0px 70px 0px 40px;
+			#content {
+				width: 100%;
+				article {
+					border-top: none;
+					.title {
+						margin-left: 0px;
+					}
+					.entry-content {
+						margin-left: 0px;
+						.gist .gist-file .gist-data {
+							.line_numbers {
+								line-height: inherit;
+							}
+							pre {
+								line-height: inherit;
+							}
+						}
+						h2 {
+							font-size: 1.3em;
+							color: #574C4C;
+							border-bottom: none;
+						}
+						h2::before {
+							border-bottom: none;
+						}
+						blockquote {
+							border-left: 5px solid $greyshade;
+							background: #FCFCFC;
+						}
+						table {
+							line-height: 1.2em;
+							td {
+								text-align: left;
+							}
+						}
+					}
+					.meta {
+						position: relative;
+						float: right;
+						top: 0px;
+						color: #555;
+						text-align: right;
+						width: auto;
+						.date::before {
+							color: #555;
+							position: relative;
+							margin-right: 10px;
+						}
+						.tags::before {
+							color: #999;
+							position: relative;
+							margin-right: 10px;
+						}
+					}
+					h1.title{
+						a {
+							color: #333;
+							-webkit-transition: color 0.3s;
+							-moz-transition: color 0.3s;
+							-o-transition: color 0.3s;
+							transition: color 0.3s;
+						}
+						a:hover {
+							color: $greyshade;
+							-webkit-transition: color 0.3s;
+							-moz-transition: color 0.3s;
+							-o-transition: color 0.3s;
+							transition: color 0.3s;
+						}
+					}
+				}
+			}
+		}
+		footer {
+			width: 100%;
+		}
+	}
+	.left-col:hover {
+		opacity: 1;
+	}
+	.left-col {
+		width: 23%;
+		position: fixed;
+		opacity: .3;
+		-webkit-transition: all .2s ease-in;
+		-moz-transition: all .2s ease-in;
+		-o-transition: all .2s ease-in;
+		-ms-transition: all .2s ease-in;
+		transition: all .2s ease-in;
+		height: 100%;
+		.intrude-less {
+			width: 80%;
+		}
+		#header {
+			width: 100%;
+			padding: 20% 0% 0% 15%;
+			#main-nav {
+				margin-top: 10px;
+			}
+			.profilepic {
+				img {
+					border-radius: 50%;
+					-moz-border-radius: 50%;
+					-webkit-border-radius: 50%;
+				}
+			}
+			a {
+				color: #EFEFEF;
+				text-shadow: 0 1px #333;
+			}
+			a:hover {
+				color: $greyshade;
+			}
+			#sub-nav {
+				margin-top: 10px;
+				.search::before {
+				left: 10px;
+				}
+				.social {
+					margin-bottom: 10px;
+				}
+			}
+		}
+	}
+}
+
+.archives {
+	.title {
+		font-size: 1.2em;
+	}
+	article {
+		.meta {
+			line-height: 1.5em;
+			margin-top: 0;
+			span::before {
+				padding-right: 0;
+			}
+		}
+	}
+}
+
+a {
+	color: $greyshade;
+}
+
+a:hover {
+	color: $greyshade;
+}
+
+body {
+	@media screen and (max-width: 1040px){
+			margin: 0 0;
+	}
+}
+@media screen and (max-width: 700px){
+	.container {
+		.credit-box {
+			display: none;
+		}
+		.left-col {
+			position: relative;
+			width: 100%;
+			opacity: 1;
+			.intrude-less {
+				margin: auto auto;
+			}
+			#header {
+				padding: 40px 0px;
+				text-align: center;
+				#sub-nav{
+					display: block;
+				}
+				#main-nav {
+						ul {
+							display: block;
+							li {
+								display: inline;
+								margin-right: 10px;
+							}
+						}
+				}
+			}
+		}
+		.mid-col {
+			float: none;
+			width: 100%;
+			.mid-col-container {
+				padding: 15px 15px;
+				#content {
+					article {
+						.meta {
+							float: none;
+						}
+					}
+				}
+			}
+		}
+	}
+}

sass/_parts.scss

@@ -0,0 +1,9 @@
+@import "parts/header";
+@import "parts/index";
+@import "parts/article";
+@import "parts/post";
+@import "parts/archive";
+@import "parts/comment";
+@import "parts/footer";
+@import "parts/syntax";
+@import "parts/twitter";

sass/_plugins.scss

@@ -0,0 +1 @@
+@import "plugins/fancybox";

sass/base/_color.scss

@@ -0,0 +1,7 @@
+$color-background: #eee;
+$color-main: #258fb8;
+$color-gray01: #666;
+$color-gray02: #999;
+$color-gray03: #ccc;
+$color-gray04: #ddd;
+$color-gray05: #fff;

sass/base/_font.scss

@@ -0,0 +1,17 @@
+$font-default: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
+
+$font-icon: FontAwesome;
+$font-icon-path: "/font/fontawesome-webfont";
+
+@font-face {
+	font-family: 'FontAwesome';
+	src: url('#{$font-icon-path}.eot');
+	src: url('#{$font-icon-path}.eot?#iefix') format('embedded-opentype'),
+		url('#{$font-icon-path}.woff') format('woff'),
+		url('#{$font-icon-path}.ttf') format('truetype'),
+		url('#{$font-icon-path}.svgz#FontAwesomeRegular') format('svg'),
+		url('#{$font-icon-path}.svg#FontAwesomeRegular') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}