styling: added some styling

This commit is contained in:
Mike 2025-03-15 12:53:57 -04:00
parent 4417dec46a
commit 3fd4ed9ba8
5 changed files with 46 additions and 41 deletions

View file

@ -34,7 +34,7 @@ body {
/* 4. Improve text rendering */
-webkit-font-smoothing: antialiased;
font-family: "Lato, serif";
background: var(--200-blue);
background: var(--100-blue);
}
/* 5. Improve media defaults */
@ -81,6 +81,7 @@ h6 {
a {
color: var(--800-blue);
text-decoration: none;
}
/*
@ -91,10 +92,6 @@ a {
isolation: isolate;
}
a {
text-decoration: none;
}
nav {
font-size: 1.5rem;
padding: 1em 0;
@ -178,6 +175,7 @@ footer {
align-items: center;
justify-content: center;
gap: 1em;
margin: 0 auto;
}
.hero__heading {
@ -305,6 +303,11 @@ footer {
margin: 0.5em 0;
}
.form-item.flex label {
text-align: left;
padding-left: 0.2em;
}
.form-item-row {
flex-direction: column;
width: 100%;

View file

@ -20,7 +20,7 @@ authRouter.get("/register", authController.signUpGet);
authRouter.post(
"/register",
body("password").isLength({ min: 5 }).withMessage("Password is too short"),
body("confirm-password").custom((value, { req }) => {
body("password-confirmation").custom((value, { req }) => {
if (value !== req.body.password) {
throw new Error("Passwords do not match!");
}

View file

@ -16,12 +16,8 @@
<body>
<nav>
<ul class="container flex">
<% if (!currentUser) { %>
<li><a class="hover__underline" href="/auth/register">Sign Up</a></li>
<% } %>
<% if (currentUser) { %>
<li><a class="hover__underline" href="/">Home</a></li>
<% if (currentUser) { %>
<li><a class="hover__underline" href="/new" class="new-link">New Cliche</a></li>
<li><a class="hover__underline" href="/profile?userId=<%= currentUser.user_id %>">Profile</a></li>
<li><a class="hover__underline" href="/auth/logout">Logout</a></li>

View file

@ -8,19 +8,21 @@
</ul>
</div>
<% }; %>
<form class="center-horizontal" method="POST" action="/auth/login">
<div class="form-item flex">
<label for="username">UserName</label>
<input type="text" name="username" required/>
</div>
<div class="form-item flex">
<label for="password">Password</label>
<input type="password" name="password" required/>
</div>
<div class="form-item-row flex">
<button type="submit" class="btn btn__form">Login</button>
<button type="button" class="btn btn__form" onclick="document.location.href='/auth/register'">Sign up</button>
<main class="container full-page">
<form class="center-horizontal" method="POST" action="/auth/login">
<div class="form-item flex">
<label for="username">Username</label>
<input type="text" name="username" required/>
</div>
<div class="form-item flex">
<label for="password">Password</label>
<input type="password" name="password" required/>
</div>
<div class="form-item-row flex">
<button type="submit" class="btn btn__form">Login</button>
</div>
<a href="/auth/register">Need an account? Click here!</a>
</form>
</form>
</main>
<%- include('footer') %>

View file

@ -9,22 +9,26 @@
</ul>
</div>
<% }; %>
<form class="register-form center-horizontal" method="POST" action="/auth/register">
<div class="form-item flex">
<label for="username">UserName</label>
<input type="text" name="username" required/>
</div>
<div class="form-item flex">
<label for="password">Password</label>
<input type="password" name="password" required/>
</div>
<div class="form-item flex">
<label for="confirm-password">Confirm Password</label>
<input type="password" name="confirm-password" required/>
</div>
<main class="container full-page">
<form class="register-form center-horizontal" method="POST" action="/auth/register">
<div class="form-item flex">
<button type="submit" class="btn btn__form">Register</button>
<label for="username">username</label>
<input type="text" name="username" required/>
</div>
<div class="form-item flex">
<label for="password">password</label>
<input type="password" name="password" required/>
<div class="error"></div>
</div>
<div class="form-item flex">
<label for="password-confirmation">confirm password</label>
<input type="password" name="password-confirmation" required/>
<div class="error"></div>
</div>
<div class="form-item flex">
<button type="submit" class="btn btn__form">register</button>
</div>
</form>
</form>
</main>
<%- include('footer') %>