From d9c1028746aad357d4f4f25e384398185acbd197 Mon Sep 17 00:00:00 2001
From: Carl Worth <cworth@cworth.org>
Date: Sun, 17 May 2020 08:15:45 -0700
Subject: [PATCH] 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.
---
 empires/index.html |  6 +++---
 empires/style.css  | 33 ---------------------------------
 2 files changed, 3 insertions(+), 36 deletions(-)

diff --git a/empires/index.html b/empires/index.html
index 83fcc0f..a1b5688 100644
--- 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">
-      <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>
 
-      <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>
 
-      <div class="form-row large">
+      <div class="form-field large">
         <button type="submit">
           Join game
         </button>
diff --git a/empires/style.css b/empires/style.css
index 114c48f..98bb33a 100644
--- a/empires/style.css
+++ b/empires/style.css
@@ -44,39 +44,6 @@ p,dl,dd {
     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;
 }
-- 
2.43.0