Some initial CSS

This commit is contained in:
Trevor Vallender 2024-04-21 13:45:31 +01:00
parent 82a7510d18
commit 21547341c3
6 changed files with 75 additions and 17 deletions

View File

@ -0,0 +1,5 @@
:root {
--inset-bg-color: #eee;
--border-radius: .5em;
}

View File

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

View File

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

View File

@ -17,6 +17,8 @@
<h1><%= link_to t("forg"), root_path %></h1> <h1><%= link_to t("forg"), root_path %></h1>
</header> </header>
<%= render partial: "shared/flash_messages" %> <%= render partial: "shared/flash_messages" %>
<%= yield %> <main>
<%= yield %>
</main>
</body> </body>
</html> </html>

View File

@ -1,23 +1,25 @@
<%# locals: (user:, button_text:) -%> <%# locals: (user:, button_text:) -%>
<%= form_with model: user do |f| %> <section class="inset">
<%= f.label :username %> <%= form_with model: user do |f| %>
<%= f.text_field :username %> <%= f.label :username %>
<%= f.text_field :username %>
<%= f.label :first_name %> <%= f.label :first_name %>
<%= f.text_field :first_name %> <%= f.text_field :first_name %>
<%= f.label :last_name %> <%= f.label :last_name %>
<%= f.text_field :last_name %> <%= f.text_field :last_name %>
<%= f.label :email %> <%= f.label :email %>
<%= f.text_field :email %> <%= f.text_field :email %>
<%= f.label :password %> <%= f.label :password %>
<%= f.password_field :password %> <%= f.password_field :password %>
<%= f.label :password_confirmation %> <%= f.label :password_confirmation %>
<%= f.password_field :password_confirmation %> <%= f.password_field :password_confirmation %>
<%= f.submit button_text %> <%= f.submit button_text %>
<% end %> <% end %>
</section>

View File

@ -1,6 +1,6 @@
<% content_for :title, "Sign up" %> <% content_for :title, "Sign up" %>
<h1><%= t(".sign_up") %></h1> <h2><%= t(".sign_up") %></h2>
<%= render partial: "users/form", <%= render partial: "users/form",
locals: { user: @user, button_text: t(".sign_up") } %> locals: { user: @user, button_text: t(".sign_up") } %>