From 63e9b3de2152caeb88778eda4c2ba903a1ff6492 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Fri, 23 Jan 2026 15:37:23 +0100
Subject: [PATCH] Move more CSS styling to a global css files to reduce bundle
 size

---
 src/lib/components/Card.svelte                |  84 +++----------
 src/lib/components/IngredientsPage.svelte     |  75 ++---------
 src/lib/components/InstructionsPage.svelte    |  28 +----
 src/lib/css/icon.css                          |  53 +++-----
 src/lib/css/nordtheme.css                     | 118 ++++++++++++++++++
 src/lib/css/recipe-links.css                  |  23 ++++
 .../[name]/+page.svelte                       |  54 ++------
 7 files changed, 199 insertions(+), 236 deletions(-)
 create mode 100644 src/lib/css/recipe-links.css

diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte
index bbcd166..564dbaf 100644
--- a/src/lib/components/Card.svelte
+++ b/src/lib/components/Card.svelte
@@ -40,7 +40,7 @@ const img_alt = $derived(
 </script>
 <style>
 .card_anchor{
-	border-radius: 20px;
+	border-radius: var(--radius-card);
 	cursor: pointer;
 	display: inline-block;
 	text-decoration: none;
@@ -67,48 +67,38 @@ const img_alt = $derived(
 	--card-width: 300px;
 	position: relative;
 	flex-shrink: 0;
-	transition: 200ms;
+	transition: var(--transition-normal);
 	text-decoration: none;
 	box-sizing: border-box;
 	font-family: sans-serif;
 	cursor: pointer;
 	height: 525px;
 	width: 300px;
-	border-radius: 20px;
+	border-radius: var(--radius-card);
 	background-size: contain;
 	display: flex;
 	flex-direction: column;
 	justify-content: end;
 	background-color:  var(--blue);
-	box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.3);
+	box-shadow: var(--shadow-lg);
 }
+/* Position/size overrides for global g-icon-badge */
 .icon{
-	font-family: "Noto Color Emoji", emoji, sans-serif;
-	border: none;
-	background: none;
-	cursor: pointer;
 	position: absolute;
 	top: -25px;
 	right: -25px;
 	width: 50px;
 	height: 50px;
-	border-radius: 50%;
+	font-size: 1.5em;
 	background-color: var(--nord0);
 	color: white;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 1.5em;
-	box-shadow: 0em 0em 1em 0.1em rgba(0, 0, 0, 0.6);
-	transition: 100ms;
 	z-index: 5;
-	text-decoration: none;
 }
 .image{
 	width: 300px;
 	height: 255px;
 	object-fit: cover;
-	transition: 200ms;
+	transition: var(--transition-normal);
 }
 .blur{
 	filter: blur(10px);
@@ -137,7 +127,7 @@ const img_alt = $derived(
 .card:focus-within{
 	transform: scale(1.02,1.02);
 	background-color: var(--red);
-	box-shadow: 0.2em 0.2em 2em 1em rgba(0, 0, 0, 0.3);
+	box-shadow: var(--shadow-hover);
 }
 .card:focus{
 	scale: 0.95 0.95;
@@ -153,7 +143,7 @@ const img_alt = $derived(
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
-	transition: 100ms;
+	transition: var(--transition-fast);
 }
 .name{
 	font-size: 2em;
@@ -175,59 +165,27 @@ const img_alt = $derived(
 	margin-bottom:0.5em;
 	flex-grow: 0;
 }
+/* Overrides for Card tags - uses g-tag base, with Card-specific adjustments */
 .tag{
-	cursor: pointer;
-	text-decoration: none;
 	background-color: var(--nord4);
-	color: var(--nord0);
-	border-radius: 100px;
 	padding-inline: 1em;
 	line-height: 1.5em;
 	margin-bottom: 0.5em;
-	transition: 100ms;
-	box-shadow: 0em 0em 0.2em 0.05em rgba(0, 0, 0, 0.3);
-	border: none;
 	position: relative;
 	z-index: 2;
-	display: inline-block;
-}
-.tag:hover,
-.tag:focus-visible
-{
-	transform: scale(1.04, 1.04);
-	background-color: var(--nord8);
-	box-shadow: 0.2em 0.2em 0.2em 0.1em rgba(0, 0, 0, 0.3);
-}
-.tag:focus{
-	transition: 100ms;
-	scale: 0.9;
 }
+/* Position overrides for Card category */
 .card_title .category{
 	position: absolute;
-	box-shadow: 0em 0em 1em 0.1em rgba(0, 0, 0, 0.6);
-	text-decoration: none;
-	color: var(--nord6);
 	font-size: 1.5rem;
 	top: -0.8em;
 	left: -0.5em;
-	background-color: var(--nord0);
 	padding-inline: 1em;
-	border-radius: 1000px;
-	transition: 100ms;
-	border: none;
-	cursor: pointer;
 	z-index: 2;
-	display: inline-block;
 }
 .card_title .category:hover,
-.card_title .category:focus-within
-{
-	box-shadow: -0.2em 0.2em 1em 0.1em rgba(0, 0, 0, 0.6);
-	background-color: var(--nord3);
-	transform: scale(1.05, 1.05)
-}
-.category:focus{
-	scale: 0.9 0.9;
+.card_title .category:focus-within {
+	transform: scale(1.05);
 }
 
 .favorite-indicator{
@@ -263,16 +221,10 @@ const img_alt = $derived(
 	background-color: var(--nord12);
 }
 
+/* Override hover color for Card icon */
 .icon:hover,
-.icon:focus-visible
-{
-	transform: scale(1.1, 1.1);
+.icon:focus-visible {
 	background-color: var(--nord3);
-	box-shadow: 0.2em 0.2em 1em 0.1em rgba(0, 0, 0, 0.8);
-}
-
-.icon:focus {
-	transform: scale(0.9, 0.9);
 }
 
 .card:hover .icon,
@@ -313,17 +265,17 @@ const img_alt = $derived(
 		</div>
 	{/if}
 	{#if icon_override || recipe.season.includes(current_month)}
-		<a href="{routePrefix}/icon/{recipe.icon}" class=icon>{recipe.icon}</a>
+		<a href="{routePrefix}/icon/{recipe.icon}" class="icon g-icon-badge">{recipe.icon}</a>
 	{/if}
 	<div class="card_title">
-		<a href="{routePrefix}/category/{recipe.category}" class=category>{recipe.category}</a>
+		<a href="{routePrefix}/category/{recipe.category}" class="category g-pill g-btn-dark">{recipe.category}</a>
 		<div>
 			<div class=name>{@html recipe.name}</div>
 			<div class=description>{@html recipe.description}</div>
 		</div>
 		<div class=tags>
 		{#each recipe.tags as tag}
-			<a href="{routePrefix}/tag/{tag}" class=tag>{tag}</a>
+			<a href="{routePrefix}/tag/{tag}" class="tag g-pill g-interactive">{tag}</a>
 		{/each}
 		</div>
 	</div>
diff --git a/src/lib/components/IngredientsPage.svelte b/src/lib/components/IngredientsPage.svelte
index 8b9b46b..ef0de56 100644
--- a/src/lib/components/IngredientsPage.svelte
+++ b/src/lib/components/IngredientsPage.svelte
@@ -4,6 +4,7 @@ import { onNavigate } from "$app/navigation";
 import { browser } from '$app/environment';
 import { page } from '$app/stores';
 import HefeSwapper from './HefeSwapper.svelte';
+import '$lib/css/recipe-links.css';
 
 let { data } = $props();
 
@@ -328,52 +329,34 @@ font-family: sans-serif;
 	column-gap: 0.5em;
 }
 .multipliers{
-	display:flex;
+	display: flex;
 	gap: 0.5rem;
 	justify-content: center;
-	flex-wrap:wrap;
+	flex-wrap: wrap;
 }
+/* Size overrides for multiplier buttons */
 .multipliers button{
 	min-width: 2em;
 	font-size: 1.1rem;
-	border-radius: 0.3rem;
-	border: none;
-	cursor: pointer;
-	transition: 100ms;
-	color: var(--nord0);
-	background-color: var(--nord5);
-	box-shadow: 0px 0px 0.4em 0.05em rgba(0,0,0, 0.2);
+	border-radius: var(--radius-sm);
 }
-@media (prefers-color-scheme: dark){
-	.multipliers button{
-		color: var(--tag-font);
-		background-color: var(--nord6-dark);
-	}
-}
-.multipliers :is(button, div):is(:hover, :focus-within){
+/* Hover scale override - larger than default */
+.multipliers :is(button, form):is(:hover, :focus-within){
 	scale: 1.2;
 	background-color: var(--nord8);
-	box-shadow: 0px 0px 0.5em 0.1em rgba(0,0,0, 0.3);
 }
 .selected{
 	background-color: var(--nord9) !important;
 	color: white !important;
 	font-weight: bold;
 	scale: 1.2 !important;
-	box-shadow: 0px 0px 0.4em 0.1em rgba(0,0,0, 0.3) !important;
 }
 .custom-multiplier {
 	display: flex;
 	align-items: center;
 	min-width: 2em;
 	font-size: 1.1rem;
-	border-radius: 0.3rem;
-	border: none;
-	cursor: pointer;
-	transition: 100ms;
-	color: var(--nord0);
-	background-color: var(--nord5);
-	box-shadow: 0px 0px 0.4em 0.05em rgba(0,0,0, 0.2);
+	border-radius: var(--radius-sm);
 }
 
 .custom-input {
@@ -408,44 +391,6 @@ font-family: sans-serif;
 	box-shadow: none;
 }
 
-@media (prefers-color-scheme: dark){
-	.custom-multiplier {
-		color: var(--tag-font);
-		background-color: var(--nord6-dark);
-	}
-}
-
-.custom-multiplier:hover,
-.custom-multiplier:focus-within {
-	scale: 1.2;
-	background-color: var(--nord8);
-	box-shadow: 0px 0px 0.5em 0.1em rgba(0,0,0, 0.3);
-}
-
-/* Base recipe reference link styling */
-h3 a {
-	color: var(--nord10);
-	text-decoration: underline;
-	text-decoration-color: var(--nord10);
-}
-
-h3 a:hover {
-	color: var(--nord9);
-	text-decoration: underline;
-	text-decoration-color: var(--nord9);
-}
-
-@media (prefers-color-scheme: dark) {
-	h3 a {
-		color: var(--nord8);
-		text-decoration-color: var(--nord8);
-	}
-
-	h3 a:hover {
-		color: var(--nord7);
-		text-decoration-color: var(--nord7);
-	}
-}
 </style>
 {#if data.ingredients}
 <div class=ingredients>
@@ -464,10 +409,10 @@ h3 a:hover {
 					<input type="hidden" name={key} {value} />
 				{/if}
 			{/each}
-			<button type="submit" class:selected={multiplier === opt.value} onclick={(e) => handleMultiplierClick(e, opt.value)}>{@html opt.label}</button>
+			<button type="submit" class="g-pill g-btn-light g-interactive" class:selected={multiplier === opt.value} onclick={(e) => handleMultiplierClick(e, opt.value)}>{@html opt.label}</button>
 		</form>
 	{/each}
-	<form method="get" style="display: inline;" class="custom-multiplier" onsubmit={handleCustomSubmit}>
+	<form method="get" style="display: inline;" class="custom-multiplier g-pill g-btn-light g-interactive" onsubmit={handleCustomSubmit}>
 		{#each Array.from(currentParams.entries()) as [key, value]}
 			{#if key !== 'multiplier'}
 				<input type="hidden" name={key} {value} />
diff --git a/src/lib/components/InstructionsPage.svelte b/src/lib/components/InstructionsPage.svelte
index b3037b3..5b56eb6 100644
--- a/src/lib/components/InstructionsPage.svelte
+++ b/src/lib/components/InstructionsPage.svelte
@@ -1,4 +1,5 @@
 <script>
+import '$lib/css/recipe-links.css';
 let { data } = $props();
 
 let multiplier = $state(data.multiplier || 1);
@@ -133,7 +134,7 @@ ol li::marker{
 	flex-grow: 0;
 	padding: 1em;
 	background-color: #FAFAFE;
-	box-shadow: 0.3em 0.3em 1em 0.2em rgba(0,0,0,0.3);
+	box-shadow: var(--shadow-md);
 	max-width: 30%
 }
 @media (prefers-color-scheme: dark){
@@ -153,31 +154,6 @@ ol li::marker{
 h3{
 	margin-block: 0;
 }
-
-/* Base recipe reference link styling */
-h3 a {
-	color: var(--nord10);
-	text-decoration: underline;
-	text-decoration-color: var(--nord10);
-}
-
-h3 a:hover {
-	color: var(--nord9);
-	text-decoration: underline;
-	text-decoration-color: var(--nord9);
-}
-
-@media (prefers-color-scheme: dark) {
-	h3 a {
-		color: var(--nord8);
-		text-decoration-color: var(--nord8);
-	}
-
-	h3 a:hover {
-		color: var(--nord7);
-		text-decoration-color: var(--nord7);
-	}
-}
 </style>
 <div class=instructions>
 <div class=additional_info>
diff --git a/src/lib/css/icon.css b/src/lib/css/icon.css
index 4d94e4c..4dec345 100644
--- a/src/lib/css/icon.css
+++ b/src/lib/css/icon.css
@@ -1,52 +1,37 @@
-.icon:focus{
-	scale: 0.8 0.8;
-	rotate: var(--angle, 30deg);
-}
-
-a.icon{
+/* Shared icon styles - position overrides for components using g-icon-badge */
+.icon {
 	--angle: 15deg;
-	--endscale: 1.2;
-	text-decoration: unset;
-	transition: 100ms;
 	position: absolute;
 	font-size: 1.5rem;
-	top:-0.5em;
-	right:-0.5em;
+	top: -0.5em;
+	right: -0.5em;
 	padding: 0.25em;
 	background-color: var(--nord6);
-	border-radius:1000px;
-	box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.6);
 }
+
+.icon:focus {
+	scale: 0.8;
+	rotate: var(--angle);
+}
+
 @media (prefers-color-scheme: dark) {
-	a.icon{
+	.icon {
 		background-color: var(--accent-dark);
 	}
 }
-input.icon{
+
+/* Input-specific overrides */
+input.icon {
 	z-index: 3;
 	box-sizing: border-box;
-	text-decoration: unset;
-	text-align:center;
+	text-align: center;
 	width: 2.6rem;
 	aspect-ratio: 1/1;
-	transition: 100ms;
-	position: absolute;
-	font-size: 1.5rem;
-	top:-0.5em;
-	right:-0.5em;
-	padding: 0.25em;
-	background-color: var(--nord6);
-	border-radius:1000px;
-	box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.6);
-}
-input.icon:hover,
-input.icon:focus-visible
-{
-	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
+	border: none;
 }
+
+/* Animation on hover for links */
 a.icon:hover,
-a.icon:focus-visible
-{
-	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
+a.icon:focus-visible {
 	animation: shake 0.6s forwards;
 }
diff --git a/src/lib/css/nordtheme.css b/src/lib/css/nordtheme.css
index ac6345e..7e111e6 100644
--- a/src/lib/css/nordtheme.css
+++ b/src/lib/css/nordtheme.css
@@ -26,6 +26,16 @@
 	--accent-dark: #1f1f21;
 	--background-dark: #21201b;
 	--font-default-dark: #ffffff;
+	/* Shared transitions & shadows */
+	--transition-fast: 100ms;
+	--transition-normal: 200ms;
+	--shadow-sm: 0 0 0.4em 0.05em rgba(0,0,0,0.2);
+	--shadow-md: 0 0 0.5em 0.1em rgba(0,0,0,0.3);
+	--shadow-lg: 0 0 1em 0.1em rgba(0,0,0,0.4);
+	--shadow-hover: 0.1em 0.1em 0.5em 0.1em rgba(0,0,0,0.3);
+	--radius-pill: 1000px;
+	--radius-card: 20px;
+	--radius-sm: 0.3rem;
 }
 
 a:not(:visited){
@@ -58,3 +68,111 @@ body{
 		background-color: var(--background-dark);
 	}
 }
+
+/* ========================================
+   Global Utility Classes
+   Use these in components to avoid CSS duplication
+   ======================================== */
+
+/* Pill-shaped element base */
+.g-pill {
+	border-radius: var(--radius-pill);
+	border: none;
+	cursor: pointer;
+	display: inline-block;
+	text-decoration: none;
+	transition: var(--transition-fast);
+}
+
+/* Interactive hover/focus effects */
+.g-interactive {
+	transition: var(--transition-fast);
+}
+.g-interactive:hover,
+.g-interactive:focus-visible {
+	transform: scale(1.05);
+	box-shadow: var(--shadow-hover);
+}
+.g-interactive:focus {
+	scale: 0.9;
+}
+
+/* Light background button (with dark mode) */
+.g-btn-light {
+	background-color: var(--nord5);
+	color: var(--nord0);
+	box-shadow: var(--shadow-sm);
+}
+@media (prefers-color-scheme: dark) {
+	.g-btn-light {
+		background-color: var(--nord0);
+		color: white;
+	}
+}
+
+/* Dark background button */
+.g-btn-dark,
+.g-btn-dark:visited,
+.g-btn-dark:link {
+	background-color: var(--nord0);
+	color: var(--nord6);
+	box-shadow: var(--shadow-lg);
+}
+.g-btn-dark:hover,
+.g-btn-dark:focus-visible {
+	background-color: var(--nord1);
+	color: var(--nord6);
+}
+
+/* Icon badge (circular icon container) */
+.g-icon-badge {
+	font-family: "Noto Color Emoji", emoji, sans-serif;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+	text-decoration: none;
+	transition: var(--transition-fast);
+	box-shadow: var(--shadow-lg);
+}
+.g-icon-badge:hover,
+.g-icon-badge:focus-visible {
+	transform: scale(1.1);
+	box-shadow: var(--shadow-hover);
+}
+
+/* Tag/chip styling */
+.g-tag,
+.g-tag:visited,
+.g-tag:link {
+	font-size: 1.1rem;
+	padding: 0.25em 1em;
+	border-radius: var(--radius-pill);
+	background-color: var(--nord5);
+	color: var(--nord0);
+	text-decoration: none;
+	cursor: pointer;
+	transition: var(--transition-fast);
+	box-shadow: var(--shadow-sm);
+	border: none;
+	display: inline-block;
+}
+.g-tag:hover,
+.g-tag:focus-visible {
+	transform: scale(1.05);
+	background-color: var(--nord8);
+	box-shadow: var(--shadow-hover);
+	color: var(--nord0);
+}
+@media (prefers-color-scheme: dark) {
+	.g-tag,
+	.g-tag:visited,
+	.g-tag:link {
+		background-color: var(--nord0);
+		color: white;
+	}
+	.g-tag:hover,
+	.g-tag:focus-visible {
+		color: var(--nord0);
+	}
+}
diff --git a/src/lib/css/recipe-links.css b/src/lib/css/recipe-links.css
new file mode 100644
index 0000000..2f3fb74
--- /dev/null
+++ b/src/lib/css/recipe-links.css
@@ -0,0 +1,23 @@
+/* Shared link styling for recipe reference links in h3 elements */
+h3 a {
+	color: var(--nord10);
+	text-decoration: underline;
+	text-decoration-color: var(--nord10);
+}
+
+h3 a:hover {
+	color: var(--nord9);
+	text-decoration-color: var(--nord9);
+}
+
+@media (prefers-color-scheme: dark) {
+	h3 a {
+		color: var(--nord8);
+		text-decoration-color: var(--nord8);
+	}
+
+	h3 a:hover {
+		color: var(--nord7);
+		text-decoration-color: var(--nord7);
+	}
+}
diff --git a/src/routes/[recipeLang=recipeLang]/[name]/+page.svelte b/src/routes/[recipeLang=recipeLang]/[name]/+page.svelte
index 98fe121..c513524 100644
--- a/src/routes/[recipeLang=recipeLang]/[name]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/[name]/+page.svelte
@@ -115,23 +115,17 @@ h1{
 	hyphens: auto;
 	text-wrap: balance;
 }
+/* Position overrides for global classes */
 .category{
 	--size: 1.75rem;
 	position: absolute;
-	top: calc(-1* var(--size) );
-	left:calc(-3/2 * var(--size));
-	background-color: var(--nord0);
-	color: var(--nord6);
-	text-decoration: none;
+	top: calc(-1* var(--size));
+	left: calc(-3/2 * var(--size));
 	font-size: var(--size);
 	padding: calc(var(--size) * 2/3);
-	border-radius: 1000px;
-	transition: 100ms;
-	box-shadow: 0em 0em 1em 0.3em rgba(0,0,0,0.4);
 }
 .category:hover,
 .category:focus-visible{
-	background-color: var(--nord1);
 	scale: 1.1;
 }
 .tags{
@@ -150,30 +144,6 @@ h2.section-label{
 .center{
 	justify-content: center;
 }
-.tag{
-	all:unset;
-	color: var(--nord0);
-	font-size: 1.1rem;
-	background-color: var(--nord5);
-	border-radius: 10000px;
-	padding: 0.25em 1em;
-	transition: 100ms;
-	box-shadow: 0em 0em 0.5em 0.05em rgba(0,0,0,0.3);
-}
-@media (prefers-color-scheme: dark) {
-	.tag{
-		background-color: var(--nord0);
-		color: white;
-	}
-}
-.tag:hover,
-.tag:focus-visible
-{
-	cursor: pointer;
-	transform: scale(1.1,1.1);
-	background-color: var(--nord8);
-	box-shadow: 0.1em 0.1em 0.5em 0.1em rgba(0,0,0,0.3);
-}
 
 .wrapper_wrapper{
 	background-color: #fbf9f3;
@@ -220,27 +190,21 @@ h2.section-label{
 }
 
 .icon{
-	font-family: "Noto Color Emoji", emoji;
 	position: absolute;
 	top: -1em;
 	right: -0.75em;
-	text-decoration: unset;
-	background-color: #FAFAFE;
 	padding: 0.5em;
 	font-size: 1.5rem;
-	border-radius: 100000px;
-	transition: 100ms;
-	box-shadow: 0em 0em 1em 0.3em rgba(0,0,0,0.4);
+	background-color: #FAFAFE;
 }
 @media (prefers-color-scheme: dark) {
 	.icon{
 		background-color: var(--accent-dark);
 	}
 }
-
 .icon:hover,
 .icon:focus-visible{
-	scale: 1.2 1.2;
+	scale: 1.2;
 	animation: shake 0.5s ease forwards;
 }
 
@@ -322,8 +286,8 @@ h2{
 
 <TitleImgParallax src={hero_img_src} {placeholder_src} alt={img_alt}>
 	<div class=title>
-		<a class="category" href='/{data.recipeLang}/category/{data.category}'>{data.category}</a>
-		<a class="icon" href='/{data.recipeLang}/icon/{data.icon}'>{data.icon}</a>
+		<a class="category g-pill g-btn-dark" href='/{data.recipeLang}/category/{data.category}'>{data.category}</a>
+		<a class="icon g-icon-badge" href='/{data.recipeLang}/icon/{data.icon}'>{data.icon}</a>
 		<h1>{@html data.name}</h1>
 		{#if data.description && ! data.preamble}
 			<p class=description>{data.description}</p>
@@ -334,7 +298,7 @@ h2{
 		<div class=tags>
 			<h2>{labels.season}</h2>
 			{#each season_iv as season}
-				<a class=tag href="/{data.recipeLang}/season/{season[0]}">
+				<a class="g-tag" href="/{data.recipeLang}/season/{season[0]}">
 					{#if season[0]}
 						{months[season[0] - 1]}
 					{/if}
@@ -347,7 +311,7 @@ h2{
 		<h2 class="section-label">{labels.keywords}</h2>
 		<div class="tags center">
 			{#each data.tags as tag}
-				<a class=tag href="/{data.recipeLang}/tag/{tag}">{tag}</a>
+				<a class="g-tag" href="/{data.recipeLang}/tag/{tag}">{tag}</a>
 			{/each}
 		</div>