From b8831d2573164f3c67de1f019d9c4e22d6a97dda Mon Sep 17 00:00:00 2001 From: Hermes Agent Date: Thu, 25 Jun 2026 18:22:11 +0200 Subject: [PATCH] =?UTF-8?q?style:=2028=20Artikel-CSS-Regeln=20=E2=80=94=20?= =?UTF-8?q?Tabellen,=20CTA-Boxen,=20Blockquotes,=20Stat-Cards?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - .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 --- app.py | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/app.py b/app.py index 55871c4..dbbd059 100644 --- a/app.py +++ b/app.py @@ -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}}