MediaWiki:Citizen.css: Difference between revisions
MediaWiki interface page
More actions
No edit summary |
No edit summary |
||
| (6 intermediate revisions by the same user not shown) | |||
| Line 142: | Line 142: | ||
@media (max-width: 899px) { | @media (max-width: 899px) { | ||
.skin-citizen .page-banner { | |||
aspect-ratio: 300 / 141; | |||
margin-bottom: 0; | |||
background-image: url("/index.php/Special:Redirect/file/Wizlords_banner_nobg.png"); | |||
background-repeat: no-repeat; | |||
background-position: center center; | |||
background-size: contain; | |||
} | |||
.skin-citizen .page-banner-desktop { | .skin-citizen .page-banner-desktop { | ||
display: none !important; | display: none !important; | ||
| Line 147: | Line 156: | ||
.skin-citizen .page-banner-mobile { | .skin-citizen .page-banner-mobile { | ||
display: | display: none !important; | ||
} | } | ||
} | } | ||
@media (min-width: 900px) { | @media (min-width: 900px) { | ||
.skin-citizen .page-banner { | |||
aspect-ratio: auto; | |||
background-image: none; | |||
} | |||
.skin-citizen .page-banner-desktop { | .skin-citizen .page-banner-desktop { | ||
display: block !important; | display: block !important; | ||
| Line 693: | Line 707: | ||
line-height: 1.2; | line-height: 1.2; | ||
text-align: center; | text-align: center; | ||
overflow-wrap: | overflow-wrap: normal; | ||
word-break: normal; | |||
hyphens: none; | |||
} | } | ||
| Line 851: | Line 867: | ||
line-height: 1.2; | line-height: 1.2; | ||
text-align: center; | text-align: center; | ||
overflow-wrap: | overflow-wrap: normal; | ||
word-break: normal; | |||
hyphens: none; | |||
} | |||
} | |||
/* Ultra-narrow phones/foldables. | |||
Keep the four-across homepage icon rhythm, but give labels just enough room | |||
that words do not split into single trailing letters around 344-369px. */ | |||
@media screen and (max-width: 369px) { | |||
.skin-citizen .wizlords-mainpage-items { | |||
gap: 12px 6px; | |||
} | |||
.skin-citizen .wizlords-imagetext { | |||
flex-basis: calc((100% - 18px) / 4); | |||
width: calc((100% - 18px) / 4); | |||
} | |||
.skin-citizen .wizlords-imagetext-image, | |||
.skin-citizen .wizlords-imagetext-image img { | |||
width: 58px; | |||
height: 58px; | |||
} | |||
.skin-citizen .wizlords-imagetext-text { | |||
font-size: 11px; | |||
line-height: 1.15; | |||
} | |||
} | |||
/* Extremely narrow foldable screens. | |||
At 360px and below, four columns become too tight for readable labels. | |||
The Main Page square-icon groups contain seven items, so this creates a | |||
centred 3 / 3 / 1 rhythm instead of allowing single-letter word breaks. */ | |||
@media screen and (max-width: 360px) { | |||
.skin-citizen .wizlords-mainpage-items { | |||
gap: 14px 8px; | |||
} | |||
.skin-citizen .wizlords-imagetext { | |||
flex-basis: calc((100% - 16px) / 3); | |||
width: calc((100% - 16px) / 3); | |||
} | |||
.skin-citizen .wizlords-imagetext-image, | |||
.skin-citizen .wizlords-imagetext-image img { | |||
width: 62px; | |||
height: 62px; | |||
} | |||
.skin-citizen .wizlords-imagetext-text { | |||
font-size: 12px; | |||
line-height: 1.15; | |||
} | } | ||
} | } | ||
| Line 1,040: | Line 1,109: | ||
padding-right: max(var(--padding-page, 16px), env(safe-area-inset-right)); | padding-right: max(var(--padding-page, 16px), env(safe-area-inset-right)); | ||
padding-left: max(var(--padding-page, 16px), env(safe-area-inset-left)); | padding-left: max(var(--padding-page, 16px), env(safe-area-inset-left)); | ||
} | } | ||
} | } | ||
| Line 1,072: | Line 1,131: | ||
} | } | ||
.skin-citizen .wizlords-magic-intro { | .skin-citizen .wizlords-magic-intro { | ||
align-items: flex-start; | align-items: flex-start; | ||
gap: 16px; | gap: 16px; | ||
} | } | ||