index: updated colors

Author: zegl

src/lib/Button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	export let disabled = false;
 	export let href: string | undefined = undefined;
-	export let color: 'blue' | 'black' | 'lime' | 'violet' = 'blue';
+	export let color: 'blue' | 'black' | 'lime' | 'violet' | 'orange' = 'blue';
 
 	const calcBg = (disabled: boolean) => {
 		if (color === 'blue') {
@@ -10,51 +10,38 @@
 			}
 			return 'bg-blue-500 hover:bg-blue-600';
 		}
+		if (color === 'orange') {
+			if (disabled) {
+				return 'bg-orange-300';
+			}
+			return 'bg-orange-500 hover:bg-orange-600';
+		}
 		if (color === 'lime') {
 			if (disabled) {
 				return 'bg-lime-200';
 			}
-			return 'bg-lime-500 hover:bg-lime-400';
+			return 'bg-lime-500 hover:bg-lime-600';
 		}
 		if (color === 'violet') {
 			if (disabled) {
 				return 'bg-violet-200';
 			}
-			return 'bg-violet-500 hover:bg-violet-400';
+			return 'bg-violet-500 hover:bg-violet-600';
 		}
 		if (color === 'black') {
 			return 'bg-black hover:bg-gray-800';
 		}
 	};
 
 	const calcText = (disabled: boolean) => {
-		if (color === 'blue') {
-			return 'text-white';
-		}
-		if (color === 'lime') {
-			return 'text-white';
-		}
-		if (color === 'violet') {
-			return 'text-white';
-		}
-		if (color === 'black') {
-			return 'text-white';
-		}
+		return 'text-white';
 	};
 
 	const calcBorder = (disabled: boolean) => {
-		if (color === 'blue') {
-			return 'border-transparent';
-		}
-		if (color === 'lime') {
-			return 'border-transparent';
-		}
-		if (color === 'violet') {
-			return 'border-transparent';
-		}
 		if (color === 'black') {
 			return 'border-white';
 		}
+		return 'border-transparent';
 	};
 
 	$: bg = calcBg(disabled);

src/lib/Footer.svelte

@@ -12,12 +12,21 @@
 		{ href: 'https://discord.gg/fQcH9QAVpX', title: 'Discord' },
 		{ href: 'mailto:[email protected]', title: 'Email us' }
 	];
+
+	const madeWiths = [
+		{ emoji: '🥕', color: 'text-orange-500' },
+		{ emoji: '🥑', color: 'text-emerald-500' },
+		{ emoji: '🍓', color: 'text-rose-600' },
+		{ emoji: '🍉', color: 'text-rose-500' }
+	];
+
+	const madeWith = madeWiths[Math.floor(Math.random() * madeWiths.length)];
 </script>
 
 <div class="p-4 md:mx-auto md:max-w-7xl">
 	<footer class="py-4">
 		<div class="flex flex-col items-center justify-around gap-2 md:flex-row md:gap-8">
-			<div class="text-lg text-emerald-500">Made with 🥑 in Stockholm</div>
+			<div class="text-lg {madeWith.color}">Made with {madeWith.emoji} in Stockholm</div>
 			<div class="md:flex-1" />
 			{#each footer as { href, title }}
 				<a

src/lib/components/index/FeatureBox.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <div
-	class="flex items-start gap-4 rounded-xl bg-violet-100 p-4 md:items-center lg:mx-0 lg:w-full lg:gap-16"
+	class="flex items-start gap-4 rounded-xl bg-violet-100 p-4 md:items-center md:gap-8 md:p-8 lg:mx-0 lg:w-full lg:gap-16"
 >
 	<img src={img} class="h-20 flex-shrink-0 md:h-40 " />
 

src/routes/__layout-wide.svelte

@@ -79,7 +79,7 @@
 	</a>
 {/if}
 
-<main class="min-h-screen w-full bg-lime-50">
+<main class="min-h-screen w-full bg-orange-50">
 	<Header {login} />
 
 	<slot />

src/routes/__layout.svelte

@@ -88,7 +88,7 @@
 		<slot />
 	</div>
 
-	<div class="w-full bg-lime-50">
+	<div class="w-full bg-orange-50">
 		<Footer />
 	</div>
 </main>

src/routes/[email protected]

@@ -49,10 +49,10 @@
 		</ul>
 
 		<div class="space-x-2">
-			<Button color="violet" href="https://github.com/sturdy-dev/codeball-action">
+			<Button color="orange" href="https://github.com/sturdy-dev/codeball-action">
 				Get started
 			</Button>
-			<Button color="lime" href="/approver">Try the demo</Button>
+			<Button color="violet" href="/approver">Try the demo</Button>
 		</div>
 	</slot>
 	<slot slot="right">
@@ -61,7 +61,7 @@
 	</slot>
 </Hero>
 
-<div class="flex w-full flex-col items-center overflow-hidden bg-lime-50 pt-16">
+<div class="flex w-full flex-col items-center overflow-hidden bg-orange-50 pt-16">
 	<div class="flex w-full justify-around px-8">
 		<div class="w-full max-w-7xl space-y-4 text-lg">
 			<h1 class="text-5xl font-bold text-gray-800">
@@ -143,8 +143,12 @@
 		</div>
 	</FeatureBox>
 
-	<div class="flex w-full flex-col items-center gap-4 p-8 py-16 font-mono">
-		<p>Test Codeball for yourself, with the Codeball web demo</p>
+	<div class="flex w-full flex-col items-center gap-4 py-16 font-mono">
+		<p class="items-center gap-4 md:inline-flex">
+			Test Codeball for yourself, with the online demo <span class="hidden text-2xl md:inline-block"
+				>⤵️</span
+			>
+		</p>
 		<div class="w-full lg:w-1/2">
 			<AnalyzeForm />
 		</div>