MediaWiki:Citizen.css: Difference between revisions

Line 6:

* for shared components that need a different narrow-screen presentation.

*/

/* ==========================================================================

Responsive Layout Standard

--------------------------------------------------------------------------

Phone: 0-599px; tablet / large phone: 600-899px; small desktop /

landscape tablet: 900-1199px; full desktop: 1200px+.

Citizen is developed directly as the mobile/tablet skin; MobileFrontend is

not required or assumed by these rules.

========================================================================== */

/* ==========================================================================

Line 202:

Line 211:

}

/* ~~Tablets~~ and wider Citizen ~~viewports can~~ use ~~slightly~~ larger icons while

/* Tablet and wider Citizen layouts use larger icons while retaining the same

retaining the same predictable four-column arrangement. */

predictable four-column arrangement. The 600px boundary is the standard

start of the tablet range. */

@media screen and (min-width: 600px) {

.skin-citizen .wizlords-mainpage-items,

Line 228:

Line 238:

/* ==========================================================================

~~Mobile~~ Table Of Contents

Phone And Tablet Table Of Contents

========================================================================== */

@media screen and (max-width: ~~720px~~) {

@media screen and (max-width: 899px) {

.skin-citizen .citizen-page-container {

padding-right: max(var(--padding-page, 16px), env(safe-area-inset-right));

Line 248:

Line 258:

/* ==========================================================================

~~Mobile~~ Shared Component Adjustments

Phone And Tablet Shared Component Adjustments

========================================================================== */

@media screen and (max-width: ~~720px~~) {

@media screen and (max-width: 899px) {

.skin-citizen .wizlords-mainpage-left,

.skin-citizen .wizlords-mainpage-right {