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>
</header>
<%= render partial: "shared/flash_messages" %>
<main>
<%= yield %>
</main>
</body>
</html>

View File

@ -1,5 +1,6 @@
<%# locals: (user:, button_text:) -%>
<section class="inset">
<%= form_with model: user do |f| %>
<%= f.label :username %>
<%= f.text_field :username %>
@ -21,3 +22,4 @@
<%= f.submit button_text %>
<% end %>
</section>

View File

@ -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") } %>