diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 768dd4d..f8a6379 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -41,13 +41,7 @@ const title = getTitle(data.route); - const svgSquiggles = [ - [2], - [3], - [2], - [3], - [1], - ] + const svgSquiggles = [[2], [3], [2], [3], [1]]; @@ -71,14 +65,68 @@ " /> - + {#each svgSquiggles as [scale], index} - - - - + + + + {/each} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -101,4 +149,4 @@ {/each} - \ No newline at end of file + diff --git a/src/styles/app.css b/src/styles/app.css index d44fddd..907f942 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -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 {