From c47531a28b2f815a08b6f4d4d6dada48bd2a99c7 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Mon, 24 Jun 2024 14:05:21 -0400
Subject: [PATCH] =?UTF-8?q?feat(wordmark):=20=E2=9C=A8=20implement=20wordm?=
 =?UTF-8?q?ark=20in=20drawer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Also simplify existing styles for wordmark
---
 .../common/typography.less                    |  4 ----
 .../components/Drawer.less                    | 15 +-------------
 .../components/Footer.less                    | 10 ----------
 .../components/Wordmark.less                  | 20 +++++++++++++++++++
 resources/skins.citizen.styles/skin.less      |  1 +
 templates/Drawer.mustache                     |  2 +-
 6 files changed, 23 insertions(+), 29 deletions(-)
 create mode 100644 resources/skins.citizen.styles/components/Wordmark.less

diff --git a/resources/skins.citizen.styles/common/typography.less b/resources/skins.citizen.styles/common/typography.less
index 5cce0980..1eef41de 100644
--- a/resources/skins.citizen.styles/common/typography.less
+++ b/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 );
diff --git a/resources/skins.citizen.styles/components/Drawer.less b/resources/skins.citizen.styles/components/Drawer.less
index 5227290f..5dda42c6 100644
--- a/resources/skins.citizen.styles/components/Drawer.less
+++ b/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;
-			}
-		}
 	}
 }
 
diff --git a/resources/skins.citizen.styles/components/Footer.less b/resources/skins.citizen.styles/components/Footer.less
index 871e5199..6a65e491 100644
--- a/resources/skins.citizen.styles/components/Footer.less
+++ b/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;
diff --git a/resources/skins.citizen.styles/components/Wordmark.less b/resources/skins.citizen.styles/components/Wordmark.less
new file mode 100644
index 00000000..86b54cc9
--- /dev/null
+++ b/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 );
+	}
+}
diff --git a/resources/skins.citizen.styles/skin.less b/resources/skins.citizen.styles/skin.less
index ce974073..4c688261 100644
--- a/resources/skins.citizen.styles/skin.less
+++ b/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
diff --git a/templates/Drawer.mustache b/templates/Drawer.mustache
index 7a4d0f4e..933bf9cc 100644
--- a/templates/Drawer.mustache
+++ b/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}}