First attempt at responsive design for site.

- Droppped sidebar from all pages.
- Wrapped post images in a div for easier styling.
- Drop the Inferno banner on too small displays.

Most stuff works quite well for a first attempt, mthinks.

8 files changed, 77 insertions, 54 deletions

diff --git a/blog/_assets/stylesheets/_config.scss b/blog/_assets/stylesheets/_config.scss
index c8b5066..77d3c8b 100644
--- a/blog/_assets/stylesheets/_config.scss
+++ b/blog/_assets/stylesheets/_config.scss
@@ -1,8 +1,11 @@
+$base-font-size: 12pt;
+$huge-font-size: $base-font-size * 1.25;
+
 $body-bg: rgba(0, 0, 0, 0.4);
-$text-color: #acbed5;
-$heading-color: #3379BF;
+$text-color: #6c7683;
+$heading-color: #2B4662;
 $dimmed-text-color: darken($text-color, 20%);
-$link-color: #93A2B1; //#686;
+$link-color: #384e68; //#686;
 $link-hover-color: lighten(#686, 5%);
 $side-bar-background: rgba(20, 20, 20, 0.7);
 $menu-bar-background: transparentize(#243B48, 0.2); //rgba(128, 256, 128, 0.15);
diff --git a/blog/_assets/stylesheets/_header.scss b/blog/_assets/stylesheets/_header.scss
index 7998bb5..fc93a19 100644
--- a/blog/_assets/stylesheets/_header.scss
+++ b/blog/_assets/stylesheets/_header.scss
@@ -1,20 +1,33 @@
 #header {
     width: 100%;
-    font-size: 110%;
-    font-weight: 600;
+    font-weight: bold;
 
     #logo {
-        position: relative;
-        width: 479px;
         text-align: center;
+        float: left;
         p {
             margin-top: 0;
         }
+
+        @media screen and (min-width: 28cm) {
+            width: 50%; //479px;
+        }
     }
 
     #banner-pos-1 {
-        position: absolute;
-        top: 1.5em;
-        right: 0;
+        text-align: center;
+        float: left;
+        visibility: hidden;
+        display: none;
+
+        @media screen and (min-width: 28cm) {
+            width: 50%; //479px;
+            visibility: visible;
+            display: block;
+        }
+    }
+
+    #page-menu {
+        clear: both;
     }
 }
diff --git a/blog/_assets/stylesheets/_post.scss b/blog/_assets/stylesheets/_post.scss
index 436b828..b2e737f 100644
--- a/blog/_assets/stylesheets/_post.scss
+++ b/blog/_assets/stylesheets/_post.scss
@@ -49,4 +49,27 @@
       visibility: hidden;
       clear: both;
     }
+    .post-image {
+        text-align: center;
+        float: right;
+
+        @media screen and (max-width: 590px){
+            float: none;
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+}
+
+.post-excerpt {
+    .post-body {
+        .post-image {
+            @media screen and (min-width: 500px) {
+                float: right;
+                width: 300px;
+            }
+        }
+    }
 }
diff --git a/blog/_assets/stylesheets/main.scss b/blog/_assets/stylesheets/main.scss
index a4e284c..5da3093 100644
--- a/blog/_assets/stylesheets/main.scss
+++ b/blog/_assets/stylesheets/main.scss
@@ -32,18 +32,14 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
-    font-size: 20pt;
-}
-
-strong {
-  color: $dimmed-text-color;
+    font-size: $huge-font-size;
 }
 
 #page-container {
     position: relative;
-    width: 28cm;
+    max-width: 28cm;
     margin: {
-        top: 10mm;
+        //top: 10mm;
         left: auto;
         right: auto;
     }
@@ -61,24 +57,19 @@ strong {
     min-height: 700px;
     line-height: 170%;
 
-    padding: 1cm;
-    font-size: 16pt;
+    font-size: $base-font-size;
     background-color: $body-bg;
 
+    @media screen and (min-width: 28cm) {
+        padding: 1cm;
+    }
+
     @include round-corners;
 
     #body {
-        float: left;
-        width: 16cm;
     }
 
     #side-body {
