mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-12-11 22:16:22 +00:00
53742a0dd2
This is needed to get rid of the negative margin sticky header background hack. Since it looks weird on wikis with background imgae.
70 lines
1.6 KiB
Plaintext
70 lines
1.6 KiB
Plaintext
.citizen-page-container {
|
|
display: flex; // Should fix weird margin issues
|
|
flex-direction: column;
|
|
min-height: 100vh; // Ensure footer goes to the bottom of the page
|
|
min-height: stretch; // for iOS, excludes safe areas
|
|
}
|
|
|
|
.mw-body,
|
|
.parsoid-body {
|
|
min-height: 100vh; // avoid footer being in the middle of the page
|
|
margin-top: var( --space-xl );
|
|
margin-bottom: var( --space-xl );
|
|
}
|
|
|
|
.citizen-body-container {
|
|
display: grid;
|
|
grid-template-areas:
|
|
'header'
|
|
'afterHeader'
|
|
'content'
|
|
'footer';
|
|
// Using auto as min value will cause overflow
|
|
grid-template-columns: minmax( 0, var( --width-layout ) );
|
|
gap: 0 var( --space-xl );
|
|
justify-content: center;
|
|
padding: 0 var( --padding-page );
|
|
}
|
|
|
|
.citizen-body {
|
|
z-index: @z-index-base; // Stop body content going over sticky header
|
|
grid-area: content;
|
|
}
|
|
|
|
@media ( min-width: @min-width-breakpoint-desktop ) {
|
|
.citizen-page-container {
|
|
// Reserve space for header
|
|
margin-left: var( --header-size );
|
|
}
|
|
|
|
.citizen-toc-enabled {
|
|
.citizen-body-container {
|
|
grid-template-areas:
|
|
'header header'
|
|
'afterHeader afterHeader'
|
|
'content sidebar'
|
|
'footer footer';
|
|
grid-template-columns: minmax( 0, var( --width-layout ) ) var( --width-toc );
|
|
}
|
|
}
|
|
|
|
.citizen-animations-ready {
|
|
.citizen-body-container {
|
|
transition: var( --transition-menu );
|
|
transition-property: grid;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Wider page width for certain namespaces */
|
|
@media ( min-width: @min-width-breakpoint-desktop-wide ) {
|
|
// 1 - Special, 6 - File, 14 - Category
|
|
.ns {
|
|
&--1,
|
|
&-6,
|
|
&-14 {
|
|
--width-layout: var( --width-layout--extended );
|
|
}
|
|
}
|
|
}
|