10,947
editsMore actions
no edit summary
No edit summary |
No edit summary |
||
| Line 44: | Line 44: | ||
* == Advertisement == | * == Advertisement == | ||
* | * | ||
* On Citizen, we show a | * On Citizen, we show a fixed banner at the bottom. It's added through a hook | ||
* | * in LocalSettings.php and uses the id bg3wiki-footer-ad. | ||
* | * | ||
* The | * The footer is invisible if the screen height is below 720px. | ||
* there's | * | ||
* switches | * If screen height is at least 720px, the footer appears with height 50px. | ||
* | |||
* If height is at least 1024px and width at least 728px, the footer grows its | |||
* height to 90px. (Because there's a standard ad size of 728x90. There's also | |||
* 970x90 which can also be shown if the screen is wide enough.) | |||
* | |||
* Furthermore, Citizen switches its layout at the width limit of 1120px, and | |||
* we have to apply different customizations to Citizen based on that. | |||
*/ | */ | ||
| Line 56: | Line 63: | ||
#qc-cmp2-persistent-link { | #qc-cmp2-persistent-link { | ||
display: none; | display: none; | ||
} | |||
:root { | |||
--footer-ad-h: 50px; | |||
} | |||
@media screen and (min-width: 728px) and (min-height: 1024px) { | |||
:root { | |||
--footer-ad-h: 90px; | |||
} | |||
} | } | ||
| Line 118: | Line 135: | ||
.citizen-feature-autohide-navigation-clientpref-1 | .citizen-feature-autohide-navigation-clientpref-1 | ||
.mw-ads-enabled.citizen-scroll--down .citizen-toc { | .mw-ads-enabled.citizen-scroll--down .citizen-toc { | ||
bottom: calc( | bottom: calc(var(--footer-ad-h) + var(--space-xs)); | ||
} | } | ||
/* The "header" is actually at the bottom; make sure it's above the ad. */ | /* The "header" is actually at the bottom; make sure it's above the ad. */ | ||
.mw-ads-enabled .citizen-header { | .mw-ads-enabled .citizen-header { | ||
bottom: | bottom: var(--footer-ad-h); | ||
} | } | ||
| Line 129: | Line 146: | ||
.mw-ads-enabled .page-actions, | .mw-ads-enabled .page-actions, | ||
.mw-ads-enabled .citizen-toc { | .mw-ads-enabled .citizen-toc { | ||
bottom: calc( | bottom: calc(var(--footer-ad-h) + var(--header-size) + var(--space-xs)); | ||
} | } | ||
} | } | ||
| Line 137: | Line 154: | ||
@media screen and (min-height: 720px) and (min-width: 1120px) { | @media screen and (min-height: 720px) and (min-width: 1120px) { | ||
.mw-ads-enabled .citizen-toc { | .mw-ads-enabled .citizen-toc { | ||
/* | /* Extra -10px for padding from the ad. */ | ||
max-height: calc(100vh - | max-height: calc( | ||
100vh - var(--footer-ad-h) - 10px - var(--height-sticky-header) | |||
); | |||
} | } | ||
} | } | ||