From 8ed5563806c70ac9b14f958d4d57df6a79114d78 Mon Sep 17 00:00:00 2001
From: christian <christian@rannes.dev>
Date: Tue, 6 May 2025 00:48:42 +0200
Subject: [PATCH] dynamic sizing

---
 src/routes/+layout.svelte    |  2 +-
 src/routes/JobCard.svelte    | 14 +++++++-------
 src/routes/PageHeader.svelte |  4 ++--
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 251a765..adb900e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,6 +4,6 @@
 	let { children } = $props();
 </script>
 
-<div class="mx-4 my-8">
+<div class="mx-4 my-8 lg:mx-18 xl:mx-36 2xl:mx-52">
 	{@render children()}
 </div>
diff --git a/src/routes/JobCard.svelte b/src/routes/JobCard.svelte
index 361e1ca..51a87a9 100644
--- a/src/routes/JobCard.svelte
+++ b/src/routes/JobCard.svelte
@@ -16,19 +16,19 @@
 
 <Card>
 	<div class="flex items-center gap-4">
-		<h2 class="mb-2 text-2xl tracking-tight">{title} @ {company}</h2>
-		<p class="text-sm text-slate-400">{start} - {end}</p>
+		<h2 class="mb-2 text-xl tracking-tight md:text-2xl">{title} @ {company}</h2>
+		<p class="text-xs text-slate-400 md:text-sm">{start} - {end}</p>
 	</div>
-	<h3 class="mt-6 text-2xl">Job Description</h3>
+	<h3 class="mt-6 text-xl md:text-2xl">Job Description</h3>
 	<p class="mt-4">
 		{jobDescription}
 	</p>
-	<h3 class="mt-6 text-2xl">Accomplishments</h3>
+	<h3 class="mt-6 text-xl md:text-2xl">Accomplishments</h3>
 	<ul class="mt-4 list-inside list-disc">
 		{#each accomplishments as accomplishment, i (i)}
-			<li class="mt-4 text-xl">
-				<span>{accomplishment.title}</span>
-				<p class="ml-5 text-base">{accomplishment.description}</p>
+			<li class="mt-4 md:text-xl">
+				<span class="underline md:no-underline">{accomplishment.title}</span>
+				<p class="mt-1 ml-4 text-base md:mt-2 md:ml-5">{accomplishment.description}</p>
 				<div class="mt-2 ml-5 flex gap-2">
 					{#each accomplishment.tags as tag, i (`${tag}-${i}`)}
 						<Badge>{tag}</Badge>
diff --git a/src/routes/PageHeader.svelte b/src/routes/PageHeader.svelte
index 49dda61..3b19498 100644
--- a/src/routes/PageHeader.svelte
+++ b/src/routes/PageHeader.svelte
@@ -9,8 +9,8 @@
 	<div class="flex justify-between">
 		<div class="my-4 flex flex-col justify-between gap-2">
 			<div>
-				<h1 class="text-4xl tracking-tight">Developer Resume For Christian Rannes</h1>
-				<h2 class="text-xl text-slate-400">
+				<h1 class="text-2xl tracking-tight md:text-4xl">Developer Resume For Christian Rannes</h1>
+				<h2 class="text-slate-400 md:text-xl">
 					Full Stack Developer Passionate about infrastructure, DevOps and Developer Experience
 				</h2>
 			</div>