feat(core): ✨ tweak body footer styles

i18n/en.json

@@ -19,6 +19,9 @@
 	"citizen-sitestats-images-label": "files",
 	"citizen-sitestats-users-label": "users",
 	"citizen-sitestats-edits-label": "edits",
+	"citizen-page-info-copyright": "Copyright",
+	"citizen-page-info-credits": "Credits",
+	"citizen-page-info-lastmod": "Last modified",
 	"citizen-footer-desc": "Edit this text on [[MediaWiki:Citizen-footer-desc]]",
 	"citizen-footer-tagline": "Edit this text on [[MediaWiki:Citizen-footer-tagline]]",
 	"citizen-action-addsection": "Add topic",

i18n/qqq.json

@@ -20,6 +20,9 @@
 	"citizen-sitestats-images-label": "Label for the file statistics",
 	"citizen-sitestats-users-label": "Label for the user statistics",
 	"citizen-sitestats-edits-label": "Label for the edit statistics",
+	"citizen-page-info-copyright": "Label for the copyright message",
+	"citizen-page-info-credits": "Label for the article credits message",
+	"citizen-page-info-lastmod": "Label for the last modified message",
 	"citizen-footer-desc": "Default text for the site footer decription. Add the language code to the end of the link if not en (e.g. MediaWiki:Citizen-footer-description/de for German).",
 	"citizen-footer-tagline": "Default text for the site footer tagline. Add the language code to the end of the link if not en (e.g. MediaWiki:Citizen-footer-tagline/de for German).",
 	"citizen-action-addsection": "Used in the Citizen skin. See for example {{canonicalurl:Talk:Main_Page|useskin=vector}}\n{{Identical|Add topic}}. Same as vector-action-addsection in Vector skin.",

includes/Partials/Footer.php

@@ -41,7 +41,7 @@ final class Footer extends Partial {
 		$footerLinks = $skin->getFooterLinksPublic();
 		$msg = [ 'desc', 'tagline' ];
 
-		// Get messages
+		// Get site footer messages
 		foreach ( $msg as $key ) {
 			$data["msg-citizen-footer-$key"] = $skin->msg( "citizen-footer-$key" )
 				->inContentLanguage()->parse();
@@ -58,6 +58,8 @@ final class Footer extends Partial {
 					$items[] = [
 						'id' => "$rowId-$key",
 						'html' => $link,
+						// This is not great, need to reimplemented when we move to 1.39
+						'label' => $skin->msg( "citizen-page-info-$key" )
 					];
 				}
 			}

resources/skins.citizen.styles/Catlinks.less

@@ -1,5 +1,8 @@
 .catlinks {
+	display: flex;
+	flex-direction: column;
 	clear: both;
+	gap: var( --space-lg );
 	line-height: 1.2;
 
 	.mw-normal-catlinks {
@@ -14,8 +17,6 @@
 
 	.mw-normal-catlinks,
 	.mw-hidden-catlinks {
-		padding: @content-margin-top 0;
-
 		> a {
 			display: block;
 			color: var( --color-base--subtle );

resources/skins.citizen.styles/ContentFooter.less

@@ -0,0 +1,29 @@
+.mw-body-footer {
+	display: flex;
+	flex-direction: column;
+	padding: var( --space-lg ) 0;
+	gap: var( --space-lg );
+}
+
+.page-info {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var( --space-lg );
+
+	&__item {
+		display: flex;
+		flex-direction: column;
+		gap: var( --space-sm );
+	}
+
+	&__label {
+		color: var( --color-base--subtle );
+		font-size: @ui-menu-text;
+		letter-spacing: 0.75px;
+	}
+
+	&__text {
+		color: var( --color-base--subtle );
+		font-size: 0.875rem;
+	}
+}

resources/skins.citizen.styles/Footer.less

@@ -1,6 +1,7 @@
 .citizen-footer {
 	padding-top: var( --space-xl );
 	padding-bottom: var( --space-xl );
+	margin-top: var( --space-xl );
 	// Reserve space for header
 	margin-bottom: var( --header-size );
 	background-color: var( --color-surface-2 );

resources/skins.citizen.styles/skin.less

@@ -28,6 +28,7 @@
 	@import 'Pagetools.less';
 	@import 'Menu.less';
 	@import 'Catlinks.less';
+	@import 'ContentFooter.less';
 	@import 'Footer.less';
 	@import 'Stickyheader.less';
 }

templates/ContentFooter__item.mustache

@@ -1,3 +1,8 @@
-{{#array-items}}
-<section id="{{id}}" class="body-footer__item">{{{html}}}</section>
-{{/array-items}}
+<div class="page-info">
+    {{#array-items}}
+    <section id="{{id}}" class="page-info__item">
+        <div class="page-info__label">{{label}}</div>
+        <div class="page-info__text">{{{html}}}</div>
+    </section>
+    {{/array-items}}
+</div>