feat(core): ✨ add sticky body header

resources/skins.citizen.scripts/skin.js

@@ -63,17 +63,17 @@ function bindCloseOnUnload() {
  * @return {void}
  */
 function onTitleHidden( document ) {
-	const title = document.getElementById( 'firstHeading' );
+	const title = document.getElementById( 'citizen-body-header-sticky-sentinel' );
 
 	if ( title ) {
 		const scrollObserver = require( './scrollObserver.js' );
 
 		const observer = scrollObserver.initScrollObserver(
 			() => {
-				document.body.classList.add( 'citizen-title--hidden' );
+				document.body.classList.add( 'citizen-body-header--sticky' );
 			},
 			() => {
-				document.body.classList.remove( 'citizen-title--hidden' );
+				document.body.classList.remove( 'citizen-body-header--sticky' );
 			}
 		);
 		observer.observe( title );

resources/skins.citizen.styles.toc/skins.citizen.styles.toc.less

@@ -252,5 +252,17 @@
 				padding-right: var( --width-toc );
 			}
 		}
+
+		.citizen-animations-ready {
+			.toc {
+				transition: @transition-transform;
+			}
+		}
+
+		.citizen-body-header--sticky {
+			.toc {
+				transform: translateY( 3rem );
+			}
+		}
 	}
 }

resources/skins.citizen.styles/Stickyheader.less

@@ -0,0 +1,32 @@
+#citizen-body-header-sticky-sentinel {
+	position: absolute;
+	right: 0;
+	left: 0;
+	height: 3.5rem; // HACK: Estimated size of body-header
+	visibility: hidden;
+}
+
+.citizen-body-header--sticky {
+	.mw-body-header {
+		position: sticky;
+		z-index: 1;
+		top: 0;
+		padding-bottom: var( --space-md );
+		border-bottom: 1px solid var( --border-color-base );
+		background-color: var( --color-surface-0 );
+	}
+
+	.firstHeading {
+		font-size: 1.25rem;
+	}
+
+	.toc {
+		transform: translateY( 3rem );
+	}
+}
+
+@media ( max-height: 1000px ) {
+	.page-actions {
+		display: none;
+	}
+}

resources/skins.citizen.styles/layout.less

@@ -25,7 +25,7 @@
 	display: flex;
 	flex-wrap: wrap;
 	align-items: flex-start;
-	padding-top: @content-margin-top;
+	padding-top: var( --space-md );
 	margin-top: var( --space-xl );
 	margin-bottom: @content-margin-top * 2;
 	gap: @content-margin-top;

resources/skins.citizen.styles/skin.less

@@ -29,6 +29,7 @@
 	@import 'Menu.less';
 	@import 'Catlinks.less';
 	@import 'Footer.less';
+	@import 'Stickyheader.less';
 }
 
 @media print {

templates/ContentHeader.mustache

@@ -4,6 +4,7 @@
 	string html-title-heading--formatted
 	string html-tagline
 }}
+<div id="citizen-body-header-sticky-sentinel"></div>
 <header class="mw-body-header">
 	<div class="page-heading">
 		<div class="firstHeading-container">