Style: responsive design
This commit is contained in:
Théophile Bastian
parent
cc8be8a775
commit
c2087c8750
4 changed files with 87 additions and 68 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
height: 100px;
|
||||
max-width: 300px; }
|
||||
|
||||
.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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue