From 8301e55d02df89e79146db8d2a192dc3cbe3033f Mon Sep 17 00:00:00 2001
From: Ricardo Rauch <rickyrauch@gmail.com>
Date: Mon, 30 Sep 2013 01:17:49 -0300
Subject: [PATCH] fixes css

---
 header.php | 19 +++++------
 style.css  | 92 +++++++++++++++++++++++++++++++++++++++++++++++++++---
 style.styl | 53 ++++++++++++++++++++++++++-----
 3 files changed, 144 insertions(+), 20 deletions(-)

diff --git a/header.php b/header.php
index 914dff7..c98781a 100755
--- a/header.php
+++ b/header.php
@@ -65,6 +65,16 @@
 
 	
 
+	
+<div id="page" class="snap-content">
+	
+	<a id="myToggleButton" class="btn btn-sidebar">
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+    </a>
+
+
 	<header id="masthead" class="site-header" role="banner">
 
 		<hgroup>
@@ -78,12 +88,3 @@
 		</nav><!-- .site-navigation .main-navigation -->
 	</header><!-- #masthead .site-header -->
 	
-	
-<div id="page" class="snap-content">
-	
-	<a id="myToggleButton" class="btn btn-sidebar">
-      <span class="icon-bar"></span>
-      <span class="icon-bar"></span>
-      <span class="icon-bar"></span>
-    </a>
-
diff --git a/style.css b/style.css
index c6fe480..2c37cea 100755
--- a/style.css
+++ b/style.css
@@ -154,7 +154,7 @@ img {
 header.site-header {
   background: #fff;
   position: fixed;
-  top: 4px;
+  top: 0px;
   z-index: 10000;
   left: 820px;
   width: 150px;
@@ -167,7 +167,7 @@ header.site-header h1 a {
   background: #feb83e url("images/logo.png") center no-repeat;
   border: 1px solid rgba(0,0,0,0.1);
   border-top: 0;
-  background-size: 70%;
+  background-size: auto 70%;
   height: 150px;
   text-indent: -10000em;
   display: block;
@@ -177,6 +177,7 @@ header.site-header nav {
   width: 100%;
   color: #000;
   font-family: Menlo, Monaco, 'Lucida Console', monospace;
+  background: #f9f9f9;
 }
 header.site-header nav ul {
   margin: 0;
@@ -186,7 +187,6 @@ header.site-header nav a {
   border: 1px solid #ccc;
   overflow: hidden;
   border-top: 0;
-  background: #f9f9f9;
   display: block;
   padding: 10px 10px;
   line-height: 18px;
@@ -250,9 +250,11 @@ body {
   text-align: right;
   float: right;
 }
-.center-content {
+.center-content,
+#disqus_thread {
   max-width: 580px;
   margin: 0 100px 0 140px;
+  padding: 0 20px;
   display: block;
 }
 article.post,
@@ -300,6 +302,68 @@ article.page pre {
   display: block;
   border-left: none;
   border-right: none;
+  overflow-x: scroll;
+}
+article.post blockquote p:last-child,
+article.page blockquote p:last-child {
+  margin-bottom: 0;
+}
+article.post p iframe,
+article.page p iframe,
+article.post p object,
+article.page p object {
+  display: block;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  float: none;
+}
+article.post img,
+article.page img,
+article.post iframe,
+article.page iframe,
+article.post object,
+article.page object {
+  display: block;
+  margin: 0;
+  padding: 0;
+  max-width: 100%;
+  float: none;
+}
+article.post p iframe,
+article.page p iframe,
+article.post p object,
+article.page p object {
+  min-height: 250px;
+  min-width: 0;
+}
+article.post img,
+article.page img {
+  height: auto;
+  width: auto;
+}
+article.post .embed-container,
+article.page .embed-container {
+  position: relative;
+  padding-bottom: 56.25%;
+/* 16/9 ratio */
+  padding-top: 30px;
+/* IE6 workaround*/
+  height: 0;
+  overflow: hidden;
+  margin-bottom: 30px;
+}
+article.post .embed-container iframe,
+article.page .embed-container iframe,
+article.post .embed-container object,
+article.page .embed-container object,
+article.post .embed-container embed,
+article.page .embed-container embed {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
 article.page {
   border-bottom: 0;
@@ -660,3 +724,23 @@ nav.paging-navigation .nav-left,
 .comments-area .comment-notes {
   display: none;
 }
+@media screen and (max-width: 970px) {
+  header.site-header {
+    position: static;
+    width: auto;
+  }
+  header.site-header nav ul {
+    text-align: center;
+  }
+  header.site-header nav ul li {
+    display: inline-block;
+  }
+  header.site-header nav ul li a {
+    border: 0;
+  }
+  .center-content,
+  #disqus_thread {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
diff --git a/style.styl b/style.styl
index 123e352..8b6f54b 100755
--- a/style.styl
+++ b/style.styl
@@ -153,20 +153,28 @@ img
 /* =Header
 -------------------------------------------------------------- */
 header.site-header
-	background: #fff; position: fixed; top: 4px; z-index: 10000; left: 820px; width: 150px; 
+	background: #fff; position: fixed; top: 0px; z-index: 10000; left: 820px; width: 150px; 
 	h1 
 		margin: 0; padding: 0;
-		a{background: #feb83e url('images/logo.png') center no-repeat; border: 1px solid rgba(0,0,0,.1); border-top: 0; background-size:  70%; height: 150px; text-indent: -10000em; display: block;}
+		a{background: #feb83e url('images/logo.png') center no-repeat; border: 1px solid rgba(0,0,0,.1); border-top: 0; background-size: auto  70%; height: 150px; text-indent: -10000em; display: block;}
 	nav
 		display: block; 
 		width: 100%;  
 		color: black; 
 		font-family:  Menlo, Monaco, 'Lucida Console', monospace;
+		background: #f9f9f9;
 		ul 
 			margin: 0;
 			padding: 0;
 		a
-			border: 1px solid #ccc; overflow: hidden; border-top: 0;  background: #f9f9f9;  display: block; padding: 10px 10px; line-height: 18px; font-size: 11px; color: #333;
+			border: 1px solid #ccc; 
+			overflow: hidden; 
+			border-top: 0; 
+			display: block; 
+			padding: 10px 10px; 
+			line-height: 18px; 
+			font-size: 11px; 
+			color: #333;
 			i, img{background: url('images/icon-page.png') center no-repeat; display: inline-block; opacity: .4; float: left; width: 18px; height: 18px;  margin: auto;}
 			img{display: block;}
 
@@ -197,8 +205,8 @@ body.admin-bar header.site-header, body
 	width: 50%; float: left;
 	&.nav-next{text-align: right; float: right;}
 
-.center-content
-	max-width: 580px; margin: 0 100px 0 140px; display: block; 
+.center-content, #disqus_thread
+	max-width: 580px; margin: 0 100px 0 140px; padding: 0 20px; display: block; 
 
 article.post, article.page
 	border-bottom: 1px solid #ebebeb;
@@ -213,6 +221,7 @@ article.post, article.page
 			color: black;
 			text-decoration: underline
 	p < code {width: 100%; display: none;}
+	
 	code,pre
 		border: none;
 		border: 1px solid #d2d2d2;
@@ -220,7 +229,6 @@ article.post, article.page
 		padding: 0 4px;
 		font-size: 13px;
 		width: auto;
-
 		display: inline-block;
 
 	code
@@ -230,10 +238,24 @@ article.post, article.page
 		display: block;
 		border-left: none;
 		border-right: none;
-
+		overflow-x: scroll;
 	/* Images */
 
 
+	blockquote
+		p:last-child
+			margin-bottom:0
+
+	p iframe,p object{display:block;margin:0;padding:0;width:100%;float:none}
+	img, iframe, object{display:block;margin:0;padding:0;max-width:100%;float:none}
+	p iframe, p object{min-height:250px;min-width:0}
+	img{height: auto; width: auto;}
+	.embed-container{ position:relative;  padding-bottom:56.25%; /* 16/9 ratio */ padding-top:30px; /* IE6 workaround*/ height:0;  overflow:hidden; margin-bottom:30px}
+	.embed-container iframe, 
+	.embed-container object, 
+	.embed-container embed{ position:absolute;  top:0;  left:0;  width:100%;  height:100%}
+
+
 article.page 
 	border-bottom: 0;
 
@@ -400,6 +422,23 @@ nav.paging-navigation, #nav-below
 	.form-allowed-tags, .comment-notes{display: none;}
 
 
+@media screen and (max-width: 970px)
+	header.site-header
+		position: static;
+		width: auto;
+		nav 
+			ul 
+				text-align: center;
+				li 
+					display: inline-block
+					a 
+						border: 0;
+
+	.center-content, #disqus_thread
+		margin-left: auto;
+		margin-right: auto;
+
+