Skip to content

Commit

Permalink
update CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
@samuelberston
samuelberston committed Nov 19, 2024
1 parent 568e72f commit 74e2fa1
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 35 deletions.
69 changes: 35 additions & 34 deletions frontend/public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,42 +6,43 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Advice of the day -->
<div id="advice-of-the-day" aria-live="polite">
<h1>Advice of the day</h1>
<div id="advice-loading" style="display: none;">Loading...</div>
<p id="advice-data"></p>
</div>

<!-- Registration form -->
<form id="register-form" style="display: block;">
<h1>Register User</h1>
<label for="register-username">Username:</label><br>
<input type="text" name="username" id="register-username" required><br><br>

<label for="register-password">Password:</label><br>
<input type="password" name="password" id="register-password" required><br><br>
<div id="passwordHelp" class="form-text">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
<div class="container">
<!-- Advice of the day -->
<div id="advice-of-the-day" aria-live="polite">
<h1>Advice of the day</h1>
<div id="advice-loading" style="display: none;">Loading...</div>
<p id="advice-data"></p>
</div>
<br>
<button type="submit" id="register-button">Register</button>
<pre id="register-response"></pre>
</form>


<!-- Login Form -->
<form id="login-form" style="display: block;">
<h1>Login</h1>
<label for="login-username">Username:</label><br>
<input type="text" name="username" id="login-username" required><br><br>

<label for="login-password">Password:</label><br>
<input type="password" name="password" id="login-password" required><br><br>

<button type="submit" id="login-button">Login</button>
</form>

<!-- Registration form -->
<form id="register-form" class="register-form" style="display: block;">
<h1>Register User</h1>
<label for="register-username">Username:</label><br>
<input type="text" name="username" id="register-username" required><br><br>

<label for="register-password">Password:</label><br>
<input type="password" name="password" id="register-password" required><br><br>
<div id="passwordHelp" class="form-text">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>
<br>
<button type="submit" id="register-button">Register</button>
<pre id="register-response"></pre>
</form>


<!-- Login Form -->
<form id="login-form" class="login-form" style="display: block;">
<h1>Login</h1>
<label for="login-username">Username:</label><br>
<input type="text" name="username" id="login-username" required><br><br>

<label for="login-password">Password:</label><br>
<input type="password" name="password" id="login-password" required><br><br>

<button type="submit" id="login-button">Login</button>
</form>
</div>
<!-- Protected Content -->
<div id="protected-content" style="display: none;">
<h2>Protected Data</h2>
Expand Down
17 changes: 16 additions & 1 deletion frontend/public/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,25 @@ body {
line-height: 1.6;
margin: 0;
padding: 2rem;
max-width: 800px;
max-width: 100%; /* Changed from 800px */
margin: 0 auto;
}

/* Add new grid container styles */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
max-width: 1600px;
margin: 0 auto;
}

/* Adjust component widths */
form, #protected-content, #advice-of-the-day {
width: auto; /* Allow components to fit grid cells */
height: fit-content;
}

/* Typography */
h1 {
color: var(--text);
Expand Down

0 comments on commit 74e2fa1

Please sign in to comment.