ross/toptrumps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

.

Browse Source
This commit is contained in:
Ross
2025-12-05 11:35:22 +00:00
parent 4ce91f6390
commit d55cd821b5
2 changed files with 20 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cards/templates/cards/base.html
+10 -5
View File
@@ -33,13 +33,18 @@
#theme-toggle{margin-left:0.5rem} #theme-toggle{margin-left:0.5rem}
/* Top Trumps card styles */ /* Top Trumps card styles */
.toptrump-card{max-width:320px;border-radius:10px;overflow:hidden;background:var(--card-bg);color:var(--text);box-shadow:0 6px 18px rgba(0,0,0,0.12);border:1px solid rgba(0,0,0,0.06)} .toptrump-card{max-width:320px;border-radius:10px;overflow:hidden;background:var(--card-bg);color:var(--text);box-shadow:0 6px 18px rgba(0,0,0,0.12);border:1px solid rgba(0,0,0,0.06)}
.toptrump-card .hero-image{height:180px;background-size:cover;background-position:center} .toptrump-card .hero-image{height:180px;background-size:cover;background-position:center;position:relative;overflow:hidden}
/* Hero image: make the dinosaur image larger, cover the banner and remove shadow */ /* Hero image: make the dinosaur image larger, cover the banner and remove shadow */
.toptrump-card .hero-image img.card-hero-img{ .toptrump-card .hero-image img.card-hero-img{
display:block; position:absolute;
margin:8px auto 0; left:50%;
width:92%; top:50%;
height:140px; transform:translate(-50%,-50%);
/* ensure the image fills the banner while keeping aspect ratio */
min-width:110%;
min-height:110%;
width:auto;
height:auto;
object-fit:cover; object-fit:cover;
border-radius:6px; border-radius:6px;
box-shadow:none; box-shadow:none;
templates/cards/base.html
+10 -5
View File
@@ -33,13 +33,18 @@
#theme-toggle{margin-left:0.5rem} #theme-toggle{margin-left:0.5rem}
/* Top Trumps card styles */ /* Top Trumps card styles */
.toptrump-card{max-width:320px;border-radius:10px;overflow:hidden;background:var(--card-bg);color:var(--text);box-shadow:0 6px 18px rgba(0,0,0,0.12);border:1px solid rgba(0,0,0,0.06)} .toptrump-card{max-width:320px;border-radius:10px;overflow:hidden;background:var(--card-bg);color:var(--text);box-shadow:0 6px 18px rgba(0,0,0,0.12);border:1px solid rgba(0,0,0,0.06)}
.toptrump-card .hero-image{height:180px;background-size:cover;background-position:center} .toptrump-card .hero-image{height:180px;background-size:cover;background-position:center;position:relative;overflow:hidden}
/* Hero image: make the dinosaur image larger, cover the banner and remove shadow */ /* Hero image: make the dinosaur image larger, cover the banner and remove shadow */
.toptrump-card .hero-image img.card-hero-img{ .toptrump-card .hero-image img.card-hero-img{
display:block; position:absolute;
margin:8px auto 0; left:50%;
width:92%; top:50%;
height:140px; transform:translate(-50%,-50%);
/* ensure the image fills the banner while keeping aspect ratio */
min-width:110%;
min-height:110%;
width:auto;
height:auto;
object-fit:cover; object-fit:cover;
border-radius:6px; border-radius:6px;
box-shadow:none; box-shadow:none;