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> <script>
import { slide } from 'svelte/transition'; import { CircleArrowRight } from '@lucide/svelte';
import Button from './Button.svelte'; import Link from '././Link.svelte';
import Link from './Link.svelte';
let { title = '_Resource Title_', children, link = 'https://example.com' } = $props(); let { title = '_Resource Title_', children, link = 'https://example.com' } = $props();
</script> </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> <div class="h-fit w-xl px-4 bg-ecsess-50 rounded-lg relative">
<Link href={link}> <div class="grid grid-cols-[5fr_1fr]">
<div class="px-8 py-4"> <div class="flex flex-col items-start p-4">
<p class="text-ecsess-800 px-2 text-xl font-semibold lg:text-2xl"> <p class="text-ecsess-900 my-1 text-left text-xl font-semibold">
{title} {title}
</p>
<p class="text-ecsess-400 text-left">
{@render children()}
</p> </p>
<p class="text-ecsess-black pt-3 text-base font-normal lg:text-lg">{@render children()}</p>
</div> </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> </div>

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

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