Merge branch 'joey-testing' into 'master'

Joey testing

See merge request !123

website/public/styles/index.css

@@ -3,11 +3,11 @@ a.button {
     border-radius: 5px;
     color: black;
     cursor: pointer;
-    height: 50%;
     padding: 8px 20px;
-    width: 50%;
     font-family: Arial;
-    font-size: 20px;
+    font-size: 22px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+
 }
 
 /* Body */
@@ -28,12 +28,13 @@ body {
 form {
     /*background-color: #a87a87;*/
     border-radius: 12px;
-    height: 75%;
+    height: 85%;
     margin: auto;
     width: 80%;
     overflow-y:auto;
 }
 
+
 /* inlog titel */
 h1 {
     padding: 8px;
@@ -48,6 +49,11 @@ h2 {
     font-size: 2.0em;
 }
 
+h3 {
+    padding: 16px;
+    text-align: center;
+    font-size: 1.5em;
+}
 
 input[type=text], input[type=password], input[type=email], input[type="date"] {
     box-sizing: border-box;
@@ -60,14 +66,22 @@ input[type=text], input[type=password], input[type=email], input[type="date"] {
     width: 55%;
 }
 
-button[type=submit] {
+.center{
+    text-align: center;
+}
+
+button {
     background-color: #C8CABD;
+    border-radius: 5px;
     color: black;
     cursor: pointer;
+    height: 50%;
+    padding: 8px 20px;
+    margin: 10px;
     font-family: Arial;
     font-size: 22px;
-    height: 30px;
-    width: 120px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+
 }
 
 .error {
@@ -80,31 +94,6 @@ label {
     display: block;
 }
 
-.left-arrow {
-    display: inline-block;
-    position: relative;
-    background-color: #C8CABD;
-    height: 25px;
-    width: 120px;
-    padding: 3px 3px 3px 3px;
-    text-align: center;
-    border-radius: 0px 5px 5px 0px;
-    font-size: 22px;
-
-}
-.left-arrow:after {
-    content: '';
-    display: block;
-    position: absolute;
-    right: 100%;
-    top: 0;
-    bottom: 0;
-    border-top: 12px solid transparent;
-    border-right: 20px solid #C8CABD;
-    border-bottom: 12px solid transparent;
-    border-left: 0px solid transparent;
-}
-
 /* padding voor registreer container */
 .login_containerregister {
     padding: 16px;
@@ -137,24 +126,84 @@ label {
     background-repeat: repeat-x;
     background-attachment: fixed;*/
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-    height: 500px;
+    height: 400px;
     margin: 34px auto;
     overflow-y: auto;
     padding: 20px;
     width: 45%;
 }
 
-/*.platform {
-  width: 40%;
-  margin: 34px auto;
-}*/
-
-@-webkit-keyframes animatezoom {
-    from {-webkit-transform: scale(0)}
-    to {-webkit-transform: scale(1)}
-}
-
 ul {
     font-family: Arial;
     font-size: 16px;
 }
+
+/* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    padding-top: 100px; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+
+/* Modal Content */
+.modal-content {
+    position: relative;
+    background-color: #FFFFFF;
+    margin: auto;
+    padding: 0;
+    border: 1px solid #888;
+    width: 500px;
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+    -webkit-animation-name: animatetop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animatetop;
+    animation-duration: 0.4s
+}
+
+/* Add Animation */
+@-webkit-keyframes animatetop {
+    from {top:-300px; opacity:0}
+    to {top:0; opacity:1}
+}
+
+@keyframes animatetop {
+    from {top:-300px; opacity:0}
+    to {top:0; opacity:1}
+}
+
+/* The Close Button */
+.close {
+    color: white;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.modal-header {
+    padding: 2px 16px;
+    background-color: #FBC02D;
+    color: black;
+}
+
+.modal-body {padding: 2px 16px;}
+
+.modal-footer {
+    padding: 2px 16px;
+    background-color: #FBC02D;
+    color: black;
+}

website/public/styles/resetpassword.css

@@ -0,0 +1,17 @@
+.password-change {
+    height: 100%;
+    background-color: #FBC02D;
+    margin: auto;
+}
+
+.top-logo {
+    text-align: center;
+}
+
+.item-box {
+    margin: 30px auto auto;
+    display: block;
+}
+.password-change img {
+    width: 50%;
+}