Add mobile stylesheet for devices with narrow screens.

1 files changed, 79 insertions, 0 deletions

diff --git a/public/mobile-styles.css b/public/mobile-styles.css
new file mode 100644
index 0000000..11cb3da
--- /dev/null
+++ b/public/mobile-styles.css
@@ -0,0 +1,79 @@
+body {
+    color: #afafaf;
+    background-color: #131a1a;
+}
+
+h1, h2, h3 {
+    color: #ccc;
+}
+
+a {
+  color: #7fb0c7;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #99b0d7;
+  text-decoration: underline;
+}
+
+label {
+    display: block;
+}
+
+.required label:after,
+.required:empty:after {
+    content: "* ";
+    color: #ff4f4f;
+    vertical-align: top;
+}
+
+input[type=text],
+input[type=time] {
+    border: 0;
+}
+
+textarea {
+    border: 1px dashed slategray;
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+input[type=text], input[type=time], textarea {
+    border-bottom: 1px solid darkslateblue;
+    background-color: #afafaf;
+    color: #11163f;
+    font-size: large;
+    padding: 1mm;
+}
+
+input[type=text], textarea {
+  width: 100%;
+}
+
+.postcode input[type=text] {
+  width: 50%;
+}
+
+.song-details {
+  margin-top: 2mm;
+}
+
+.field {
+  padding: 1mm;
+}
+
+.help {
+  font-size: small;
+}
+
+.error {
+  background-color: #A81B1B;
+  color: #D1D1D1;
+  padding: 2mm;
+}
+
+.error .error-heading {
+  font-size: 110%;
+  color: whitesmoke;
+}