add app.css with reset and design tokens
introduce a single shared stylesheet under public/css. this first section covers a minimal reset, warm/readable design tokens (color, typography, spacing, radii, shadows), and base element styling for headings, links, lists, forms, and buttons. layout primitives and component classes follow in subsequent commits.
This commit is contained in:
parent
d885319597
commit
34da76607f
1 changed files with 218 additions and 0 deletions
218
public/css/app.css
Normal file
218
public/css/app.css
Normal file
|
|
@ -0,0 +1,218 @@
|
|||
/* =========================================================================
|
||||
Daily Goals - app.css
|
||||
Single shared stylesheet. Sectioned for readability.
|
||||
========================================================================= */
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
1. Reset
|
||||
------------------------------------------------------------------------- */
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
img,
|
||||
svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
2. Design tokens
|
||||
------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
/* Color: warm, readable palette */
|
||||
--color-bg: #faf7f2;
|
||||
--color-surface: #ffffff;
|
||||
--color-surface-alt: #f3ede2;
|
||||
--color-text: #2b2622;
|
||||
--color-text-muted: #6b5d52;
|
||||
--color-primary: #5a7a4f;
|
||||
--color-primary-hover: #486340;
|
||||
--color-accent: #8a5a3b;
|
||||
--color-accent-hover: #6f4730;
|
||||
--color-border: #e3dccf;
|
||||
--color-border-strong: #c9bfae;
|
||||
--color-danger: #a94442;
|
||||
--color-success: #4f7a5a;
|
||||
|
||||
/* Typography */
|
||||
--font-serif: Georgia, "Iowan Old Style", "Source Serif Pro", serif;
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
|
||||
sans-serif;
|
||||
--font-size-base: 1rem;
|
||||
--font-size-sm: 0.875rem;
|
||||
--font-size-lg: 1.125rem;
|
||||
--font-size-h1: 2rem;
|
||||
--font-size-h2: 1.5rem;
|
||||
--font-size-h3: 1.25rem;
|
||||
--line-height-base: 1.6;
|
||||
--line-height-tight: 1.25;
|
||||
|
||||
/* Spacing scale */
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-5: 1.5rem;
|
||||
--space-6: 2rem;
|
||||
--space-7: 3rem;
|
||||
|
||||
/* Layout */
|
||||
--max-width: 42rem;
|
||||
--max-width-wide: 60rem;
|
||||
|
||||
/* Radii */
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 1px 2px rgba(43, 38, 34, 0.06);
|
||||
--shadow-md: 0 4px 12px rgba(43, 38, 34, 0.1);
|
||||
--shadow-lg: 0 12px 32px rgba(43, 38, 34, 0.18);
|
||||
|
||||
/* Transitions */
|
||||
--transition-fast: 120ms ease;
|
||||
--transition-base: 200ms ease;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
3. Base elements
|
||||
------------------------------------------------------------------------- */
|
||||
|
||||
body {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height-base);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 600;
|
||||
line-height: var(--line-height-tight);
|
||||
margin: 0;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--font-size-h1);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--font-size-h2);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-size-h3);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-accent);
|
||||
text-decoration: none;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: var(--color-accent-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
input[type="date"],
|
||||
input[type="number"],
|
||||
textarea,
|
||||
select {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: var(--space-1);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
background-color: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-border-strong);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: border-color var(--transition-fast),
|
||||
box-shadow var(--transition-fast);
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgba(90, 122, 79, 0.15);
|
||||
}
|
||||
|
||||
button {
|
||||
display: inline-block;
|
||||
padding: var(--space-2) var(--space-4);
|
||||
background-color: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-border-strong);
|
||||
border-radius: var(--radius-sm);
|
||||
font-weight: 500;
|
||||
transition: background-color var(--transition-fast),
|
||||
border-color var(--transition-fast), color var(--transition-fast);
|
||||
}
|
||||
|
||||
button:hover,
|
||||
button:focus {
|
||||
background-color: var(--color-surface-alt);
|
||||
border-color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 0;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue