Added in editor login feature to login into editor

Signed-off-by: rodude123 <rodude123@gmail.com>
2022-07-29 20:00:36 +01:00
parent 315a0484b0
commit 90a3e4f533
31 changed files with 831 additions and 478 deletions
@@ -66,96 +66,6 @@ div#sayHello  #contactForm{
    gap: 1em;
 }

-#contactForm .formControl {
-    width: 100%;
-}
-
-#contactForm input[type="submit"] {
-    margin-top: 1em;
-    align-self: flex-start;
-}
-
-#contactForm .formControl input:not([type="submit"]), #contactForm .formControl textarea {
-    width: 100%;
-    border: 4px solid var(--primaryDefault);
-    background: none;
-    outline: none;
-    -webkit-border-radius: 1em;
-    -moz-border-radius: 1em;
-    border-radius: 0.5em;
-    padding: 0 0.5em;
-}
-
-#contactForm .formControl textarea {
-    padding: 0.5em;
-}
-
-
-#contactForm .formControl input:not([type="submit"]).invalid:invalid, #contactForm .formControl textarea.invalid:invalid {
-    border: 4px solid var(--errorDefault);
-}
-
-#contactForm .formControl input:not([type="submit"]).invalid:invalid:focus, #contactForm .formControl textarea.invalid:invalid:focus {
-    border: 4px solid var(--errorHover);
-    box-shadow: 0 4px 2px 0 var(--mutedBlack);
-}
-
-#contactForm .formControl input:not([type="submit"]):focus, #contactForm .formControl textarea:focus {
-    border: 4px solid var(--primaryHover);
-}
-
-#contactForm .formControl input:not([type="submit"]) {
-    height: 3em;
-}
-
-#contactForm .flName {
-    display: flex;
-    flex-direction: row;
-    gap: 1em;
-}
-
-#contactForm .formControl {
-    width: 100%;
-}
-
-#contactForm input[type="submit"] {
-    margin-top: 1em;
-    align-self: flex-start;
-}
-
-#contactForm .formControl input:not([type="submit"]), #contactForm .formControl textarea {
-    width: 100%;
-    border: 4px solid var(--primaryDefault);
-    background: none;
-    outline: none;
-    -webkit-border-radius: 1em;
-    -moz-border-radius: 1em;
-    border-radius: 0.5em;
-    padding: 0 0.5em;
-}
-
-#contactForm .formControl textarea {
-    padding: 0.5em;
-}
-
-
-#contactForm .formControl input:not([type="submit"]).invalid:invalid, #contactForm .formControl textarea.invalid:invalid {
-    border: 4px solid var(--errorDefault);
-}
-
-#contactForm .formControl input:not([type="submit"]).invalid:invalid:focus, #contactForm .formControl textarea.invalid:invalid:focus {
-    border: 4px solid var(--errorHover);
-    box-shadow: 0 4px 2px 0 var(--mutedBlack);
-}
-
-#contactForm .formControl input:not([type="submit"]):focus, #contactForm .formControl textarea:focus {
-    border: 4px solid var(--primaryHover);
-}
-
-#contactForm .formControl input:not([type="submit"]) {
-    height: 3em;
-}
-
 div.message {
    background: var(--primaryDefault);
    color: #FFFFFF;
@@ -10,34 +10,6 @@
@import "contact.css";
@import "footer.css";

-/****** Root Style ******/
-:root {
-    /* Colours */
-    --mainHue: 79;
-    --mainSat: 62%;
-    --mainLight: 51%;
-    --primaryDefault: hsla(var(--mainHue), var(--mainSat), var(--mainLight), 1);
-    --primaryHover: hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 10%), 1);
-    --timelineItemBrdr: hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 20%), 1);
-    --errorDefault: hsla(0, calc(var(--mainSat) + 10%),calc(var(--mainLight) + 10%), 1);
-    --errorHover: hsla(0, calc(var(--mainSat) + 10%), calc(var(--mainLight) - 10%), 1);
-    --grey: hsla(0, 0%, 39%, 1);
-    --notAvailableDefault: hsla(0, 0%, 39%, 1);
-    --notAvailableHover: hsla(0, 0%,32%, 1);
-    --mutedGrey: hsla(0, 0%, 78%, 1);
-    --mutedBlack: hsla(0, 0%, 0%, 0.25);
-    --navBack: hsla(0, 0%, 30%, 1);
-
-    /* Font Sizes */
-    --titleFS: 2.25rem;
-    --generalFS: 1.125rem;
-    --headingFS: 1.5rem;
-}
-
-*{
-    box-sizing: border-box;
-}
-
 /**** Media Queries *****/

