From 402bbbc672d212d53b263acdf0fd4daf0cbee0b5 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Wed, 4 Mar 2026 22:21:22 +0200
Subject: [PATCH] Adjust the temporary logo to something releasable

---
 app/components/layout/index.module.css | 26 ++++++++++++++++++++------
 app/components/layout/index.tsx        | 13 +++++++++++--
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/app/components/layout/index.module.css b/app/components/layout/index.module.css
index 2114fd3aa..8f7e35e9f 100644
--- a/app/components/layout/index.module.css
+++ b/app/components/layout/index.module.css
@@ -27,18 +27,29 @@
 }
 
 .siteLogo {
-	display: grid;
-	place-items: center;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
 	width: 36px;
 	height: 36px;
 	background-color: var(--color-accent);
 	border-radius: var(--radius-field);
-	font-size: var(--font-lg);
 	font-weight: var(--weight-bold);
 	color: var(--color-text);
 	text-decoration: none;
 	flex-shrink: 0;
 	transition: background-color 0.2s;
+	line-height: 1;
+	gap: 1px;
+}
+
+.siteLogoS {
+	font-size: var(--font-sm);
+}
+
+.siteLogoInk {
+	font-size: 10px;
 }
 
 .siteLogo:hover {
@@ -131,16 +142,19 @@
 
 @media screen and (max-width: 599px) {
 	.mobileLogo {
-		display: grid;
-		place-items: center;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
 		width: 36px;
 		height: 36px;
 		background-color: var(--color-accent);
 		border-radius: var(--radius-field);
-		font-size: var(--font-lg);
 		font-weight: var(--weight-bold);
 		color: var(--color-text);
 		text-decoration: none;
 		flex-shrink: 0;
+		line-height: 1;
+		gap: 1px;
 	}
 }
diff --git a/app/components/layout/index.tsx b/app/components/layout/index.tsx
index 16d61ddf4..079a4eb7d 100644
--- a/app/components/layout/index.tsx
+++ b/app/components/layout/index.tsx
@@ -347,7 +347,7 @@ function SiteTitle() {
 			<div className={styles.siteTitle}>
 				<Flipped flipId="site-logo">
 					<Link to="/" className={styles.siteLogo}>
-						S
+						<SiteLogoContent />
 					</Link>
 				</Flipped>
 
@@ -370,10 +370,19 @@ function SiteTitle() {
 	);
 }
 
+function SiteLogoContent() {
+	return (
+		<>
+			<span className={styles.siteLogoS}>S</span>
+			<span className={styles.siteLogoInk}>ink</span>
+		</>
+	);
+}
+
 function MobileLogo() {
 	return (
 		<Link to="/" className={styles.mobileLogo}>
-			S
+			<SiteLogoContent />
 		</Link>
 	);
 }