diff --git a/app.py b/app.py index 8a04a63..0c49aef 100644 --- a/app.py +++ b/app.py @@ -290,7 +290,8 @@ TEMPLATE = """ .filter-bar select { padding: 10px 15px; border-radius: 20px; background: #222; color: #fff; border: 1px solid #333; font-size: 0.9rem; outline: none; cursor: pointer; } .filter-bar select:focus { border-color: var(--primary); } - .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; max-width: 1200px; margin: 0 auto; } + /* Desktop Grid: max-width auf 1600px erhöht, minmax auf 180px für bis zu 7 Items */ + .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; max-width: 1600px; margin: 0 auto; } .card { background: var(--card); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.5); transition: transform 0.2s; display: flex; flex-direction: column; } .card:hover { transform: scale(1.03); } .card-clickable { cursor: pointer; flex-grow: 1; } @@ -301,6 +302,23 @@ TEMPLATE = """ .btn-direct, .btn-tonie { background: #333; color: #ccc; border: 1px solid #444; padding: 6px 14px; border-radius: 15px; font-size: 0.85rem; cursor: pointer; transition: 0.2s; } .btn-direct:hover, .btn-tonie:hover { background: var(--primary); color: white; border-color: var(--primary); } + /* Mobile Anpassungen (für Bildschirme schmaler als 600px) */ + @media (max-width: 600px) { + body { padding: 10px; padding-bottom: 160px; } + h1 { font-size: 2.2rem; } + + /* Grid auf Handy: minmax auf 110px reduziert -> ergibt 2-3 Spalten */ + .grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; } + + /* Schriften und Abstände kompakter machen */ + .card .title { font-size: 0.85rem; padding: 8px 5px 2px 5px; } + .card .meta-info { font-size: 0.65rem; padding: 0 5px 5px 5px; } + .card-actions { padding: 8px; gap: 4px; } + .btn-direct, .btn-tonie { font-size: 0.75rem; padding: 4px 8px; } + + .filter-bar select { font-size: 0.8rem; padding: 8px 12px; } + } + /* Player Bar */ .player-bar { position: fixed; bottom: 20px; left: 15px; right: 15px;