dusk/website
dusk/website
1
0
Fork 1
Code

refactor: use crisp rendering for images, minor code style change

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

74
src/routes/+layout.svelte
View File

@ -41,13 +41,7 @@
const title = getTitle(data.route);
const svgSquiggles = [
[2],
[3],
[2],
[3],
[1],
]
const svgSquiggles = [[2], [3], [2], [3], [1]];
</script>
<svelte:head>
@ -71,14 +65,68 @@
"
/>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="absolute -z-50">
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
class="absolute -z-50"
image-rendering="optimizeSpeed"
>
<defs>
{#each svgSquiggles as [scale], index}
<filter id="squiggly-{index}">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed={index} />
<feDisplacementMap in="SourceGraphic" in2="noise" {scale} />
</filter>
<filter id="squiggly-{index}">
<feTurbulence
id="turbulence"
baseFrequency="0.02"
numOctaves="3"
result="noise"
seed={index}
/>
<feDisplacementMap in="SourceGraphic" in2="noise" {scale} />
</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>
<filter id="dither" color-interpolation-filters="sRGB" x="0" y="0" width="100%" height="100%">
<feImage
width="4"
height="4"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAASElEQVR42gXBgQAAIAxFwW8QwhBCCCGEIYQQQgghhBBCCEMYwutOkphzYmbsvdG9l9YaEYG7o1or5xxKKay1UGYyxuC9R++dD7yGJkTj6F0HAAAAAElFTkSuQmCC"
/>
<feTile />
<feComposite operator="arithmetic" k1="0" k2="1" k3="1" k4="-0.5" in="SourceGraphic" />
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 1" />
<feFuncG type="discrete" tableValues="0 1" />
<feFuncB type="discrete" tableValues="0 1" />
</feComponentTransfer>
</filter>
<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
class="ditherImage"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAA5ElEQVQYlQXBgQbCUABA0fdrk0ySSZJJkiRJMjOTTGZmkiRJZiYzyczMzGQmfdrtHPH7/TgcDuR5zna7pWka9vs9aZqyXq8R0+mU5/OJoihcLhfG4zFBENDtdjmdToj3+81yueTz+WCaJnEcM5/PKcsSXdcRsizjeR6j0YjH40Gr1cJxHAaDAbfbDVHXNbvdjiRJWK1WfL9fLMsiyzI2mw1CVVV836fT6XA8HplMJoRhSK/X43w+I6IoYjabURQFmqbxer1YLBZUVYVhGAhJkrBtm36/z/V6pd1u47ouw+GQ+/3OH4/Fn8FvF/NxAAAAAElFTkSuQmCC"
x="0"
y="0"
width="4"
height="4"
crossOrigin="anonymous"
result="image1"
/>
<feTile x="0" y="0" in="image1" result="tile" />
<feBlend mode="overlay" x="0%" y="0%" in="blend1" in2="tile" result="blend2" />
<feColorMatrix type="saturate" values="0" />
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 0" />
<feFuncG type="discrete" tableValues="0 1" />
<feFuncB type="discrete" tableValues="0 1" />
</feComponentTransfer>
</filter>
</defs>
</svg>
@ -101,4 +149,4 @@
<NavButton {highlight} {...item} />
{/each}
</div>
</nav>
</nav>

20
src/styles/app.css
View File

@ -9,6 +9,8 @@
@apply font-sans-serif bg-ralsei-black text-ralsei-white;
@apply prose-code:font-monospace prose-headings:font-monospace;
cursor: url('/icons/gaze_closed.png'), default;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
.prose h1::before {
@ -109,7 +111,23 @@
100% {
filter: url("#squiggly-4");
}
}
}
.pixelate {
filter: url("#pixelate");
}
.pixelate-bg {
backdrop-filter: url("#pixelate");
}
.dither {
filter: url("#dither");
}
.dither-bg {
backdrop-filter: url("#dither");
}
}
@layer utilities {