Style: responsive design

This commit is contained in:
Théophile Bastian 2020-03-24 15:38:37 +01:00
parent cc8be8a775
commit c2087c8750
4 changed files with 87 additions and 68 deletions

View file

@ -66,28 +66,6 @@ input[type="submit"] {
@include button;
}
select {
-webkit-appearance: none;
appearance: none;
@include button;
width: 100%;
font-size: 0.9em;
margin: 0;
padding: 5px 25px 5px 10px;
text-align: left;
&:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
background-image: url('/static/img/select_arrow.svg');
background-repeat: no-repeat;
background-position: right .7em top 50%, 0 0;
background-size: .65em auto, 100%;
}
.formfield {
padding: 5px;
margin: 10px 0;

View file

@ -4,7 +4,9 @@ $page_text_color: #000000dd;
$secondary_color: #3c173d;
$secondary_border_color: #3c173d;
$page_link_color: $secondary_border_color;
$page_width: 700px;
$page_mid_width: 450px;
$main_border_color: $secondary_border_color;
$main_border_radius: 20px;
@ -16,10 +18,14 @@ $help_text_color: rgba($page_text_color, .65);
$font_size: 16pt;
$font_family: "Open Sans";
$small_screen_font_size: 12pt;
$mid_font_size: 12pt;
$small_font_size: 11pt;
$header_height: 100px;
$header_logo_maxwidth: 300px;
$logo_height: 100px;
$logo_maxwidth: 300px;
$responsive_mid_threshold: 750px;
$responsive_small_threshold: 500px;
$info_box_color: #c9c8ff;
$info_box_border_color: darken($info_box_color, 20%);

View file

@ -23,6 +23,16 @@ body {
align-items: center;
min-height: 100vh;
@media (max-width: $responsive_mid_threshold) {
font-size: $mid_font_size;
}
@media (max-width: $responsive_small_threshold) {
font-size: $small_font_size;
display: flex;
align-items: center;
justify-content: space-evenly;
}
}
header {
@ -37,6 +47,13 @@ header {
width: $page_width;
@media (max-width: $responsive_mid_threshold) {
width: $page_mid_width;
}
@media (max-width: $responsive_small_threshold) {
display: none;
}
#headtext {
display: flex;
flex-direction: column;
@ -47,22 +64,41 @@ header {
color: $secondary_color;
font-weight: bold;
}
}
img {
height: $header_height;
max-width: $header_logo_maxwidth;
.logo {
height: $logo_height;
max-width: $logo_maxwidth;
}
#ens_logo_foot {
display: none;
@media (max-width: $responsive_small_threshold) {
display: block;
margin: 30px;
}
}
main {
width: $page_width;
background-color: $page_main_color;
border: 3px solid $main_border_color;
border-radius: $main_border_radius;
padding: 15px;
width: $page_width;
@media (max-width: $responsive_mid_threshold) {
width: $page_mid_width;
}
@media (max-width: $responsive_small_threshold) {
width: 90%;
}
h2 {
font-size: 20pt;
font-size: 1.2em;
@media (max-width: $responsive_small_threshold) {
font-size: 1.1em;
}
text-align: center;
color: $secondary_color;
}

View file

@ -74,36 +74,6 @@ input[type="submit"] {
background-color: #a881aa;
box-shadow: 0 0 1.5px 1px #3c173d; }
select {
-webkit-appearance: none;
appearance: none;
display: block;
text-decoration: none;
text-align: center;
font-size: 100%;
border-radius: 10px;
padding: 10px;
border: 1px solid #3c173d;
background-color: #d2bed3;
color: #000000dd;
width: 100%;
font-size: 0.9em;
margin: 0;
padding: 5px 25px 5px 10px;
text-align: left;
background-image: url("/static/img/select_arrow.svg");
background-repeat: no-repeat;
background-position: right .7em top 50%, 0 0;
background-size: .65em auto, 100%; }
select:hover {
background-color: #bda0be; }
select:focus {
background-color: #a881aa;
box-shadow: 0 0 1.5px 1px #3c173d; }
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000; }
.formfield {
padding: 5px;
margin: 10px 0; }
@ -141,7 +111,15 @@ body {
flex-direction: column;
align-items: center;
min-height: 100vh; }
@media (max-width: 750px) {
body {
font-size: 12pt; } }
@media (max-width: 500px) {
body {
font-size: 11pt;
display: flex;
align-items: center;
justify-content: space-evenly; } }
header {
display: flex;
justify-content: space-between;
@ -151,6 +129,12 @@ header {
padding: 20px 30px;
padding-bottom: 0;
width: 700px; }
@media (max-width: 750px) {
header {
width: 450px; } }
@media (max-width: 500px) {
header {
display: none; } }
header #headtext {
display: flex;
flex-direction: column;
@ -159,21 +143,36 @@ header {
font-size: 1.2em;
color: #3c173d;
font-weight: bold; }
header img {
.logo {
height: 100px;
max-width: 300px; }
#ens_logo_foot {
display: none; }
@media (max-width: 500px) {
#ens_logo_foot {
display: block;
margin: 30px; } }
main {
width: 700px;
background-color: #ffffff;
border: 3px solid #3c173d;
border-radius: 20px;
padding: 15px; }
padding: 15px;
width: 700px; }
@media (max-width: 750px) {
main {
width: 450px; } }
@media (max-width: 500px) {
main {
width: 90%; } }
main h2 {
font-size: 20pt;
font-size: 1.2em;
text-align: center;
color: #3c173d; }
@media (max-width: 500px) {
main h2 {
font-size: 1.1em; } }
a {
text-decoration: underline;
color: #3c173d;