Template:Home/styles.css: Difference between revisions
>Kypho Created page with "→Layout: .grid2{ display:grid; grid-template-columns:1fr; gap:12px; } @media (min-width:900px){ .grid2{ grid-template-columns:1fr 1fr; } } →Hero: .hero{ padding:8px 0 4px; border-bottom:1px solid #eaecf0; margin-bottom:8px; } .hero-title{ font-size:28px; font-weight:700; } .hero-sub{ color:#54595d; margin-top:4px; } →Cards & lists: .card{ border:1px solid #eaecf0; border-radius:8px; padding:12px; background:#fff; } .card-h{ font-weight:600; margin-bottom:8p..." |
Match homepage feature to the existing Spike Wiki card style |
||
| (5 intermediate revisions by 2 users not shown) | |||
| Line 7: | Line 7: | ||
.hero-title{ font-size:28px; font-weight:700; } | .hero-title{ font-size:28px; font-weight:700; } | ||
.hero-sub{ color:#54595d; margin-top:4px; } | .hero-sub{ color:#54595d; margin-top:4px; } | ||
/* Featured article */ | |||
.featured{ | |||
display:grid; | |||
grid-template-columns:1fr; | |||
gap:12px; | |||
align-items:start; | |||
margin:12px 0 16px; | |||
padding:12px; | |||
border:1px solid #eaecf0; | |||
border-radius:8px; | |||
background:#fff; | |||
} | |||
.featured-media .mw-file-description{ display:block; } | |||
.featured-media img{ | |||
display:block; | |||
width:100%; | |||
height:auto; | |||
aspect-ratio:16 / 10; | |||
border-radius:6px; | |||
object-fit:cover; | |||
} | |||
.featured-kicker{ | |||
margin-bottom:4px; | |||
color:#202122; | |||
font-size:1rem; | |||
font-weight:600; | |||
line-height:1.4; | |||
} | |||
.featured-title{ | |||
font-size:1.2rem; | |||
font-weight:700; | |||
line-height:1.3; | |||
} | |||
.featured-title a{ color:#36c; text-decoration:none; } | |||
.featured-title a:hover{ text-decoration:underline; } | |||
.featured-text{ margin-top:6px; color:#54595d; line-height:1.5; } | |||
@media (min-width:720px){ | |||
.featured{ grid-template-columns:minmax(180px, 30%) minmax(0, 1fr); } | |||
} | |||
/* Cards & lists */ | /* Cards & lists */ | ||
| Line 21: | Line 61: | ||
.btn-row input[type="submit"]:hover{ background:#fff; } | .btn-row input[type="submit"]:hover{ background:#fff; } | ||
/* Tables | /* Tables */ | ||
.wikitable{ width:100%; } | .wikitable{ width:100%; } | ||