diff --git a/header.php b/header.php
index 914dff7..c98781a 100755
--- a/header.php
+++ b/header.php
@@ -65,6 +65,16 @@
+
+
+
+
+
+
-
-
-
-
-
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;
+
+