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/main.scss | 25 ++++++++----------------- 1 file changed, 8 insertions(+), 17 deletions(-) (limited to 'blog/_assets/stylesheets/main.scss') 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 { -- cgit v1.2.3