gazesys/website
gazesys/website
1
0
Fork 1
Code Actions Releases1 Activity

feat: more tooltips

Browse Source
This commit is contained in:
dusk 2025-04-02 07:30:55 +03:00
parent e76819be04
commit 25ee5d47e3
Signed by: dusk
SSH Key Fingerprint: SHA256:Abmvag+juovVufZTxyWY8KcVgrznxvBjQpJesv071Aw
1 changed files with 27 additions and 10 deletions

37
src/routes/+page.svelte

@ -4,6 +4,7 @@
import Window from '../components/window.svelte'; import Window from '../components/window.svelte';
import LatestStuff from './lateststuff.md'; import LatestStuff from './lateststuff.md';
import { renderDate, renderRelativeDate } from '$lib/dateFmt'; import { renderDate, renderRelativeDate } from '$lib/dateFmt';
import Tooltip from '../components/tooltip.svelte';
interface Props { interface Props {
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
@ -34,14 +35,20 @@
{/each} {/each}
</div> </div>
<div class="flex flex-grow"> <div class="flex flex-grow">
<div class="w-36 [padding:8px] place-content-center place-self-center bg-ralsei-black/20"> <Tooltip>
<img {#snippet tooltipContent()}
class="w-36 u-photo hover:invert transition-all [transition-duration:300ms]" that's me! my angelsona :3c
src="/pfp-iojkqpwerojnasduijf.webp" {/snippet}
alt="my angelsona" <div
title="that's me! my angelsona :3c" class="w-36 [padding:8px] place-content-center place-self-center bg-ralsei-black/20"
/> >
</div> <img
class="w-36 u-photo hover:invert transition-all [transition-duration:300ms]"
src="/pfp-iojkqpwerojnasduijf.webp"
alt="my angelsona"
/>
</div>
</Tooltip>
<div <div
class="flex flex-row flex-grow place-content-center ml-1.5 [padding:8px] bg-ralsei-black/20" class="flex flex-row flex-grow place-content-center ml-1.5 [padding:8px] bg-ralsei-black/20"
> >
@ -49,8 +56,18 @@
class="place-self-center m-0 mr-4 [padding-left:1em] sm:[padding-left:0.5em] leading-none marker:[content:'->'] [list-style-type:'->']" class="place-self-center m-0 mr-4 [padding-left:1em] sm:[padding-left:0.5em] leading-none marker:[content:'->'] [list-style-type:'->']"
> >
<li class="[list-style-type:'->'] p-note">trying to do stuff</li> <li class="[list-style-type:'->'] p-note">trying to do stuff</li>
<li class="[list-style-type:'->'] p-note" title="angelrobotdollpuppything"> <li class="[list-style-type:'->'] p-note">
is a thing (it/they) <Tooltip
x="translate-x-none"
y="translate-y-none"
targetX="group-hover:translate-x-[80%]"
targetY="group-hover:-translate-y-[70%]"
>
{#snippet tooltipContent()}
angelrobotdollpuppything
{/snippet}
is a thing (it/they)
</Tooltip>
</li> </li>
<li class="[list-style-type:'->']"> <li class="[list-style-type:'->']">
<span class="p-category">software engineer</span>, <span class="p-category">software engineer</span>,