Thomas Stallinger c35145ef8e feat: Pico.css für Dark/Light-Mode und Responsivität
Klassenloses CSS-Framework (self-hosted unter static/, kein CDN), passt
zum bestehenden Ansatz ohne JS-Build-Schritt. Bringt automatisches
Dark/Light-Mode (prefers-color-scheme) und Responsivität ohne
Zusatzaufwand. Templates auf Picos semantische Konventionen umgestellt
(label/input-Paare, article für die Login-Karte, figure um Tabellen für
horizontales Scrollen). Eigene CSS-Regeln auf die zwei Farb-Utility-
Klassen (state-present/state-absent) reduziert, Rest kommt von Pico.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-08-05 08:16:43 +02:00

29 lines
961 B
HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}Tuxflotte{% endblock %}</title>
<link rel="stylesheet" href="/static/pico.min.css">
<style>
.state-present { color: var(--pico-ins-color); font-weight: 600; }
.state-absent { color: var(--pico-muted-color); }
.optionen label { font-weight: normal; }
td form { margin-bottom: 0; }
</style>
</head>
<body>
<header class="container">
<nav>
<ul><li><strong><a href="/geraete">Tuxflotte Kundenplattform</a></strong></li></ul>
{% if user %}
<ul><li>{{ user.email }}</li><li><a href="/logout" role="button" class="secondary outline">Abmelden</a></li></ul>
{% endif %}
</nav>
</header>
<main class="container">
{% block content %}{% endblock %}
</main>
</body>
</html>