Minor styling changes

jackreimers · Jan 20, 2024 · 7157456 · 7157456
1 parent fc09c29
commit 7157456
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 12 deletions.
diff --git a/src/lib/components/layout/footer.svelte b/src/lib/components/layout/footer.svelte
@@ -8,18 +8,20 @@
 
 <footer class="mt-32">
 	<div class="flex w-full justify-center gap-3">
-		<Button classes="rounded-full bg-gray-100 p-4 hover:bg-gray-200">
+		<Button
+			classes="transform rounded-full bg-gray-100 p-4 transition-all hover:translate-y-[-5px] hover:bg-gray-200"
+		>
 			<Mail />
 		</Button>
 		<Button
 			href="https://www.linkedin.com/in/jackreimers/"
-			classes="rounded-full bg-gray-100 p-4 hover:bg-gray-200"
+			classes="transform rounded-full bg-gray-100 p-4 transition-all hover:translate-y-[-5px] hover:bg-gray-200"
 		>
 			<Linkedin />
 		</Button>
 		<Button
 			href="https://github.com/jackreimers"
-			classes="rounded-full bg-gray-100 p-4 hover:bg-gray-200"
+			classes="transform rounded-full bg-gray-100 p-4 transition-all hover:translate-y-[-5px] hover:bg-gray-200"
 		>
 			<Github />
 		</Button>

diff --git a/src/lib/components/layout/header.svelte b/src/lib/components/layout/header.svelte
@@ -31,11 +31,6 @@
 			<Button href="/" classes="p-2 hover:bg-gray-100">
 				<Home strokeWidth="3" />
 			</Button>
-			<!--
-            <Button onClick={() => {}}>
-                <Icon icon="dark_mode" classes="text-4xl text-gb" />
-            </Button>
-            -->
 			<Button onClick={() => {}} classes="p-2 hover:bg-gray-100">
 				<Menu strokeWidth="3" />
 			</Button>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -22,7 +22,7 @@
 	</p>
 </div>
 <div class="flex flex-col gap-4">
-	<Button href="blog" classes="group flex bg-gray-100 px-3.5 py-2.5">
+	<Button href="blog" classes="group flex bg-gray-100 px-3.5 py-2.5 hover:bg-gray-200">
 		<span class="flex flex-1 flex-col">
 			<span class="font-semibold">Blog</span>
 			<span class="text-sm text-gray-500">Read my latest posts.</span>
@@ -33,7 +33,7 @@
 			<MoveRight />
 		</span>
 	</Button>
-	<Button href="projects" classes="group flex bg-gray-100 px-3.5 py-2.5">
+	<Button href="projects" classes="group flex bg-gray-100 px-3.5 py-2.5 hover:bg-gray-200">
 		<span class="flex flex-1 flex-col">
 			<span class="font-semibold">Projects</span>
 			<span class="text-sm text-gray-500">See my past projects.</span>
@@ -44,7 +44,7 @@
 			<MoveRight />
 		</span>
 	</Button>
-	<Button href="about" classes="group flex bg-gray-100 px-3.5 py-2.5">
+	<Button href="about" classes="group flex bg-gray-100 px-3.5 py-2.5 hover:bg-gray-200">
 		<span class="flex flex-1 flex-col">
 			<span class="font-semibold">About</span>
 			<span class="text-sm text-gray-500">Learn more about me.</span>

diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
@@ -43,7 +43,7 @@
 			</Button>
 		</div>
 	</div>
-	<div class="rounded bg-gray-50 p-4 md:flex-1">
+	<div class="rounded bg-gray-100 p-4 md:flex-1">
 		<p class="mb-5">
 			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
 			incididunt ut labore et dolore magna aliqua. Posuere urna nec tincidunt praesent semper