From c2087c875082e6a5f2087720339de5176f2ca6bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A9ophile=20Bastian?= Date: Tue, 24 Mar 2020 15:38:37 +0100 Subject: [PATCH] Style: responsive design --- customize_cas/scss/_forms.scss | 22 --------- customize_cas/scss/_params.scss | 12 +++-- customize_cas/scss/style.scss | 46 ++++++++++++++++-- customize_cas/static/css/style.css | 75 +++++++++++++++--------------- 4 files changed, 87 insertions(+), 68 deletions(-) diff --git a/customize_cas/scss/_forms.scss b/customize_cas/scss/_forms.scss index 9016358..c2dc2c2 100644 --- a/customize_cas/scss/_forms.scss +++ b/customize_cas/scss/_forms.scss @@ -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; diff --git a/customize_cas/scss/_params.scss b/customize_cas/scss/_params.scss index bcd04c4..e1cc6aa 100644 --- a/customize_cas/scss/_params.scss +++ b/customize_cas/scss/_params.scss @@ -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%); diff --git a/customize_cas/scss/style.scss b/customize_cas/scss/style.scss index 44e66e1..655c45d 100644 --- a/customize_cas/scss/style.scss +++ b/customize_cas/scss/style.scss @@ -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; } diff --git a/customize_cas/static/css/style.css b/customize_cas/static/css/style.css index 74ae20c..42496b8 100644 --- a/customize_cas/static/css/style.css +++ b/customize_cas/static/css/style.css @@ -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;