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

feat: make everything use the banding (no worky on firefox)

Browse Source
This commit is contained in:
dusk 2024-09-18 18:18:00 +03:00
parent e97d51b5ed
commit 271f754ee1
Signed by: dusk
SSH Key Fingerprint: SHA256:Abmvag+juovVufZTxyWY8KcVgrznxvBjQpJesv071Aw
2 changed files with 40 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/window.svelte
View File

@ -13,20 +13,30 @@
>
<div
class="
flex
p-1 border-ralsei-white border-8
bg-gradient-to-l from-ralsei-pink-neon to-75%
bg-gradient-to-l from-ralsei-pink-neon to-ralsei-black to-75%
"
style="border-style: hidden hidden ridge hidden;"
>
<h1 class="font-monospace text-xl text-ralsei-pink-regular grow justify-self-start self-center">
{title}
</h1>
{#if iconUri !== ''}
<img class="justify-self-end self-center max-h-7" style="image-rendering: pixelated;" src={iconUri} alt={iconUri} />
{/if}
<div class="flex bg-opacity-100 pixelate-bg">
<h1
class="font-monospace text-xl text-ralsei-pink-regular grow justify-self-start self-center"
>
{title}
</h1>
{#if iconUri !== ''}
<img
class="justify-self-end self-center max-h-7"
style="image-rendering: pixelated;"
src={iconUri}
alt={iconUri}
/>
{/if}
</div>
</div>
<div class="p-2 bg-gradient-to-tl to-ralsei-pink-neon/15 from-ralsei-pink-regular/20">
<slot />
<div class="bg-opacity-100 pixelate-bg">
<slot />
</div>
</div>
</div>

34
src/routes/+layout.svelte
View File

@ -85,12 +85,12 @@
</filter>
{/each}
<filter id="pixelate" color-interpolation-filters="linearRGB" x="0" y="0">
<feFlood x="4" y="4" height="2" width="2"/>
<feComposite width="10" height="10"/>
<feTile result="a"/>
<feComposite in="SourceGraphic" in2="a" operator="in"/>
<feMorphology operator="dilate" radius="5"/>
</filter>
<feFlood x="4" y="4" height="2" width="2" />
<feComposite width="10" height="10" />
<feTile result="a" />
<feComposite in="SourceGraphic" in2="a" operator="in" />
<feMorphology operator="dilate" radius="5" />
</filter>
<filter id="dither" color-interpolation-filters="sRGB" x="0" y="0" width="100%" height="100%">
<feImage
width="4"
@ -105,7 +105,14 @@
<feFuncB type="discrete" tableValues="0 1" />
</feComponentTransfer>
</filter>
<filter id="dither-red" color-interpolation-filters="sRGB" x="0" y="0" width="100%" height="100%">
<filter
id="dither-red"
color-interpolation-filters="sRGB"
x="0"
y="0"
width="100%"
height="100%"
>
<feFlood flood-color="#000000" flood-opacity="0.50" x="0%" y="0%" result="flood" />
<feBlend mode="normal" x="0%" y="0%" in="SourceGraphic" in2="flood" result="blend1" />
<feImage
@ -137,16 +144,17 @@
<nav class="w-full min-h-[5vh] max-h-[6vh] fixed bottom-0 z-10 bg-ralsei-black">
<div
class="
max-w-full max-h-fit p-1 overflow-auto
grid grid-flow-col grid-rows-1 gap-2 justify-start
max-w-full max-h-fit p-1
border-ralsei-white border-8
bg-gradient-to-r to-ralsei-pink-neon/30 from-ralsei-pink-regular/20 from-30%
"
style="border-style: ridge hidden hidden hidden;"
>
{#each menuItems as item}
{@const highlight = isRoute(item.href)}
<NavButton {highlight} {...item} />
{/each}
<div class="bg-opacity-100 pixelate-bg flex flex-row flex-nowrap gap-2 justify-start overflow-auto">
{#each menuItems as item}
{@const highlight = isRoute(item.href)}
<NavButton {highlight} {...item} />
{/each}
</div>
</div>
</nav>