feat(wordmark): ✨ implement wordmark in drawer

Also simplify existing styles for wordmark

resources/skins.citizen.styles/common/typography.less

@@ -64,10 +64,6 @@ em {
 	}
 }
 
-.mw-logo-wordmark {
-	font-weight: var( --font-weight-semibold );
-}
-
 .citizen-body {
 	font-size: var( --font-size-medium );
 	line-height: var( --line-height );

resources/skins.citizen.styles/components/Drawer.less

@@ -26,12 +26,7 @@
 	&__siteinfo {
 		display: flex;
 		flex-direction: column;
-		gap: var( --space-xxs );
-
-		.mw-logo-wordmark {
-			font-size: 1.5rem;
-			color: var( --color-base--emphasized );
-		}
+		gap: var( --space-xs );
 	}
 
 	&__menu {
@@ -57,14 +52,6 @@
 			// Bigger logo
 			height: 5rem;
 		}
-
-		&__siteinfo {
-			.mw-logo-wordmark {
-				font-size: 2rem;
-				// Sometimes long wiki name will wrap when the menu is too small
-				white-space: nowrap;
-			}
-		}
 	}
 }
 

resources/skins.citizen.styles/components/Footer.less

@@ -60,16 +60,6 @@
 }
 
 #footer {
-	&-sitetitle {
-		font-size: 1.25rem;
-		color: var( --color-base--emphasized );
-
-		img.mw-logo-wordmark {
-			max-height: 54px;
-			filter: var( --filter-invert );
-		}
-	}
-
 	&-places {
 		ul {
 			flex-direction: column;

resources/skins.citizen.styles/components/Wordmark.less

@@ -0,0 +1,20 @@
+.mw-logo-wordmark {
+	font-size: 1.25rem;
+	font-weight: var( --font-weight-semibold );
+	line-height: 1;
+	color: var( --color-base--emphasized );
+
+	@media ( min-width: @min-width-breakpoint-tablet ) {
+		font-size: 2rem;
+		white-space: nowrap;
+	}
+
+	img& {
+		width: 100%;
+		height: 1.5rem;
+		margin: 0.25rem 0;
+		object-fit: contain;
+		object-position: left center;
+		filter: var( --filter-invert );
+	}
+}

resources/skins.citizen.styles/skin.less

@@ -42,6 +42,7 @@
 	@import 'components/Sections.less';
 	@import 'components/OverflowElements.less';
 	@import 'components/UserInfo.less';
+	@import 'components/Wordmark.less';
 
 	// Mediawiki.skinning
 	// This get loaded regardless so we don't have to use skinStyles to target them

templates/Drawer.mustache

@@ -9,7 +9,7 @@
 			{{>Drawer__logo}}
 			<div class="citizen-drawer__siteinfo">
 				{{#data-site-stats}}{{>SiteStats}}{{/data-site-stats}}
-				<div class="mw-logo-wordmark">{{msg-sitetitle}}</div>
+				{{>Wordmark}}
 			</div>
 		</header>
 		{{#data-main-menu}}