Flask Mail added. Contact us page complete.

static/css/shared.css

@@ -33,26 +33,34 @@ body {
     max-height: 100%;
 }
 
+/*
+h1, h2, h3, h4, h5, p, a, label {
+    display: flex;
+    margin: 0;
+    padding: 0;
+}
+*/
+
 h1 {
-    font-size: 4vh;
+    font-size: 36px;
 }
 
 h2 {
-    font-size: 2.4vh;
+    font-size: 22px;
 }
 
 h3 {
-    font-size: 2vh;
+    font-size: 18px;
     margin: 1vh;
 }
 
 h4 {
-    font-size: 1.5vh;
+    font-size: 13px;
     margin: 1vh;
 }
 
 h5 {
-    font-size: 1.25vh;
+    font-size: 11px;
     margin: 1vh;
 }
 
@@ -136,12 +144,19 @@ h5 {
 
 .page-body {
     height: 75vh !important;
+    top: 15vh;
+    bottom: 5vh;
     padding: 0;
     margin: 0;
     border: 0;
     align-items: center;
     align-content: center;
     justify-content: center;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    overflow-y: auto;
+    overflow-x: hidden;
 }
 
 .page-body > * {
@@ -151,7 +166,6 @@ h5 {
     justify-content: center;
     text-align: center;
     width: 100%;
-    height: 100%;
     align-self: center;
     font-size: 20px;
 }
@@ -160,15 +174,15 @@ h5 {
     align-self: center;
     padding-top: 1vh;
     padding-bottom: 1vh;
-    color: white; /* var(--c_purple_dark); */
+    color: var(--c_purple_dark);
 }
-#pageBody > * :first-child{
-    margin-top: 25vh;
+#pageBody > .card {
+    height: fit-content;
+    margin-top: 1vh;
 }
-#pageBody > * :last-child {
-    margin-bottom: 35vh;
+#pageBody > .card:last-of-type {
+    margin-bottom: 1vh;
 }
-
 /* Create two unequal columns that floats next to each other *
 /* Left column *
 .leftcolumn {   
@@ -245,7 +259,7 @@ img.header-logo {
 
 /* Add a card effect for articles */
 .card {
-    background-color: white;
+    background-color: var(--c_purple_pastel);
     padding: 0;
     margin: 0;
     display: flex !important;
@@ -254,7 +268,8 @@ img.header-logo {
     justify-content: center;
     text-align: center;
     border-radius: 4vh;
-    min-width: fit-content;
+    /* min-width: fit-content; */
+    position: relative;
 }
 
 .card.subcard {
@@ -305,14 +320,8 @@ img.header-logo {
     padding: 0;
     text-align: center;
     margin: 0;
-    /*
-    background: var(--c_purple_light);
-    border-top-right-radius: 2.5vh;
-    border-top-left-radius: 2.5vh;
-    border-bottom-right-radius: 0;
-    border-bottom-right-radius: 0;
-    */
     height: 10vh !important;
+    overflow-y: auto;
 }
 
 .footer > h4, h5 {
@@ -362,8 +371,8 @@ img.header-logo {
 
 .container-input > input, .container-input > textarea {
     border: 2px solid var(--c_purple);
-    max-width: 50%;
-    min-width: 40%;
+    max-width: 66%;
+    min-width: 20%;
     padding: 1vh;
 }
 
@@ -422,7 +431,16 @@ button, .btn-submit, input[type="submit"] {
 }
 
 .hamburger {
-
+    border: 2px solid var(--c_purple_dark);
+    border-radius: 4px;
+}
+.hamburger:first-child {
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+}
+.hamburger:last-child {
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
 }
 
 .hamburger > * {