qcigano
8fec08d550
Der Adminbereich nutzte für Überschriften bisher nur Inter (Sans-Serif), während die eigentliche Website durchgängig Fraunces als markante Serifenschrift für Überschriften verwendet (--font-head). Jetzt zieht sich diese Schrift auch durch den Adminbereich — über die stabilen HTML- Tags (h1/h2/h3) gesetzt statt über Sveltias interne, ungeschützte Klassennamen, bleibt also robust gegen künftige Sveltia-Updates. Verifiziert per Puppeteer: H1 nutzt jetzt "Fraunces, Playfair Display, Georgia, serif", keine Konfigurationsfehler.
72 lines
3.9 KiB
HTML
72 lines
3.9 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<meta name="robots" content="noindex" />
|
||
<title>Van's DIY & Bastelbedarf – Admin</title>
|
||
<link rel="icon" href="/favicon.svg" />
|
||
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:opsz,[email protected],500;9..144,600;9..144,700&display=swap" rel="stylesheet" />
|
||
<style>
|
||
/* Sveltia CMS optisch an die eigentliche Website angepasst — nutzt Sveltias eigenes
|
||
CSS-Variablen-Theming-System (--sui-*, "Sveltia UI"), keine geratenen internen
|
||
Klassennamen. Das ist zwar nirgends offiziell als öffentliche Theming-API dokumentiert,
|
||
aber es sind echte, durchgängig im ganzen Sveltia-Interface verwendete Design-Tokens —
|
||
deutlich robuster als CSS gegen zufällige Klassennamen zu schreiben. Falls ein
|
||
künftiges Sveltia-Update diese Variablennamen ändert, fällt die Oberfläche einfach
|
||
wieder auf ihr Standard-Blau zurück statt kaputtzugehen.
|
||
*/
|
||
/* !important nötig: Sveltia hängt sein eigenes Stylesheet erst NACH dieser Seite ein,
|
||
gewinnt also bei gleicher Spezifität normalerweise die Kaskade. Mit !important setzt
|
||
sich unsere Optik trotzdem zuverlässig durch, unabhängig von der Ladereihenfolge. */
|
||
:root {
|
||
/* Schiebt alle neutralen Grautöne/Ränder der Oberfläche Richtung Lila — wie der
|
||
Rest der Seite (statt Sveltias Standard-Blaugrau). */
|
||
--sui-base-hue: 248 !important;
|
||
|
||
/* Mischung aus Lila und Babyblau statt einer einzelnen Akzentfarbe: der normale Zustand
|
||
(Buttons, aktive Felder, Links) ist babyblau, Hover-/Fokus-/Auswahl-Zustände (die den
|
||
"-dark"-Ton nutzen) kippen ins Lila (der gleiche Violett-Ton wie die Verlaufsränder auf
|
||
der eigentlichen Website) — dadurch entsteht überall im Interface ein echter Farbmix,
|
||
nicht nur eine Einzelfarbe. */
|
||
--sui-primary-accent-color: #8ec9f0 !important;
|
||
--sui-primary-accent-color-light: #b9e0fa !important;
|
||
--sui-primary-accent-color-dark: #9b7fd6 !important;
|
||
--sui-primary-accent-color-text: #8ec9f0 !important;
|
||
--sui-primary-accent-color-inverted: #0a0910 !important;
|
||
--sui-primary-accent-color-translucent: rgba(155, 127, 214, 0.45) !important;
|
||
--sui-primary-accent-color-translucent-light: rgba(142, 201, 240, 0.3) !important;
|
||
|
||
/* Gleiche Schriftart wie der Rest der Seite statt Sveltias Standardschrift. */
|
||
--sui-font-family-default: "Inter", system-ui, sans-serif !important;
|
||
}
|
||
|
||
/* Zahlenfelder ohne die klobigen Auf/Ab-Pfeile — dezenter, aufgeräumter. */
|
||
input[type="number"]::-webkit-outer-spin-button,
|
||
input[type="number"]::-webkit-inner-spin-button {
|
||
-webkit-appearance: none;
|
||
margin: 0;
|
||
}
|
||
input[type="number"] {
|
||
-moz-appearance: textfield;
|
||
}
|
||
|
||
/* Überschriften mit derselben edlen Serifenschrift wie auf der eigentlichen Website
|
||
(dort --font-head: Fraunces) statt der Standard-Sans-Serif — Sveltia selbst bietet dafür
|
||
kein eigenes CSS-Token, deshalb hier über die stabilen, semantischen HTML-Tags gesetzt
|
||
statt über interne Klassennamen (bleibt robust, auch wenn sich Sveltias Aufbau ändert). */
|
||
h1, h2, h3 {
|
||
font-family: "Fraunces", "Playfair Display", Georgia, serif !important;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Sveltia CMS: quelloffen (MIT), läuft komplett im Browser, bearbeitet die Inhalte
|
||
direkt im GitHub-Repo. Kein eigener Server nötig — siehe config.yml für die
|
||
Feld-Definitionen (Produkte, Kategorien). -->
|
||
<script src="https://unpkg.com/@sveltia/cms/dist/sveltia-cms.js"></script>
|
||
</body>
|
||
</html>
|