feat: new colour scheme (#78)

* feat: change AppBar colour * feat: change page navigation layout * feat: change blog post layout * style: formatting with line breaks * feat: add purple colour palette * feat: change agenda items layout * style: use variant-ringed instead of modifying variant-ghost * feat: change layout of tags in blog posts * fix: spacing between category badges * feat: change colour of symbols on the map --------- Co-authored-by: Moritz Mähr <[email protected]>
Stadt-Geschichte-Basel · Feb 22, 2024 · 294101f · 294101f
1 parent 65c587b
commit 294101f
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 78 deletions.
diff --git a/src/app.postcss b/src/app.postcss
@@ -21,15 +21,15 @@ body {
 
 	/* =~= Theme On-X Colors =~= */
 	--on-primary: 255 255 255;
-	--on-secondary: 255 255 255;
-	--on-tertiary: 255 255 255;
-	--on-success: 255 255 255;
-	--on-warning: 255 255 255;
-	--on-error: 255 255 255;
+	--on-secondary: 0 0 0;
+	--on-tertiary: 0 0 0;
+	--on-success: 0 0 0;
+	--on-warning: 0 0 0;
+	--on-error: 0 0 0;
 	--on-surface: 255 255 255;
 
 	/* =~= Theme Colors  =~= */
-	/* primary | #3a1e3e */
+	/* primary | #3A1E3E */
 	--color-primary-50: 225 221 226;
 	--color-primary-100: 216 210 216;
 	--color-primary-200: 206 199 207;
@@ -41,65 +41,65 @@ body {
 	--color-primary-800: 35 18 37;
 	--color-primary-900: 28 15 30;
 
-	/* secondary | #4D7CA0 */
-	--color-secondary-50: 228 235 241;
-	--color-secondary-100: 219 229 236;
-	--color-secondary-200: 211 222 231;
-	--color-secondary-300: 184 203 217;
-	--color-secondary-400: 130 163 189;
-	--color-secondary-500: 77 124 160;
-	--color-secondary-600: 69 112 144;
-	--color-secondary-700: 58 93 120;
-	--color-secondary-800: 46 74 96;
-	--color-secondary-900: 38 61 78;
+	/* secondary | #FFE880 */
+	--color-secondary-50: 255 252 236;
+	--color-secondary-100: 255 250 230;
+	--color-secondary-200: 255 249 223;
+	--color-secondary-300: 255 246 204;
+	--color-secondary-400: 255 239 166;
+	--color-secondary-500: 255 232 128;
+	--color-secondary-600: 230 209 115;
+	--color-secondary-700: 191 174 96;
+	--color-secondary-800: 153 139 77;
+	--color-secondary-900: 125 114 63;
 
-	/* tertiary | #B455A0 */
-	--color-tertiary-50: 244 230 241;
-	--color-tertiary-100: 240 221 236;
-	--color-tertiary-200: 236 213 231;
-	--color-tertiary-300: 225 187 217;
-	--color-tertiary-400: 203 136 189;
-	--color-tertiary-500: 180 85 160;
-	--color-tertiary-600: 162 77 144;
-	--color-tertiary-700: 135 64 120;
-	--color-tertiary-800: 108 51 96;
-	--color-tertiary-900: 88 42 78;
+	/* tertiary | #86BBD8 */
+	--color-tertiary-50: 237 245 249;
+	--color-tertiary-100: 231 241 247;
+	--color-tertiary-200: 225 238 245;
+	--color-tertiary-300: 207 228 239;
+	--color-tertiary-400: 170 207 228;
+	--color-tertiary-500: 134 187 216;
+	--color-tertiary-600: 121 168 194;
+	--color-tertiary-700: 101 140 162;
+	--color-tertiary-800: 80 112 130;
+	--color-tertiary-900: 66 92 106;
 
-	/* success | #34815F */
-	--color-success-50: 225 236 231;
-	--color-success-100: 214 230 223;
-	--color-success-200: 204 224 215;
-	--color-success-300: 174 205 191;
-	--color-success-400: 113 167 143;
-	--color-success-500: 52 129 95;
-	--color-success-600: 47 116 86;
-	--color-success-700: 39 97 71;
-	--color-success-800: 31 77 57;
-	--color-success-900: 25 63 47;
+	/* success | #DBFE87 */
+	--color-success-50: 250 255 237;
+	--color-success-100: 248 255 231;
+	--color-success-200: 246 255 225;
+	--color-success-300: 241 255 207;
+	--color-success-400: 230 254 171;
+	--color-success-500: 219 254 135;
+	--color-success-600: 197 229 122;
+	--color-success-700: 164 191 101;
+	--color-success-800: 131 152 81;
+	--color-success-900: 107 124 66;
 
-	/* warning | #A97209 */
-	--color-warning-50: 242 234 218;
-	--color-warning-100: 238 227 206;
-	--color-warning-200: 234 220 194;
-	--color-warning-300: 221 199 157;
-	--color-warning-400: 195 156 83;
-	--color-warning-500: 169 114 9;
-	--color-warning-600: 152 103 8;
-	--color-warning-700: 127 86 7;
-	--color-warning-800: 101 68 5;
-	--color-warning-900: 83 56 4;
+	/* warning | #F6AE2D */
+	--color-warning-50: 254 243 224;
+	--color-warning-100: 253 239 213;
+	--color-warning-200: 253 235 203;
+	--color-warning-300: 251 223 171;
+	--color-warning-400: 249 198 108;
+	--color-warning-500: 246 174 45;
+	--color-warning-600: 221 157 41;
+	--color-warning-700: 185 131 34;
+	--color-warning-800: 148 104 27;
+	--color-warning-900: 121 85 22;
 
-	/* error | #EE2D48 */
-	--color-error-50: 252 224 228;
-	--color-error-100: 252 213 218;
-	--color-error-200: 251 203 209;
-	--color-error-300: 248 171 182;
-	--color-error-400: 243 108 127;
-	--color-error-500: 238 45 72;
-	--color-error-600: 214 41 65;
-	--color-error-700: 179 34 54;
-	--color-error-800: 143 27 43;
-	--color-error-900: 117 22 35;
+	/* error | #F63E02 */
+	--color-error-50: 254 226 217;
+	--color-error-100: 253 216 204;
+	--color-error-200: 253 207 192;
+	--color-error-300: 251 178 154;
+	--color-error-400: 249 120 7;
+	--color-error-500: 246 62 2;
+	--color-error-600: 221 56 2;
+	--color-error-700: 185 47 2;
+	--color-error-800: 148 37 1;
+	--color-error-900: 121 30 1;
 
 	/* surface | #666666 */
 	--color-surface-50: 232 232 232;

diff --git a/src/lib/components/Post.svelte b/src/lib/components/Post.svelte
@@ -20,7 +20,7 @@
 	export let post;
 </script>
 
-<div class="card mt-4 overflow-hidden" aria-label={post.title}>
+<div class="card variant-ringed-primary mt-4 overflow-hidden" aria-label={post.title}>
 	<header>
 		<img src="{base}{post.featuredImage}" class="max-h-96 w-full object-contain" alt="" />
 	</header>
@@ -44,7 +44,10 @@
 	<footer class="flex gap-2 p-4">
 		<div class="flex w-full flex-wrap justify-start gap-1">
 			{#each post.categories as category}
-				<a class="variant-filled badge" href="{base}/blog/kategorie/{category}">&num;{category}</a>
+				<a
+					class="variant-ringed badge text-primary-500 hover:bg-primary-500 hover:text-white"
+					href="{base}/blog/kategorie/{category}">&num;{category}</a
+				>
 			{/each}
 		</div>
 		<div class="flex justify-end">

diff --git a/src/lib/components/PostNav.svelte b/src/lib/components/PostNav.svelte
@@ -15,10 +15,10 @@
 
 <nav
 	aria-label="Blogpost-Navigation, zeigt Seite {page} aus {lastPage}"
-	class="variant-ghost btn-group mt-4 grid grid-cols-3 justify-items-stretch gap-4 text-center"
+	class="variant-ringed-primary btn-group mt-4 grid grid-cols-3 justify-items-stretch text-center"
 	data-sveltekit-preload-data
 >
-	<div>
+	<div class="group hover:bg-primary-500 hover:text-white">
 		{#if page > 1}
 			<a
 				href="{base}/blog/{page - 1}"
@@ -36,7 +36,7 @@
 		<span class="disabled btn hidden md:block" aria-current="page">Seite {page} von {lastPage}</span
 		>
 	</div>
-	<div>
+	<div class="group hover:bg-primary-500 hover:text-white">
 		{#if page < lastPage}
 			<a
 				href="{base}/blog/{page + 1}"

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -44,7 +44,7 @@
 	scrollbarGutter="auto"
 >
 	<svelte:fragment slot="header">
-		<AppBar>
+		<AppBar background="bg-primary-500">
 			<svelte:fragment slot="lead">
 				<div class="flex">
 					<button
@@ -53,7 +53,11 @@
 						aria-label="Open navigation menu"
 					>
 						<span>
-							<svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 448 512"
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								height="2em"
+								viewBox="0 0 448 512"
+								fill="white"
 								><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path
 									d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"
 								/></svg
@@ -62,7 +66,11 @@
 					</button>
 					<div class="h-12">
 						<a href="{base}/" class="cursor-pointer" aria-label="Home">
-							<svg class="h-full" viewBox="0 0 512 223.96" xmlns="http://www.w3.org/2000/svg"
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-full"
+								viewBox="0 0 512 223.96"
+								fill="white"
 								><path
 									d="m0 49.6c4.52 6.39 12.22 10.05 21.17 10.05 12.54 0 21.69-7.43 21.77-17.67.07-8.06-4.53-13.82-13.67-17.11l-4.71-1.47c-6.31-2.27-9.87-3.72-9.87-7.05 0-3.12 3.96-4.76 7.88-4.76 4.11 0 8.33 1.83 10.85 4.68l8.09-8.55c-4.89-5.12-11.27-7.72-18.99-7.72-12.21 0-20.42 7.1-20.42 17.66 0 7.6 5.01 13.32 14.49 16.54l4.23 1.39c6.59 2.23 9.4 4.41 9.4 7.29s-3.7 5.17-8.43 5.17-9.54-2.65-12.27-6.5z"
 								/><path d="m61.37 58.66h12.5v-45.83h15.03v-11.84h-42.4v11.84h14.87z" /><path
@@ -108,7 +116,11 @@
 							href="https://www.instagram.com/{config.instagramHandle}/"
 							aria-label="Instagram"
 							rel="noopener noreferrer"
-							><svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 448 512"
+							><svg
+								xmlns="http://www.w3.org/2000/svg"
+								height="2em"
+								viewBox="0 0 448 512"
+								fill="white"
 								><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path
 									d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
 								/></svg
@@ -121,7 +133,11 @@
 							aria-label="Twitter"
 							rel="noopener noreferrer"
 						>
-							<svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 512 512"
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								height="2em"
+								viewBox="0 0 512 512"
+								fill="white"
 								><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path
 									d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"
 								/></svg

diff --git a/src/routes/agenda/+page.svelte b/src/routes/agenda/+page.svelte
@@ -169,7 +169,7 @@
 		</RadioGroup>
 		{#if filteredEvents.length > 0}
 			{#each filteredEvents as event}
-				<article class="card mt-4 px-4">
+				<article class="card variant-ringed-primary mt-4 px-4">
 					<hgroup class="m-0">
 						<h3>{event.title} ({event.owner})</h3>
 						<h4>
@@ -191,7 +191,7 @@
 	{/if}
 	{#if agenda === 'exhibitions'}
 		{#each exhibitions as exhibition}
-			<article class="card">
+			<article class="card variant-ringed-primary">
 				<h3 class="card-header">{exhibition.owner}: {exhibition.title}</h3>
 				<p class="card-footer">
 					{#if exhibition.longDescription}

diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
@@ -28,7 +28,10 @@
 				>Veröffentlicht am {date}{#if modified !== date}, zuletzt geändert am {modified}{/if}</span
 			>
 			{#each data.meta.categories as category}
-				<a class="variant-filled badge" href="{base}/blog/kategorie/{category}">&num;{category}</a>
+				<a
+					class="variant-ringed badge mr-1 text-primary-500 hover:bg-primary-500 hover:text-white"
+					href="{base}/blog/kategorie/{category}">&num;{category}</a
+				>
 			{/each}
 		</hgroup>
 		<svelte:component this={data.content} />

diff --git a/src/routes/partner/+page.svelte b/src/routes/partner/+page.svelte
@@ -100,10 +100,10 @@
 				id="clusters"
 				hoverCursor="pointer"
 				paint={{
-					'circle-color': '#a390a2',
+					'circle-color': '#3a1e3e',
 					'circle-radius': ['step', ['get', 'point_count'], 20, 100, 30, 750, 40],
-					'circle-stroke-color': '#d4d2d6',
-					'circle-stroke-width': 1
+					'circle-stroke-color': '#ffffff',
+					'circle-stroke-width': 2
 				}}
 				on:click={(e) => {
 					map.flyTo({
@@ -115,7 +115,7 @@
 			/>
 			<MarkerLayer applyToClusters={false} interactive let:feature>
 				<div
-					class="rounded-full bg-[#70416c] p-3 text-sm font-bold text-[#d4d2d6] shadow-2xl focus:outline-2 focus:outline-black"
+					class="rounded-full bg-[#3a1e3e] p-3 text-sm font-bold text-[#ffffff] shadow-2xl focus:outline-2 focus:outline-black"
 				>
 					{feature.properties.label}
 				</div>