Usa un unico h1 por pagina en el resto de vistas

Cuatro paginas tenian su titulo en <h2> sin ningun <h1> encima: el
formulario de categoria, ajustes, el login y la ayuda de contrasena. Y el
listado de categorias si tenia <h1>, pero colgaba de el dos <h3>, saltandose
el nivel intermedio.

Sube los titulos de pagina a <h1> y los subtitulos al nivel que les toca:
las dos secciones del listado de categorias a <h2> y las tres tarjetas de
ajustes a <h2>. El selector .settings-card h3 pasa a h2 para seguirlas y
mantener su margin: 0 0 0.25rem, que es lo que evita que el titulo abra
hueco dentro de la tarjeta.

En login y ayuda de contrasena el <h1> ademas importa para el layout:
.auth-container tiene padding: 2rem, y el padding impide que colapse el
margen superior del primer hijo. Con la escala que viene despues, un <h2>
ahi sumaria su margen a ese padding y dejaria el titulo a 56px del borde;
el <h1> no lleva margen superior.

Verificado renderizando las 36 vistas: todas con un solo h1 y sin saltos
de nivel.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
JKuijperM 2026-09-14 20:13:28 +02:00
parent beeda95d5d
commit 3d47f8bd90
6 changed files with 10 additions and 10 deletions

View File

@ -898,7 +898,7 @@ tr:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
} }
.settings-card h3 { .settings-card h2 {
margin: 0 0 0.25rem 0; margin: 0 0 0.25rem 0;
} }

View File

@ -5,7 +5,7 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<h2>Editar categoría</h2> <h1>Editar categoría</h1>
<form method="post" class="app-form"> <form method="post" class="app-form">
{% csrf_token %} {% csrf_token %}

View File

@ -8,7 +8,7 @@
<h1>Mis categorías</h1> <h1>Mis categorías</h1>
<h3>Nueva categoría</h3> <h2>Nueva categoría</h2>
<form method="post" class="app-form"> <form method="post" class="app-form">
{% csrf_token %} {% csrf_token %}
{% include "expenses/_form_fields.html" %} {% include "expenses/_form_fields.html" %}
@ -17,7 +17,7 @@
<hr> <hr>
<h3>Listado</h3> <h2>Listado</h2>
<div class="table-wrap"> <div class="table-wrap">
<table> <table>
<thead> <thead>

View File

@ -2,7 +2,7 @@
{% block content %} {% block content %}
<h2>Iniciar sesión</h2> <h1>Iniciar sesión</h1>
<form method="post" class="app-form"> <form method="post" class="app-form">
{% csrf_token %} {% csrf_token %}

View File

@ -2,7 +2,7 @@
{% block content %} {% block content %}
<h2>Recuperar contraseña</h2> <h1>Recuperar contraseña</h1>
<p> <p>
Esta aplicación actualmente no envía correos de recuperación automáticos. Esta aplicación actualmente no envía correos de recuperación automáticos.

View File

@ -5,23 +5,23 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<h2>Configuración</h2> <h1>Configuración</h1>
<p>Gestiona las categorías, etiquetas y objetivos de tu cuenta</p> <p>Gestiona las categorías, etiquetas y objetivos de tu cuenta</p>
<div class="settings-grid"> <div class="settings-grid">
<a class="settings-card" href="{% url 'category_list' %}"> <a class="settings-card" href="{% url 'category_list' %}">
<h3>Categorías</h3> <h2>Categorías</h2>
<p>Organiza tus gastos por tipo.</p> <p>Organiza tus gastos por tipo.</p>
</a> </a>
<a class="settings-card" href="{% url 'tag_list' %}"> <a class="settings-card" href="{% url 'tag_list' %}">
<h3>Etiquetas</h3> <h2>Etiquetas</h2>
<p>Añade etiquetas libres a tus gastos.</p> <p>Añade etiquetas libres a tus gastos.</p>
</a> </a>
<a class="settings-card" href="{% url 'goal_list' %}"> <a class="settings-card" href="{% url 'goal_list' %}">
<h3>Objetivos</h3> <h2>Objetivos</h2>
<p>Define y controla tus metas de gasto.</p> <p>Define y controla tus metas de gasto.</p>
</a> </a>
</div> </div>