Style: responsive design

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;

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

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

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;