Add some mobile-first styling

[lmno.games] / empires / index.html
diff --git a/empires/index.html b/empires/index.html

index 0951a5182c657dffe2713b837b4ebae189855d0e..4f574b90b22c9bf071225e81bb8799c357e86040 100644 (file)
--- a/empires/index.html
+++ b/empires/index.html
@@ -3,12 +3,15 @@
    <head>
      <title>The Game of Empires</title>
  
+    <link rel="stylesheet" href="reset.css" type="text/css" />
      <link rel="stylesheet" href="style.css" type="text/css" />
    </head>
  <body>
  
    <script src="empires-client.js"></script>
  
+<div id="page">
+
    <div id="message-area">
    </div>
  
@@ -22,7 +25,7 @@
  
    <div id="pre-game" class="show-state-join">
  
-    <h1>Welcome to the game of Empires!</h1>
+    <h1>The Game of Empires</h1>
  
      <p>
        To join the game, type your own name below. Also, choose the name
@@ -37,14 +40,22 @@
      </p>
  
      <!-- The return false prevents the page from being reloaded -->
-    <form onsubmit="register(this); return false">
-      <label for="name">Your name</label>
-      <input type="text" id="name" required>
-
-      <label for="character">Character name</label>
-      <input type="text" id="character" autocomplete="off" required>
-
-      <input type="submit" value="Join game">
+    <form id="register-form" onsubmit="register(this); return false">
+      <div class="form-row medium left">
+        <label for="name">Your name</label>
+        <input type="text" id="name" required>
+      </div>
+
+      <div class="form-row medium right">
+        <label for="character">Character name</label>
+        <input type="text" id="character" autocomplete="off" required>
+      </div>
+
+      <div class="form-row large">
+        <button type="submit">
+          Join game
+        </button>
+      </div>
      </form>
  
    </div>
@@ -63,5 +74,6 @@
  
    </div>
  
+</div>
  </body>
  </html>