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;
}