Template:Home/styles.css: Difference between revisions
Add featured-article styling to the homepage |
Style homepage feature actions with MediaWiki design tokens |
||
| Line 45: | Line 45: | ||
.featured-title a:hover{ text-decoration:underline; } | .featured-title a:hover{ text-decoration:underline; } | ||
.featured-text{ margin-top:8px; color:#54595d; line-height:1.5; } | .featured-text{ margin-top:8px; color:#54595d; line-height:1.5; } | ||
.featured- | .featured-actions{ | ||
display:flex; | |||
flex-wrap:wrap; | |||
gap:8px; | |||
margin-top:14px; | |||
} | |||
.featured-action{ display:inline-flex; } | |||
.featured-action a{ | |||
display:inline-flex; | |||
align-items:center; | |||
min-height:32px; | |||
box-sizing:border-box; | |||
padding:5px 12px; | |||
border:1px solid #a2a9b1; | |||
border-radius:2px; | |||
background:#fff; | |||
color:#36c; | |||
font-size:0.875rem; | |||
font-weight:700; | |||
line-height:1.4; | |||
text-decoration:none; | |||
transition:background-color 100ms ease, border-color 100ms ease, color 100ms ease, transform 100ms cubic-bezier(0.23, 1, 0.32, 1); | |||
} | |||
.featured-action-primary a{ | |||
border-color:#36c; | |||
background:#36c; | |||
color:#fff; | |||
} | |||
.featured-action a:focus{ | |||
outline:2px solid #36c; | |||
outline-offset:2px; | |||
} | |||
.featured-action a:active{ transform:scale(0.98); } | |||
@media (hover:hover) and (pointer:fine){ | |||
.featured-action a:hover{ | |||
border-color:#36c; | |||
background:#f8f9fa; | |||
color:#2a4b8d; | |||
} | |||
.featured-action-primary a:hover{ | |||
border-color:#2a4b8d; | |||
background:#2a4b8d; | |||
color:#fff; | |||
} | |||
} | |||
@media (min-width:720px){ | @media (min-width:720px){ | ||
.featured{ grid-template-columns:minmax(220px, 38%) minmax(0, 1fr); } | .featured{ grid-template-columns:minmax(220px, 38%) minmax(0, 1fr); } | ||