Add some comments on the CSS for styling the empires client

[lmno.games] / empires / style.css

diff --git a/empires/style.css b/empires/style.css
index 114c48f0685ae97b5eafcef736e26904483fca4d..1bb0e62eb0eada366c08f28a523def5ed75ee10d 100644 (file)
--- a/empires/style.css
+++ b/empires/style.css
@@ -1,15 +1,5 @@
-h1 {
-    color: #333738;
-}
-
-h2 {
-    color: #333738;
-}
-
-p,dl,dd {
-    margin-bottom: 1em;
-}
-
+/* By default, hide things that are not to be shown
+ * until a particular game state is reached. */
 .show-state-join {
     display:none;
 }
@@ -22,6 +12,8 @@ p,dl,dd {
     display:none;
 }
 
+/* And by default, show things that will be hidden
+ * when a particular game state is reached. */
 .hide-state-join {
     display:block;
 }
@@ -44,45 +36,10 @@ 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;
-}
-
+/* When a character name is being revealed, we want this to be huge,
+ * (like, filling the screen huge). */
 #character-reveal {
-    color: #333738;
+    color: var(--text-fg-color);
     font-size: 300%;
     font-weight: bold;
 }