MediaWiki:Common.css: Difference between revisions
update with skin-vector-legacy p-logo Tag: Reverted |
testing better social view layout |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 1,368: | Line 1,368: | ||
.mpheader4 a { | .mpheader4 a { | ||
text-align: center; | text-align: center; | ||
} | |||
/* Responsive social media cards */ | |||
.social-grid { | |||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr)); | |||
gap: 12px; | |||
width: 100%; | |||
max-width: 650px; | |||
margin: 0 auto; | |||
box-sizing: border-box; | |||
} | |||
.social-card { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 8px; | |||
min-width: 0; | |||
padding: 12px 6px; | |||
box-sizing: border-box; | |||
border: 1px solid var(--mp-border-color, #aaa); | |||
border-radius: 8px; | |||
text-align: center; | |||
overflow-wrap: anywhere; | |||
} | |||
.social-card img { | |||
width: 64px; | |||
height: 64px; | |||
max-width: 100%; | |||
object-fit: contain; | |||
} | |||
.social-card a { | |||
text-decoration: none; | |||
font-weight: bold; | |||
} | |||
.social-card a:hover { | |||
text-decoration: underline; | |||
} | |||
/* Smaller cards on narrow mobile screens */ | |||
@media screen and (max-width: 480px) { | |||
.social-grid { | |||
grid-template-columns: repeat(3, minmax(0, 1fr)); | |||
gap: 6px; | |||
} | |||
.social-card { | |||
padding: 8px 3px; | |||
} | |||
.social-card img { | |||
width: 48px; | |||
height: 48px; | |||
} | |||
} | } | ||