diff --git a/includes/templates/skin.mustache b/includes/templates/skin.mustache
index fcc3f63f..2104c47b 100644
--- a/includes/templates/skin.mustache
+++ b/includes/templates/skin.mustache
@@ -45,7 +45,7 @@
{{#data-portlets-sidebar}}{{>Sidebar}}{{/data-portlets-sidebar}}
- {{#html-site-notice}}{{{.}}}
{{/html-site-notice}}
+ {{{html-site-notice}}}
{{>TableOfContentsContainer}}
diff --git a/resources/common/variables.less b/resources/common/variables.less
index f31a4d12..f99822b3 100644
--- a/resources/common/variables.less
+++ b/resources/common/variables.less
@@ -138,10 +138,6 @@
@width-sidebar-px: 220px;
@width-sidebar-px-wide: 244px;
-// T305069 Layout adjustments of sidebar elements:
-// Vertically align the left edge of sidebar elements with the visible edge of the sidebar toggle hamburger menu.
-@margin-start-sidebar-content: unit( 12px / @font-size-browser, em ); // 0.75em @ 16
-
// TOC
@sidebar-toc-selector: ~'.mw-table-of-contents-container .sidebar-toc';
diff --git a/resources/skins.vector.styles/components/Footer.less b/resources/skins.vector.styles/components/Footer.less
deleted file mode 100644
index 254e28f5..00000000
--- a/resources/skins.vector.styles/components/Footer.less
+++ /dev/null
@@ -1,4 +0,0 @@
-.mw-footer-container {
- padding-top: 50px;
- padding-bottom: 82px;
-}
diff --git a/resources/skins.vector.styles/components/Header.less b/resources/skins.vector.styles/components/Header.less
index b98aad7c..43916d27 100644
--- a/resources/skins.vector.styles/components/Header.less
+++ b/resources/skins.vector.styles/components/Header.less
@@ -12,8 +12,6 @@
.mw-header {
// A min-height is set to account for projects where no icon is set.
min-height: @height-logo-icon;
- padding: 8px 0;
- margin-bottom: @grid-row-gap;
// Vertical centering of header elements (IE>=11), requires Flexbox.
.flex-display();
flex-wrap: nowrap;
diff --git a/resources/skins.vector.styles/components/Sidebar.less b/resources/skins.vector.styles/components/Sidebar.less
index 21914215..42592b1f 100644
--- a/resources/skins.vector.styles/components/Sidebar.less
+++ b/resources/skins.vector.styles/components/Sidebar.less
@@ -3,6 +3,13 @@
@import '../layouts/screen.less';
@import './checkboxHack.less';
+// T305069 Layout adjustments of sidebar elements:
+// Vertically align the left edge of sidebar elements with the visible edge of the sidebar toggle hamburger menu.
+@margin-start-sidebar-content: unit( 12px / @font-size-browser, em ); // 0.75em @ 16
+// Default spacing separating the sidebar TOC from the main menu or viewport.
+@margin-top-sidebar-toc: 1.5em;
+
+// Update styling to account for TOC.
.mw-sidebar,
.sidebar-toc,
.sidebar-toc:after {
@@ -21,6 +28,9 @@
.sidebar-toc,
.sidebar-toc:after {
margin-left: -@margin-start-sidebar-content;
+ // Use margin-top to align TOC rather than grid row gap
+ // Applies when the TOC sticky and when the main menu is both open and closed.
+ margin-top: @margin-top-sidebar-toc;
@media ( min-width: @min-width-desktop-wide ) {
margin-left: 0;
@@ -34,6 +44,11 @@
background-image: none;
background-color: @background-color-secondary--modern;
+ @media ( min-width: @min-width-desktop ) {
+ // Prevent grid row gap from affecting TOC spacing when main menu is open
+ margin-bottom: -@grid-row-gap;
+ }
+
@media ( max-width: @max-width-tablet ) {
// Makes the sidebar full screen at lower resolutions.
width: 100%;
diff --git a/resources/skins.vector.styles/components/TableOfContents.less b/resources/skins.vector.styles/components/TableOfContents.less
index f48c51f8..2148910b 100644
--- a/resources/skins.vector.styles/components/TableOfContents.less
+++ b/resources/skins.vector.styles/components/TableOfContents.less
@@ -9,26 +9,8 @@
@sidebar-toc-left-padding: ~'calc( 15px + @{margin-start-sidebar-content} )';
@toc-subsection-toggle-icon-size: 1.834em;
-.mw-table-of-contents-container {
- // stylelint-disable-next-line plugin/no-unsupported-browser-features
- position: sticky;
- top: 0;
- // Needed for Grid-based layout
- align-self: start;
-
- // Needed to align TOC with bottom of title
- // 1.5em from .mw-table-of-contents-container + 1.5em from .sidebar-toc = 3em
- @media ( min-width: @min-width-desktop ) {
- body:not(.vector-toc-collapsed) @{selector-main-menu-closed} ~ & {
- margin-top: 1.5em;
- }
- }
-}
-
.sidebar-toc {
max-height: 75vh;
- // Default spacing separating the sidebar TOC from the main menu or viewport.
- margin-top: 1.5em;
padding: @sidebar-toc-vertical-padding @sidebar-toc-right-padding @sidebar-toc-vertical-padding @sidebar-toc-left-padding;
box-sizing: border-box;
overflow: auto;
diff --git a/resources/skins.vector.styles/layouts/grid.less b/resources/skins.vector.styles/layouts/grid.less
index 86d2ccfd..5835ceff 100644
--- a/resources/skins.vector.styles/layouts/grid.less
+++ b/resources/skins.vector.styles/layouts/grid.less
@@ -2,7 +2,9 @@
// Grid layout
//
+@height-header: 66px;
@width-gutter: 20px;
+@padding-top-footer: 50px;
// Makes a column span entire page
.mixin-column-full-width() {
@@ -40,16 +42,31 @@
}
}
+.mw-footer-container {
+ padding-top: @padding-top-footer;
+ padding-bottom: 82px;
+}
+
+@media ( max-width: @max-width-tablet ) {
+ .mw-header {
+ // Match header styles applied by grid-template-rows and row-gap
+ // when grid is disabled on lower resolutions
+ height: @height-header;
+ margin-bottom: @grid-row-gap;
+ }
+}
+
@media ( min-width: @min-width-desktop ) {
.mw-page-container-inner {
display: grid;
width: 100%;
- grid-template: ~'min-content min-content min-content 1fr min-content / 232px @{width-gutter} minmax(0, 1fr)';
+ grid-template: ~'@{height-header} min-content min-content 1fr min-content / 232px @{width-gutter} minmax(0, 1fr)';
grid-template-areas: 'header header header'
'sitebanner sitebanner sitebanner'
'sidebar gutter content'
'toc gutter content'
'footer footer footer';
+ row-gap: @grid-row-gap;
}
.mw-body {
@@ -85,6 +102,7 @@
.mw-footer-container {
grid-area: footer;
+ padding-top: @padding-top-footer - @grid-row-gap;
}
}
diff --git a/resources/skins.vector.styles/layouts/screen.less b/resources/skins.vector.styles/layouts/screen.less
index b527dea2..a1b3e16d 100644
--- a/resources/skins.vector.styles/layouts/screen.less
+++ b/resources/skins.vector.styles/layouts/screen.less
@@ -80,11 +80,6 @@ body {
float: right;
}
-#siteNotice {
- // Override core styles to ensure sufficient spacing between page content and main menu
- margin: @grid-row-gap 0 !important; /* stylelint-disable-line declaration-no-important */
-}
-
.vector-body {
position: relative;
z-index: @z-index-base;
@@ -117,6 +112,14 @@ body {
}
}
+.mw-table-of-contents-container {
+ // stylelint-disable-next-line plugin/no-unsupported-browser-features
+ position: sticky;
+ top: 0;
+ // Needed for Grid-based layout
+ align-self: start;
+}
+
.parsoid-body {
padding: @padding-content;
}
diff --git a/resources/skins.vector.styles/skin.less b/resources/skins.vector.styles/skin.less
index df3c93ed..f7d3f766 100644
--- a/resources/skins.vector.styles/skin.less
+++ b/resources/skins.vector.styles/skin.less
@@ -18,7 +18,6 @@
@import './components/LanguageButton.less';
@import './components/UserLinks.less';
@import './components/Header.less';
- @import './components/Footer.less';
@import './components/MenuDropdown.less';
@import './components/MenuTabs.less';
@import './components/StickyHeader.less';