Template:Home/FeaturedAccessionCard/styles.css: Difference between revisions
Template page
More actions
Eloise Zomia (talk | contribs) Created page with "→Card shell: .fa-card{ display:flex; flex-direction:column; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; background:#fff; } →Media: use padding-top ratio instead of aspect-ratio: .fa-media{ position:relative; width:100%; padding-top:56.25%; →16:9: background:#f5f5f5; } .fa-img{ position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; object-fit:cover; display:block; } .fa-img--placeholder{..." |
Eloise Zomia (talk | contribs) No edit summary |
||
| Line 1: | Line 1: | ||
.fa-card{display:flex;flex-direction:column;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;background:#fff} | |||
.fa-card{ | .fa-media{position:relative;width:100%;padding-top:56.25%;background:#f5f5f5} | ||
.fa-img{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;object-fit:cover;display:block} | |||
.fa-img--placeholder{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font:600 14px/1.2 system-ui;color:#9ca3af} | |||
.fa-body{padding:12px 14px 14px} | |||
} | |||
/* | /* prevent skin “notice” styling from wrapping these lines */ | ||
.fa- | .fa-kicker,.fa-sub,.fa-cta{background:none;border:0;padding:0;margin:0 0 8px} | ||
.fa-kicker{font:600 12px/1.2 system-ui;color:#374151;display:flex;align-items:center;gap:6px} | |||
.fa-status{font-weight:700} | |||
.fa-dot{opacity:.5} | |||
.fa-title{font:700 18px/1.25 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;margin:0 0 4px} | |||
.fa-sub{font:500 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;color:#6b7280} | |||
.fa- | .fa-hook{font:400 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;color:#111827;margin:0 0 10px;max-height:4.2em;overflow:hidden} | ||
.fa-cta a{text-decoration:none;border-bottom:1px solid #d1d5db} | |||
.fa-missing{color:#9ca3af} | |||
.fa- | |||
.fa-kicker{ | |||
} | |||
.fa-status{ font-weight:700 | |||
.fa-dot{ opacity:.5 | |||
.fa-title{ | |||
} | |||
.fa-sub{ | |||
} | |||
Revision as of 12:45, 23 August 2025
.fa-card{display:flex;flex-direction:column;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;background:#fff}
.fa-media{position:relative;width:100%;padding-top:56.25%;background:#f5f5f5}
.fa-img{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;object-fit:cover;display:block}
.fa-img--placeholder{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font:600 14px/1.2 system-ui;color:#9ca3af}
.fa-body{padding:12px 14px 14px}
/* prevent skin “notice” styling from wrapping these lines */
.fa-kicker,.fa-sub,.fa-cta{background:none;border:0;padding:0;margin:0 0 8px}
.fa-kicker{font:600 12px/1.2 system-ui;color:#374151;display:flex;align-items:center;gap:6px}
.fa-status{font-weight:700}
.fa-dot{opacity:.5}
.fa-title{font:700 18px/1.25 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;margin:0 0 4px}
.fa-sub{font:500 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;color:#6b7280}
.fa-hook{font:400 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;color:#111827;margin:0 0 10px;max-height:4.2em;overflow:hidden}
.fa-cta a{text-decoration:none;border-bottom:1px solid #d1d5db}
.fa-missing{color:#9ca3af}