yisroelbaum/Goal-Calibration
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add layout primitives and components to app.css

Browse source 
extend app.css with the every-layout style primitives (container,
stack, cluster, center) used to compose page shells, plus a small
component layer: site-header, btn (primary/secondary/danger), card
and card-link, list-cards, modal, error and a few utility classes.
no template changes here - templates start adopting these classes
in the per-page styling commits that follow.
This commit is contained in:
Yisroel Baum 2026-05-01 11:24:58 +03:00
parent d4a8adc4a4
commit b259a1243e
Signed by: yisroelbaum
GPG key ID: 0FA60884F75520A9
1 changed files with 200 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

200
public/css/app.css
View file

@ -216,3 +216,203 @@ button:focus {
form { form {
margin: 0; margin: 0;
} }
/* -------------------------------------------------------------------------
4. Layout primitives
------------------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--max-width);
margin-inline: auto;
padding: var(--space-5) var(--space-4);
}
.container-wide {
max-width: var(--max-width-wide);
}
.stack > * + * {
margin-top: var(--space-4);
}
.stack-sm > * + * {
margin-top: var(--space-2);
}
.stack-lg > * + * {
margin-top: var(--space-6);
}
.cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
}
.cluster-end {
justify-content: flex-end;
}
.cluster-between {
justify-content: space-between;
}
.center {
display: flex;
align-items: center;
justify-content: center;
}
/* -------------------------------------------------------------------------
5. Components
------------------------------------------------------------------------- */
.site-header {
border-bottom: 1px solid var(--color-border);
padding: var(--space-3) var(--space-4);
background-color: var(--color-surface);
}
.site-header .site-header-inner {
width: 100%;
max-width: var(--max-width);
margin-inline: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.btn {
display: inline-block;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-sm);
border: 1px solid var(--color-border-strong);
background-color: var(--color-surface);
color: var(--color-text);
font-weight: 500;
text-decoration: none;
transition: background-color var(--transition-fast),
border-color var(--transition-fast), color var(--transition-fast);
}
.btn:hover,
.btn:focus {
background-color: var(--color-surface-alt);
border-color: var(--color-text-muted);
text-decoration: none;
}
.btn-primary {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: #ffffff;
}
.btn-primary:hover,
.btn-primary:focus {
background-color: var(--color-primary-hover);
border-color: var(--color-primary-hover);
color: #ffffff;
}
.btn-secondary {
background-color: transparent;
border-color: var(--color-border-strong);
color: var(--color-text);
}
.btn-danger {
background-color: transparent;
border-color: var(--color-danger);
color: var(--color-danger);
}
.btn-danger:hover,
.btn-danger:focus {
background-color: var(--color-danger);
color: #ffffff;
}
.card {
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-4);
box-shadow: var(--shadow-sm);
}
.card-link {
display: block;
color: inherit;
text-decoration: none;
transition: border-color var(--transition-fast),
box-shadow var(--transition-fast),
transform var(--transition-fast);
}
.card-link:hover,
.card-link:focus {
border-color: var(--color-border-strong);
box-shadow: var(--shadow-md);
text-decoration: none;
}
.list-cards {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.modal {
position: fixed;
inset: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
background-color: rgba(43, 38, 34, 0.45);
}
.modal[hidden] {
display: none;
}
.modal-content {
width: 100%;
max-width: 28rem;
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: var(--space-5);
}
.error {
color: var(--color-danger);
font-size: var(--font-size-sm);
}
.muted {
color: var(--color-text-muted);
}
/* -------------------------------------------------------------------------
6. Utilities
------------------------------------------------------------------------- */
.full-width {
width: 100%;
}
.text-center {
text-align: center;
}
[hidden] {
display: none !important;
}