css optimation

This commit is contained in:
nocci 2025-05-02 12:43:28 +02:00
parent f260da3594
commit 42aaa21703
1 changed files with 50 additions and 2 deletions

View File

@ -1068,10 +1068,10 @@ cat <<HTML_END > templates/index.html
<td> <td>
{% if game.steam_appid %} {% if game.steam_appid %}
<img src="https://cdn.cloudflare.steamstatic.com/steam/apps/{{ game.steam_appid }}/header.jpg" <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/{{ game.steam_appid }}/header.jpg"
alt="Steam Header" style="height:64px;max-width:120px;object-fit:cover;"> alt="Steam Header" class="game-cover">
{% elif game.url and 'gog.com' in game.url %} {% elif game.url and 'gog.com' in game.url %}
<img src="{{ url_for('static', filename='gog_logo.png') }}" <img src="{{ url_for('static', filename='gog_logo.png') }}"
alt="GOG Logo" style="height:48px;max-width:120px;object-fit:contain;"> alt="GOG Logo" class="game-cover">
{% endif %} {% endif %}
</td> </td>
<td>{{ game.name }}</td> <td>{{ game.name }}</td>
@ -1557,6 +1557,54 @@ body {
.table-pdf td, .table-pdf th { .table-pdf td, .table-pdf th {
padding: 4px 8px; padding: 4px 8px;
} }
.game-cover {
width: 368px;
height: 172px;
max-width: 100%;
max-height: 35vw;
object-fit: contain;
background: #222;
border-radius: 8px;
display: block;
margin: 0 auto;
transition: width 0.2s, height 0.2s;
}
/* Responsiv für kleinere Bildschirme */
@media (max-width: 1200px) {
.game-cover {
width: 260px;
height: 122px;
}
}
@media (max-width: 900px) {
.game-cover {
width: 180px;
height: 84px;
}
}
@media (max-width: 600px) {
.game-cover {
width: 120px;
height: 56px;
}
}
@media (max-width: 400px) {
.game-cover {
width: 90px;
height: 42px;
}
}
img.game-cover {
width: 368px;
height: 172px;
object-fit: contain;
background: #222;
border-radius: 8px;
}
CSS_END CSS_END
echo -e "\n\033[1;32m✅ Setup done! Seems to be okay!\033[0m" echo -e "\n\033[1;32m✅ Setup done! Seems to be okay!\033[0m"