Switched to proper Greyshade theme instead of the previous manual setup

sass/_greyshade.scss

@@ -0,0 +1,270 @@
+//This is the main GREYSHADE css file. 
+
+body {
+	background: #3D4349;
+	font-family: "Open Sans", "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;
+}
+
+::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 {
+	.credit-box {
+		color: #AAA;
+		font-size: .8em;
+		position: fixed;
+		bottom: 20px;
+		left: 40px;
+		a {
+			color: inherit;
+			text-decoration: underline;
+		}
+	}
+	.mid-col {
+		float: right;
+		width: 77%;
+		background: whitesmoke;
+		.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/custom/_colors.scss

@@ -41,3 +41,4 @@ $solarized: light;
 //$pre-bg: $base03;
 //$pre-border: darken($base02, 5);
 //$pre-color: $base1;
+$greyshade: #258FB8;

sass/custom/_styles.scss

@@ -1,128 +1,6 @@
 // This File is imported last, and will override other styles in the cascade
 // Add styles here to make changes without digging in too much
 
-
-body {
-	background: #3D4349;
-	font-family: "Open Sans", "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;
-}
-
-#header {
-	height: auto;
-	border-bottom: none;
-
-	#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 {
-	.mid-col {
-		float: right;
-		width: 77%;
-		background: whitesmoke;
-		.mid-col-container {
-			padding: 0px 70px 0px 40px;
-			#content {
-				width: 100%;
-				article {
-					border-top: none;
-					.title {
-						margin-left: 0px;
-					}
-					.entry-content {
-						margin-left: 0px;
-					}
-					.meta {
-						position: relative;
-						float: right;
-						top: 0px;
-						color: #555;
-						.date::before {
-							color: #555;
-						}
-						.tags::before {
-							color: #555;
-						}
-					}
-					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: #258FB8;
-							-webkit-transition: color 0.3s;
-							-moz-transition: color 0.3s;
-							-o-transition: color 0.3s;
-							transition: color 0.3s;	
-						}
-					}
-				}
-			}
-		}
-		footer {
-			width: 100%;
-		}
-	}
-	.left-col {
-		width: 15%;
-		position: fixed;
-		#header {
-			width: 100%;
-			padding: 20% 0% 0% 20%;
-			a {
-				color: #EFEFEF;
-				text-shadow: 0 1px #333;
-			}
-			a:hover {
-				color: #258FB8;
-			}
-			#sub-nav {
-				.search::before {
-				left: 10px;
-				}
-				.social {
-					margin-bottom: 10px;
-				}
-			}
-		}
-	}
-}
-
 .archives {
 	.title {
 		font-size: 1.2em;

sass/parts/_syntax.scss

@@ -121,7 +121,6 @@ figure.code{
 	td.code{
 		width: 100%;
 		padding-left: 15px;
-		overflow-x: auto;
 	}
 }
 .entry-content .gist{

sass/screen.scss

@@ -5,6 +5,8 @@
 @import "plugins";
 
 @import "custom/colors";
+@import "greyshade";
+
 @import "custom/fonts";
 @import "custom/layout";
 @import "custom/styles";

source/_includes/archive_post.html

@@ -8,12 +8,13 @@
 	<section class="archives"><h1 class="year">{{ date | date: "%Y" }}</h1>
 {% endunless %}
 <article>
-	<h1 class="title"><a href="{{ root_url }}{{ post.url }}">{{post.title}}</a></h1>
 	<div class="meta">
 		<span class="date">{{ date | date: "%b %e" }}</span>
+		<br>
 		<span class="tags">{% include post/categories.html %}</span>
 	    {% if site.disqus_short_name and post.comments == true and site.disqus_show_comment_count == true %}
 	    <span class="comments"><a href="{{ root_url }}{{ post.url }}#disqus_thread">Comments</a></span>
 	    {% endif %}
 	</div>
+	<h1 class="title"><a href="{{ root_url }}{{ post.url }}">{{post.title}}</a></h1>
 </article>

source/_includes/article.html

@@ -3,7 +3,7 @@
 		<div class="date">{% include post/date.html %}{{ time }}</div>
 		<div class="tags">{% include post/categories.html %}</div>
 		{% if site.disqus_short_name and site.disqus_show_comment_count == true %}
-			<span class="comments"><a href="{{ root_url }}{{ post.url }}{{ page.url }}#disqus_thread">Comments</a></span>
+			<span class="comments"><a href="{{ root_url }}{{ post.url }}#disqus_thread">Comments</a></span>
 		{% endif %}
 	</div>
 	<h1 class="title"><a href="{{ root_url }}{{ post.url }}">{% if site.titlecase %}{{ post.title | titlecase }}{% else %}{{ post.title }}{% endif %}</a></h1>

source/_includes/footer.html

@@ -1 +1,2 @@
 {% include custom/footer.html %}
+Design credit: <a href="http://shashankmehta.in/archive/2012/greyshade.html">Shashank Mehta</a>

source/_includes/head.html

@@ -8,13 +8,20 @@
 	{% capture description %}{% if page.description %}{{ page.description }}{% else %}{{ content | raw_content }}{% endif %}{% endcapture %}
 	<meta name="description" content="{{ description | strip_html | condense_spaces | truncate:150 }}">
 	{% if page.keywords %}<meta name="keywords" content="{{ page.keywords }}">{% endif %}
-	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+  <!-- http://t.co/dKP3o1e -->
+  <meta name="HandheldFriendly" content="True">
+  <meta name="MobileOptimized" content="320">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
 
 	<link href="{{ site.subscribe_rss }}" rel="alternate" title="{{site.title}}" type="application/atom+xml">
+	{% capture canonical %}{{ site.url }}{% if site.permalink contains '.html' %}{{ page.url }}{% else %}{{ page.url | remove:'index.html' }}{% endif %}{% endcapture %}
 	<link rel="canonical" href="{{ canonical }}">
 	<link href="{{ root_url }}/favicon.png" rel="shortcut icon">
 	<link href="{{ root_url }}/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
 	<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
 	{% include custom/head.html %}
+	{% include google_analytics.html %}
 </head>

source/_includes/header.html

@@ -1,19 +1,10 @@
-<img src="/images/dp.jpg" alt="WatchOut!" style="width: 160px;">
+<div class="profilepic">	
+	<img src="/images/dp.jpg" alt="Profile Picture" style="width: 160px;">
+</div>
 <h1><a href="{{ root_url }}/">{{ site.title }}</a></h1>
+<p class="subtitle">{{ site.subtitle }}</p>
 <nav id="main-nav">{% include navigation.html %}</nav>
-<br/>
+<nav id="sub-nav">
-<h3 class="alignleft">{{ site.subtitle }}</h3>
-<nav id="mobile-nav">
-	<div class="alignleft menu">
-		<a class="button">Menu</a>
-		<div class="container">{% include navigation.html %}</div>
-	</div>
-	<br/>
-	<div class="alignright search">
-		<a class="button"></a>
-	</div>
-</nav>
-<nav id="sub-nav" class="alignright">
 	<div class="social">
 		{% if site.facebook_user %}
 		<a class="facebook" href="http://www.facebook.com/{{ site.facebook_user }}" title="Facebook">Facebook</a>

source/_layouts/default.html

@@ -3,6 +3,11 @@
 
 <body>
 	<div class="container">
+		<div class="left-col">
+			<div class="intrude-less">
+			<header id="header" class="inner">{% include header.html %}</header>				
+			</div>
+		</div>	
 		<div class="mid-col">
 			{% unless page.banner == false %}
 				{% include banner.html %}
@@ -13,9 +18,6 @@
 			<footer id="footer" class="inner">{% include footer.html %}</footer>
 			{% include after_footer.html %}
 		</div>
-		<div class="left-col">
-			<header id="header" class="inner">{% include header.html %}</header>				
-		</div>	
 	</div>
 </body>
 </html>