86 lines
3.2 KiB
Markdown
86 lines
3.2 KiB
Markdown
# PDF-Design: Modern Glassmorphism Layout
|
|
|
|
## Design-Konzept
|
|
|
|
Das PDF-Layout verwendet ein **modernes Glassmorphism-Design** — inspiriert von Apple Keynote-Slides und Behance Case Studies. Jede Seite besteht aus einem vollflächigen Hintergrundbild mit zwei **schwebenden Glass-Cards** (Titel oben, Beschreibung unten).
|
|
|
|
## Aufbau (Layer-System)
|
|
|
|
```
|
|
┌─────────────────────────────────┐
|
|
│ LAYER 1: Vollbild-Hintergrund │ ← Edge-to-Edge Bild
|
|
│ │
|
|
│ LAYER 2: Oberes Dark-Overlay │ ← Kontrast für Titelkarte
|
|
│ ┌───────────────────────────┐ │
|
|
│ │ ███ TITELKARTE (Glass) ███ │ ← Name + Jahr
|
|
│ └───────────────────────────┘ │
|
|
│ │
|
|
│ (Bild sichtbar) │
|
|
│ │
|
|
│ LAYER 3: Unteres Dark-Overlay │ ← Kontrast für Beschreibung
|
|
│ ┌───────────────────────────┐ │
|
|
│ │ ███ BESCHREIBUNG (Glass) ██ │ ← Bio-Text
|
|
│ └───────────────────────────┘ │
|
|
└─────────────────────────────────┘
|
|
```
|
|
|
|
## Glassmorphism-Technik (Build-Safe)
|
|
|
|
Jede Karte nutzt die `Decoration` API mit mehrfachen `.Before()` Layern:
|
|
|
|
```csharp
|
|
.Decoration(card =>
|
|
{
|
|
// 1. Weicher Schatten (sehr dezent, außen)
|
|
card.Before()
|
|
.Border(4f).BorderColor("#18000000")
|
|
.CornerRadius(20);
|
|
|
|
// 2. Lichtkante (innerer Glas-Rim)
|
|
card.Before()
|
|
.Border(1f).BorderColor("#44FFFFFF")
|
|
.CornerRadius(20);
|
|
|
|
// 3. Halbtransparenter dunkler Hintergrund
|
|
card.Before()
|
|
.Background("#C8181828")
|
|
.CornerRadius(20);
|
|
|
|
// 4. Inhalt (Text)
|
|
card.Content()
|
|
.PaddingVertical(28)
|
|
.PaddingHorizontal(36)
|
|
.Column(inner => { /* ... */ });
|
|
});
|
|
```
|
|
|
|
## Design-Details
|
|
|
|
| Element | Stil |
|
|
|---------|------|
|
|
| **Name** | 36pt, ExtraBold, Uppercase, Weiß, Letter-Spacing 0.5 |
|
|
| **Trennlinie** | 1.5pt, halbtransparent Weiß (#55FFFFFF) |
|
|
| **Jahrgang** | 15pt, gedämpft (#CCFFFFFF), Letter-Spacing 1.5 |
|
|
| **Beschreibungs-Header** | 14pt, SemiBold, gedämpft, Letter-Spacing 2 |
|
|
| **Beschreibungstext** | 11pt, 1.5 Zeilenhöhe, leicht gedämpft (#E8FFFFFF) |
|
|
| **Titelkarte Radius** | 20px |
|
|
| **Beschreibungskarte Radius** | 16px |
|
|
| **Overlay oben** | 220pt Höhe, #99000000 |
|
|
| **Overlay unten** | 280pt Höhe, #AA000000 |
|
|
| **Seiten-Padding** | 40pt rundum |
|
|
|
|
## Vorteile dieses Ansatzes
|
|
|
|
- ✅ **100% Build-Safe**: Keine SkiaSharp-Abhängigkeit, rein QuestPDF Fluent API
|
|
- ✅ **Stabil auf jedem Bild**: Kontrast-Overlays garantieren Lesbarkeit
|
|
- ✅ **Visuell hochwertig**: Glasskarte + Tiefe + Typografie-Hierarchie
|
|
- ✅ **Strukturell unverändert**: Name oben, Beschreibung unten, Bild vollflächig
|
|
|
|
## Build-Befehl
|
|
|
|
```bash
|
|
dotnet build Server/SZUAbsolventenverein.Module.HallOfFame.Server.csproj
|
|
```
|
|
|
|
Letzte erfolgreiche Kompilierung: 19. Februar 2026 — 0 Fehler, 0 Warnungen.
|