Template
chore: Vorlage an Projekt-Referenz und @ep/ui anbinden
- Plugin prodi über Marketplace ep-plugins einbinden; Hook schutz-main.sh entfernt - @ep/ui als Paket aus Gitea-Registry (.npmrc, Dockerfile mit GITEA_NPM_TOKEN) - Eigene Schriften, EpKopf/EpFuss und Styles durch @ep/ui ersetzt - CLAUDE.md verschlankt, Steckbrief unter docs/, n8n-Ordner angelegt - .gitattributes für LF-Zeilenenden Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
AdminandClaude Opus 5.5 committed
1 parent
3fa0e2f046
commit
ba6b0b08fe
23 files changed
+312
-719
No files matched your search
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,363 +1,8 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
@import "shadcn/tailwind.css";
|
||||
@import "@ep/ui/theme.css";
|
||||
@source "../node_modules/@ep/ui/dist";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
/* ------------------------------------------------------------------ *
|
||||
* E&P-Layout wie auf ep-reisen.de und im EP-Budget-Tool:
|
||||
* Lato, Tiefblau #18527b als Akzent, Magenta-Verlauf nur für die
|
||||
* Hauptaktion (.ep-cta), eckige Formen, hellblauer Seitenhintergrund.
|
||||
* Jede Oberfläche der Schulung nutzt genau diese Werte und Bausteine.
|
||||
* Keine weiteren Farben, keine anderen Schriften, keine runden Ecken.
|
||||
* ------------------------------------------------------------------ */
|
||||
@theme inline {
|
||||
--color-ground: var(--ground);
|
||||
--color-surface: var(--surface);
|
||||
--color-hairline: var(--hairline);
|
||||
--color-ink: var(--ink);
|
||||
--color-ink-muted: var(--ink-muted);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-press: var(--accent-press);
|
||||
--color-accent-soft: var(--accent-soft);
|
||||
--color-on-accent: var(--on-accent);
|
||||
--color-strich: var(--strich);
|
||||
--color-fehler: var(--fehler);
|
||||
/* alter Name aus früheren Versionen des Starters, zeigt jetzt auf das Tiefblau */
|
||||
--color-brand: var(--accent);
|
||||
|
||||
--font-heading: var(--font-sans);
|
||||
--font-body: var(--body-font);
|
||||
--font-sans: var(--font-sans);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-ring: var(--ring);
|
||||
--color-input: var(--input);
|
||||
--color-border: var(--border);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-card: var(--card);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-background: var(--background);
|
||||
--radius-sm: calc(var(--radius) * 0.6);
|
||||
--radius-md: calc(var(--radius) * 0.8);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) * 1.4);
|
||||
--radius-2xl: calc(var(--radius) * 1.8);
|
||||
--radius-3xl: calc(var(--radius) * 2.2);
|
||||
--radius-4xl: calc(var(--radius) * 2.6);
|
||||
}
|
||||
|
||||
/* Eckig wie ep-reisen.de: alle Tailwind-Radien auf 0 */
|
||||
@theme {
|
||||
--radius-xs: 0px;
|
||||
--radius-sm: 0px;
|
||||
--radius-md: 0px;
|
||||
--radius-lg: 0px;
|
||||
--radius-xl: 0px;
|
||||
--radius-2xl: 0px;
|
||||
--radius-3xl: 0px;
|
||||
}
|
||||
|
||||
:root {
|
||||
--ground: #ebf3fa; /* Seitenhintergrund */
|
||||
--surface: #ffffff; /* Flächen, Karten, Kopfleiste */
|
||||
--hairline: #d8e3ed; /* Linien */
|
||||
--ink: #27272a; /* Text */
|
||||
--ink-muted: #52525b; /* gedämpfter Text */
|
||||
--accent: oklch(0.97 0 0); /* E&P-Tiefblau */
|
||||
--accent-press: #103c5b;
|
||||
--accent-soft: #e3eef8;
|
||||
--on-accent: #ffffff;
|
||||
--strich: #009fff; /* nur Zierstrich unter Überschriften, nie für Text */
|
||||
--fehler: #c0261b; /* Fehlermeldungen */
|
||||
/* --font-lato setzt next/font auf <html>, siehe app/layout.tsx */
|
||||
--heading-font: var(--font-lato), "Lato", ui-sans-serif, system-ui, sans-serif;
|
||||
--body-font: var(--font-lato), "Lato", ui-sans-serif, system-ui, sans-serif;
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--chart-3: oklch(0.439 0 0);
|
||||
--chart-4: oklch(0.371 0 0);
|
||||
--chart-5: oklch(0.269 0 0);
|
||||
--radius: 0.625rem;
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
color-scheme: light;
|
||||
background: var(--ground);
|
||||
@apply font-sans;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--ground);
|
||||
color: var(--ink);
|
||||
font-family: var(--body-font);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
font-family: var(--heading-font);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
code {
|
||||
background: var(--accent-soft);
|
||||
padding: 0 0.3em;
|
||||
font-size: 0.92em;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
}
|
||||
|
||||
/* Bausteine für alle Oberflächen. Neue Seiten setzen sich daraus zusammen. */
|
||||
@layer components {
|
||||
/* Skip-Link (erstes Element im Body) */
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: var(--accent);
|
||||
color: var(--on-accent);
|
||||
padding: 0.75rem 1.25rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.skip-link:focus {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Überschrift mit kurzem Zierstrich darunter */
|
||||
.ep-ueberschrift {
|
||||
color: var(--ink);
|
||||
font-weight: 900;
|
||||
}
|
||||
.ep-ueberschrift::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 3rem;
|
||||
height: 3px;
|
||||
margin-top: 0.6rem;
|
||||
background: var(--strich);
|
||||
}
|
||||
|
||||
/* Weiße Fläche mit feiner Linie, für Formulare und Ergebnisse */
|
||||
.ep-karte {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--hairline);
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.ep-label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
/* Eingabefelder, Auswahllisten und Textfelder */
|
||||
.ep-feld {
|
||||
width: 100%;
|
||||
background: var(--surface);
|
||||
border: 1px solid #b9c9d8;
|
||||
color: var(--ink);
|
||||
padding: 0.6rem 0.75rem;
|
||||
}
|
||||
.ep-feld:focus {
|
||||
border-color: var(--accent);
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 0;
|
||||
}
|
||||
|
||||
/* Knopf in Tiefblau. Für die eine Hauptaktion zusätzlich .ep-cta */
|
||||
.ep-knopf {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
background-color: var(--accent);
|
||||
color: var(--on-accent);
|
||||
font-weight: 700;
|
||||
padding: 0.7rem 1.4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ep-knopf:hover {
|
||||
background-color: var(--accent-press);
|
||||
}
|
||||
.ep-knopf:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Hauptaktion: Magenta-Verlauf wie „Alle Reisen anzeigen“ auf ep-reisen.de. Nur einmal je Seite. */
|
||||
.ep-cta {
|
||||
background-image: linear-gradient(120deg, #960167, #9e036a 40%, #fa1a8c);
|
||||
color: #ffffff;
|
||||
}
|
||||
.ep-cta:hover {
|
||||
background-image: linear-gradient(120deg, #7d0156, #8a035d 40%, #e3107c);
|
||||
}
|
||||
|
||||
/* Hellblauer Kasten für Ergebnisse und Hinweise */
|
||||
.ep-hinweis {
|
||||
background: var(--accent-soft);
|
||||
border-left: 4px solid var(--accent);
|
||||
padding: 0.9rem 1.1rem;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
/* Fehlermeldung */
|
||||
.ep-fehler {
|
||||
background: #fdf1f0;
|
||||
border-left: 4px solid var(--fehler);
|
||||
padding: 0.9rem 1.1rem;
|
||||
color: var(--fehler);
|
||||
font-size: 0.925rem;
|
||||
}
|
||||
|
||||
/* Tabelle für Ergebnisse */
|
||||
.ep-tabelle {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: var(--surface);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.ep-tabelle th {
|
||||
background: var(--accent);
|
||||
color: var(--on-accent);
|
||||
text-align: left;
|
||||
font-weight: 700;
|
||||
padding: 0.55rem 0.75rem;
|
||||
}
|
||||
.ep-tabelle td {
|
||||
border-bottom: 1px solid var(--hairline);
|
||||
padding: 0.55rem 0.75rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* Pfeil-Aufzählung */
|
||||
.arrow-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.arrow-list > li {
|
||||
position: relative;
|
||||
padding-left: 1.4rem;
|
||||
}
|
||||
.arrow-list > li::before {
|
||||
content: "→";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.205 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.205 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.922 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--chart-3: oklch(0.439 0 0);
|
||||
--chart-4: oklch(0.371 0 0);
|
||||
--chart-5: oklch(0.269 0 0);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.556 0 0);
|
||||
}
|
||||
/* E&P-Farben, Schriften und Bausteine (ep-karte, ep-knopf, …) kommen aus @ep/ui/theme.css.
|
||||
* Hier nur app-eigene Regeln ergänzen. */
|
||||
@@ -1,22 +1,7 @@
|
||||
import type { Metadata, Viewport } from "next";
|
||||
import localFont from "next/font/local";
|
||||
import { EpFuss, EpKopf } from "@ep/ui";
|
||||
import "./globals.css";
|
||||
import { EpKopf } from "@/components/EpKopf";
|
||||
import { EpFuss } from "@/components/EpFuss";
|
||||
import { APP_BESCHREIBUNG, APP_TITEL } from "@/lib/app";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
// Hausschrift von ep-reisen.de (Lato, freie Lizenz OFL). Die Dateien liegen im Projekt,
|
||||
// damit der Build ohne Internet klappt. Lato hat keine Stärke 600, font-semibold erscheint fett.
|
||||
const lato = localFont({
|
||||
src: [
|
||||
{ path: "./fonts/lato-400.woff2", weight: "400", style: "normal" },
|
||||
{ path: "./fonts/lato-700.woff2", weight: "700", style: "normal" },
|
||||
{ path: "./fonts/lato-900.woff2", weight: "900", style: "normal" },
|
||||
],
|
||||
variable: "--font-lato",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: `${APP_TITEL} · E&P Reisen`,
|
||||
@@ -31,14 +16,15 @@ export const viewport: Viewport = {
|
||||
};
|
||||
|
||||
// E&P-Layout für jede Seite: Kopf mit Logo, Inhalt, Fuß. Seiten liefern nur ihren Inhalt, kein eigenes <main>.
|
||||
// Kopf, Fuß und die Hausschrift Lato kommen aus @ep/ui.
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang="de" className={cn("font-sans", lato.variable)}>
|
||||
<html lang="de" className="font-sans">
|
||||
<body className="flex min-h-screen flex-col bg-ground text-ink">
|
||||
<a href="#inhalt" className="skip-link">
|
||||
Zum Inhalt springen
|
||||
</a>
|
||||
<EpKopf />
|
||||
<EpKopf titel={APP_TITEL} />
|
||||
<main id="inhalt" className="mx-auto w-full max-w-3xl flex-1 px-4 py-8 sm:px-6 sm:py-12">
|
||||
{children}
|
||||
</main>
|
||||
|
||||
@@ -2,7 +2,7 @@ import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
||||
import { APP_BESCHREIBUNG, APP_TITEL } from "@/lib/app";
|
||||
|
||||
// Startseite im E&P-Layout. Kopf und Fuß kommen aus app/layout.tsx,
|
||||
// Farben und Bausteine (ep-karte, ep-ueberschrift, …) aus app/globals.css.
|
||||
// Farben und Bausteine (ep-karte, ep-ueberschrift, …) aus @ep/ui/theme.css.
|
||||
export default function Home() {
|
||||
return (
|
||||
<Card className="ep-karte rounded-none shadow-none ring-0">
|
||||
|
||||
Reference in new issue
Block a user