Merge pull request #164 from xypnox/forms-css

Forms are redesigned

static/css/mid-term-mentor.css

@@ -1,40 +1,48 @@
-@import url(https://fonts.googleapis.com/css?family=Open+Sans:400);
+/* @import url(https://fonts.googleapis.com/css?family=Open+Sans:400); */
 
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
 body {
     background-color: #e9e9e9;
-    font: 400 87.5%/1.5em 'Open Sans', sans-serif;
+    color: #555;
+    font: 87.5%/1.5em 'Roboto', sans-serif;
+    line-height: 1.5;
 }
 
 .form-wrapper {
     display: flex;
     flex-direction: column;
     background: #fafafa;
-    margin: 3vw auto;
-    padding: 5vh 1vw;
-    padding-bottom:6vh;
-    max-width: 60vw;
-    box-shadow: 5px 5px 10px grey;
+    margin: 10vh auto;
+    padding: 10vh 5vw;
+    padding-bottom: 6vh;
+    max-width: 1000px;
+    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
+    border-radius: 10px;
     min-height: 100vh;
+    border-top: 8px solid rgb(0, 131, 245);
 }
 
 .header {
     display: flex;
     justify-content: center;
 }
 
+.header h1 {
+    font-size: 4rem;
+    font-weight: bolder;
+    padding-bottom: 2rem;
+}
+
 .instructions {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
-    font-size: 1.55em;
-    margin-left: 3vh;
-    margin-top: 1em;
-    margin-bottom: 1em;
-    padding-top: 1em;
-    border-width: 1px;
-    border-style: solid;
-    padding-right: 1em;
-
+    font-size: 1.5rem;
+    margin: 2rem 1rem;
+    padding: 2.5rem 1rem;
+    background-color: #eee;
+    border-radius: 5px;
+    border: 1px solid #ddd;
 }
 
 p {
@@ -45,25 +53,23 @@ p {
 
 ul {
     line-height: 1.4em;
+    margin-left: -1rem;
 }
 
 .form-class {
     display: flex;
     flex-direction: column;
-    padding-left: 4vh;
-    padding-right: 4vh;
+    /* padding-left: 4vh; */
+    /* padding-right: 4vh; */
 }
 
-.form-item label {
-    font-size: 1.55em;
-}
 
 .form-item input {
     background: #fafafa;
     border: none;
-    border-bottom: 2px solid #e9e9e9;
+    border-bottom: 2px solid #c0c0c0;
     font-family: 'Open Sans', sans-serif;
-    font-size: 1.2vw;
+    font-size: 2rem;
     height: 50px;
     transition: border-color 0.3s;
     width: 100%;
@@ -72,36 +78,49 @@ ul {
 .form-item select {
     background: #fafafa;
     border: none;
-    border-bottom: 2px solid #e9e9e9;
+    border-bottom: 2px solid #c0c0c0;
     font-family: 'Open Sans', sans-serif;
-    font-size: 1.2vw;
+    font-size: 2rem;
     height: 50px;
     transition: border-color 0.3s;
     width: 100%;
 }
 
 .form-item input:focus {
-    border-bottom: 2px solid #c0c0c0;
+    border-bottom: 2px solid rgb(0, 131, 245);
     outline: none;
 }
 
 .form-item select:focus {
+    border-bottom: 2px solid rgb(0, 131, 245);
     outline: none;
 }
 
 
 .form-item {
-    margin-top: 2em;
-    margin-bottom: 4em;
+    margin-top: 8rem;
+    /* margin-bottom: 4rem; */
 }
 
 .form-item:last-child {
     margin-bottom: 0px;
     padding-bottom: 0px;
 }
 
+.form-item label {
+    font-size: 2em;
+    font-weight: bolder;
+    padding-bottom: 10px;
+    line-height: 1.25;
+}
+
+.labelfocus {
+    color: rgb(0, 131, 245);
+}
+
+
 .button-panel {
-    margin: 2vw 0 0;
+    margin: 6rem 0 0;
 }
 
 .button-panel {
@@ -114,32 +133,43 @@ ul {
     display: flex;
     justify-content: center;
     align-items: center;
-    background: #ff9547;
+    background-color: rgb(53, 107, 255);
     border: none;
     color: #fff;
-    height: 4vw;
     font-family: 'Open Sans', sans-serif;
-    font-size: 2vw;
+    font-size: 2.5rem;
+	padding: 0.5rem;
+
     letter-spacing: 0.05em;
     text-align: center;
     transition: background 0.3s ease-in-out;
     min-width: 40%;
     cursor: pointer;
     border-radius: 6px;
-    height: 3.6vw;
+    line-height: 1.5;
+}
+
+
+.button:hover {
+	background-color: rgb(0, 64, 121);
 }
 
 textarea {
     width: 100%;
-    height: 10em;
-    font-size: 1.55em;
+    min-height: 10em;
+    font-size: 2em;
+    line-height: 1.5;
     background: #fafafa;
     border: none;
-    border-bottom: 2px solid #e9e9e9;
+    border-bottom: 2px solid #c0c0c0;
     font-family: 'Open Sans', sans-serif;
+    padding: 5%;
 }
 
 textarea:focus {
+    /* border: 2px solid #c0c0c0; */
+    border-bottom: 2px solid rgb(0, 131, 245);
+    box-shadow: 0 5px 7px rgba(0, 131, 245, 0.25);
     outline: none;
 }
 
@@ -149,6 +179,31 @@ textarea:focus {
     color: red;
 }
 
+@media (min-width: 400px) { 
+    .instructions {
+        font-size: 1.7rem;
+    }
+
+    .form-item label {
+        font-size: 2rem;
+    }
+
+    .form-item input,
+    .form-item select,
+    .form-item textarea {
+        font-size: 3rem;
+    }
+
+    textarea {
+        margin-left: -10%;
+        width: 120%;
+    }
+
+    .form-class {
+        padding: 0 10%;
+    }
+
+}
 .student-container-inner {
     display: flex;
     flex-direction: column;