Template:Home/FeaturedAccessionCard/styles.css: Difference between revisions
Template page
More actions
Eloise Zomia (talk | contribs) No edit summary |
Eloise Zomia (talk | contribs) No edit summary |
||
Line 1: | Line 1: | ||
.fa- | /* Template:Home/FeaturedAccessionCard/styles.css ← CSS ONLY */ | ||
.fa-grid { | |||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |||
gap: 1rem; | |||
} | } | ||
.fa-card{ | .fa-card { | ||
border: 1px solid #e6e6e6; | |||
border-radius: 10px; | |||
overflow: hidden; | |||
background: #fff; | |||
} | |||
.fa- | .fa-media { | ||
position: relative; | |||
width: 100%; | |||
height: 200px; /* adjust as you like */ | |||
overflow: hidden; | |||
background: #f5f5f5; | |||
} | |||
/* Style the actual <img> regardless of class/where MW puts it */ | |||
.fa-media img { | |||
position: absolute; | |||
inset: 0; | |||
width: 100%; | |||
height: 100%; | |||
object-fit: cover; | |||
display: block; | |||
} | |||
/* | /* Placeholder */ | ||
.fa- | .fa-img--placeholder { | ||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
height: 100%; | |||
color: #6c757d; | |||
font-size: .95rem; | |||
} | |||
Revision as of 01:06, 24 August 2025
/* Template:Home/FeaturedAccessionCard/styles.css ← CSS ONLY */ .fa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; } .fa-card { border: 1px solid #e6e6e6; border-radius: 10px; overflow: hidden; background: #fff; } .fa-media { position: relative; width: 100%; height: 200px; /* adjust as you like */ overflow: hidden; background: #f5f5f5; } /* Style the actual <img> regardless of class/where MW puts it */ .fa-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Placeholder */ .fa-img--placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: #6c757d; font-size: .95rem; }