Improved login page style organization and structure

1 files changed, 36 insertions, 31 deletions

diff --git a/login-page/src/styles.css b/login-page/src/styles.css
index 87a1cfb..6640059 100644
--- a/login-page/src/styles.css
+++ b/login-page/src/styles.css
@@ -1,3 +1,5 @@
+/* Global */
+
 :root {
   --focus-color: forestgreen;
 }
@@ -15,6 +17,8 @@ form {
   width: 100%;
 }
 
+/* Styling of simple elements */
+
 #content {
 	height: 100%;
   max-width: 20em;
@@ -53,14 +57,37 @@ form {
   padding: 0.3em;
 }
 
-#content input[type=text]:nth-last-of-type(1) {
-  
-}
-
 input:focus, button:focus {
   outline: 0;
 }
 
+#content hr {
+	width: 100%;
+	border: 1px solid black;
+	box-sizing: border-box;
+}
+
+/* Where the magic happens */
+
+#submit-btn {
+  transition: 0.2s;
+  background-color: black;
+  color: white;
+  text-align: center;
+}
+
+#submit-btn:hover {
+  cursor: pointer;
+  border-color: var(--focus-color) !important;
+  color: var(--focus-color);
+  background-color: white;
+}
+
+#submit-btn:active {
+  transition: 0s;
+  transform: scale(0.9);
+}
+
 .input-selection {
   position: relative;
   margin-top: 0.7em;
@@ -78,16 +105,19 @@ input:focus, button:focus {
 }
 
 .input-selection input::-webkit-input-placeholder {
+  /* Don't show the placeholder when the label is on top */
   opacity: 0;
 }
 
 .input-selection:hover > label, 
 .input-selection > input:not(:placeholder-shown) + label,
 .input-selection > input:focus + label {
+  /* When hovering, typing or having typed something in an input, 
+   * make the label smaller, color it and then move it up
+   */
   font-size: 0.7em;
-  transition: 0.2s;
-  transform: translate(0, -1.2em);
   color: var(--focus-color);
+  transform: translate(0, -1.2em);
 }
 
 .input-selection:hover > input::-webkit-input-placeholder, 
@@ -103,28 +133,3 @@ input:focus, button:focus {
   margin-top: -1px !important;
 }
 
-
-#content hr {
-	width: 100%;
-	border: 1px solid black;
-	box-sizing: border-box;
-}
-
-#submit-btn {
-  transition: 0.2s;
-  background-color: black;
-  color: white;
-  text-align: center;
-}
-
-#submit-btn:hover {
-  cursor: pointer;
-  border-color: var(--focus-color) !important;
-  color: var(--focus-color);
-  background-color: white;
-}
-
-#submit-btn:active {
-  transition: 0s;
-  transform: scale(0.9);
-}