Fix responsive css

2016-01-16 23:00:09 +00:00
parent b27b209463
commit 99891f318f
3 changed files with 178 additions and 165 deletions
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -18,7 +18,7 @@
        <meta name="keywords" content="{{ page.tags|join:', ' }}" />
        {% endif %}

-        <meta name="viewport" content="width=756" />
+        <meta name="viewport" content="width=device-width">

        <link href="{{ site.absolute }}/{{ site.baseurl }}{{ page.url|replace:'/index.html','/' }}" rel="canonical" />

@@ -40,10 +40,11 @@
        </script>
    </head>
    <body class="layout-{{ page.layout }}{% if page.body_class %} {{ page.body_class }}{% endif %}">  
-        <header id="masthead" class="site-header" role="banner">
-            <a class="home-link" href="/" title="Rik @ St. Andrews" rel="home"></a>
+        <header id="masthead" role="banner">
+            <a href="/{{ site.baseurl }}" title="{{ site.title }}" rel="home"></a>
        </header>
-        <header class="navigation">
+        <header id="navigation">
+            <div>
                <ul class="screen-only">
                    <li><a href="/{{ site.baseurl }}/blog/">blog</a></li>
                    <li><a href="/{{ site.baseurl }}/gallery/">gallery</a></li>
@@ -62,5 +63,6 @@
                    &middot;
                    <a href="mailto:{{ site.email }}">email</a>
                </div>
+                </div>
        </header>
        <article>
--- a/index.html
+++ b/index.html
@@ -3,10 +3,9 @@ title: Home
 layout: default
 tags: blog scotland chemistry phd
 ---
-
 <section>
    <p>
-        In dit blog zal ik jullie op de hoogte houden van mijn belevenissen in St Andrews, Schotland. Daar ben ik in november 2013 begonnen aan een vierjarige PhD in de scheikunde, met als uiteindelijk doel het halen van de doctor titel.
+        In dit blog houd ik jullie zo goed mogelijk op de hoogte van mijn belevenissen in St Andrews, Schotland. Daar ben ik in november 2013 begonnen aan een vierjarige PhD in de scheikunde, met als uiteindelijk doel het halen van de doctor titel. Nostalgicie zijn misschien verknocht aan de <a href="http://csbnw.no-ip.org:38/">oude versie</a> van dit blog.
    </p>
 </section>

@@ -14,7 +13,9 @@ tags: blog scotland chemistry phd
    {% include post_detail.html %}
 {% endfor %}

+
 {% if paginator.total_pages > 1 %}
+<section>
    <ul class="pager">
        {% if paginator.previous_page %}
        <a href="/{{ site.baseurl }}{{ paginator.previous_page_path }}">{{ site.previous_page }}</a>
@@ -28,4 +29,5 @@ tags: blog scotland chemistry phd
        &nbsp;|&nbsp;
        <a href="/{{ site.baseurl }}/blog/" class="read-more">{{ site.all_posts | replace:'#',site.posts.size }}</a>
    </ul>
+</section>
 {% endif %}
--- a/static/style/default-common.css
+++ b/static/style/default-common.css
@@ -1,54 +1,66 @@
 ---
 ---
-* {
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
 body {
-    color: #333333;
+    color: #333;
    font-family: Lato,sans-serif;
    font-size: 16px;
    margin: 0 auto;
    padding: 0;
    min-width: 640px;
    max-width: 1600px;
+    width: 100%;
+}
+
+body > header {
+    background-color: #f7f5e7;
 }

 body > header,article > section {
    border-bottom: #F0F0F0 solid 1px;
    padding: 24px 80px;
-    width: 900px;
+}
+
+body > article {
+    padding-left: 30px;
+}
+
+@media screen and (min-width: 1000px) {
+    body > article,body > footer {
+        position: relative;
+        left: 50%;
+        margin-left: -30%;
+        width: 50%;
+    }
 }

 article > section {
    border-left: #E9E9E9 solid 1px;
-    position: relative;
-    left: 80px;
-}
-header.site-header, header.navigation {    
-    border: 0;
+    min-width: 400px;
+    max-width: 600px;
 }

-header.site-header {
+header#masthead {
+    margin: 0;
    padding: 0;
-    width: 100%;
-    background: url(/asset/header/{{ site.headers[0] }}.jpg) no-repeat scroll top;
+    background: url(/asset/header/{{ site.headers[0] }}.jpg) center;
    background-size: 1600px auto;
 }

-header.site-header .home-link {
+header#masthead a {
    display: block;
-    max-width: 1080px;
    min-height: 225px;
    text-decoration: none;
-    display: block;
 }

-header.navigation {    
-    background-color: #f7f5e7;
-    padding: 10px 50px 10px 50px;
+header#navigation {
+    margin: 0;
+    padding: 0;
+}
+
+header#navigation div {
+    padding: 5px 30px;
+    width: 80%;
+    margin: 0 auto;
 }

 body.layout-gallery-photo > header {
@@ -60,25 +72,20 @@ body.layout-gallery-photo article > section {
 }

 body > footer {
-    color: #999999;
+    color: #999;
    font-size: 11px;
    font-weight: 400;
    padding: 16px 6px 28px 66px;
-    width: 700px;
 }

 body > footer a {
-        color: #999999;
+    color: #999;
 }

 body.no-footer > footer {
    display: none;
 }

-body > header {    
-    width: 100%;
-}
-
 body > header .meta {
    margin-bottom: 0;
    margin-top: 0;
@@ -99,24 +106,24 @@ header ul {
    color: #CF5406;
    display: block;
    margin-left: 6px;
-            padding: 1px 5px 2px 5px;
+    padding: 1px 5px 2px;
    text-decoration: none;
 }

 header ul li a:hover {
    background-color: #CF5406;
-            color: #FFFFFF;
+    color: #FFF;
 }

 header ul li .noanchor {
-            color: #CCCCCC;
+    color: #CCC;
    display: block;
    margin-left: 6px;
-            padding: 1px 5px 2px 5px;
+    padding: 1px 5px 2px;
 }

 .meta {
-    color: #333333;
+    color: #333;
    font-size: 12px;
    font-weight: 300;
    padding-left: 1px;
@@ -136,11 +143,6 @@ a {
    color: #CF5406;
 }

-ul.pager {
-    position: relative;
-    left: 80px;
-}
-
 a.read-more,ul.pager a {
    text-decoration: none;
 }
@@ -150,7 +152,7 @@ a.read-more:hover, ul.pager a:hover {
 }

 small {
-    color: #666666;
+    color: #666;
 }

 div.site-title {
@@ -169,27 +171,30 @@ div.site-title {
 }

 div.site-title small {
-        color: #999999;
+    color: #999;
 }

 h1 {
-    color: #333333;
+    color: #333;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    padding: 1px 0;
 }
+
 h1 a {
-         color: #000000;
+    color: #000;
    text-decoration: none;
 }
+
 h1 a:hover {
    text-decoration: underline;
 }
+
 h1 small {
    display: block;
    font-size: 12px;
-        font-weight: normal;
+    font-weight: 400;
 }

 h2 {
@@ -213,13 +218,13 @@ hr {

 section .timeline > * {
    display: block;
-    opacity: 0.6;
+    opacity: .6;
    line-height: 0;
    margin-bottom: 4px;
 }

 span.date-range {
-    font-size: 0.8em;
+    font-size: .8em;
 }

 article.layout-post section {
@@ -227,13 +232,13 @@ article.layout-post section {
 }

 .timeline {
-    background-color: #FFFFFF;
+    background-color: #FFF;
    font-size: 11px;
    line-height: 0;
    padding-top: 2px;
    position: absolute;
    text-align: center;
-    left: -24px;
+    margin-left: -100px;
    width: 49px;
 }

@@ -276,7 +281,7 @@ p, ul, ol, dl {

 dl dt {
    clear: left;
-    color: #666666;
+    color: #666;
    float: left;
    padding-top: 2px;
    text-align: right;
@@ -387,7 +392,7 @@ blockquote {
 }

 .list-gallery img:hover {
-        border: #999999 solid 1px !important;
+    border: #999 solid 1px !important;
 }

 .caption {
@@ -409,7 +414,7 @@ blockquote {

 .caption p {
    font-style: italic;
-        margin: 0 0 8px 0;
+    margin: 0 0 8px;
 }

 .aligncenter {
@@ -417,3 +422,7 @@ blockquote {
    margin-left: auto;
    margin-right: auto;
 }
+
+ul.pager {
+    margin-left: -50px;
+}