feat: styling logo

cowprotocol · Jan 5, 2024 · 6721e57 · 6721e57
1 parent 0c7805a
commit 6721e57
Show file tree

Hide file tree

Showing 11 changed files with 58 additions and 12 deletions.
diff --git a/src/app.css b/src/app.css
@@ -86,6 +86,49 @@ html body.light {
 	--cutout: #052b65;
 }
 
+/* override logo */
+html body a.home-link {
+	background-image: none !important;
+	padding: 0 !important;
+}
+
+#cow-logo {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0 0 0 1rem;
+}
+
+#cow-logo>img {
+	object-fit: contain;
+	width: 100%;
+	height: 3.5rem;
+	margin: 0 1.5rem 0 0;
+}
+
+html body.dark #cow-logo>img {
+	content: url(/cow_logo_light.svg);
+}
+
+#cow-logo-small {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0 0 0 2rem;
+}
+
+#cow-logo-small>img {
+	object-fit: contain;
+	width: 100%;
+	height: 3.5rem;
+	margin: 0;
+	;
+}
+
+html body.dark #cow-logo-small>img {
+	content: url(/cow_icon_light.svg);
+}
+
 input,
 button {
 	border: 2px solid transparent;

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -14,11 +14,16 @@
 <Shell>
 	<Nav title="" links={data.links} slot="top-nav">
 		<svelte:fragment slot="home-large">
-			<strong id="cow-word">CoW</strong> tutorials
+			<span id="cow-logo">
+				<img src="/cow_logo_dark.svg" alt="CoW Logo" />
+				tutorials
+			</span>
 		</svelte:fragment>
 
 		<svelte:fragment slot="home-small">
-			<strong>CoW</strong>
+			<span id="cow-logo-small">
+				<img src="/cow_icon_dark.svg" alt="CoW Logo" />
+			</span>
 		</svelte:fragment>
 
 		<svelte:fragment slot="search">
@@ -64,10 +69,6 @@
 		display: none;
 	}
 
-	#cow-word {
-		text-transform: none;
-	}
-
 	@media (min-width: 800px) {
 		span {
 			height: 100%;

diff --git a/static/cow_icon_dark.svg b/static/cow_icon_dark.svg
diff --git a/static/cow_icon_light.svg b/static/cow_icon_light.svg
diff --git a/static/cow_logo_dark.svg b/static/cow_logo_dark.svg
diff --git a/static/cow_logo_light.svg b/static/cow_logo_light.svg
diff --git a/static/favicon.png b/static/favicon.png
diff --git a/static/manifest.json b/static/manifest.json
@@ -1,15 +1,15 @@
 {
-	"short_name": "Learn Svelte",
+	"short_name": "CoW Tutorials",
 	"name": "learn.svelte.dev",
-	"description": "An interactive Svelte/SvelteKit tutorial",
+	"description": "An interactive CoW tutorial",
 	"icons": [
 		{
-			"src": "/svelte-logo-square.svg",
+			"src": "/cow_logo_dark.svg",
 			"type": "image/svg+xml",
 			"sizes": "512x512"
 		},
 		{
-			"src": "/svelte-logo-square.png",
+			"src": "/favicon.png",
 			"type": "image/png",
 			"sizes": "512x512",
 			"purpose": "any maskable"

diff --git a/static/svelte-logo-square.png b/static/svelte-logo-square.png
diff --git a/static/svelte-logo-square.svg b/static/svelte-logo-square.svg
diff --git a/static/svelte-logo.svg b/static/svelte-logo.svg