danielkrause/BSN-Chatsystem
1
0
Fork 0
Code Issues 14 Pull Requests Actions Packages Projects Releases Wiki Activity

🔄 Cards: Hover-Zoom scale(1.04) + Text nur auf Detailseite + Grid kompakter (280px)

Browse Source
This commit is contained in:
Hermes Agent
2026-06-17 14:55:23 +02:00
parent e73c55954a
commit 7189528c20
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.py
+7 -7
View File
@@ -1750,24 +1750,24 @@ def public_frontend():
.site-header .header-right a:hover { color:#fff; } .site-header .header-right a:hover { color:#fff; }
/* Main grid */ /* Main grid */
.main-grid { max-width:1100px; margin:2rem auto; padding:0 1.5rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.5rem; } .main-grid { max-width:1200px; margin:1.5rem auto; padding:0 1.5rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.2rem; }
/* Card — like SPIEL Essen modules */ /* Card — like SPIEL Essen modules */
.story-card { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 6px 28px rgba(0,0,0,0.12),0 2px 6px rgba(0,0,0,0.06); transition:transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),box-shadow 0.25s ease; display:flex; flex-direction:column; } .story-card { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 6px 28px rgba(0,0,0,0.12),0 2px 6px rgba(0,0,0,0.06); transition:transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),box-shadow 0.3s ease; display:flex; flex-direction:column; }
.story-card:hover { transform:translateY(-6px); box-shadow:0 18px 44px rgba(0,0,0,0.16),0 4px 12px rgba(0,0,0,0.08); } .story-card:hover { transform:scale(1.04); box-shadow:0 20px 48px rgba(0,0,0,0.2),0 6px 16px rgba(0,0,0,0.1); z-index:10; position:relative; }
.story-card img { width:100%; height:100%; object-fit:cover; display:block; } .story-card img { width:100%; height:100%; object-fit:cover; display:block; }
.story-card video { width:100%; height:auto; max-height:600px; object-fit:contain; display:block; background:#000; } .story-card video { width:100%; height:auto; max-height:600px; object-fit:contain; display:block; background:#000; }
.story-card { position:relative; } .story-card { position:relative; }
.story-halle-badge { position:absolute; top:10px; right:10px; background:#20228a; color:#fff; padding:0.25rem 0.65rem; border-radius:5px; font-size:0.78rem; font-weight:700; letter-spacing:0.03em; z-index:5; box-shadow:0 2px 6px rgba(0,0,0,0.3); } .story-halle-badge { position:absolute; top:10px; right:10px; background:#20228a; color:#fff; padding:0.25rem 0.65rem; border-radius:5px; font-size:0.78rem; font-weight:700; letter-spacing:0.03em; z-index:5; box-shadow:0 2px 6px rgba(0,0,0,0.3); }
.story-ausverkauft-badge { position:absolute; top:10px; left:10px; background:#dc3545; color:#fff; padding:0.3rem 0.7rem; border-radius:5px; font-size:0.78rem; font-weight:700; letter-spacing:0.02em; z-index:5; box-shadow:0 2px 6px rgba(0,0,0,0.3); } .story-ausverkauft-badge { position:absolute; top:10px; left:10px; background:#dc3545; color:#fff; padding:0.3rem 0.7rem; border-radius:5px; font-size:0.78rem; font-weight:700; letter-spacing:0.02em; z-index:5; box-shadow:0 2px 6px rgba(0,0,0,0.3); }
.card-content { padding:1.3rem 1.5rem 1.5rem; flex:1; display:flex; flex-direction:column; } .card-content { padding:0.8rem 1.2rem 1rem; display:flex; flex-direction:column; gap:0.3rem; }
.story-meta { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.7rem; flex-wrap:wrap; } .story-meta { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
.story-type { font-size:0.85rem; } .story-type { font-size:0.85rem; }
.story-author { font-weight:600; color:#20228a; font-size:0.82rem; } .story-author { font-weight:600; color:#20228a; font-size:0.82rem; }
.story-date { color:#999; font-size:0.72rem; margin-left:auto; } .story-date { color:#999; font-size:0.72rem; margin-left:auto; }
.story-time { font-size:0.78rem; color:#666; margin-bottom:0.6rem; font-weight:500; } .story-time { font-size:0.75rem; color:#666; font-weight:500; }
.story-time-rel { color:#20228a; font-weight:700; } .story-time-rel { color:#20228a; font-weight:700; }
.story-preview { font-size:0.92rem; line-height:1.6; color:#333; flex:1; } .story-preview { display:none; }
/* Frontend filter bar */ /* Frontend filter bar */
.frontend-filter { max-width:1100px; margin:1rem auto 0; padding:0 1.5rem; display:flex; gap:0.4rem; flex-wrap:wrap; align-items:center; } .frontend-filter { max-width:1100px; margin:1rem auto 0; padding:0 1.5rem; display:flex; gap:0.4rem; flex-wrap:wrap; align-items:center; }