@media screen and (max-width: 90em) {
@@ -1,4 +1,33 @@
-/*** Template Styles ****/
+/*** Template Styles ***/
+
+/*** Root Style ***/
+
+:root {
+    /* Colours */
+    --mainHue: 80;
+    --mainSat: 60%;
+    --mainLight: 50%;
+    --primaryDefault: hsla(var(--mainHue), var(--mainSat), var(--mainLight), 1);
+    --primaryHover: hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 10%), 1);
+    --timelineItemBrdr: hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 20%), 1);
+    --errorDefault: hsla(0, calc(var(--mainSat) + 10%),calc(var(--mainLight) + 10%), 1);
+    --errorHover: hsla(0, calc(var(--mainSat) + 10%), calc(var(--mainLight) - 10%), 1);
+    --grey: hsla(0, 0%, 39%, 1);
+    --notAvailableDefault: hsla(0, 0%, 39%, 1);
+    --notAvailableHover: hsla(0, 0%,32%, 1);
+    --mutedGrey: hsla(0, 0%, 78%, 1);
+    --mutedBlack: hsla(0, 0%, 0%, 0.25);
+    --navBack: hsla(0, 0%, 30%, 1);
+
+    /* Font Sizes */
+    --titleFS: 2.25rem;
+    --generalFS: 1.125rem;
+    --headingFS: 1.5rem;
+}
+
+*{
+    box-sizing: border-box;
+}

 html {
    scroll-behavior: smooth;
@@ -88,6 +117,89 @@ a.btn:active, form input[type="submit"]:active {
    text-shadow: 0 6px 4px var(--mutedBlack);
 }

+form .formControl {
+    width: 100%;
+}
+
+form input[type="submit"] {
+    margin-top: 1em;
+    align-self: flex-start;
+}
+
+form .formControl input:not([type="submit"]), form .formControl textarea {
+    width: 100%;
+    border: 4px solid var(--primaryDefault);
+    background: none;
+    outline: none;
+    -webkit-border-radius: 1em;
+    -moz-border-radius: 1em;
+    border-radius: 0.5em;
+    padding: 0 0.5em;
+}
+
+form .formControl textarea {
+    padding: 0.5em;
+}
+
+
+form .formControl input:not([type="submit"]).invalid:invalid, form .formControl textarea.invalid:invalid {
+    border: 4px solid var(--errorDefault);
+}
+
+form .formControl input:not([type="submit"]).invalid:invalid:focus, form .formControl textarea.invalid:invalid:focus {
+    border: 4px solid var(--errorHover);
+    box-shadow: 0 4px 2px 0 var(--mutedBlack);
+}
+
+form .formControl input:not([type="submit"]):focus, form .formControl textarea:focus {
+    border: 4px solid var(--primaryHover);
+}
+
+form .formControl input:not([type="submit"]) {
+    height: 3em;
+}
+
+form .formControl {
+    width: 100%;
+}
+
+form input[type="submit"] {
+    margin-top: 1em;
+    align-self: flex-start;
+}
+
+form .formControl input:not([type="submit"]), form .formControl textarea {
+    width: 100%;
+    border: 4px solid var(--primaryDefault);
+    background: none;
+    outline: none;
+    -webkit-border-radius: 1em;
+    -moz-border-radius: 1em;
+    border-radius: 0.5em;
+    padding: 0 0.5em;
+}
+
+form .formControl textarea {
+    padding: 0.5em;
+}
+
+form .formControl input:not([type="submit"]).invalid:invalid, form .formControl textarea.invalid:invalid {
+    border: 4px solid var(--errorDefault);
+}
+
+form .formControl input:not([type="submit"]).invalid:invalid:focus, form .formControl textarea.invalid:invalid:focus {
+    border: 4px solid var(--errorHover);
+    box-shadow: 0 4px 2px 0 var(--mutedBlack);
+}
+
+form .formControl input:not([type="submit"]):focus, form .formControl textarea:focus {
+    border: 4px solid var(--primaryHover);
+}
+
+form .formControl input:not([type="submit"]) {
+    height: 3em;
+}
+
 section#about, section#curriculumVitae h1 {
    padding: 0 5rem;
 }