tobast/nomnom
1
1
Fork 0
Code Issues Pull requests Releases Wiki Activity

Style: rework responsiveness

Browse source
This commit is contained in:
Théophile Bastian 2020-05-05 16:09:33 +02:00
parent 059922c6d6
commit 1d33101b28
4 changed files with 138 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
layouts/_default/baseof.html
View file

@ -16,6 +16,7 @@
{{ end }}
<div id="content">
<div class="content-inner">
{{ block "pagename" . }}
{{ partial "pagetitle.html" . }}
{{ end }}
@ -25,6 +26,7 @@
{{ end }}
</div>
</div>
</div>
{{ block "footer" . }}
{{ partial "site-footer.html" . }}

23
scss/_params.scss
View file

@ -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);

73
scss/style.scss
View file

@ -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;

64
static/css/style.css
View file

@ -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;