-        float: right;
-        width: 8cm;
-        padding: 2mm;
-        background: {
-            color: $side-bar-background
-        }
     }
 
     #news, #links {
diff --git a/blog/_includes/menubar.html b/blog/_includes/menubar.html
index 04be761..3076326 100644
--- a/blog/_includes/menubar.html
+++ b/blog/_includes/menubar.html
@@ -1,10 +1,12 @@
-<nav class="site-nav">
-  <a class="page-link" href="{{ site.baseurl | append: "/" }}">{% t titles.home %}</a>
-  <a class="page-link" href="{{ site.baseurl_root | append: "/registration" }}">{% t titles.registration %}</a>
-  {% for page in site.pages %}
-    {% if page.title and (!page.hidden == true) %}
-      <a class="page-link" href="{{ page.url | prepend: site.baseurl | remove: 'index.html' }}">{% page_title page.title %}</a>
-    {% endif %}
-  {% endfor %}
-  {% include language-switcher.html %}
-</nav>
+<div id="page-menu">
+  <nav class="site-nav">
+    <a class="page-link" href="{{ site.baseurl | append: "/" }}">{% t titles.home %}</a>
+    <a class="page-link" href="{{ site.baseurl_root | append: "/registration" }}">{% t titles.registration %}</a>
+    {% for page in site.pages %}
+      {% if page.title and (!page.hidden == true) %}
+        <a class="page-link" href="{{ page.url | prepend: site.baseurl | remove: 'index.html' }}">{% page_title page.title %}</a>
+      {% endif %}
+    {% endfor %}
+    {% include language-switcher.html %}
+  </nav>
+</div>
diff --git a/blog/_includes/post-excerpt.html b/blog/_includes/post-excerpt.html
index e87b12b..b3616d8 100644
--- a/blog/_includes/post-excerpt.html
+++ b/blog/_includes/post-excerpt.html
@@ -1,13 +1,11 @@
 {% assign post = include.post %}
-<article class="post">
+<article class="post-excerpt">
   {% include post-header.html post = post %}
   <section class="post-body">
     {% if post.page-image %}
-      {% if include.sidebar %}
+      <div class="post-image">
         {{ post.page-image | img: "magick:resize:290x" }}
-      {% else %}
-        {{ post.page-image | img: "magick:resize:290x class:right" }}
-      {% endif %}
+      </div>
     {% endif %}
     {{ post.excerpt }}
     <p><a href="{{ post.url | prepend: site.baseurl }}">{% t global.read_more %}</a></p>
diff --git a/blog/_layouts/default.html b/blog/_layouts/default.html
index 2488ce3..bd0ee80 100644
--- a/blog/_layouts/default.html
+++ b/blog/_layouts/default.html
@@ -10,15 +10,6 @@
           <section id="body">
             {{ content }}
           </section>
-          <section id="side-body">
-            {% include news.html sidebar=true %}
-
-            {% if site.links %}
-              <section id="links">
-                <h2>{% t home.links %}</h2>
-              </section>
-            {% endif %}
-          </section>
         </section>
       </section>
 
diff --git a/blog/_layouts/post.html b/blog/_layouts/post.html
index 555bdc6..8a3cccb 100644
--- a/blog/_layouts/post.html
+++ b/blog/_layouts/post.html
@@ -5,9 +5,11 @@ layout: default
 <article class="post">
   {% include post-header.html post = page %}
   <section class="post-body">
-    {% if page.page-image %}
-      {{ page.page-image | img: "magick:resize:590x" }}
-    {% endif %}
+    <div class="post-image">
+      {% if page.page-image %}
+        {{ page.page-image | img: "magick:resize:590x" }}
+      {% endif %}
+    </div>
     {{ content }}
   </section>
   <footer>