Template:Home/styles.css: Difference between revisions
Add featured-article styling to the homepage |
Match homepage feature to the existing Spike Wiki card style |
||
| (3 intermediate revisions by the same user not shown) | |||
| Line 12: | Line 12: | ||
display:grid; | display:grid; | ||
grid-template-columns:1fr; | grid-template-columns:1fr; | ||
gap: | gap:12px; | ||
align-items: | align-items:start; | ||
margin:12px 0 16px; | margin:12px 0 16px; | ||
padding: | padding:12px; | ||
border:1px solid #eaecf0; | border:1px solid #eaecf0; | ||
border-radius: | border-radius:8px; | ||
background:# | background:#fff; | ||
} | } | ||
.featured-media .mw-file-description{ display:block; } | .featured-media .mw-file-description{ display:block; } | ||
| Line 26: | Line 26: | ||
height:auto; | height:auto; | ||
aspect-ratio:16 / 10; | aspect-ratio:16 / 10; | ||
border-radius: | border-radius:6px; | ||
object-fit:cover; | object-fit:cover; | ||
} | } | ||
.featured-kicker{ | .featured-kicker{ | ||
color:# | margin-bottom:4px; | ||
font-size: | color:#202122; | ||
font-weight: | font-size:1rem; | ||
font-weight:600; | |||
line-height:1.4; | |||
} | } | ||
.featured-title{ | .featured-title{ | ||
font-size:1.2rem; | |||
font-size:1. | |||
font-weight:700; | font-weight:700; | ||
line-height:1. | line-height:1.3; | ||
} | } | ||
.featured-title a{ color: | .featured-title a{ color:#36c; text-decoration:none; } | ||
.featured-title a:hover{ text-decoration:underline; } | .featured-title a:hover{ text-decoration:underline; } | ||
.featured-text{ margin-top: | .featured-text{ margin-top:6px; color:#54595d; line-height:1.5; } | ||
@media (min-width:720px){ | @media (min-width:720px){ | ||
.featured{ grid-template-columns:minmax( | .featured{ grid-template-columns:minmax(180px, 30%) minmax(0, 1fr); } | ||
} | } | ||
Latest revision as of 03:44, 20 July 2026
/* 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; }
/* 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 */
.card{ border:1px solid #eaecf0; border-radius:8px; padding:12px; background:#fff; }
.card-h{ font-weight:600; margin-bottom:8px; }
.list{ margin:0; padding-left:18px; }
/* Buttons */
.btn-row{ display:flex; flex-wrap:wrap; gap:8px; }
.btn-row input[type="submit"]{
appearance:none; border:1px solid #d0d7de; background:#f8f9fa;
padding:6px 10px; border-radius:6px; cursor:pointer;
}
.btn-row input[type="submit"]:hover{ background:#fff; }
/* Tables */
.wikitable{ width:100%; }