jkuijperm/expenses_manager
1
0
Fork 0
Code Issues 13 Pull Requests Actions Packages Projects Releases Wiki Activity

Anade una escala tipografica para los encabezados

Browse Source 
base.css nunca ha definido tamanos de encabezado, asi que los ponia el
navegador: 32px el h1, 24px el h2 y 18,7px el h3. En una vista densa de
datos como el dashboard eso compite con las propias cifras, y ademas dejaba
los tamanos a merced de que un encabezado cambiara de nivel.

Fija 1.625rem / 1.25rem / 1rem con font-weight 600. Los margenes van en rem
a proposito: los del navegador van en em, escalan con el tamano de fuente y
dejan huecos distintos entre secciones que deberian separarse igual.

Va en la zona de estilos base, antes de los componentes, para que las
reglas que ya ajustan encabezados concretos (.dashboard-context h1,
.settings-card h2, .home-section > h2, .info-panel-content h2) sigan
ganando por orden.

Afecta a toda la aplicacion. Lo que mas se nota es el titulo de pagina:
pierde 21px de aire por arriba, porque el margen superior del h1 pasa a 0 y
el padding de .content impedia que colapsara. Entre secciones de la home no
cambia nada, ahi manda el margin-bottom de 2.5rem de .home-section. Ningun
media query toca tamanos de fuente, asi que en movil la escala es la misma,
y el bloque no declara colores, asi que el tema oscuro no se entera.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
JKuijperM 2026-09-14 20:13:49 +02:00
parent 3d47f8bd90
commit b4508a13db
1 changed files with 25 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
expenses_manager/expenses/static/expenses/css/base.css
View File

@ -97,6 +97,31 @@ a.danger:visited,
color: var(--color-danger-accent);
}
/* Escala tipográfica. Los márgenes van en rem a propósito: los del navegador
van en em y escalan con el tamaño de fuente, dejando huecos irregulares
entre secciones. */
h1 {
font-size: 1.625rem;
font-weight: 600;
line-height: 1.2;
margin: 0 0 1rem;
}
h2 {
font-size: 1.25rem;
font-weight: 600;
line-height: 1.25;
margin: 1.5rem 0 0.75rem;
}
h3 {
font-size: 1rem;
font-weight: 600;
line-height: 1.3;
margin: 1rem 0 0.5rem;
}
/* ========================= */
/* Topbar / navigation */
/* ========================= */