MediaWiki:Citizen.css: Difference between revisions
MediaWiki interface page
More actions
No edit summary |
No edit summary |
||
| Line 209: | Line 209: | ||
.skin-citizen .wizlords-imagetext-text a:hover { | .skin-citizen .wizlords-imagetext-text a:hover { | ||
color: #ffd37a; | color: #ffd37a; | ||
} | |||
/* MediaWiki can insert paragraph wrappers around block-style homepage cards. | |||
Flatten wrappers that contain a wide card so the card itself participates | |||
in the responsive flex layout. */ | |||
.skin-citizen | |||
:is(.wizlords-mainpage-left, .wizlords-mainpage-right) | |||
> .center | |||
> p:has(.wizlords-wideimagetext) { | |||
display: contents; | |||
} | } | ||
| Line 261: | Line 271: | ||
.skin-citizen .wizlords-wideimagetext-grid .wizlords-wideimagetext, | .skin-citizen .wizlords-wideimagetext-grid .wizlords-wideimagetext, | ||
.skin-citizen .wizlords-mainpage-left > .center | .skin-citizen .wizlords-mainpage-left > .center .wizlords-wideimagetext, | ||
.skin-citizen .wizlords-mainpage-right > .center | .skin-citizen .wizlords-mainpage-right > .center .wizlords-wideimagetext { | ||
flex: 0 0 calc((100% - 10px) / 2); | flex: 0 0 calc((100% - 10px) / 2); | ||
box-sizing: border-box; | box-sizing: border-box; | ||
| Line 360: | Line 370: | ||
} | } | ||
/* | /* The homepage markup splits each four-card group into two nested | ||
.skin-citizen | two-card grids. On tablet, flatten those inner grids into their shared | ||
parent so all four cards can occupy one row. Phone keeps the two grids, | |||
producing the intended 2x2 layout. */ | |||
.skin-citizen | |||
:is(.wizlords-mainpage-left, .wizlords-mainpage-right) | |||
> .center:has(> .wizlords-wideimagetext-grid) { | |||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
| Line 371: | Line 384: | ||
} | } | ||
.skin-citizen .wizlords- | .skin-citizen | ||
.skin-citizen .wizlords-mainpage-left > .center > .wizlords-wideimagetext | :is(.wizlords-mainpage-left, .wizlords-mainpage-right) | ||
.skin-citizen .wizlords-mainpage-right > .center > .wizlords-wideimagetext { | > .center:has(> .wizlords-wideimagetext-grid) | ||
> p { | |||
flex: 0 0 100%; | |||
width: 100%; | |||
margin: 0 0 4px; | |||
} | |||
.skin-citizen | |||
:is(.wizlords-mainpage-left, .wizlords-mainpage-right) | |||
> .center | |||
> .wizlords-wideimagetext-grid { | |||
display: contents; | |||
} | |||
.skin-citizen | |||
:is(.wizlords-mainpage-left, .wizlords-mainpage-right) | |||
> .center | |||
> .wizlords-wideimagetext-grid | |||
> .wizlords-wideimagetext { | |||
flex: 0 0 calc((100% - 36px) / 4); | flex: 0 0 calc((100% - 36px) / 4); | ||
box-sizing: border-box; | box-sizing: border-box; | ||
| Line 380: | Line 411: | ||
margin: 0; | margin: 0; | ||
text-align: center; | text-align: center; | ||
} | } | ||