Style: rework responsiveness

layouts/_default/baseof.html

@@ -16,13 +16,15 @@
     {{ end }}
 
     <div id="content">
-      {{ block "pagename" . }}
+      <div class="content-inner">
-      {{ partial "pagetitle.html" . }}
+        {{ block "pagename" . }}
-      {{ end }}
+        {{ partial "pagetitle.html" . }}
-
-      <div id="main">
-        {{ block "main" . }}
         {{ end }}
+
+        <div id="main">
+          {{ block "main" . }}
+          {{ end }}
+        </div>
       </div>
     </div>
 

scss/_params.scss

@@ -12,6 +12,10 @@ $head_bg_color: $secondary_bg_color;
 $footer_fg_color: darken($fg_color, 30%);
 $ingred_qt_color: #efc586;
 
+$font_size_large: 12pt;
+$font_size_med: 11pt;
+$font_size_small: 10pt;
+
 // Veganness
 $veganness_vegan_color: #40d540;
 $veganness_veganisable_color: #bfce2a;
@@ -21,5 +25,20 @@ $veganness_vege_color: #ce8649;
 $season_winter_color: #02bace;
 $season_summer_color: #ff3838;
 
-$break_large: 1600px;
+// Responsiveness
-$content_max_width: 800px;
+$width_xlarge: 1250px;
+$width_large: 1000px;
+$width_med: 650px;
+
+$ingred_width_xlarge: 300px;
+$ingred_width_large: 250px;
+$ingred_hmargin_xlarge: 50px;
+$ingred_hmargin_large: 25px;
+$content_width_xlarge: 800px;
+$content_width_large: 650px;
+
+$hmargin_small: 2vw;
+
+$width_contentcenter: $content_width_xlarge
+  + 2*($ingred_width_xlarge
+  + 1.5*$ingred_hmargin_xlarge);

scss/style.scss

@@ -3,6 +3,13 @@
 @import url('fonts.css');
 @import 'params';
 
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
 html {
   background-color: $bg_color;
   color:$fg_color;
@@ -11,8 +18,17 @@ html {
 
 body {
   font-family:Open Sans,Arial;
-  font-size:16px;
+
+  font-size: $font_size_small;
   line-height:1.4;
+
+  @media (min-width: $width_med) {
+    font-size: $font_size_med;
+  }
+  @media (min-width: $width_large) {
+    font-size: $font_size_large;
+  }
+
   text-align:justify;
   margin: 0;
   padding: 0;
@@ -41,20 +57,27 @@ body {
 }
 
 #ingredients {
-  @media screen and (min-width: $break_large) {
+  @media (min-width: $width_large) {
     float: left;
-    max-width: 300px;
-    margin: 0;
-    margin-top: 30px;
-    margin-left: 50px;
-    margin-right: 50px;
     position: fixed;
-    box-sizing: border-box;
+    margin-top: 30px;
+    margin-bottom: 0px;
   }
 
-  max-width: $content_max_width;
+  @media (min-width: $width_large) {
+    width: $ingred_width_large;
+    margin-left: $ingred_hmargin_large;
+    margin-right: $ingred_hmargin_large;
+  }
+
+  @media (min-width: $width_xlarge) {
+    width: $ingred_width_xlarge;
+    margin-left: $ingred_hmargin_xlarge;
+    margin-right: $ingred_hmargin_xlarge;
+  }
+
+  margin: 30px $hmargin_small;
   box-sizing: border-box;
-  margin: 30px auto;
 
   padding: 20px;
   border: 1px solid $secondary_bg_color;
@@ -81,11 +104,35 @@ body {
 }
 
 #content {
-  margin: 0 auto;
+  display: flex;
-  max-width: $content_max_width;
+  justify-content: center;
-  padding:2em 1em;
+
+  margin: 30px $hmargin_small;
   height: 100%;
 
+  .content-inner {
+    width: 100%;
+  }
+
+  @media (min-width: $width_large) {
+    .content-inner {
+      width: $content_width_large;
+    }
+    margin-right: 0;
+    margin-left: $ingred_width_large + $ingred_hmargin_large;
+  }
+  @media (min-width: $width_xlarge) {
+    .content-inner {
+      width: $content_width_xlarge;
+    }
+    margin-right: 0;
+    margin-left: $ingred_width_xlarge + $ingred_hmargin_xlarge;
+  }
+  @media (min-width: $width_contentcenter) {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
   h1 {
     font-size: 1.4em;
     color: $title_h1_color;

static/css/style.css

@@ -1,4 +1,10 @@
 @import url("fonts.css");
+html {
+  box-sizing: border-box; }
+
+*, *:before, *:after {
+  box-sizing: inherit; }
+
 html {
   background-color: #010018;
   color: #e4e4e4;
@@ -6,7 +12,7 @@ html {
 
 body {
   font-family: Open Sans,Arial;
-  font-size: 16px;
+  font-size: 10pt;
   line-height: 1.4;
   text-align: justify;
   margin: 0;
@@ -14,7 +20,12 @@ body {
   min-height: 100%;
   display: flex;
   flex-direction: column; }
-
+  @media (min-width: 650px) {
+    body {
+      font-size: 11pt; } }
+  @media (min-width: 1000px) {
+    body {
+      font-size: 12pt; } }
 #head {
   background-color: #178ca7;
   display: flex;
@@ -30,23 +41,28 @@ body {
     color: #010018; }
 
 #ingredients {
-  max-width: 800px;
+  margin: 30px 2vw;
   box-sizing: border-box;
-  margin: 30px auto;
   padding: 20px;
   border: 1px solid #178ca7;
   border-radius: 10px;
   text-align: left; }
-  @media screen and (min-width: 1600px) {
+  @media (min-width: 1000px) {
     #ingredients {
       float: left;
-      max-width: 300px;
-      margin: 0;
-      margin-top: 30px;
-      margin-left: 50px;
-      margin-right: 50px;
       position: fixed;
-      box-sizing: border-box; } }
+      margin-top: 30px;
+      margin-bottom: 0px; } }
+  @media (min-width: 1000px) {
+    #ingredients {
+      width: 250px;
+      margin-left: 25px;
+      margin-right: 25px; } }
+  @media (min-width: 1250px) {
+    #ingredients {
+      width: 300px;
+      margin-left: 50px;
+      margin-right: 50px; } }
   #ingredients .ingred-title {
     font-size: 1.3em;
     font-weight: bold; }
@@ -59,10 +75,28 @@ body {
     padding-left: 25px; }
 
 #content {
-  margin: 0 auto;
+  display: flex;
-  max-width: 800px;
+  justify-content: center;
-  padding: 2em 1em;
+  margin: 30px 2vw;
   height: 100%; }
+  #content .content-inner {
+    width: 100%; }
+  @media (min-width: 1000px) {
+    #content {
+      margin-right: 0;
+      margin-left: 275px; }
+      #content .content-inner {
+        width: 650px; } }
+  @media (min-width: 1250px) {
+    #content {
+      margin-right: 0;
+      margin-left: 350px; }
+      #content .content-inner {
+        width: 800px; } }
+  @media (min-width: 1550px) {
+    #content {
+      margin-right: 0;
+      margin-left: 0; } }
   #content h1 {
     font-size: 1.4em;
     color: #ffc467; }
@@ -84,7 +118,7 @@ body {
 
 #foot {
   font-size: 0.7em;
-  color: #989797;
+  color: #989898;
   display: flex;
   justify-content: flex-end;
   align-items: center;