- {{ block "main" . }}
+
diff --git a/scss/_params.scss b/scss/_params.scss
index 0600394..d8e3996 100644
--- a/scss/_params.scss
+++ b/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;
-$content_max_width: 800px;
+// Responsiveness
+$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);
diff --git a/scss/style.scss b/scss/style.scss
index c7f3c32..1e8b157 100644
--- a/scss/style.scss
+++ b/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;
- max-width: $content_max_width;
- padding:2em 1em;
+ display: flex;
+ justify-content: center;
+
+ 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;
diff --git a/static/css/style.css b/static/css/style.css
index 0c50067..82bfe55 100644
--- a/static/css/style.css
+++ b/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;
- max-width: 800px;
- padding: 2em 1em;
+ display: flex;
+ justify-content: center;
+ 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;
+ {{ block "pagename" . }}
+ {{ partial "pagetitle.html" . }}
{{ end }}
+
+
+ {{ block "main" . }}
+ {{ end }}
+