<!-- 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>
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;
}