.citizen-page-container { // Reserve space for header margin-bottom: var( --header-size ); } .mw-body, .parsoid-body { min-height: 80vh; // avoid footer being in the middle of the page } .citizen-body-container { display: grid; justify-content: center; padding: var( --space-lg ) var( --padding-page ); gap: var( --space-md ) var( --space-lg ); grid-template-areas: 'header' 'content' 'footer'; grid-template-columns: minmax( auto, var( --width-layout ) ); } .mw-body-header { position: sticky; z-index: @z-index-page-header; display: flex; flex-wrap: wrap; align-items: center; padding-top: var( --space-md ); gap: var( --space-lg ); grid-area: header; } .page-heading { flex-grow: 1; } .firstHeading-container { display: flex; align-items: center; } .citizen-body { grid-area: content; .mixin-clearfix(); } a.image { > img { max-width: inherit; height: auto; } } @media ( min-width: @width-breakpoint-tablet ) { div.tleft, figure.mw-halign-left, div.floatleft, table.floatleft { /* @noflip */ margin-right: 1.4rem; /* @noflip */ clear: left; /* @noflip */ float: left; } div.tright, figure.mw-halign-right, figure.mw-default-size, div.floatright, table.floatright { /* @noflip */ margin-left: 1.4rem; /* @noflip */ clear: right; /* @noflip */ float: right; } } @media ( min-width: @width-breakpoint-desktop ) { .citizen-page-container { margin-bottom: 0; // Reserve space for header margin-left: var( --header-size ); } .citizen-body-container { padding-right: ~'calc( var( --padding-page ) * 2 )'; padding-left: ~'calc( var( --padding-page ) * 2 )'; } .citizen-toc-enabled { .citizen-body-container { display: grid; grid-template-areas: 'header header' 'content toc' 'footer footer'; grid-template-columns: minmax( auto, var( --width-layout ) ) var( --width-toc ); } } } /* Wider page width for certain namespaces */ @media ( min-width: @width-breakpoint-desktop-wide ) { // 1 - Special, 6 - File, 14 - Category .ns { &--1, &-6, &-14 { --width-layout: var( --width-layout--extended ); } } }