Improved styles and accessibility

app.py

@@ -189,7 +189,7 @@ def contact_post():
             name = form.name.data
             message = form.message.data
             # send email
-            mailItem = Message("PARTS Website Contact Us Message", recipients=[app.config['MAIL_DEFAULT_SENDER']])
+            mailItem = Message("PARTS Website Contact Us Message", recipients=[app.config['MAIL_CONTACT_PUBLIC']])
             mailItem.body = f"Dear Lord Edward Middleton-Smith,\n\n{message}\n\nKind regards,\n{name}\n{email}"
             mail.send(mailItem)
             return "Submitted."

static/css/contact.css

@@ -1,6 +1,5 @@
 
 #pageBody > .card:first-of-type{
-    top: 0;
     flex-grow: 1;
 }
 #pageBody > .card:last-of-type {

static/css/shared.css

@@ -29,7 +29,7 @@ body {
     margin: 0;
     border: 0;
     background: linear-gradient(to bottom right, var(--c_purple), #dc2430); /* var(--c_purple_pastel); */
-    height: 100%;
+    height: 100vh;
     max-height: 100%;
 }
 
@@ -148,21 +148,23 @@ h5 {
 }
 
 
-.page-body {
+#pageBody {
-    height: 75vh !important;
+    height: 69vh !important;
-    top: 15vh;
+    padding: 1vh;
-    bottom: 5vh;
+    margin: 1vh;
-    padding: 0;
+    margin-left: 0;
-    margin: 0;
+    margin-right: 0;
     border: 0;
-    align-items: center;
     align-content: center;
-    justify-content: center;
+    justify-content: flex-start;
     display: flex;
     flex-direction: column;
-    align-items: stretch;
+    align-items: flex-start;
     overflow-y: auto;
     overflow-x: hidden;
+    position: absolute;
+    width: 98vw;
+
 }
 
 .page-body > * {
@@ -186,8 +188,12 @@ h5 {
     height: fit-content;
     margin-top: 1vh;
 }
+#pageBody > .card:first-of-type{
+    margin-top: 0vh;
+    top: 0;
+}
 #pageBody > .card:last-of-type {
-    margin-bottom: 1vh;
+    /* margin-bottom: 1vh; */
 }
 /* Create two unequal columns that floats next to each other *
 /* Left column *
@@ -267,8 +273,8 @@ img.header-logo {
 /* Add a card effect for articles */
 .card {
     background-color: var(--c_purple_pastel);
-    padding: 0;
+    padding: 1vh;
-    margin: 0;
+    margin: 1vh;
     display: flex !important;
     flex-wrap: wrap;
     align-items: center;
@@ -320,6 +326,7 @@ img.header-logo {
     margin-top: none;
 }
 
+
 /* Clear floats after the columns 
 .row:after {
     content: "";
@@ -329,11 +336,18 @@ img.header-logo {
 */
 /* Footer */
 .footer {
-    padding: 0;
+    padding: 1vh;
     text-align: center;
     margin: 0;
-    height: 10vh !important;
+    height: 8vh !important;
     overflow-y: auto;
+    background-color: var(--c_purple_pastel);
+    border-top-left-radius: 2.5vh;
+    border-top-right-radius: 2.5vh;
+    position: absolute;
+    /* top: 2.5vh; */
+    bottom: 0;
+    width: 98vw;
 }
 
 .footer > h4, h5 {
@@ -483,6 +497,9 @@ button, .btn-submit, input[type="submit"] {
     padding-bottom: 4.5px;
 }
 
+ul {
+    max-width: 90%;
+}
 li {
     text-align: left;
     font-size: 18px;

templates/_page_accessibility_statement.html

@@ -195,7 +195,7 @@
             [Note: publishing the test report is optional but doing so may allow you to make your accessibility statement shorter and more focused.]
             https://www.w3.org/WAI/eval/report-tool/#/
         -->
-        <p>You can read the full accessibility test report {{ url_for('accessibility_report') }}.</p>
+        <p>You can read the full accessibility test report {{ model.URL_HOST }}{{ url_for('accessibility_report') }}.</p>
     </div>
 
     <!-- Include JavaScript -->