empires: Adapt HTML to use 'form-field' instead of 'form-row' class

The top-level style.css uses this slightly different (but more
accurate) class naming. By adapting to it here, we also simplify the
empires-specific CSS file to not need to define its own form layout.

diff --git a/empires/index.html b/empires/index.html
index 83fcc0f2ddfd87f379fc13ebfb725498d8b2b958..a1b568827d7c8d37c1a3ce54361eb7b43846c2ab 100644 (file)
--- a/empires/index.html
+++ b/empires/index.html
@@ -61,17 +61,17 @@
 
     <!-- The return false prevents the page from being reloaded -->
     <form id="register-form" onsubmit="register(this); return false">
 
     <!-- The return false prevents the page from being reloaded -->
     <form id="register-form" onsubmit="register(this); return false">

-      <div class="form-row medium left">
+      <div class="form-field medium left">

         <label for="name">Your name</label>
         <input type="text" id="name" required>
       </div>
 
         <label for="name">Your name</label>
         <input type="text" id="name" required>
       </div>
 

-      <div class="form-row medium right">
+      <div class="form-field medium right">

         <label for="character">Character name</label>
         <input type="text" id="character" autocomplete="off" required>
       </div>
 
         <label for="character">Character name</label>
         <input type="text" id="character" autocomplete="off" required>
       </div>
 

-      <div class="form-row large">
+      <div class="form-field large">

         <button type="submit">
           Join game
         </button>
         <button type="submit">
           Join game
         </button>

diff --git a/empires/style.css b/empires/style.css
index 114c48f0685ae97b5eafcef736e26904483fca4d..98bb33a5314472c968963075190455ccf8fe50c0 100644 (file)
--- a/empires/style.css
+++ b/empires/style.css
@@ -44,39 +44,6 @@ p,dl,dd {
     display: none;
 }
 
     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 {
     height: 40px;
 }
 input {
     height: 40px;
 }