Style: rework responsiveness
This commit is contained in:
parent
059922c6d6
commit
1d33101b28
4 changed files with 138 additions and 36 deletions
|
|
@ -16,13 +16,15 @@
|
|||
{{ end }}
|
||||
|
||||
<div id="content">
|
||||
{{ block "pagename" . }}
|
||||
{{ partial "pagetitle.html" . }}
|
||||
{{ end }}
|
||||
|
||||
<div id="main">
|
||||
{{ block "main" . }}
|
||||
<div class="content-inner">
|
||||
{{ block "pagename" . }}
|
||||
{{ partial "pagetitle.html" . }}
|
||||
{{ end }}
|
||||
|
||||
<div id="main">
|
||||
{{ block "main" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue