Adding LinkedIn to the council profile (#106)

* Adding LinkedIn to the council profile

* Make cursor become pointer when clicking X

* LinkedIn fill and stroke

src/app.css

@@ -71,7 +71,7 @@ h1 {
 }
 
 h2 {
-	@apply py-3 text-xl font-bold md:text-2xl;
+	@apply py-1.5 text-xl font-bold md:text-2xl;
 }
 
 .page-title {

src/components/council/CouncilCardPopUp.svelte

@@ -6,10 +6,12 @@
 		positionDescription,
 		yearProgram,
 		image,
+		linkedin,
 		onClose,
 		id = 'popup-title'
 	} = $props();
-	import { Mail, X } from '@lucide/svelte';
+	import { Linkedin, Mail, X } from '@lucide/svelte';
+	import Link from 'components/Link.svelte';
 
 	function getInitials(name: string | null | undefined): string {
 		if (name == null || typeof name !== 'string') return '';
@@ -36,7 +38,7 @@
 	<button
 		type="button"
 		onclick={onClose}
-		class="bg-ecsess-650 text-ecsess-50 hover:bg-ecsess-550 focus:ring-ecsess-500 focus:ring-offset-ecsess-900 absolute top-3 right-3 z-10 flex size-8 items-center justify-center rounded-full transition focus:ring-2 focus:ring-offset-2 focus:outline-none md:size-9"
+		class="bg-ecsess-650 text-ecsess-50 hover:bg-ecsess-550 focus:ring-ecsess-500 focus:ring-offset-ecsess-900 absolute top-3 right-3 z-10 flex size-8 items-center justify-center rounded-full transition hover:cursor-pointer focus:ring-2 focus:ring-offset-2 focus:outline-none"
 		aria-label="Close"
 	>
 		<X class="size-4 md:size-5" />
@@ -70,9 +72,11 @@
 	</div>
 
 	<!-- Information: below photo on small, right on md+ -->
-	<div class="flex min-w-0 flex-1 flex-col justify-center p-4 md:p-6">
+	<div class="flex min-w-0 flex-1 flex-col justify-center p-0 px-4 md:p-6">
-		<h2 {id} class="text-ecsess-50 text-lg leading-tight font-bold md:text-2xl">{name}</h2>
+		<div class="flex flex-wrap items-center justify-center gap-2">
-		<p class="text-ecsess-200 -mt-0.5 text-sm italic md:text-base">{position}</p>
+			<h2 {id} class="text-ecsess-50 mt-2 text-lg leading-tight font-bold md:text-2xl">{name}</h2>
+		</div>
+		<p class="text-ecsess-200 mt-0.5 text-sm italic md:text-base">{position}</p>
 
 		{#if positionDescription}
 			<div class="border-ecsess-700/60 mt-3 border-t pt-3 md:mt-4 md:pt-4">
@@ -82,10 +86,12 @@
 			</div>
 		{/if}
 
-		{#if email}
+		{#if email || linkedin}
 			<div
-				class="border-ecsess-700/60 mt-3 flex flex-row items-center justify-center gap-2 border-t pt-3 text-center md:mt-4 md:pt-4"
+				class="border-ecsess-700/60 mt-2 mb-4 flex flex-col items-center justify-center gap-1 border-t pt-3 text-center md:mb-0 md:pt-4"
 			>
+				{#if email}
+					<div class="flex items-center justify-center gap-2">
 						<Mail class="text-ecsess-300 size-4 shrink-0" aria-hidden="true" />
 						<a
 							href="mailto:{email}"
@@ -95,5 +101,22 @@
 						</a>
 					</div>
 				{/if}
+				{#if linkedin}
+					<div class="flex items-center justify-center gap-2">
+						<Linkedin
+							class="stroke-ecsess-300 size-4 fill-transparent stroke-2"
+							aria-hidden="true"
+						/>
+						<Link
+							href={linkedin}
+							external
+							class="text-ecsess-200 decoration-ecsess-500 hover:text-ecsess-50 hover:decoration-ecsess-400 text-sm font-medium break-all underline underline-offset-2 md:text-base"
+						>
+							LinkedIn
+						</Link>
+					</div>
+				{/if}
+			</div>
+		{/if}
 	</div>
 </div>

src/lib/schemas.ts

@@ -53,6 +53,7 @@ export type CouncilMember = {
 	positionDescription: string;
 	image: string; // URL
 	yearProgram: string;
+	linkedin?: string; // URL to profile, optional
 };
 
 export type Resource = {

src/routes/council/+page.server.ts

@@ -11,7 +11,8 @@ const councilQuery = `{
     position,
     positionDescription,
     "image": image.asset->url+"?h=360&fm=webp",
-    yearProgram
+    yearProgram,
+    linkedin
   },
   "councilGoofyPic": *[_type == "homepage"]{
     "url": councilGoofyPic.asset->url+"?h=1200&fm=webp" 

src/routes/council/+page.svelte

@@ -197,6 +197,7 @@
 					positionDescription={selectedMember.positionDescription}
 					yearProgram={selectedMember.yearProgram}
 					image={selectedMember.image}
+					linkedin={selectedMember.linkedin}
 					onClose={closeModal}
 				/>
 			</div>