smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2025-04-05 03:10:57 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

styling: added some styling

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

13
keynotes.app/public/css/style.css
View file

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

2
keynotes.app/src/routes/authRouter.js
View file

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

6
keynotes.app/src/views/header.ejs
View file

@ -16,12 +16,8 @@
<body> <body>
<nav> <nav>
<ul class="container flex"> <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> <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="/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="/profile?userId=<%= currentUser.user_id %>">Profile</a></li>
<li><a class="hover__underline" href="/auth/logout">Logout</a></li> <li><a class="hover__underline" href="/auth/logout">Logout</a></li>

28
keynotes.app/src/views/login.ejs
View file

@ -8,19 +8,21 @@
</ul> </ul>
</div> </div>
<% }; %> <% }; %>
<form class="center-horizontal" method="POST" action="/auth/login"> <main class="container full-page">
<div class="form-item flex"> <form class="center-horizontal" method="POST" action="/auth/login">
<label for="username">UserName</label> <div class="form-item flex">
<input type="text" name="username" required/> <label for="username">Username</label>
</div> <input type="text" name="username" required/>
<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>
</div> </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') %> <%- include('footer') %>

34
keynotes.app/src/views/register.ejs
View file

@ -9,22 +9,26 @@
</ul> </ul>
</div> </div>
<% }; %> <% }; %>
<form class="register-form center-horizontal" method="POST" action="/auth/register"> <main class="container full-page">
<div class="form-item flex"> <form class="register-form center-horizontal" method="POST" action="/auth/register">
<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>
<div class="form-item flex"> <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>
<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') %> <%- include('footer') %>