Styling improvements

This commit is contained in:
Trevor Vallender 2024-05-26 09:51:17 +01:00
parent ce241b1674
commit f70a676456
4 changed files with 48 additions and 9 deletions

View File

@ -2,4 +2,12 @@
--inset-bg-color: #eee;
--border-radius: .5em;
--button-bg-color: #333;
--button-text-color: #fff;
--button-hover-bg-color: #555;
--button-hover-text-color: #fff;
--notice-bg-color: #5cb85c;
--notice-text-color: #fff;
}

View File

@ -13,6 +13,13 @@ main {
flex-direction: column;
}
aside.flash {
background-color: var(--notice-bg-color);
color: var(--notice-text-color);
padding: 1em;
border-radius: var(--border-radius);
}
section.inset {
width: 70%;
max-width: 60em;
@ -25,3 +32,25 @@ section.inset {
h1, h2 {
text-align: center;
}
header nav {
ul {
display: flex;
justify-content: center;
}
li {
list-style-type: none;
padding: 0 .5em;
}
a:link, a:visited {
background-color: var(--button-bg-color);
color: var(--button-text-color);
border-radius: var(--border-radius);
text-decoration: none;
padding: .5em;
}
a:hover {
background-color: var(--button-hover-bg-color);
color: var(--button-hover-text-color);
}
}

View File

@ -15,15 +15,17 @@
<body>
<header>
<h1><%= link_to t("site_name"), root_path %></h1>
<nav>
<ul>
<% if logged_in? %>
<li><%= link_to t("log_out"), logout_path, data: {turbo_method: :delete} %></li>
<% else %>
<li><%= link_to t("log_in"), login_path %></li>
<li><%= link_to t("sign_up"), new_user_path %></li>
<% end %>
</ul>
</nav>
</header>
<nav>
<ul>
<% if logged_in? %>
<li><%= link_to t("log_out"), logout_path, data: {turbo_method: :delete} %></li>
<% else %>
<li><%= link_to t("log_in"), login_path %></li>
<li><%= link_to t("sign_up"), new_user_path %></li>
<% end %>
<%= render partial: "shared/flash_messages" %>
<main>
<%= yield %>

View File

@ -18,7 +18,7 @@ en:
sessions:
create:
success: "Hello, %{name}!"
error: "Could not sign in. Please check your email and password."
error: "Could not sign in. Please check your username and password."
new:
log_in: Log in
destroy: