From 21547341c3843dbc2a0afefd78b56bef44df2072 Mon Sep 17 00:00:00 2001
From: Trevor Vallender <trevor@tsvallender.co.uk>
Date: Sun, 21 Apr 2024 13:45:31 +0100
Subject: [PATCH] Some initial CSS

---
 app/assets/stylesheets/colors.css      |  5 ++++
 app/assets/stylesheets/forms.css       | 22 ++++++++++++++++++
 app/assets/stylesheets/layout.css      | 27 ++++++++++++++++++++++
 app/views/layouts/application.html.erb |  4 +++-
 app/views/users/_form.html.erb         | 32 ++++++++++++++------------
 app/views/users/new.html.erb           |  2 +-
 6 files changed, 75 insertions(+), 17 deletions(-)
 create mode 100644 app/assets/stylesheets/colors.css
 create mode 100644 app/assets/stylesheets/forms.css
 create mode 100644 app/assets/stylesheets/layout.css

diff --git a/app/assets/stylesheets/colors.css b/app/assets/stylesheets/colors.css
new file mode 100644
index 0000000..9051222
--- /dev/null
+++ b/app/assets/stylesheets/colors.css
@@ -0,0 +1,5 @@
+:root {
+  --inset-bg-color: #eee;
+
+  --border-radius: .5em;
+}
diff --git a/app/assets/stylesheets/forms.css b/app/assets/stylesheets/forms.css
new file mode 100644
index 0000000..20a230b
--- /dev/null
+++ b/app/assets/stylesheets/forms.css
@@ -0,0 +1,22 @@
+form {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr 2fr;
+
+  input, label {
+    padding: .5em;
+  }
+
+  label {
+    grid-column: 1;
+    text-align: right;
+  }
+
+  input {
+    grid-column: 2;
+  }
+
+  input[type="submit"] {
+    grid-column: 1/3;
+  }
+}
diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css
new file mode 100644
index 0000000..5ce12c7
--- /dev/null
+++ b/app/assets/stylesheets/layout.css
@@ -0,0 +1,27 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-size: 1.1em;
+  margin: 0 auto;
+  max-width: 80em;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+}
+
+section.inset {
+  width: 70%;
+  max-width: 60em;
+  background-color: var(--inset-bg-color);
+  border-radius: var(--border-radius);
+  padding: 1em;
+  margin: 0 auto;
+}
+
+h1, h2 {
+  text-align: center;
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index a7c1096..11af577 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -17,6 +17,8 @@
       <h1><%= link_to t("forg"), root_path %></h1>
     </header>
     <%= render partial: "shared/flash_messages" %>
-    <%= yield %>
+    <main>
+      <%= yield %>
+    </main>
   </body>
 </html>
diff --git a/app/views/users/_form.html.erb b/app/views/users/_form.html.erb
index 2eaf059..2a501e3 100644
--- a/app/views/users/_form.html.erb
+++ b/app/views/users/_form.html.erb
@@ -1,23 +1,25 @@
 <%# locals: (user:, button_text:) -%>
 
-<%= form_with model: user do |f| %>
-  <%= f.label :username %>
-  <%= f.text_field :username %>
+<section class="inset">
+  <%= form_with model: user do |f| %>
+    <%= f.label :username %>
+    <%= f.text_field :username %>
 
-  <%= f.label :first_name %>
-  <%= f.text_field :first_name %>
+    <%= f.label :first_name %>
+    <%= f.text_field :first_name %>
 
-  <%= f.label :last_name %>
-  <%= f.text_field :last_name %>
+    <%= f.label :last_name %>
+    <%= f.text_field :last_name %>
 
-  <%= f.label :email %>
-  <%= f.text_field :email %>
+    <%= f.label :email %>
+    <%= f.text_field :email %>
 
-  <%= f.label :password %>
-  <%= f.password_field :password %>
+    <%= f.label :password %>
+    <%= f.password_field :password %>
 
-  <%= f.label :password_confirmation %>
-  <%= f.password_field :password_confirmation %>
+    <%= f.label :password_confirmation %>
+    <%= f.password_field :password_confirmation %>
 
-  <%= f.submit button_text %>
-<% end %>
+    <%= f.submit button_text %>
+  <% end %>
+</section>
diff --git a/app/views/users/new.html.erb b/app/views/users/new.html.erb
index f1ebafa..44b5f39 100644
--- a/app/views/users/new.html.erb
+++ b/app/views/users/new.html.erb
@@ -1,6 +1,6 @@
 <% content_for :title, "Sign up" %>
 
-<h1><%= t(".sign_up") %></h1>
+<h2><%= t(".sign_up") %></h2>
 
 <%= render partial: "users/form",
            locals: { user: @user, button_text: t(".sign_up") } %>