Make styles responsive for small screens

1 files changed, 38 insertions, 1 deletions

diff --git a/static/css/mobile.css b/static/css/mobile.css
index 364d400..7b73764 100644
--- a/static/css/mobile.css
+++ b/static/css/mobile.css
@@ -1,3 +1,40 @@
 @media screen and (max-width: 700px) {
-
+    body {
+        margin: 0;
+        min-height: 100vh;
+        width: 100vw;
+    }
+    #header {
+        justify-content: center;
+    }
+    #header #logo {
+        flex-grow: unset;
+    }
+    #content {
+        flex-direction: column;
+        align-items: center;
+    }
+    #content #lhs {
+        margin: 0 0.5rem 1rem;
+        font-size: 20pt;
+    }
+    #base-url {
+        font-size: 20pt;
+    }
+    #slug {
+        flex-grow: 1;
+    }
+    .form-element input, .form-element button {
+        font-size: 18pt;
+    }
+    #content #rhs {
+        margin: 1.5rem;
+    }
+    #content #rhs h3 {
+        font-size: 2em;
+    }
+    #content #rhs p {
+        font-size: 1.5em;
+        margin-bottom: 1rem;
+    }
 }