notkaramel/ECSESS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Linting of styling issues

Browse Source
This commit is contained in:
Antoine Phan
2026-02-03 11:26:30 -05:00
parent ae398b3d37
commit d6d1717222
3 changed files with 32 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/council/CouncilCard.svelte
View File

@@ -10,16 +10,16 @@
</script> </script>
<article <article
class="group grid h-full min-w-0 grid-rows-[auto_1fr] overflow-hidden rounded-xl bg-ecsess-800 shadow-md ring-2 ring-ecsess-500/50 ring-offset-2 ring-offset-ecsess-900 transition-all duration-500 ease-out hover:ring-ecsess-300 hover:shadow-xl hover:shadow-ecsess-400/50 focus-within:ring-2 focus-within:ring-ecsess-300 focus-within:ring-offset-2 focus-within:ring-offset-ecsess-900 {featured class="group bg-ecsess-800 ring-ecsess-500/50 ring-offset-ecsess-900 hover:ring-ecsess-300 hover:shadow-ecsess-400/50 focus-within:ring-ecsess-300 focus-within:ring-offset-ecsess-900 grid h-full min-w-0 grid-rows-[auto_1fr] overflow-hidden rounded-xl shadow-md ring-2 ring-offset-2 transition-all duration-500 ease-out focus-within:ring-2 focus-within:ring-offset-2 hover:shadow-xl {featured
? 'w-full max-w-[14rem] sm:max-w-[16rem]' ? 'w-full max-w-[14rem] sm:max-w-[16rem]'
: 'w-full max-w-[14rem] sm:max-w-[16rem]'}" : 'w-full max-w-[14rem] sm:max-w-[16rem]'}"
> >
<div <div
class="relative flex aspect-square w-full min-h-0 items-center justify-center overflow-hidden bg-ecsess-700" class="bg-ecsess-700 relative flex aspect-square min-h-0 w-full items-center justify-center overflow-hidden"
> >
{#if tag} {#if tag}
<span <span
class="absolute right-2 top-2 z-[1] rounded-md bg-ecsess-600 px-2 py-1 text-xs font-semibold uppercase tracking-wide text-ecsess-50 shadow-md ring-1 ring-ecsess-400/60" class="bg-ecsess-600 text-ecsess-50 ring-ecsess-400/60 absolute top-2 right-2 z-[1] rounded-md px-2 py-1 text-xs font-semibold tracking-wide uppercase shadow-md ring-1"
> >
{tag} {tag}
</span> </span>
@@ -32,20 +32,20 @@
onerror={handleImageError} onerror={handleImageError}
/> />
{:else} {:else}
<span class="text-4xl font-bold text-ecsess-150 sm:text-5xl" aria-hidden="true"> <span class="text-ecsess-150 text-4xl font-bold sm:text-5xl" aria-hidden="true">
{getInitials(name)} {getInitials(name)}
</span> </span>
{/if} {/if}
</div> </div>
<div class="flex flex-col items-center justify-center gap-2 p-3 text-center sm:p-4"> <div class="flex flex-col items-center justify-center gap-2 p-3 text-center sm:p-4">
<h3 class="w-full text-base font-bold leading-tight text-ecsess-50 line-clamp-2 sm:text-lg"> <h3 class="text-ecsess-50 line-clamp-2 w-full text-base leading-tight font-bold sm:text-lg">
{name} {name}
</h3> </h3>
<p class="w-full text-xs italic text-ecsess-200 line-clamp-2 sm:text-sm">{position}</p> <p class="text-ecsess-200 line-clamp-2 w-full text-xs italic sm:text-sm">{position}</p>
<button <button
type="button" type="button"
onclick={onViewProfile} onclick={onViewProfile}
class="mt-1 w-full rounded-lg bg-ecsess-500 px-3 py-2 text-xs font-semibold text-ecsess-950 shadow-md transition hover:bg-ecsess-400 hover:text-ecsess-50 focus:outline-none focus:ring-2 focus:ring-ecsess-300 focus:ring-offset-2 focus:ring-offset-ecsess-800 sm:text-sm" class="bg-ecsess-500 text-ecsess-950 hover:bg-ecsess-400 hover:text-ecsess-50 focus:ring-ecsess-300 focus:ring-offset-ecsess-800 mt-1 w-full rounded-lg px-3 py-2 text-xs font-semibold shadow-md transition focus:ring-2 focus:ring-offset-2 focus:outline-none sm:text-sm"
> >
View profile View profile
</button> </button>

26
src/components/council/CouncilCardPopUp.svelte
View File

@@ -21,14 +21,14 @@
</script> </script>
<div <div
class="relative flex w-full max-w-xl flex-col overflow-hidden rounded-2xl border border-ecsess-650/70 bg-ecsess-900 shadow-2xl text-ecsess-100 md:max-w-2xl md:flex-row" class="border-ecsess-650/70 bg-ecsess-900 text-ecsess-100 relative flex w-full max-w-xl flex-col overflow-hidden rounded-2xl border shadow-2xl md:max-w-2xl md:flex-row"
transition:scale transition:scale
role="article" role="article"
> >
<button <button
type="button" type="button"
onclick={onClose} onclick={onClose}
class="absolute right-3 top-3 z-10 flex size-8 items-center justify-center rounded-full bg-ecsess-650 text-ecsess-50 transition hover:bg-ecsess-550 focus:outline-none focus:ring-2 focus:ring-ecsess-500 focus:ring-offset-2 focus:ring-offset-ecsess-900 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 focus:ring-2 focus:ring-offset-2 focus:outline-none md:size-9"
aria-label="Close" aria-label="Close"
> >
<X class="size-4 md:size-5" /> <X class="size-4 md:size-5" />
@@ -36,10 +36,10 @@
<!-- Photo block: top on small, left on md+ --> <!-- Photo block: top on small, left on md+ -->
<div <div
class="flex shrink-0 flex-col items-center justify-center border-b border-ecsess-700/60 bg-ecsess-850 p-4 md:min-w-[11rem] md:border-b-0 md:border-r md:border-ecsess-700/60 md:p-6" class="border-ecsess-700/60 bg-ecsess-850 md:border-ecsess-700/60 flex shrink-0 flex-col items-center justify-center border-b p-4 md:min-w-[11rem] md:border-r md:border-b-0 md:p-6"
> >
<div <div
class="flex w-24 aspect-[4/5] items-center justify-center overflow-hidden rounded-lg bg-ecsess-750 shadow-inner ring-1 ring-ecsess-650/60 md:w-40 md:rounded-xl" class="bg-ecsess-750 ring-ecsess-650/60 flex aspect-[4/5] w-24 items-center justify-center overflow-hidden rounded-lg shadow-inner ring-1 md:w-40 md:rounded-xl"
> >
{#if image && !imageError} {#if image && !imageError}
<img <img
@@ -49,13 +49,13 @@
onerror={handleImageError} onerror={handleImageError}
/> />
{:else} {:else}
<span class="text-xl font-bold text-ecsess-200 md:text-3xl" aria-hidden="true"> <span class="text-ecsess-200 text-xl font-bold md:text-3xl" aria-hidden="true">
{getInitials(name)} {getInitials(name)}
</span> </span>
{/if} {/if}
</div> </div>
{#if yearProgram} {#if yearProgram}
<p class="mt-2 text-center text-xs font-semibold uppercase tracking-wider text-ecsess-200"> <p class="text-ecsess-200 mt-2 text-center text-xs font-semibold tracking-wider uppercase">
{yearProgram} {yearProgram}
</p> </p>
{/if} {/if}
@@ -63,12 +63,12 @@
<!-- Information: below photo on small, right on md+ --> <!-- 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-4 md:p-6">
<h2 {id} class="text-lg font-bold leading-tight text-ecsess-50 md:text-2xl">{name}</h2> <h2 {id} class="text-ecsess-50 text-lg leading-tight font-bold md:text-2xl">{name}</h2>
<p class="-mt-0.5 text-sm italic text-ecsess-200 md:text-base">{position}</p> <p class="text-ecsess-200 -mt-0.5 text-sm italic md:text-base">{position}</p>
{#if positionDescription} {#if positionDescription}
<div class="mt-3 border-t border-ecsess-700/60 pt-3 md:mt-4 md:pt-4"> <div class="border-ecsess-700/60 mt-3 border-t pt-3 md:mt-4 md:pt-4">
<p class="text-sm leading-relaxed text-ecsess-100 md:text-base"> <p class="text-ecsess-100 text-sm leading-relaxed md:text-base">
{positionDescription} {positionDescription}
</p> </p>
</div> </div>
@@ -76,12 +76,12 @@
{#if email} {#if email}
<div <div
class="mt-3 flex flex-row items-center justify-center gap-2 border-t border-ecsess-700/60 pt-3 text-center md:mt-4 md:pt-4" 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"
> >
<Mail class="size-4 shrink-0 text-ecsess-300" aria-hidden="true" /> <Mail class="text-ecsess-300 size-4 shrink-0" aria-hidden="true" />
<a <a
href="mailto:{email}" href="mailto:{email}"
class="break-all text-sm font-medium text-ecsess-200 underline decoration-ecsess-500 underline-offset-2 hover:text-ecsess-50 hover:decoration-ecsess-400 md:text-base" 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"
> >
{email} {email}
</a> </a>

24
src/routes/council/+page.svelte
View File

@@ -90,7 +90,7 @@
<!-- Hero --> <!-- Hero -->
<h1 class="page-title text-ecsess-50">Meet the ECSESS Council</h1> <h1 class="page-title text-ecsess-50">Meet the ECSESS Council</h1>
<figure class="mb-20 overflow-hidden rounded-2xl shadow-2xl ring-2 ring-ecsess-400/50"> <figure class="ring-ecsess-400/50 mb-20 overflow-hidden rounded-2xl shadow-2xl ring-2">
<img <img
src={data.councilGoofyPic.url} src={data.councilGoofyPic.url}
alt="ECSESS Council having fun" alt="ECSESS Council having fun"
@@ -102,11 +102,11 @@
{#if president} {#if president}
<section class="mb-12 w-full"> <section class="mb-12 w-full">
<div class="flex w-full items-center gap-4"> <div class="flex w-full items-center gap-4">
<div class="h-0.5 flex-1 bg-ecsess-300" aria-hidden="true"></div> <div class="bg-ecsess-300 h-0.5 flex-1" aria-hidden="true"></div>
<h2 class="shrink-0 text-xl font-semibold uppercase tracking-wider text-ecsess-100"> <h2 class="text-ecsess-100 shrink-0 text-xl font-semibold tracking-wider uppercase">
President President
</h2> </h2>
<div class="h-0.5 flex-1 bg-ecsess-300" aria-hidden="true"></div> <div class="bg-ecsess-300 h-0.5 flex-1" aria-hidden="true"></div>
</div> </div>
<div class="mt-4 flex justify-center"> <div class="mt-4 flex justify-center">
<CardCouncil <CardCouncil
@@ -123,11 +123,11 @@
<!-- Vice Presidents --> <!-- Vice Presidents -->
<section class="mb-20 w-full"> <section class="mb-20 w-full">
<div class="flex w-full items-center gap-4"> <div class="flex w-full items-center gap-4">
<div class="h-0.5 flex-1 bg-ecsess-300" aria-hidden="true"></div> <div class="bg-ecsess-300 h-0.5 flex-1" aria-hidden="true"></div>
<h2 class="shrink-0 text-2xl font-semibold uppercase tracking-wider text-ecsess-100"> <h2 class="text-ecsess-100 shrink-0 text-2xl font-semibold tracking-wider uppercase">
Vice Presidents Vice Presidents
</h2> </h2>
<div class="h-0.5 flex-1 bg-ecsess-300" aria-hidden="true"></div> <div class="bg-ecsess-300 h-0.5 flex-1" aria-hidden="true"></div>
</div> </div>
<div class="mt-8 flex flex-wrap justify-center gap-4"> <div class="mt-8 flex flex-wrap justify-center gap-4">
{#each vps as vp} {#each vps as vp}
@@ -148,11 +148,11 @@
<!-- Year Representatives --> <!-- Year Representatives -->
<section class="mb-20 w-full"> <section class="mb-20 w-full">
<div class="flex w-full items-center gap-4"> <div class="flex w-full items-center gap-4">
<div class="h-0.5 flex-1 bg-ecsess-300" aria-hidden="true"></div> <div class="bg-ecsess-300 h-0.5 flex-1" aria-hidden="true"></div>
<h2 class="shrink-0 text-2xl font-semibold uppercase tracking-wider text-ecsess-100"> <h2 class="text-ecsess-100 shrink-0 text-2xl font-semibold tracking-wider uppercase">
Year Representatives Year Representatives
</h2> </h2>
<div class="h-0.5 flex-1 bg-ecsess-300" aria-hidden="true"></div> <div class="bg-ecsess-300 h-0.5 flex-1" aria-hidden="true"></div>
</div> </div>
<div class="mt-8 flex flex-wrap justify-center gap-4"> <div class="mt-8 flex flex-wrap justify-center gap-4">
{#each ureps as urep} {#each ureps as urep}
@@ -173,11 +173,11 @@
<!-- Join CTA at bottom --> <!-- Join CTA at bottom -->
<section class="mt-4 mb-12 text-center"> <section class="mt-4 mb-12 text-center">
<p class="text-lg text-ecsess-200 sm:text-xl"> <p class="text-ecsess-200 text-lg sm:text-xl">
Like what you see? Like what you see?
<Link <Link
href="/join" href="/join"
class="font-semibold text-ecsess-50 underline decoration-ecsess-300 underline-offset-4 transition hover:text-ecsess-100 hover:decoration-ecsess-200" class="text-ecsess-50 decoration-ecsess-300 hover:text-ecsess-100 hover:decoration-ecsess-200 font-semibold underline underline-offset-4 transition"
> >
Join ECSESS and be part of the fun → Join ECSESS and be part of the fun →
</Link> </Link>