tim/autonomous.contact
1
0
Fork 0
forked from andyburke/autonomous.contact
Code Pull requests Activity

refactor: require password verification

Browse source 
chore: styling work
This commit is contained in:
Andy Burke 2026-03-09 14:57:11 -07:00
parent 7977fe9ea7
commit 86fa2b6d4b
16 changed files with 348 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

81
public/base.css
View file

@ -2,45 +2,61 @@
:root {
--base-color: #234;
--bg: hsl(from var(--base-color) h 20% 7.5%);
--bg-darker: hsl(from var(--base-color) h 20% 5%);
--bg-lighter: hsl(from var(--base-color) h 20% 10%);
--bg: hsl(from var(--base-color) h 20% 10%);
--bg-darker: hsl(from var(--base-color) h 20% 7.5%);
--bg-lighter: hsl(from var(--base-color) h 20% 12.5%);
--bg-card: hsl(from var(--base-color) h 20% 15%);
--bg-card-hover: hsl(from var(--base-color) h 20% 16%);
--text-primary: hsl(from var(--base-color) h 5% 95%);
--text-secondary: hsl(from var(--base-color) h 5% 85%);
--text-muted: hsl(from var(--base-color) h 5% 75%);
--accent: hsl(from var(--base-color) h clamp(0, calc(s + 10), 100) clamp(0, calc(l + 20), 100));
--accent-dark: hsl(from var(--base-color) h clamp(0, calc(s + 5), 100) clamp(0, calc(l - 5), 100));
--border-subtle: hsl(from var(--base-color) h 50% 90%);
--border-normal: hsl(from var(--base-color) h 50% 80%);
--border-highlight: hsl(from var(--base-color) h 50% 25%);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
--blur-radius: 8px;
--text: hsl(from var(--base-color) h 5% 100%);
--accent: hsl(from var(--base-color) h clamp(0, calc(s + 10), 100) clamp(0, calc(l + 20), 100));
--border-subtle: hsl(from var(--base-color) h 50% 25%);
--border-normal: hsl(from var(--base-color) h 50% 50%);
--border-highlight: hsl(from var(--base-color) h 50% 75%);
--icon-scale: 1;
--border-radius: 4px;
--border-radius: 8px;
--border-radius-lg: 12px;
--space-xxs: 0.25rem;
--space-xs: 0.5rem;
--space-sm: 0.75rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-xxl: 3rem;
}
@media (prefers-color-scheme: light) {
:root {
--bg: hsl(from var(--base-color) h 20% 93%);
--bg-darker: hsl(from var(--base-color) h 20% 88%);
--bg-lighter: hsl(from var(--base-color) h 20% 98%);
--bg: hsl(from var(--base-color) h 20% 98%);
--bg-darker: hsl(from var(--base-color) h 20% 96%);
--bg-lighter: hsl(from var(--base-color) h 20% 99%);
--bg-card: hsl(from var(--base-color) h 20% 100%);
--bg-card-hover: hsl(from var(--base-color) h 20% 98%);
--text: hsl(from var(--base-color) h 5% 5%);
--accent: hsl(from var(--base-color) h calc(s + 10) calc(l + 20));
--text-primary: hsl(from var(--base-color) h 5% 5%);
--text-secondary: hsl(from var(--base-color) h 5% 30%);
--text-muted: hsl(from var(--base-color) h 5% 50%);
--border-subtle: hsl(from var(--base-color) h 50% 90%);
--border-normal: hsl(from var(--base-color) h 50% 50%);
--border-highlight: hsl(from var var(--base-color) h 50% 25%);
--border-subtle: hsl(from var(--base-color) h 50% 85%);
--border-normal: hsl(from var(--base-color) h 50% 70%);
--border-highlight: hsl(from var(--base-color) h 50% 35%);
}
}
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove default margin in favour of better control in authored CSS */
body,
h1,
@ -157,7 +173,7 @@ textarea:not([rows]) {
body {
font-family: sans-serif;
color: var(--text);
color: var(--text-primary);
background-color: var(--bg);
display: flex;
flex-direction: column;
@ -201,7 +217,7 @@ textarea:focus {
.avatar-container {
display: block;
margin: 0.5rem auto;
margin: 0 auto 1rem;
width: 3rem;
height: 3rem;
border-radius: var(--border-radius);
@ -281,7 +297,7 @@ label:has(input[collapse-toggle]) {
display: block;
max-width: fit-content;
cursor: pointer;
border: 1px solid var(--text);
border: 1px solid var(--border-subtle);
border-radius: var(--border-radius);
padding: 0.5rem;
margin-bottom: 2rem;
@ -334,14 +350,15 @@ form input:focus {
form button {
width: 100%;
padding: 20px;
border: 1px solid var(--text);
border: 1px solid var(--border-subtle);
font-size: 20px;
background-color: var(--bg);
color: var(--text);
color: var(--text-primary);
margin-top: 1rem;
}
form button.primary {
border-color: var(--border-highlight);
background-color: var(--accent);
}
@ -349,7 +366,7 @@ button {
background: inherit;
color: inherit;
padding: 0.5rem;
border: 1px solid var(--text);
border: 1px solid var(--text-primary);
border-radius: var(--border-radius);
cursor: pointer;
}