MediaWiki:Common.css: Difference between revisions
Appearance
No edit summary |
Add responsive platform grid styles for Main Page |
||
| Line 9: | Line 9: | ||
body,.mw-body h1, .mw-body-content h1, .mw-body-content h2{ | body,.mw-body h1, .mw-body-content h1, .mw-body-content h2{ | ||
font-family: 'Roboto', sans-serif !important; | font-family: 'Roboto', sans-serif !important; | ||
} | |||
/* --------------------------------------------------------------------------- | |||
Main Page platform grid. | |||
Replaces the old wikitables, which used dozens of empty cells ("| ||||||...") | |||
as spacers. That forced a fixed, very wide table that could not reflow, so it | |||
overflowed on narrow desktop windows and was unusable on phones. | |||
--------------------------------------------------------------------------- */ | |||
.astrill-platforms { | |||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: center; | |||
gap: 1.5em 1.25em; | |||
margin: 1.5em 0 2em; | |||
} | |||
.astrill-platform { | |||
flex: 0 0 auto; | |||
width: 116px; | |||
text-align: center; | |||
} | |||
/* Keep every tile the same height regardless of icon aspect ratio, so labels | |||
line up across rows. */ | |||
.astrill-platform .mw-file-description, | |||
.astrill-platform a.image { | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
height: 80px; | |||
} | |||
.astrill-platform img { | |||
max-width: 80px; | |||
max-height: 80px; | |||
height: auto; | |||
width: auto; | |||
} | |||
.astrill-platform-label { | |||
display: block; | |||
margin-top: 0.5em; | |||
font-weight: bold; | |||
font-size: 0.9em; | |||
line-height: 1.25; | |||
} | |||
/* Labels are links; keep them readable rather than bright blue on every tile. */ | |||
.astrill-platform-label a, | |||
.astrill-platform-label a.external { | |||
color: inherit; | |||
background: none !important; | |||
padding-right: 0 !important; | |||
} | |||
.astrill-platform-label a:hover { | |||
text-decoration: underline; | |||
} | |||
@media screen and (max-width: 640px) { | |||
.astrill-platform { | |||
width: 88px; | |||
} | |||
.astrill-platforms { | |||
gap: 1em 0.75em; | |||
} | |||
.astrill-platform .mw-file-description, | |||
.astrill-platform a.image { | |||
height: 64px; | |||
} | |||
.astrill-platform img { | |||
max-width: 64px; | |||
max-height: 64px; | |||
} | |||
} | } | ||
Revision as of 16:17, 2 August 2026
@import url('https://fonts.googleapis.com/css?family=Roboto');
/* CSS placed here will be applied to all skins */
#content h2 {
border-bottom: 3px solid #AAAAAA !important;
}
#toctitle h2 {
border-bottom: 1px solid #AAAAAA !important;
}
body,.mw-body h1, .mw-body-content h1, .mw-body-content h2{
font-family: 'Roboto', sans-serif !important;
}
/* ---------------------------------------------------------------------------
Main Page platform grid.
Replaces the old wikitables, which used dozens of empty cells ("| ||||||...")
as spacers. That forced a fixed, very wide table that could not reflow, so it
overflowed on narrow desktop windows and was unusable on phones.
--------------------------------------------------------------------------- */
.astrill-platforms {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5em 1.25em;
margin: 1.5em 0 2em;
}
.astrill-platform {
flex: 0 0 auto;
width: 116px;
text-align: center;
}
/* Keep every tile the same height regardless of icon aspect ratio, so labels
line up across rows. */
.astrill-platform .mw-file-description,
.astrill-platform a.image {
display: inline-flex;
align-items: center;
justify-content: center;
height: 80px;
}
.astrill-platform img {
max-width: 80px;
max-height: 80px;
height: auto;
width: auto;
}
.astrill-platform-label {
display: block;
margin-top: 0.5em;
font-weight: bold;
font-size: 0.9em;
line-height: 1.25;
}
/* Labels are links; keep them readable rather than bright blue on every tile. */
.astrill-platform-label a,
.astrill-platform-label a.external {
color: inherit;
background: none !important;
padding-right: 0 !important;
}
.astrill-platform-label a:hover {
text-decoration: underline;
}
@media screen and (max-width: 640px) {
.astrill-platform {
width: 88px;
}
.astrill-platforms {
gap: 1em 0.75em;
}
.astrill-platform .mw-file-description,
.astrill-platform a.image {
height: 64px;
}
.astrill-platform img {
max-width: 64px;
max-height: 64px;
}
}