P2: Typografie-Hierarchie — Seiten-/Karten-/Tabellen-Header

- h1: text-2xl font-bold text-slate-900
- Karten-h2: text-base font-semibold text-slate-800
- th: text-xs font-medium uppercase tracking-wider text-slate-500
This commit is contained in:
Flo Hartmann
2026-08-26 09:12:22 +00:00
parent f90c0de46d
commit 968333bf45
15 changed files with 76 additions and 76 deletions

View File

@@ -55,10 +55,10 @@
<table class="w-full text-sm">
<thead class="text-left text-slate-500 sticky top-0 z-10 [&>tr>th]:bg-slate-50 [&>tr>th]:shadow-[inset_0_-1px_0_0_#e2e8f0]">
<tr>
<th class="px-4 py-3 font-medium">Cover</th>
<th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Cover</th>
{% set basis = '/neuheiten?q=' ~ (q | urlencode) ~ '&status=' ~ (status_filter | urlencode) %}
{% for key, label in [('titel', 'Spieltitel'), ('verlag', 'Verlag'), ('autor', 'Autor'), ('jahr', 'Erscheinungsjahr'), ('status', 'Status'), ('aktualisiert', 'Aktualisiert')] %}
<th class="px-4 py-3 font-medium whitespace-nowrap">
<th class="px-4 py-3 font-medium whitespace-nowrap text-xs uppercase tracking-wider">
{% if sort == key %}
<a href="{{ basis }}&sort={{ key }}&richtung={{ 'auf' if richtung == 'ab' else 'ab' }}"
class="inline-flex items-center gap-1 hover:text-emerald-700">{{ label }}
@@ -71,7 +71,7 @@
{% endif %}
</th>
{% endfor %}
<th class="px-4 py-3 font-medium">Aktion</th>
<th class="px-4 py-3 font-medium text-xs uppercase tracking-wider">Aktion</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">

View File

@@ -1,7 +1,7 @@
{% extends "base.html" %}
{% block titel %}{{ titel }} — Spiele-Redaktion{% endblock %}
{% block inhalt %}
<h1 class="text-2xl font-bold mb-2">{{ titel }}</h1>
<h1 class="text-2xl font-bold text-slate-900 mb-2">{{ titel }}</h1>
<p class="text-slate-600 mb-4">
Neuheitenliste aus der <a href="https://boardgamegeek.com" class="text-emerald-700 underline">BoardGameGeek</a>-Datenbank.
Erweiterungen und Prototypen werden beim Sync automatisch gefiltert.
@@ -57,13 +57,13 @@
<table class="w-full text-xs">
<thead class="text-left text-slate-400">
<tr>
<th class="px-2 py-1.5 font-medium">Quelle</th>
<th class="px-2 py-1.5 font-medium">Status</th>
<th class="px-2 py-1.5 font-medium">Letzter Lauf</th>
<th class="px-2 py-1.5 font-medium text-right">Neu</th>
<th class="px-2 py-1.5 font-medium text-right">Aktualisiert</th>
<th class="px-2 py-1.5 font-medium text-right">Gefiltert</th>
<th class="px-2 py-1.5 font-medium">Hinweis</th>
<th class="px-2 py-1.5 font-medium text-xs uppercase tracking-wider">Quelle</th>
<th class="px-2 py-1.5 font-medium text-xs uppercase tracking-wider">Status</th>
<th class="px-2 py-1.5 font-medium text-xs uppercase tracking-wider">Letzter Lauf</th>
<th class="px-2 py-1.5 font-medium text-right text-xs uppercase tracking-wider">Neu</th>
<th class="px-2 py-1.5 font-medium text-right text-xs uppercase tracking-wider">Aktualisiert</th>
<th class="px-2 py-1.5 font-medium text-right text-xs uppercase tracking-wider">Gefiltert</th>
<th class="px-2 py-1.5 font-medium text-xs uppercase tracking-wider">Hinweis</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">