responsive layout

10 files changed, 173 insertions, 45 deletions

diff --git a/sass/base/_layout.scss b/sass/base/_layout.scss
index 1d11880..24c67d8 100644
--- a/sass/base/_layout.scss
+++ b/sass/base/_layout.scss
@@ -62,4 +62,19 @@ a{
 .inner{
 	width: $max-width;
 	margin: 0 auto;
+}
+
+@media screen and (max-width: 1030px){
+	body{
+		margin: 0 30px;
+	}
+	.inner{
+		width: 100%;
+	}
+}
+
+@media screen and (max-width: 600px){
+	body{
+		font-size: 13px;
+	}
 }
\ No newline at end of file
diff --git a/sass/parts/_archive.scss b/sass/parts/_archive.scss
index ad96dc2..037e92a 100644
--- a/sass/parts/_archive.scss
+++ b/sass/parts/_archive.scss
@@ -20,7 +20,6 @@ section.archive{
 	}
 	h1.archive-title{
 		font-size: 25px;
-		font-weight: 300;
 		line-height: 35px;
 		width: 200px;
 		position: absolute;
@@ -37,8 +36,13 @@ section.archive{
 	}
 	article.archive{
 		margin-left: 200px;
+		h1{
+			margin-bottom: 0;
+		}
 		.meta{
 			color: $font-meta;
+			line-height: 2;
+			margin-top: 15px;
 			span{
 				margin-right: 30px;
 				padding-left: 30px;
@@ -62,4 +66,29 @@ section.archive{
 			}
 		}
 	}
+}
+
+@media screen and (max-width: 600px){
+	section.archive{
+		h1.archive-title{
+			position: relative;
+			width: 100%;
+			& + article.archive{
+				border-top: none;
+				h1{
+					padding-top: 15px;
+				}
+			}
+		}
+		article.archive{
+			margin-left: 0;
+			padding: 15px 0;
+			h1{
+				font-size: 20px;
+			}
+			.meta{
+				display: none;
+			}
+		}
+	}
 }
\ No newline at end of file
diff --git a/sass/parts/_article.scss b/sass/parts/_article.scss
index 4423eee..c5c7719 100644
--- a/sass/parts/_article.scss
+++ b/sass/parts/_article.scss
@@ -99,4 +99,19 @@ article{
 .share{
 	padding: 15px 0;
 	@include border-shadow();
+}
+
+@media screen and (max-width: 800px){
+	article{
+		padding-bottom: 15px;
+	}
+}
+
+@media screen and (max-width: 600px){
+	article{
+		padding: 15px 0;
+		h1.title{
+			font-size: 20px;
+		}
+	}
 }
\ No newline at end of file
diff --git a/sass/parts/_footer.scss b/sass/parts/_footer.scss
index b713b8e..2df695f 100644
--- a/sass/parts/_footer.scss
+++ b/sass/parts/_footer.scss
@@ -1,6 +1,6 @@
 footer{
-	padding: 30px 0;
+	padding: 15px 0;
 	border-top: 1px solid $light-shadow;
 	text-align: center;
-	font-size: 13px;
+	font-size: 12px;
 }
\ No newline at end of file
diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss
index 739372e..a11ff44 100644
--- a/sass/parts/_header.scss
+++ b/sass/parts/_header.scss
@@ -17,10 +17,8 @@ header{
 	nav{
 		margin-left: 30px;
 		>ul{
-			list-style: none;
-			padding-right: 30px;
 			>li{
-				float: left;
+				display: inline-block;
 				margin-left: 50px;
 				position: relative;
 				&:hover{
@@ -142,4 +140,53 @@ header{
 			}
 		}
 	}
+}
+
+@media screen and (max-width: 1030px){
+	header{
+		height: auto;
+		position: relative;
+		padding-bottom: 10px;
+		h1{
+			float: none !important;
+		}
+		nav{
+			margin-left: 0;
+			margin-top: 15px;
+			float: none !important;
+			>ul{
+				>li{
+					margin-left: 0;
+					margin-right: 50px;
+					&:last-of-type{
+						margin-right: 0;
+					}
+				}
+				ul{
+					top: 40px;
+				}
+			}
+		}
+		>.right{
+			position: absolute;
+			top: 30px;
+			right: 0;
+		}
+	}
+}
+
+@media screen and (max-width: 600px){
+	header{
+		.social{
+			display: none;
+		}
+		.search{
+			input[type="text"]{
+				width: 60px;
+				&:focus, &:active{
+					width: 100px;
+				}
+			}
+		}
+	}
 }
\ No newline at end of file
diff --git a/sass/parts/_post.scss b/sass/parts/_post.scss
index b27b4c7..aeaa52a 100644
--- a/sass/parts/_post.scss
+++ b/sass/parts/_post.scss
@@ -29,4 +29,21 @@
 			background: image-url('comments.png') 0 center no-repeat;
 		}
 	}
+}
+
+@media screen and (max-width: 800px){
+	.post{
+		h1.title, .entry{
+			margin-left: 0;
+		}
+		.meta{
+			margin-top: 15px;
+			position: static;
+			width: auto;
+			.date, .tags, .comments{
+				display: inline-block;
+				margin-right: 30px;
+			}
+		}
+	}
 }
\ No newline at end of file
diff --git a/sass/parts/_syntax.scss b/sass/parts/_syntax.scss
index f3e493a..efdc01f 100644
--- a/sass/parts/_syntax.scss
+++ b/sass/parts/_syntax.scss
@@ -58,7 +58,6 @@ figure.code{
 	}
 	td.code{
 		padding-left: 15px;
-		font-size: 13px;
 		overflow-x: auto;
 	}
 	/* Style */
diff --git a/source/_includes/head.html b/source/_includes/head.html
index 3b7a605..1265151 100644
--- a/source/_includes/head.html
+++ b/source/_includes/head.html
@@ -8,10 +8,12 @@
     {% 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"/>
 
     <link href="{{ site.subscribe_rss }}" rel="alternate" title="{{site.title}}" type="application/atom+xml">
     <link rel="canonical" href="{{ canonical }}">
     <link href="{{ root_url }}/favicon.png" rel="icon">
+    <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
     <link href="{{ root_url }}/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
     <script src="{{ root_url }}/javascripts/jquery.min.js"></script>
     {% include custom/head.html %}
diff --git a/source/_includes/header.html b/source/_includes/header.html
index b6752aa..ac544be 100644
--- a/source/_includes/header.html
+++ b/source/_includes/header.html
@@ -1,13 +1,15 @@
 <h1 class="left"><a href="{{ root_url }}/">{{ site.title }}</a></h1>
 <nav class="menu left">{% include navigation.html %}</nav>
-<form class="search right" action="{{ site.simple_search }}" method="get">
-	<input class="left" type="text" name="q" results="0">
-	<input type="hidden" name="q" value="site:{{ site.url | shorthand_url }}">
-</form>
-<div class="social right">
-	<a href="http://www.facebook.com/tommy351" title="Facebook">Facebook</a>
-	<a href="https://plus.google.com/105931860008509594725" title="Google+">Google+</a>
-	<a href="http://twitter.com/tommy351" title="Twitter">Twitter</a>
-	<a href="{{ site.subscribe_rss }}" title="RSS">RSS</a>
+<div class="right">
+	<form class="search right" action="{{ site.simple_search }}" method="get">
+		<input class="left" type="text" name="q" results="0">
+		<input type="hidden" name="q" value="site:{{ site.url | shorthand_url }}">
+	</form>
+	<div class="social right">
+		<a href="http://www.facebook.com/tommy351" title="Facebook">Facebook</a>
+		<a href="https://plus.google.com/105931860008509594725" title="Google+">Google+</a>
+		<a href="http://twitter.com/tommy351" title="Twitter">Twitter</a>
+		<a href="{{ site.subscribe_rss }}" title="RSS">RSS</a>
+	</div>
 </div>
 {% include custom/header.html %}
\ No newline at end of file
diff --git a/source/javascripts/twitter.js b/source/javascripts/twitter.js
index 5a7b9d5..92fb7b1 100644
--- a/source/javascripts/twitter.js
+++ b/source/javascripts/twitter.js
@@ -50,39 +50,41 @@
 		}
 	}
 
-	banner.show();
+	if ($(window).width() > 600){
+		banner.show();
 
-	$.getJSON('http://twitter.com/status/user_timeline/tommy351.json?count=10&callback=?', function(json){
-		var length = json.length,
-			fragment = document.createDocumentFragment(),
-			counts = 0,
-			timeout;
+		$.getJSON('http://twitter.com/status/user_timeline/tommy351.json?count=10&callback=?', function(json){
+			var length = json.length,
+				fragment = document.createDocumentFragment(),
+				counts = 0,
+				timeout;
 
-		for (var i=0; i<length; i++){
-			var item = document.createElement('li');
-			item.innerHTML = linkify(json[i].text) + '<small>'+relativeDate(json[i].created_at)+'</small>';
-			fragment.appendChild(item);
-		}
+			for (var i=0; i<length; i++){
+				var item = document.createElement('li');
+				item.innerHTML = linkify(json[i].text) + '<small>'+relativeDate(json[i].created_at)+'</small>';
+				fragment.appendChild(item);
+			}
 
-		var play = function(){
-			timeout = setTimeout(function(){
-				feed.animate({top: '-='+30}, speed, function(){
-					$(this).append($(this).children().eq(counts).clone());
-					counts++;
-					play();
-				});
-			}, interval);
-		}
+			var play = function(){
+				timeout = setTimeout(function(){
+					feed.animate({top: '-='+30}, speed, function(){
+						$(this).append($(this).children().eq(counts).clone());
+						counts++;
+						play();
+					});
+				}, interval);
+			}
 
-		var pause = function(){
-			clearTimeout(timeout);
-		}
+			var pause = function(){
+				clearTimeout(timeout);
+			}
 
-		banner.on('mouseenter', pause).on('mouseleave', play)
-		.children('.loading').hide().end()
-		.children('.container').show()
-		.children('.feed').append(fragment);
+			banner.on('mouseenter', pause).on('mouseleave', play)
+			.children('.loading').hide().end()
+			.children('.container').show()
+			.children('.feed').append(fragment);
 
-		play();
-	});
+			play();
+		});
+	}
 })(jQuery);
\ No newline at end of file