feat(core): ✨ add jump to top link to sticky header

includes/SkinCitizen.php

@@ -125,12 +125,12 @@ class SkinCitizen extends SkinMustache {
 				'data-notifications' => $header->getNotifications(),
 				'data-personal-menu' => $header->buildPersonalMenu(),
 				'data-search-box' => $header->buildSearchProps(),
-				'html-citizen-jumptotop' => $this->msg( 'citizen-jumptotop' )->text() . ' [home]',
 			],
 			'data-pagetools' => $tools->buildPageTools( $parentData ),
 			'data-citizen-footer' => $footer->getFooterData(),
 			// HTML strings
 			'html-title-heading--formatted' => $pageTitle->buildTitle( $parentData, $title ),
+			'html-citizen-jumptotop' => $this->msg( 'citizen-jumptotop' )->text() . ' [home]',
 			'html-body-content--formatted' => $bodycontent->buildBodyContent(),
 			'html-tagline' => $tagline->getTagline(),
 		];

resources/skins.citizen.styles/Stickyheader.less

@@ -29,9 +29,31 @@
 		}
 	}
 
+	.page-heading {
+		position: relative;
+	}
+
 	.firstHeading {
 		font-size: 1.25rem;
 	}
+
+	.citizen-jumptotop {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		border-radius: var( --border-radius--small );
+		margin: ~'calc( var( --space-sm ) * -1 )';
+
+		&:hover {
+			background-color: var( --background-color-quiet--hover );
+		}
+
+		&:active {
+			background-color: var( --background-color-quiet--active );
+		}
+	}
 }
 
 @media ( max-width: @width-breakpoint-tablet ), ( max-height: 800px ) {

resources/skins.citizen.styles/layout.less

@@ -28,7 +28,7 @@
 	padding-top: var( --space-md );
 	margin-top: var( --space-xl );
 	margin-bottom: @content-margin-top * 2;
-	gap: @content-margin-top;
+	gap: var( --space-lg );
 }
 
 .page-heading {

templates/ContentHeader.mustache

@@ -3,6 +3,7 @@
 		"featured article". An empty array if none are defined.
 	string html-title-heading--formatted
 	string html-tagline
+	string html-citizen-jumptotop Jump to top title text
 }}
 <header class="mw-body-header">
 	<div class="page-heading">
@@ -11,6 +12,7 @@
 			{{>Indicators}}
 		</div>
 		<div id="siteSub">{{html-tagline}}</div>
+		<a href="#top" class="citizen-jumptotop" title="{{html-citizen-jumptotop}}"></a>
 	</div>
 	{{>PageTools}}
 </header>

templates/Header.mustache

@@ -1,7 +1,6 @@
  {{!
  	string link-mainpage link to the main page
-	string msg-citizen-drawer-toggle The label used by the drawer button.
-	string html-citizen-jumptotop Jump to top title text
+	string msg-citizen-drawer-toggle The label used by the drawer button
 }}
 <header class="mw-header citizen-header">
 	{{#data-search-box}}{{>Search}}{{/data-search-box}}