Footer added; Pages fucked upfooter

1 files changed, 55 insertions, 48 deletions

diff --git a/src/styles.css b/src/styles.css
index eeb93fe..b215190 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -9,24 +9,27 @@
   --failure: indianred;
 }
 
-html, body {
-	height: 100%;
-	margin: 0;
+html,
+body {
+  height: 100%;
+  margin: 0;
 }
 body {
   font: 21px sans-serif !important;
   background-color: var(--bg-color);
 }
 
-input:focus, button:focus {
+input:focus,
+button:focus {
   outline: 0;
 }
 
-#content { /* Used for the login and register pages */
+#content {
+  /* Used for the login and register pages */
   height: 100%;
   max-width: 20em;
   box-sizing: border-box;
-  border: .5em solid var(--bg-color);
+  border: 0.5em solid var(--bg-color);
 
   margin: 0 auto;
 
@@ -36,10 +39,15 @@ input:focus, button:focus {
   flex-direction: column;
 }
 
+#content > *:first-child,
+#content > *:last-child {
+  flex: 1;
+}
+
 .rounded-border {
   border: 2px solid black;
-  border-radius: .6em;
-  padding: .4em;
+  border-radius: 0.6em;
+  padding: 0.4em;
 }
 
 .round-image {
@@ -62,22 +70,23 @@ input:focus, button:focus {
   overflow-y: auto;
 }
 
-  /* Hide scrollbar for Chrome, Safari and Opera */
+/* Hide scrollbar for Chrome, Safari and Opera */
 .scroll-standalone::-webkit-scrollbar {
   display: none;
 }
 
-  /* Hide scrollbar for IE, Edge and Firefox */
+/* Hide scrollbar for IE, Edge and Firefox */
 .scroll-standalone {
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 }
 
-.user-language, .user-technology {
-  border-radius: .4em;
+.user-language,
+.user-technology {
+  border-radius: 0.4em;
   background-color: lightgrey;
-  padding: .26em;
-  margin: .1em .2em;
+  padding: 0.26em;
+  margin: 0.1em 0.2em;
   width: fit-content;
 }
 
@@ -85,10 +94,10 @@ input:focus, button:focus {
 
 .input-selection {
   position: relative;
-  margin-top: .7em;
+  margin-top: 0.7em;
 }
 
-  /* Don't show the placeholder when the label is on top
+/* Don't show the placeholder when the label is on top
    */
 .input-selection .input-field::-webkit-input-placeholder {
   opacity: 0;
@@ -102,8 +111,8 @@ input:focus, button:focus {
   border-bottom: 1px solid grey;
   box-sizing: border-box;
 
-  margin-bottom: .5em;
-  padding: .4em;
+  margin-bottom: 0.5em;
+  padding: 0.4em;
   padding-left: 0;
 
   font-size: inherit;
@@ -115,22 +124,22 @@ input:focus, button:focus {
   position: absolute;
   left: 0;
 
-  margin-top: .4em;
+  margin-top: 0.4em;
   color: grey;
 }
 
-  /* When hovering, typing or having typed something in an input,
+/* When hovering, typing or having typed something in an input,
    * make the label smaller, color it and then move it up
    */
-.input-selection:hover > .input-field-label ,
-.input-selection > input:not(:placeholder-shown) + .input-field-label ,
+.input-selection:hover > .input-field-label,
+.input-selection > input:not(:placeholder-shown) + .input-field-label,
 .input-selection > input:focus + .input-field-label {
-  font-size: .7em;
+  font-size: 0.7em;
   color: var(--focus-color);
   transform: translate(0, -1.2em);
 }
 
-  /* Show the placeholder, when you've hovered or
+/* Show the placeholder, when you've hovered or
    * focused (typing in) on the input-field
    */
 .input-selection:hover > .input-field::-webkit-input-placeholder,
@@ -138,7 +147,7 @@ input:focus, button:focus {
   opacity: 1;
 }
 
-  /* Make the underline thicker and change it's and the cursors's
+/* Make the underline thicker and change it's and the cursors's
    * color when hovered or focused (typing in) on the input-field
    */
 .input-selection:hover > .input-field,
@@ -149,19 +158,18 @@ input:focus, button:focus {
   margin-top: -1px !important;
 }
 
-
 /* Input errors */
 
 .input-errors {
-  margin-top: -.8em;
-  font-size: .7em;
+  margin-top: -0.8em;
+  font-size: 0.7em;
 
   position: absolute;
   right: 0;
   top: 0;
 }
 
-  /* Move the errors above the input when
+/* Move the errors above the input when
    * using the site on a small screen and
    * add some space for them above the input
    */
@@ -175,7 +183,7 @@ input:focus, button:focus {
 }
 
 .input-errors > .error {
-  margin-left: .3em;
+  margin-left: 0.3em;
 }
 
 .input-field:focus ~ .input-errors > .error {
@@ -194,14 +202,14 @@ input:focus, button:focus {
   background-color: black;
 
   border: 2px solid black;
-  border-radius: .4em;
+  border-radius: 0.4em;
   box-sizing: border-box;
 
-  font-size: .8em;
+  font-size: 0.8em;
   text-align: center;
 
-  margin-top: .5em;
-  padding: .3em;
+  margin-top: 0.5em;
+  padding: 0.3em;
 }
 
 .submit-btn:hover {
@@ -213,7 +221,7 @@ input:focus, button:focus {
 
 .submit-btn:active {
   transition: 0s;
-  transform: scale(.9);
+  transform: scale(0.9);
 }
 
 .delete-btn:hover {
@@ -227,16 +235,16 @@ input:focus, button:focus {
   display: flex;
   flex-wrap: wrap;
   color: gray;
-  font-size: .75em;
-  margin: 0 .3em;
+  font-size: 0.75em;
+  margin: 0 0.3em;
 }
 
 .form-attachment {
   border: 2px solid black;
-  border-radius: .6em;
-  margin-top: .2em;
-  margin-right: .2em;
-  padding: .2em;
+  border-radius: 0.6em;
+  margin-top: 0.2em;
+  margin-right: 0.2em;
+  padding: 0.2em;
   display: flex;
   align-items: center;
 }
@@ -246,12 +254,12 @@ input:focus, button:focus {
 }
 
 .remove-form-attachment {
-  font-size: .9em;
+  font-size: 0.9em;
   color: var(--failure);
   background-color: white;
-  border-radius: .2em;
-  margin: 0 .2em;
-  padding: .2em;
+  border-radius: 0.2em;
+  margin: 0 0.2em;
+  padding: 0.2em;
 }
 
 .remove-form-attachment:hover {
@@ -259,4 +267,3 @@ input:focus, button:focus {
   background-color: var(--failure);
   cursor: pointer;
 }
-