Update form layouts

assets/css/_forms.scss

@@ -0,0 +1,7 @@
+.form {
+  background-color: $form-background-color;
+  border-radius: $base-border-radius;
+  margin: 0 auto;
+  max-width: 40rem;
+  padding: $small-spacing;
+}

assets/css/_headings.scss

@@ -1,3 +1,15 @@
+h1,
+h2,
+h3,
+h4 {
+  font-weight: 300;
+}
+
+h1 {
+  font-size: 1.6em;
+  margin: 0;
+}
+
 .heading {
   font-family: $heading-font-family;
   font-size: modular-scale(1);

assets/css/_layout.scss

@@ -8,18 +8,6 @@ a {
   color: mix($background-color, $link-color, 30%);
 }
 
-h1,
-h2,
-h3,
-h4 {
-  font-weight: 300;
-}
-
-h1 {
-  font-size: 1.6em;
-  margin: 0;
-}
-
 main {
   margin-top: 5vmin;
 }

assets/css/_variables.scss

@@ -6,6 +6,8 @@ $foreground-color: $white;
 
 $link-color: #fd0;
 
+$form-background-color: darken($background-color, 4%);
+
 $board-border-color: #000;
 $board-shadow-color: rgba(0, 0, 0, 0.4);
 

assets/css/app.scss

@@ -8,6 +8,7 @@
 
 @import "tables";
 @import "headings";
+@import "forms";
 
 @import "layout";
 @import "nav";

assets/css/base/_tables.scss

@@ -24,5 +24,5 @@ th {
 
 th,
 td {
-  padding: $small-spacing $small-spacing $small-spacing 0;
+  padding: $x-small-spacing;
 }

assets/css/base/_typography.scss

@@ -18,7 +18,7 @@ h6 {
 }
 
 p {
-  margin: 0 0 $small-spacing;
+  margin: $small-spacing 0 $small-spacing;
 }
 
 a {

assets/css/base/_variables.scss

@@ -7,9 +7,10 @@ $base-line-height: 1.5;
 $heading-line-height: 1.2;
 
 // Other Sizes
-$base-border-radius: 3px;
-$base-spacing: 1.5em;
+$base-border-radius: 0.25rem;
+$base-spacing: 2em;
 $small-spacing: $base-spacing / 2;
+$x-small-spacing: $small-spacing / 2;
 $base-z-index: 0;
 
 // Colors

lib/chess_web/templates/game/new.html.eex

@@ -1,3 +1,4 @@
+<div class="form">
   <h2><%= gettext "New game" %></h2>
 
   <%= form_for @changeset, game_path(@conn, :create), [class: "create-game"],
@@ -15,3 +16,4 @@
       <%= submit gettext("Create game"), class: "button" %>
     </div>
   <% end %>
+</div>

lib/chess_web/templates/registration/new.html.eex

@@ -1,3 +1,4 @@
+<div class="form">
   <h2><%= gettext "Register" %></h2>
 
   <%= form_for @changeset, registration_path(@conn, :create), [class: "create-registration"], fn f -> %>
@@ -24,3 +25,4 @@
       <%= submit gettext("Register"), class: "btn btn-primary" %>
     </div>
   <% end %>
+</div>

lib/chess_web/templates/session/new.html.eex

@@ -1,3 +1,4 @@
+<div class="form">
   <h2><%= gettext "Log in" %></h2>
 
   <%= form_for @changeset, session_path(@conn, :create), [class: "create-session"], fn f -> %>
@@ -21,3 +22,4 @@
       <%= submit gettext("Log in"), class: "btn btn-primary" %>
     </div>
   <% end %>
+</div>