MediaWiki:Citizen.css: Difference between revisions
MediaWiki interface page
More actions
No edit summary |
No edit summary |
||
| Line 257: | Line 257: | ||
Wide image cards use separate classes and are intentionally unaffected. | Wide image cards use separate classes and are intentionally unaffected. | ||
========================================================================== */ | ========================================================================== */ | ||
.skin-citizen .wizlords-mainpage-items | .skin-citizen .wizlords-mainpage-items { | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
| Line 270: | Line 268: | ||
margin-left: auto; | margin-left: auto; | ||
text-align: center; | text-align: center; | ||
} | } | ||
| Line 361: | Line 338: | ||
sparse before the full desktop Vector layout takes over. */ | sparse before the full desktop Vector layout takes over. */ | ||
@media screen and (min-width: 900px) and (max-width: 1199px) { | @media screen and (min-width: 900px) and (max-width: 1199px) { | ||
.skin-citizen .wizlords-mainpage-items | .skin-citizen .wizlords-mainpage-items { | ||
gap: 20px 16px; | gap: 20px 16px; | ||
} | } | ||
| Line 386: | Line 361: | ||
keeps Citizen tidy if it is tested manually on a wide screen. */ | keeps Citizen tidy if it is tested manually on a wide screen. */ | ||
@media screen and (min-width: 1200px) { | @media screen and (min-width: 1200px) { | ||
.skin-citizen .wizlords-mainpage-items | .skin-citizen .wizlords-mainpage-items { | ||
gap: 16px 12px; | gap: 16px 12px; | ||
} | } | ||
| Line 561: | Line 534: | ||
} | } | ||
.skin-citizen .wizlords-mainpage-items | .skin-citizen .wizlords-mainpage-items { | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat(4, minmax(0, 78px)); | grid-template-columns: repeat(4, minmax(0, 78px)); | ||
| Line 570: | Line 541: | ||
justify-items: center; | justify-items: center; | ||
align-items: start; | align-items: start; | ||
} | } | ||
| Line 602: | Line 566: | ||
while flex only lays out real icon items. */ | while flex only lays out real icon items. */ | ||
@media screen and (min-width: 800px) { | @media screen and (min-width: 800px) { | ||
.skin-citizen .wizlords-mainpage-items | .skin-citizen .wizlords-mainpage-items { | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
| Line 610: | Line 572: | ||
justify-content: center; | justify-content: center; | ||
align-items: flex-start; | align-items: flex-start; | ||
} | } | ||