danielkrause/it-hilf-sofort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 28 Artikel-CSS-Regeln — Tabellen, CTA-Boxen, Blockquotes, Stat-Cards

Browse Source 
- .article-content vollstaendig gestylt: h1/h2/h3, p, a, ul/ol/li
- Tabellen: Gradient-Header #20228a, Hover-Zeilen, Border-Radius
- CTA-Boxen (.cta): Blau-Gradient + Weisser CTA-Button + Shadow
- Blockquotes: 4px blauer Left-Border + hellblauer Hintergrund
- Stat-Cards: Zentriert, grosse Zahl in BSN-Blau
- Meta: Datum + Lesezeit mit blauem Punkt
- Listen-Marker in BSN-Blau
This commit is contained in:
Hermes Agent
2026-06-25 18:22:11 +02:00
parent b86cb1742a
commit b8831d2573
1 changed files with 29 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.py
+29
View File
@@ -94,7 +94,36 @@ def _base_template(title: str, content: str, active: str = "") -> str:
.article-layout{{display:grid;grid-template-columns:1fr 280px;gap:3rem;max-width:1100px;margin:0 auto;padding:3rem 2rem}}
@media(max-width:860px){{.article-layout{{grid-template-columns:1fr}}}}
.article-content{{max-width:680px}}
.article-content h1{{font-size:2.2rem;font-weight:800;letter-spacing:-0.02em;line-height:1.25;margin-bottom:0.5rem;color:#1a1a2e}}
.article-content h2{{font-size:1.45rem;font-weight:700;color:#20228a;margin:2.5rem 0 1rem;padding-bottom:0.5rem;border-bottom:2px solid #e8ecf1}}
.article-content h3{{font-size:1.15rem;font-weight:700;color:#1a1a2e;margin:1.75rem 0 0.75rem}}
.article-content p{{margin-bottom:1.25rem;line-height:1.8;color:#374151;font-size:1.02rem}}
.article-content p:first-of-type{{font-size:1.12rem;color:#1a1a2e;line-height:1.75}}
.article-content strong{{color:#1a1a2e;font-weight:600}}
.article-content a{{color:#20228a;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}}
.article-content a:hover{{color:#161e6e}}
.article-content ul,.article-content ol{{margin:1rem 0 1.5rem 1.5rem}}
.article-content li{{margin-bottom:0.6rem;line-height:1.7;color:#374151;padding-left:0.25rem}}
.article-content li::marker{{color:#20228a;font-weight:600}}
.article-content img{{max-width:100%;border-radius:8px;margin:1.5rem 0}}
.article-content table{{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:0.95rem;border-radius:8px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.06)}}
.article-content thead{{background:linear-gradient(135deg,#20228a,#2d3496)}}
.article-content th{{color:#fff;font-weight:600;text-align:left;padding:0.85rem 1rem;font-size:0.9rem}}
.article-content td{{padding:0.8rem 1rem;border-bottom:1px solid #f0f2f5;background:#fff;color:#374151}}
.article-content tr:last-child td{{border-bottom:none}}
.article-content tr:hover td{{background:#f8f9ff}}
.article-content blockquote{{border-left:4px solid #20228a;background:#f0f2ff;padding:1.25rem 1.5rem;margin:1.5rem 0;border-radius:0 8px 8px 0;color:#374151;font-style:italic;font-size:1rem}}
.article-content blockquote p{{margin-bottom:0.5rem;color:#374151}}
.article-content .meta{{color:#6b7280;font-size:0.9rem;margin-bottom:2rem;display:flex;gap:1.5rem;align-items:center}}
.article-content .meta::before{{content:'';display:inline-block;width:4px;height:4px;background:#20228a;border-radius:50%}}
.article-content .cta{{background:linear-gradient(135deg,#20228a,#2d3496);color:#fff;padding:2rem;border-radius:12px;margin:2.5rem 0;text-align:center}}
.article-content .cta p{{color:rgba(255,255,255,0.9);margin-bottom:1rem;font-size:1.05rem}}
.article-content .cta strong{{color:#fff}}
.article-content .cta a{{display:inline-block;background:#fff;color:#20228a;padding:0.75rem 2rem;border-radius:8px;font-weight:700;text-decoration:none;font-size:0.95rem;transition:all 0.2s;box-shadow:0 2px 8px rgba(0,0,0,0.15)}}
.article-content .cta a:hover{{background:#f0f2ff;transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,0.2)}}
.article-content .stat-card{{background:#fff;border:1px solid #e8ecf1;border-radius:10px;padding:1.5rem;margin:1.5rem 0;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,0.04)}}
.article-content .stat-card strong{{display:block;font-size:2rem;font-weight:800;color:#20228a;margin-bottom:0.25rem}}
.article-content .stat-card p{{color:#6b7280;font-size:0.9rem;margin-bottom:0}}
.article-sidebar{{background:#fff;border:1px solid #e8ecf1;border-radius:12px;padding:1.5rem;align-self:start;position:sticky;top:80px}}
.sidebar-title{{font-size:0.85rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:#94a3b8;margin-bottom:1rem}}
.sidebar-link{{display:block;color:#20228a;text-decoration:none;padding:0.5rem 0;font-size:0.9rem;font-weight:500;border-bottom:1px solid #f0f2f5;transition:color 0.15s}}