From 0cb9284d51b16d192f42e2d2a4c12a2911668b2e Mon Sep 17 00:00:00 2001 From: Harald Eilertsen Date: Fri, 10 Mar 2017 19:26:11 +0100 Subject: 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. --- blog/_assets/stylesheets/_config.scss | 9 ++++++--- blog/_assets/stylesheets/_header.scss | 27 ++++++++++++++++++++------- blog/_assets/stylesheets/_post.scss | 23 +++++++++++++++++++++++ blog/_assets/stylesheets/main.scss | 25 ++++++++----------------- blog/_includes/menubar.html | 22 ++++++++++++---------- blog/_includes/post-excerpt.html | 8 +++----- blog/_layouts/default.html | 9 --------- blog/_layouts/post.html | 8 +++++--- 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 @@ - +
+ +
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 %} -
+
{% include post-header.html post = post %}
{% if post.page-image %} - {% if include.sidebar %} +
{{ post.page-image | img: "magick:resize:290x" }} - {% else %} - {{ post.page-image | img: "magick:resize:290x class:right" }} - {% endif %} +
{% endif %} {{ post.excerpt }}

{% t global.read_more %}

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 @@
{{ content }}
-
- {% include news.html sidebar=true %} - - {% if site.links %} - - {% endif %} -
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
{% include post-header.html post = page %}
- {% if page.page-image %} - {{ page.page-image | img: "magick:resize:590x" }} - {% endif %} +
+ {% if page.page-image %} + {{ page.page-image | img: "magick:resize:590x" }} + {% endif %} +
{{ content }}