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

resource card

Browse Source
This commit is contained in:
zzzmlssqnzzz
2025-09-04 16:16:33 -04:00
parent 744de83f3f
commit b3450c64a1
2 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/ResourceCard.svelte
View File

@@ -1,18 +1,23 @@
<script>
import { slide } from 'svelte/transition';
import Button from './Button.svelte';
import Link from './Link.svelte';
import { CircleArrowRight } from '@lucide/svelte';
import Link from '././Link.svelte';
let { title = '_Resource Title_', children, link = 'https://example.com' } = $props();
</script>
<div class="bg-ecsess-200 ring-6 ring-ecsess-600 hover:ring-ecsess-200/60 hover:shadow-3xl max-w-sm rounded-lg w-full transition-all" transition:slide>
<Link href={link}>
<div class="px-8 py-4">
<p class="text-ecsess-800 px-2 text-xl font-semibold lg:text-2xl">
{title}
<div class="h-fit w-xl px-4 bg-ecsess-50 rounded-lg relative">
<div class="grid grid-cols-[5fr_1fr]">
<div class="flex flex-col items-start p-4">
<p class="text-ecsess-900 my-1 text-left text-xl font-semibold">
{title}
</p>
<p class="text-ecsess-400 text-left">
{@render children()}
</p>
<p class="text-ecsess-black pt-3 text-base font-normal lg:text-lg">{@render children()}</p>
</div>
</Link>
<div class="absolute bottom-2 right-2">
<Link href={link}>
<CircleArrowRight size="42" class="stroke-ecsess-800 hover:stroke-ecsess-400 active:scale-90 transition duration-200 cursor-pointer"/>
</Link>
</div>
</div>
</div>

2
src/routes/resources/+page.svelte
View File

@@ -9,7 +9,7 @@
<Section>
<p class="page-title">Resources</p>
<div class="flex flex-col gap-8">
<div class="grid gap-4">
{#each data.resources as re}
<ResourceCard title={re.title} link={re.url}>
{re.description}