Add some mobile-first styling

[empires-html] / style.css

diff --git a/style.css b/style.css
index 89bca0c56477ade2bb19a281e1f9c45d492b2bec..9beda3e89e2408d90645bb91d5fee21f4f67fa47 100644 (file)
--- a/style.css
+++ b/style.css
@@ -1,7 +1,61 @@
+body {
+    background-color: #333738;
+    font-family: sans-serif;
+    line-height: 1.5;
+}
+
+#page {
+    margin-top: 36px;
+    margin-bottom: 36px;
+    padding-top: 30px;
+    padding-bottom: 30px;
+    padding-left: 10px;
+    padding-right: 10px;
+    background-color: white;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+/* For a wide screen, just use the center of the window for content. */
+@media screen and (min-width: 500px) {
+  #page {
+      max-width: 720px;
+      padding-left: 50px;
+      padding-right: 50px;
+  }
+}
+
+/* And when the screen is narrow, let's kill the wasted vertical space
+   above it too. */
+@media screen and (max-width: 499px) {
+    #page {
+        margin-top: 0;
+        margin-bottom: 0;
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+}
+
+h1 {
+    color: #333738;
+    font-size: 150%;
+    font-weight: bold;
+}
+
+h2 {
+    color: #333738;
+    font-size: 110%;
+    font-weight: bold;
+}
+
+p,dl,dd {
+    margin-bottom: 1em;
+}
+
 /* Default message severity is "info" but can be overriden. */
 .message {
     padding: 1em;
-    background-color: #46a7f5;
+    background-color: #44c7ef;
     color: white;
     transition: 0.3s;
     margin-bottom: 0.5em;
@@ -9,7 +63,7 @@
 }
 
 .success {
-    background-color: #6abc6d;
+    background-color: #44c7ef;
 }
 
 .warning {
@@ -60,3 +114,82 @@
 #players-div {
     display:none;
 }
+
+#register-form {
+    max-width: 100%;
+    display: grid;
+    grid-template-columns: 49% 49%;
+    grid-column-gap: 2%;
+}
+
+.form-row {
+    max-width: 100%;
+    padding-bottom: 0.25em;
+}
+
+.form-row.medium.left {
+    grid-column-start: 1;
+}
+
+.form-row.medium.right {
+    grid-column-start: 2;
+}
+
+.form-row.large {
+    grid-column-start: 1;
+    grid-column-end: span 2;
+}
+
+/* For a narrow screen, use a single-column for medium form rows. */
+@media screen and (max-width: 600px) {
+    .form-row.medium.left,.form-row.medium.right {
+       grid-column-start: 1;
+        grid-column-end: span 2
+    }
+}
+
+input {
+    width: 100%;
+}
+
+input {
+    box-sizing: border-box;
+
+    height: 40px;
+
+    padding: 10px 12px;
+
+    border: 1px solid #287789;
+    border-radius: 4px;
+}
+
+input:focus {
+    border: 2px solid #44c7ef;
+}
+
+button {
+    display: inline-block;
+    border-radius: 4px;
+    background-color: #287789;
+    border: none;
+    color: white;
+    text-align: center;
+    font-size: 125%;
+    margin-top: .25em;
+    padding-top: 0.25em;
+    padding-bottom: 0.25em;
+    width: 200px;
+    transition: all 150ms ease;
+}
+
+button:hover {
+    transform: translateY(-1px);
+    background-color: #44c7ef;
+}
+
+:focus {
+    outline: none;
+}
+::-moz-focus-inner {
+    border: 0;
+}