satr14/5th-site-expanded
1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor

Browse source
This commit is contained in:
SX-9 2024-11-17 09:25:44 +07:00
commit e78b646200
1 changed files with 17 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/routes/+page.svelte
View file

@ -27,10 +27,10 @@
<article> <article>
<h1>{data.subtitle}</h1> <h1>{data.subtitle}</h1>
<p>{data.description}</p> <p>{data.description}</p>
<p class="text-sm italic"> <p class="text-sm"><i>
<b>{days || 'Today'}</b> { days ? 'day' + (days === 1 ? '' : 's') + ' until my birthday.' : 'is my birthday!' } <b>{days || 'Today'}</b> { days ? 'day' + (days === 1 ? '' : 's') + ' until my birthday.' : 'is my birthday!' }
It's <b>{time}</b> for me. It's <b>{time}</b> for me.
</p> </i></p>
<p class="flex flex-wrap gap-2 text-sm"> <p class="flex flex-wrap gap-2 text-sm">
{#each data.skills as skill} {#each data.skills as skill}
<a href={'https://google.com/search?q='+skill} target="_blank" class="bg-slate-900 text-sky-100 hover:bg-slate-800 px-2 py-1 rounded-full no-underline text-xs sm:text-sm">{skill}</a> <a href={'https://google.com/search?q='+skill} target="_blank" class="bg-slate-900 text-sky-100 hover:bg-slate-800 px-2 py-1 rounded-full no-underline text-xs sm:text-sm">{skill}</a>
@ -58,7 +58,7 @@
<p class="m-0">{repo.desc}</p> <p class="m-0">{repo.desc}</p>
</div> </div>
<div class="text-right"> <div class="text-right">
{#if repo.lang}<span class="italic">{repo.lang}</span>{/if}<br> {#if repo.lang}<i>{repo.lang}</i>{/if}<br>
{#if repo.stars}<span class="text-yellow-200"><b>{repo.stars}</b> star{repo.stars>1?'s':''}</span>{/if} {#if repo.stars}<span class="text-yellow-200"><b>{repo.stars}</b> star{repo.stars>1?'s':''}</span>{/if}
</div> </div>
</div> </div>
@ -67,20 +67,20 @@
</section> </section>
<section> <section>
<h2 class="italic font-normal mt-8 text-base sm:text-lg flex justify-between items-center"> <h2 class="italic font-normal mt-8 text-base sm:text-lg flex justify-between items-center">
<span>@<span class="underline">{data.fetched.discord.username}</span></span> <span>@<u>{data.fetched.discord.username}</u></span>
<span class="data-[status=idle]:text-yellow-200 data-[status=dnd]:text-red-200 data-[status=online]:text-green-200" data-status={data.fetched.discord.status}><b>{data.fetched.discord.status}</b></span> <span class="data-[status=idle]:text-yellow-200 data-[status=dnd]:text-red-200 data-[status=online]:text-green-200" data-status={data.fetched.discord.status}><b>{data.fetched.discord.status}</b></span>
</h2> </h2>
<div class="flex flex-wrap sm:justify-evenly my-4"> <div class="flex flex-wrap sm:justify-evenly my-4">
{#if data.fetched.discord.spotify.song} {#if data.fetched.discord.spotify.song}
<div class="m-4"> <div class="m-4">
<span class="italic text-sm">Listening to <b>Spotify</b></span>
<div class="flex gap-2 items-center"> <div class="flex gap-2 items-center">
<img class="size-12 rounded-md" src={data.fetched.discord.spotify.art} alt="album art"> <img class="size-12 rounded-md" src={data.fetched.discord.spotify.art} alt="album art">
<div class="max-w-64 truncate"> <div class="max-w-64 truncate">
<h3 class="my-0 inline"><a href={data.fetched.discord.spotify.link}>{data.fetched.discord.spotify.song}</a></h3> <h3 class="my-0 inline"><a href={data.fetched.discord.spotify.link}>{data.fetched.discord.spotify.song}</a></h3>
<br><span class="italic">{data.fetched.discord.spotify.artist}</span> <br><i>{data.fetched.discord.spotify.artist}</i>
</div> </div>
</div> </div>
<span class="italic text-sm">Listening to <b>Spotify</b></span>
</div> </div>
{/if} {/if}
{#each data.fetched.discord.activity as activity} {#each data.fetched.discord.activity as activity}
@ -94,17 +94,19 @@
<img class="size-6 rounded-full absolute -bottom-1 -right-1" src={activity.images.small} alt="small"> <img class="size-6 rounded-full absolute -bottom-1 -right-1" src={activity.images.small} alt="small">
{/if} {/if}
</div> </div>
<span class="italic text-sm"> <span class="text-sm">
Started {timeAgo(activity.started)} <h3 class="my-0 inline text-lg"><b>{activity.name}</b></h3>
{#if activity.state} <i>
<br>{activity.state} {#if activity.state}
{/if} <br>{activity.state}
{#if activity.details} {/if}
<br>{activity.details} {#if activity.details}
{/if} <br>{activity.details}
{/if}
</i>
</span> </span>
</div> </div>
<span class="italic text-sm">Playing <b>{activity.name}</b></span> <span class="text-sm"><i>Started {timeAgo(activity.started)}</i></span>
</div> </div>
{/each} {/each}
</div> </div>