Fix some more styling issues

src/_button.scss

@@ -3,6 +3,7 @@
 	flex-direction: row;
 	align-items: center;
 	justify-content: center;
+	gap: 0.25rem;
 	color: $color-text;
 	font-weight: 600;
 	text-decoration: none;
@@ -13,8 +14,8 @@
 	transition: all var(--animation-speed) var(--animation-type);
 	user-select: none;
 
-	:hover,
-	:focus-visible {
+	&:hover,
+	&:focus-visible {
 		opacity: 1;
 		text-decoration-color: unset;
 	}

src/app.scss

@@ -50,7 +50,6 @@ body {
 * {
 	margin: 0;
 	padding: 0;
-	font-weight: normal;
 }
 body {
 	line-height: 1.5;

src/routes/+page.svelte

@@ -12,7 +12,8 @@
 	} from 'phosphor-svelte';
 </script>
 
-<picture>
+<div data-pagefind-body>
+	<picture>
 		<source srcset={Avif} type="image/avif" />
 		<source srcset={WebP} type="image/webp" />
 		<img
@@ -21,11 +22,11 @@
 			alt="Kaan, wearing a beanie, in front of some shrubbery."
 			style="max-width:20rem"
 		/>
-</picture>
+	</picture>
 
-<h1>Kaan Barmore-Genç</h1>
+	<h1>Kaan Barmore-Genç</h1>
 
-<p>
+	<p>
 		Hi! I'm a software engineer with a diverse technical toolkit: Linux enthusiast, polyglot
 		programmer, home chef, and (when time allows) an amateur cyclist. Currently, I'm building
 		microservices and polished UIs at <a
@@ -33,26 +34,26 @@
 			rel="noreferrer"
 			href="https://tailwindapp.com">Tailwind</a
 		> alongside a fantastic team.
-</p>
+	</p>
 
-<p>
+	<p>
 		My focus is building seamless web applications, and I excel in both front-end and back-end
-	development. My experience includes TypeScript, React, SvelteKit, TailwindCSS, Rust, Docker, SQL,
-	and AWS technologies (DynamoDB, Lambda, EventBridge, and more).
-</p>
+		development. My experience includes TypeScript, React, SvelteKit, TailwindCSS, Rust, Docker,
+		SQL, and AWS technologies (DynamoDB, Lambda, EventBridge, and more).
+	</p>
 
-<p>
+	<p>
 		I'm an active contributor to the open-source world: check out my <a
 			href="https://github.com/SeriousBug"
 			target="_blank"
 			rel="noreferrer me">Github profile</a
-	>! For a closer look at my work, visit my <a href="/portfolio/">portfolio</a> where I highlight my
-	favorite projects. I sometimes write about the tools I use or challenges I've solved on my
-	<a href="/posts/">blog</a>. I'm always open to feedback, reach out to me through my socials linked
-	below.
-</p>
+		>! For a closer look at my work, visit my <a href="/portfolio/">portfolio</a> where I highlight
+		my favorite projects. I sometimes write about the tools I use or challenges I've solved on my
+		<a href="/posts/">blog</a>. I'm always open to feedback, reach out to me through my socials
+		linked below.
+	</p>
 
-<ul class="socials">
+	<ul class="socials">
 		<li>
 			<a target="_blank" rel="noreferrer me" href="mailto:kaan@bgenc.net">
 				<EnvelopeSimple aria-hidden />
@@ -83,7 +84,8 @@
 				<span>CV</span>
 			</a>
 		</li>
-</ul>
+	</ul>
+</div>
 
 <style lang="scss">
 	@import '../vars';

src/routes/[slug]/+page.svelte

@@ -4,7 +4,7 @@
 	export let data;
 </script>
 
-<article>
+<article data-pagefind-body>
 	<h1>{data.title}</h1>
 	<time datetime={data.date}>
 		{format(new Date(data.date), 'MMMM d, yyyy')}