From 6ba550f1987dbe5ee8e21f0e8df4e10a721ad427 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Mon, 29 Jul 2019 09:13:38 +0200
Subject: [PATCH] Make page mobile responsive, use styleguide font

---
 .../maintenance/maintenance.html              | 62 ++++++++++++++++---
 1 file changed, 52 insertions(+), 10 deletions(-)
diff --git a/deployment/human-connection/maintenance/maintenance.html b/deployment/human-connection/maintenance/maintenance.html
index 2ddff2216..906286342 100644
--- a/deployment/human-connection/maintenance/maintenance.html
+++ b/deployment/human-connection/maintenance/maintenance.html
@@ -1,17 +1,59 @@
-<body style="background-color: #F5F4F6;">
-  <div style="margin: 3em;vertical-align: middle;text-align: center;">
-    <h1 style="float: left;width: 25%;margin-right: 1em;">
+<head>
+  <style>
+    .body {
+      background-color: #f5f4f6;
+    }
+    .left-header,
+    .right-header {
+      font-family: "LatoWeb", sans-serif;
+      line-height: 1.3;
+    }
+    @media only screen and (min-width: 960px) {
+      .outer-div {
+        margin: 3em;
+        vertical-align: middle;
+        text-align: center;
+      }
+      .left-header {
+        float: left;
+        width: 25%;
+        margin-right: 1em;
+      }
+      .image {
+        width: 35em;
+      }
+      .right-header {
+        float: right;
+        width: 25%;
+        margin: 12em 1em 5em 2em;
+      }
+      .email-link {
+        margin-left: -5em;
+      }
+    }
+
+    @media only screen and (max-width: 960px) {
+      .outer-div {
+        margin: 3em;
+        vertical-align: middle;
+        text-align: center;
+      }
+      .image {
+        margin: 2em 0em;
+      }
+    }
+  </style>
+</head>
+<body class="body">
+  <div class="outer-div">
+    <h1 class="left-header">
       At the moment we are doing some scheduled maintenance, please try again
       later.
     </h1>
-    <img
-      src="./onourjourney.svg"
-      alt="Maintenance mode image"
-      style="width: 35em;"
-    />
-    <h1 style="float: right;width: 25%;margin: 12em 1em 5em 2em;">
+    <img src="./onourjourney.svg" alt="Maintenance mode image" class="image" />
+    <h1 class="right-header">
       Any Questions or concerns, send an email to <br />
-      <a href="mailto:info@human-connection.org" style="margin-left: -5em;"
+      <a href="mailto:info@human-connection.org" class="email-link"
         >info@human-connection.org</a
       >
     </h1>
