Responsive layout

README.md

@@ -41,4 +41,10 @@ Seance takes a JSON or JSON5 config file (default location is config/config.json
 
 ## Ghost Installation
 
-WIP
+Create a page for your contact form. Add an "HTML" section. Add the following iframe:
+
+```
+<iframe width="100%" height="600" src="https://contact.example.com.com/?dark=false" frameBorder="0"></iframe>
+```
+
+Be sure to use the URL for your Seance instance. If you're using a dark theme you can change the `dark` parameter to `true`.

styles/01-layout.scss

@@ -12,7 +12,7 @@ body {
 .container {
     max-width: 40em;
     margin: auto;
-    padding: .25em 0;
+    padding: .25em;
 }
 
 .form {
@@ -58,7 +58,6 @@ button,
 .button {
     cursor: pointer;
     display: inline-block;
-    padding: 5px 10px;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
@@ -70,9 +69,38 @@ button,
     }
 }
 
+input,
+textarea,
+button,
+.button {
+    padding: 5px 10px;
+}
+
+body label {
+    padding: 5px 0px;
+}
+
 input,
 textarea,
 button,
 .button {
     border-radius: 2px;
+}
+
+@media screen and (max-width: 400px) {
+    .form {
+        grid-template-columns: 1fr;
+
+        &>label {
+            text-align: initial;
+        }
+    }
+
+    .fullwidth {
+        grid-column: span 1;
+    }
+
+    .second-col {
+        grid-column: 1;
+    }
 }