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

feat: hide one blinkie if screen is small, fix picture stretching

Browse Source
This commit is contained in:
dusk 2024-12-03 14:23:43 +03:00
parent f2a028707d
commit b7071e4c92
Signed by: dusk
SSH Key Fingerprint: SHA256:Abmvag+juovVufZTxyWY8KcVgrznxvBjQpJesv071Aw
1 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/routes/+page.svelte
View File

@ -11,25 +11,28 @@
<div class="flex flex-col gap-y-2 lg:gap-y-0"> <div class="flex flex-col gap-y-2 lg:gap-y-0">
<Window title="readme?" iconUri="/icons/question.png"> <Window title="readme?" iconUri="/icons/question.png">
<div class="flex flex-col prose prose-ralsei prose-img:m-0 leading-none"> <div class="flex flex-col prose prose-ralsei prose-img:m-0 leading-none">
<div class="flex flex-row gap-2 mb-2 mx-auto overflow-x-scroll"> <div class="flex flex-row gap-2 mb-2 mx-auto overflow-hidden">
{#each data.banners as bannerNo} {#each data.banners as bannerNo, index}
<img width=150 height=20 alt="banner" class="w-[150px] h-[20px] [image-rendering:pixelated_!important]" src="/banners/{bannerNo}.gif"> {@const hideIfMobile = index === data.banners.length - 1}
<img width=150 height=20 alt="banner" class="{hideIfMobile ? "hidden" : ""} sm:inline w-[150px] [height:20px] [image-rendering:pixelated_!important]" src="/banners/{bannerNo}.gif">
{/each} {/each}
</div> </div>
<div class="flex flex-grow"> <div class="flex flex-grow">
<Tooltip x="-translate-x-[40%]" targetX="group-hover:-translate-x-[10%]"> <div class="w-36 [height:9rem] bg-ralsei-black bg-opacity-40 place-content-center">
<svelte:fragment slot="tooltipContent">character from q.u.q. (good vn go read it NOW)</svelte:fragment> <Tooltip x="-translate-x-[40%]" targetX="group-hover:-translate-x-[10%]">
<img <svelte:fragment slot="tooltipContent">character from q.u.q. (good vn go read it NOW)</svelte:fragment>
class="mt-1 ml-1 w-36 [height:9rem] u-photo" <img
src="/pfp.png" class="w-36 u-photo"
alt="character from q.u.q." src="/pfp.png"
/> alt="character from q.u.q."
</Tooltip> />
</Tooltip>
</div>
<ul <ul
class="place-self-center m-0 leading-none marker:[content:'->'] [list-style-type:'->']" class="place-self-center m-0 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">is a thing</li> <li class="[list-style-type:'->'] p-note">is a thing that exists</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>,
<span class="p-category">indie game dev</span> <span class="p-category">indie game dev</span>