hyprwm
/
hyprland-website
mirror of https://github.com/hyprwm/hyprland-website.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

more stuf

This commit is contained in:
Christofer 2023-09-13 16:27:13 +04:00
parent ab26723deb
commit 43f214e5b7
36 changed files with 1564 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
scripts/generate-blurred-images.sh
View File

@ -20,7 +20,8 @@ while IFS= read -r -d '' filepath; do
# Modify colors with LUT # Modify colors with LUT
magick convert -brightness-contrast ${brightness_boost}x40 -modulate 100,1000,100 "$filepath" "$generated_filename" magick convert -brightness-contrast ${brightness_boost}x40 -modulate 100,1000,100 "$filepath" "$generated_filename"
magick "$generated_filename" "./hald-clut.color.io.png" -hald-clut "$generated_filename" magick "$generated_filename" "./hald-clut.color.io.png" -hald-clut "$generated_filename"
magick convert -modulate 100,250,100 -scale 10% -gaussian-blur 0x20 -resize 1000% -quality 50 "$generated_filename" "$generated_filename" # Also make them smaller to reduce file size
magick convert -modulate 100,250,100 -scale 10% -gaussian-blur 0x20 -resize 500% -quality 50 "$generated_filename" "$generated_filename"
# magick convert -scale 10% -brightness-contrast ${brightness_boost}x25 -modulate 100,500,100 -gaussian-blur 0x20 -resize 1000% "$filepath" "$generated_filename" # magick convert -scale 10% -brightness-contrast ${brightness_boost}x25 -modulate 100,500,100 -gaussian-blur 0x20 -resize 1000% "$filepath" "$generated_filename"

6
src/lib/Helper.mjs
View File

@ -1,12 +1,6 @@
/* eslint-disable no-useless-escape */ /* eslint-disable no-useless-escape */
import { inview } from 'svelte-inview' import { inview } from 'svelte-inview'
import { pick } from 'remeda' import { pick } from 'remeda'
// const mappingAnimate = {
// slide: 'translate',
// zoom: 'scale',
// duration: 'transition',
// fade: 'opacity'
// }
/** /**
* Fade: The initial opacity from 0 to 1. * Fade: The initial opacity from 0 to 1.

18
src/lib/components/Footer.svelte
View File

@ -3,9 +3,9 @@
import GithubIcon from '~icons/ri/github-fill' import GithubIcon from '~icons/ri/github-fill'
/** @type {[string, string, string, string]} */ /** @type {[string, string, string, string]} */
let developers = [ let team = [
['Fufexan', 'Core Developer', 'cyan', 'https://github.com/fufexan'], ['Fufexan', 'Supporting Developer', 'cyan', 'https://github.com/fufexan'],
['NotAShelf', 'Core Member', 'teal', 'https://github.com/NotAShelf'], ['NotAShelf', 'Real Chad', 'teal', 'https://github.com/NotAShelf'],
['VDawg', 'Webdesign-and dev', 'emerald', 'https://github.com/Visual-Dawg'], ['VDawg', 'Webdesign-and dev', 'emerald', 'https://github.com/Visual-Dawg'],
['System-x64', 'Webdev', 'green', 'https://github.com/System-x64'] ['System-x64', 'Webdev', 'green', 'https://github.com/System-x64']
] ]
@ -17,11 +17,9 @@
<footer <footer
class="max-w-screen relative mt-16 flex items-center justify-center border-t border-blue-400/50 bg-black/50 md:mt-24 lg:mt-32" class="max-w-screen relative mt-16 flex items-center justify-center border-t border-blue-400/50 bg-black/50 md:mt-24 lg:mt-32"
> >
<div <div class="footer-inner">
class="flex max-w-5xl flex-wrap items-start justify-between gap-12 px-8 py-14 text-slate-300"
>
<div class="flex flex-col gap-4 rounded-lg"> <div class="flex flex-col gap-4 rounded-lg">
<div class="pretitle">Developers</div> <div class="pretitle">Humans</div>
<ul class="flex flex-col gap-3 font-medium"> <ul class="flex flex-col gap-3 font-medium">
<li> <li>
<a href="https://github.com/vaxerski" target="_blank"> <a href="https://github.com/vaxerski" target="_blank">
@ -31,7 +29,7 @@
> >
</a> </a>
</li> </li>
{#each developers as [name, role, color, href]} {#each team as [name, role, color, href]}
<li> <li>
<a {href} target="_blank">{name} {@html createRole(role, color)}</a> <a {href} target="_blank">{name} {@html createRole(role, color)}</a>
</li> </li>
@ -90,6 +88,10 @@
</footer> </footer>
<style lang="postcss"> <style lang="postcss">
.footer-inner {
@apply flex max-w-5xl flex-wrap items-start justify-between gap-12 px-8 py-14 text-slate-300;
}
.pretitle { .pretitle {
@apply text-sm font-bold uppercase text-slate-400; @apply text-sm font-bold uppercase text-slate-400;
} }

5
src/lib/components/Title.svelte
View File

@ -2,7 +2,10 @@
import { animateIn } from '$lib/Helper.mjs' import { animateIn } from '$lib/Helper.mjs'
</script> </script>
<div use:animateIn={{ slide: 24, fade: 0 }} class="px-3 text-center {$$restProps.class}"> <div
use:animateIn={{ slide: 24, fade: 0 }}
class="flex flex-col items-center px-3 text-center {$$restProps.class}"
>
<div class="mb-3 font-extrabold text-slate-300"> <div class="mb-3 font-extrabold text-slate-300">
<slot name="pre" /> <slot name="pre" />
</div> </div>

BIN
src/lib/images/features/config_default.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 73 KiB

After

Width:  |  Height:  |  Size: 67 KiB

BIN
src/lib/images/features/config_hover.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 76 KiB

After

Width:  |  Height:  |  Size: 69 KiB

BIN
src/lib/images/features/smooth_default.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 43 KiB

BIN
src/lib/images/features/smooth_hover.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 48 KiB

BIN
src/lib/images/features/tiling_default.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 80 KiB

After

Width:  |  Height:  |  Size: 82 KiB

BIN
src/lib/images/features/tiling_hover.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 73 KiB

After

Width:  |  Height:  |  Size: 73 KiB

2
src/routes/+layout.svelte
View File

@ -8,7 +8,7 @@
<Navbar /> <Navbar />
<main class="mx-auto w-full overflow-hidden flex flex-col"> <main class="mx-auto flex w-full flex-col overflow-hidden">
<slot /> <slot />
</main> </main>

71
src/routes/+page.server.js Executable file
View File

@ -0,0 +1,71 @@
// since there's no dynamic data here, we can prerender
// it so that it gets served as a static asset in production
import baseColors from 'tailwindcss/colors'
export const load = () => ({
backgroundData: getHeroBackgroundTiles()
})
function getHeroBackgroundTiles() {
const workspacesPerRow = 4
const workspaceHeight = 240
const gapLength = 32
const colors = [baseColors.blue[500], baseColors.cyan[400], baseColors.sky[500]]
const images = [
'/imgs/chan/joy.svg',
'/imgs/chan/surprise.svg',
'/imgs/chan/tongueout.svg',
'/imgs/waylnad.webp'
]
const leftColumns = Array.from({ length: 3 }, () => generateRow(workspacesPerRow))
const rightColumns = Array.from({ length: 3 }, () => generateRow(workspacesPerRow))
/** Used to transform the rows by their own lenght*/
const height = workspacesPerRow * (workspaceHeight + gapLength)
return {
leftColumns,
rightColumns,
height,
workspacesPerRow,
workspaceHeight,
gapLength
}
function generateRow(amount) {
return Array.from({ length: amount }).map(generateWorkspace)
// If the background should be animated
// return [...base, ...base]
}
function generateWorkspace() {
return [
generateTiles(),
Math.random() > 0.4 ? generateTiles() : undefined,
Math.random() > 0.7 ? generateTiles() : undefined
].filter(Boolean)
}
function generateTiles() {
const result = Math.random() > 0.5 ? [generateTile()] : [generateTile(), generateTile()]
return result
}
function generateTile() {
return { color: getRandomColor(), image: Math.random() > 0.7 ? getRandomImage() : undefined }
}
/** @returns {string} */
function getRandomColor() {
return colors.at(Math.floor(Math.random() * colors.length))
}
/** @returns {string} */
function getRandomImage() {
return images.at(Math.floor(Math.random() * images.length))
}
}

18
src/routes/+page.svelte
View File

@ -7,8 +7,22 @@
import PreviewRiceSlice from './PreviewRiceSlice.svelte' import PreviewRiceSlice from './PreviewRiceSlice.svelte'
import { onMount } from 'svelte' import { onMount } from 'svelte'
export let data
onMount(() => { onMount(() => {
console.log('Billions must tile') import.meta.env.DEV &&
console.log(`
Lt. Dixon Piper:
Why did he do it? Why did Cunth kill your wife?
MacGruber:
To this day, I have no idea. We actually all went to college together. Believe it or not, we were very close friends. \nThen after graduation, he got engaged to her. He asked me to be his best man and right about that time, I started banging her and mowing her box. \nShe was actually the first person I felt comfortable enough around to let eat out my butt. \nAnyway, shortly thereafter, she left him for me. She was actually carrying his child at the time. I asked her to terminate it, obviously, so we could start fresh. And she agreed. We were so in love. \nAnd he took that from me.
Lt. Dixon Piper:
That's really f***ed up.
MacGruber:
Thanks.`)
}) })
</script> </script>
@ -17,7 +31,7 @@
<meta name="description" content="Hyprland - Dynamic tiling Wayland compositor with the looks." /> <meta name="description" content="Hyprland - Dynamic tiling Wayland compositor with the looks." />
</svelte:head> </svelte:head>
<Hero /> <Hero backgroundData={data.backgroundData} />
<div class="-mt-8 flex flex-col items-center gap-20 md:gap-[16rem]"> <div class="-mt-8 flex flex-col items-center gap-20 md:gap-[16rem]">
<PreviewRiceSlice class="mb-12" /> <PreviewRiceSlice class="mb-12" />

37
src/routes/CommunitySlice.svelte
View File

@ -6,10 +6,9 @@
import Button from '$lib/components/Button.svelte' import Button from '$lib/components/Button.svelte'
import DiscordIcon from '~icons/prime/discord' import DiscordIcon from '~icons/prime/discord'
import DiscordProfilePicture from './DiscordProfilePicture.svelte' import DiscordProfilePicture from './DiscordProfilePicture.svelte'
import { animateIn } from '$lib/Helper.mjs'
import { setContext } from 'svelte' import { setContext } from 'svelte'
import Title from '$lib/components/Title.svelte' import Title from '$lib/components/Title.svelte'
import background from '$lib/images/community-bg.png' import background from '$lib/images/community-bg.webp'
let sectionElement let sectionElement
let isDraggingChan = false let isDraggingChan = false
@ -89,20 +88,20 @@
class: 'outline-sky-500' class: 'outline-sky-500'
}, },
{ {
image: 'imgs/chan/cool.webp', image: 'imgs/chan/joy.svg',
coordinates: [284, 533], coordinates: [284, 533],
size: 90, size: 90,
class: 'outline-cyan-500', class: 'outline-cyan-500 bg-blue-300',
onDragStart: ({ detail: { currentTarget } }) => { onDragStart: ({ detail: { currentTarget } }) => {
isDraggingChan = true isDraggingChan = true
currentTarget.src = 'imgs/chan/quirky.webp' currentTarget.src = 'imgs/chan/surprise.svg'
}, },
onDragEnd: ({ detail: { currentTarget } }) => { onDragEnd: ({ detail: { currentTarget } }) => {
isDraggingChan = false isDraggingChan = false
currentTarget.src = 'imgs/chan/cool.webp' currentTarget.src = 'imgs/chan/tongueout.svg'
}, },
onHover: ({ detail: { srcElement } }) => onHover: ({ detail: { srcElement } }) =>
!isDraggingChan && (srcElement.src = 'imgs/chan/love.webp') !isDraggingChan && (srcElement.src = 'imgs/chan/wink.svg')
}, },
{ {
image: '/imgs/profile_pictures/7.webp', image: '/imgs/profile_pictures/7.webp',
@ -158,6 +157,12 @@
coordinates: [340, 790], coordinates: [340, 790],
size: 80, size: 80,
class: 'outline-pink-500' class: 'outline-pink-500'
},
{
image: '/imgs/profile_pictures/jacekpoz.svg',
coordinates: [180, 730],
size: 80,
class: 'outline-yellow-500 bg-orange-700'
} }
] ]
@ -186,7 +191,7 @@
</span> </span>
</Title> </Title>
<div class="group mt-16 flex flex-col items-center gap-2"> <div class="group mt-16 flex flex-col items-center">
<a <a
class="discord p-4" class="discord p-4"
href="https://discord.com/invite/hQ9XvMUjjr" href="https://discord.com/invite/hQ9XvMUjjr"
@ -214,7 +219,13 @@
{/each} {/each}
</div> </div>
</div> </div>
<img src={background} class="absolute top-0 -z-10 min-w-[1400px]" alt="" aria-hidden="true" /> <img
src={background}
class="absolute top-0 -z-10 min-w-[1400px]"
alt=""
aria-hidden="true"
loading="lazy"
/>
</section> </section>
<style lang="postcss"> <style lang="postcss">
@ -222,9 +233,11 @@
width: 9rem; width: 9rem;
height: 9rem; height: 9rem;
transition: transition:
rotate 480ms cubic-bezier(0.5, 0, 0.5, 1.1), rotate 500ms cubic-bezier(0.5, 0, 0.5, 1),
scale 420ms cubic-bezier(1, 0.1, 0, 2), scale 420ms cubic-bezier(0.5, 0.1, 0, 1),
filter 840ms; filter 840ms;
transition-delay: 240ms, 180ms, 20ms;
transform: translateY(-25%);
filter: drop-shadow(0px 0px 0px cyan) drop-shadow(0px 0px 0px blue); filter: drop-shadow(0px 0px 0px cyan) drop-shadow(0px 0px 0px blue);
&:hover, &:hover,
@ -232,7 +245,7 @@
scale: 1.2 1.2; scale: 1.2 1.2;
rotate: 360deg; rotate: 360deg;
filter: drop-shadow(4px 4px 14px #0fffef7a) drop-shadow(-4px -4px 12px purple); filter: drop-shadow(4px 4px 14px #0fffef7a) drop-shadow(-4px -4px 12px purple);
animation: bounce 1s infinite; animation: bounce 0.7s infinite 180ms both;
} }
&:active { &:active {
scale: 1; scale: 1;

24
src/routes/DiscordProfilePicture.svelte
View File

@ -1,6 +1,6 @@
<script> <script>
import clsx from 'clsx' import clsx from 'clsx'
import { createEventDispatcher, getContext, onMount } from 'svelte' import { createEventDispatcher, getContext, onDestroy, onMount } from 'svelte'
import { spring } from 'svelte/motion' import { spring } from 'svelte/motion'
import { contextId as ctxId } from './CommunitySlice.svelte' import { contextId as ctxId } from './CommunitySlice.svelte'
import { getIsMobile, lerp } from '$lib/Helper.mjs' import { getIsMobile, lerp } from '$lib/Helper.mjs'
@ -37,11 +37,12 @@
let imageElement let imageElement
let hasEnteredView = false let hasEnteredView = false
onMount(() => { /** @type {import('interactjs').default} */
if (getIsMobile()) return
let interactionjs let interactionjs
function onViewEnter() {
setTimeout(() => (hasEnteredView = true), 550)
import('interactjs').then(({ default: interact }) => { import('interactjs').then(({ default: interact }) => {
interactionjs = interact(imageElement).draggable({ interactionjs = interact(imageElement).draggable({
inertia: { resistance: lerp(5, 200, relativeSize) }, inertia: { resistance: lerp(5, 200, relativeSize) },
@ -69,15 +70,16 @@
] ]
}) })
}) })
}
return () => interactionjs?.off?.() onDestroy(() => interactionjs?.off())
})
</script> </script>
<div <div
class={clsx('absolute left-0 top-0 touch-none select-none ', containerClass)} class={clsx('absolute left-0 top-0 touch-none select-none ', containerClass)}
style:translate={coordinates.map((xy) => xy + 'px').join(' ')} style:translate={coordinates.map((xy) => xy + 'px').join(' ')}
style="width: {size}px; height: {size}px;--delay: {delay}ms;" style="width: {size}px; height: {size}px;--delay: {delay}ms;"
aria-hidden="true"
> >
<div <div
class={clsx( class={clsx(
@ -85,23 +87,25 @@
isAnimating && 'opacity-0' isAnimating && 'opacity-0'
)} )}
style:translate={`calc( ${$dragCoordinates[0]}px ) ${$dragCoordinates[1]}px`} style:translate={`calc( ${$dragCoordinates[0]}px ) ${$dragCoordinates[1]}px`}
use:inview={{ unobserveOnEnter: true, threshold: 0.4 }} use:inview={{ unobserveOnEnter: true, threshold: 0.2 }}
class:_animate={isAnimating && hasEnteredView} class:_animate={isAnimating && hasEnteredView}
on:inview_enter={() => setTimeout(() => (hasEnteredView = true), 550)} on:inview_enter={onViewEnter}
> >
<img <img
class="group h-full w-full touch-none select-none rounded-[50%] outline outline-4 {$$restProps.class}" class="group h-full w-full touch-none select-none rounded-[50%] object-cover outline outline-4 {$$restProps.class}"
bind:this={imageElement} bind:this={imageElement}
src={image} src={image}
alt={'community profile picture'} alt="community profile picture"
aria-hidden="true" aria-hidden="true"
on:mouseenter={(event) => dispatch('hover', event)} on:mouseenter={(event) => dispatch('hover', event)}
class:hover:scale-125={!!quote} class:hover:scale-125={!!quote}
loading="lazy"
/> />
{#if quote} {#if quote}
<div <div
class="pointer-events-none absolute -top-6 left-1/2 -translate-x-1/2 select-none rounded bg-slate-800/50 px-2 py-1 text-sm font-medium tracking-wide opacity-0 duration-150 group-hover:opacity-100" class="pointer-events-none absolute -top-6 left-1/2 -translate-x-1/2 select-none rounded bg-slate-800/50 px-2 py-1 text-sm font-medium tracking-wide opacity-0 duration-150 group-hover:opacity-100"
aria-hidden="true"
> >
{quote} {quote}
</div> </div>

8
src/routes/FameRicePreview.svelte
View File

@ -20,14 +20,15 @@
<img <img
src={image} src={image}
alt="Rice desktop" alt="Rice desktop"
class="nice-hover w-full rounded-xl object-cover object-top shadow-2xl hover:scale-[1.01] {imageClass}" class="nice-hover w-full rounded-xl object-cover shadow-2xl hover:scale-[1.01] {imageClass}"
/> />
<div class="rice-blurred"> <div class="rice-blurred">
<img <img
src={blurredBackground ?? getBlurredPath(image)} src={blurredBackground ?? getBlurredPath(image)}
alt="Rice desktop" alt="Rice desktop"
aria-hidden="true" aria-hidden="true"
class="h-full w-full" class="h-full w-full object-cover"
loading="lazy"
/> />
</div> </div>
</div> </div>
@ -35,7 +36,7 @@
<style lang="postcss"> <style lang="postcss">
.rice { .rice {
@apply relative w-full max-w-[1100px]; @apply relative h-auto w-full max-w-[1100px];
} }
.nice-hover { .nice-hover {
transition: all 540ms cubic-bezier(0.1, -0.81, 0.31, 2); transition: all 540ms cubic-bezier(0.1, -0.81, 0.31, 2);
@ -51,7 +52,6 @@
opacity: 0.9; opacity: 0.9;
/* filter: brightness(2.5); */ /* filter: brightness(2.5); */
z-index: -10; z-index: -10;
background-color: red;
mask-image: radial-gradient(50% 50% at 50% 50%, black, transparent); mask-image: radial-gradient(50% 50% at 50% 50%, black, transparent);
contain: content layout size style; contain: content layout size style;

5
src/routes/FeatureCard.svelte
View File

@ -110,7 +110,8 @@
theme(colors.neutral.950) theme(colors.neutral.950)
); );
@media screen(sm) { /* The card border */
@media screen(md) {
background: theme(colors.slate.900); background: theme(colors.slate.900);
&:hover { &:hover {
@ -151,7 +152,7 @@
contain: strict; contain: strict;
background: radial-gradient( background: radial-gradient(
620px circle at calc(var(--borderX) * 1px) calc(var(--borderY) * 1px), 620px circle at calc(var(--borderX) * 1px) calc(var(--borderY) * 1px),
color-mix(in srgb, var(--color1, theme(colors.cyan.500)), transparent 70%), color-mix(in srgb, var(--color1, theme(colors.cyan.500)), transparent 50%),
transparent transparent
); );

82
src/routes/FeaturesSlice.svelte
View File

@ -12,13 +12,12 @@
import Title from '$lib/components/Title.svelte' import Title from '$lib/components/Title.svelte'
import Hypractive from './Hypractive.svelte' import Hypractive from './Hypractive.svelte'
import { getIsMobile } from '$lib/Helper.mjs' import { getIsMobile } from '$lib/Helper.mjs'
import configDefaultImage from '$lib/images/features/config_default.png' import configDefaultImage from '$lib/images/features/config_default.webp'
import configHoverImage from '$lib/images/features/config_hover.png' import configHoverImage from '$lib/images/features/config_hover.webp'
import smoothDefaultImage from '$lib/images/features/smooth_default.png' import smoothDefaultImage from '$lib/images/features/smooth_default.webp'
import smoothHoverImage from '$lib/images/features/smooth_hover.png' import smoothHoverImage from '$lib/images/features/smooth_hover.webp'
import tileDefaultImage from '$lib/images/features/tiling_default.png' import tileDefaultImage from '$lib/images/features/tiling_default.webp'
import tileHoverImage from '$lib/images/features/tiling_hover.png' import tileHoverImage from '$lib/images/features/tiling_hover.webp'
import SmoothCircle from './SmoothCircle.svelte'
let isMobile = false let isMobile = false
@ -64,14 +63,25 @@
> >
<FeatureCard title="Smooth" class="row-span-2" color="purple"> <FeatureCard title="Smooth" class="row-span-2" color="purple">
<p class="max-w-[60ch]"> <p class="max-w-[60ch]">
Transition from windows and workspaces smoothly, with great animations. High performance. Smooth transitions. Great animations. High performance. Instant input.
Instant input.
</p> </p>
<div class="_wrapper absolute inset-0 select-none" aria-hidden> <div class="_wrapper absolute inset-0 select-none" aria-hidden>
<div class="feature-image"> <div class="feature-image">
<img src={smoothDefaultImage} class="feature-image_inner" alt="" aria-hidden="true" /> <img
<img src={smoothHoverImage} class="feature-image_inner-hover" alt="" aria-hidden="true" /> src={smoothDefaultImage}
class="feature-image_inner"
alt=""
aria-hidden="true"
loading="lazy"
/>
<img
src={smoothHoverImage}
class="feature-image_inner-hover"
alt=""
aria-hidden="true"
loading="lazy"
/>
</div> </div>
</div> </div>
</FeatureCard> </FeatureCard>
@ -82,8 +92,20 @@
<div class="_wrapper absolute inset-0 select-none" aria-hidden> <div class="_wrapper absolute inset-0 select-none" aria-hidden>
<div class="feature-image"> <div class="feature-image">
<img src={configDefaultImage} class="feature-image_inner" alt="" aria-hidden="true" /> <img
<img src={configHoverImage} class="feature-image_inner-hover" alt="" aria-hidden="true" /> src={configDefaultImage}
class="feature-image_inner"
alt=""
aria-hidden="true"
loading="lazy"
/>
<img
src={configHoverImage}
class="feature-image_inner-hover"
alt=""
aria-hidden="true"
loading="lazy"
/>
</div> </div>
</div> </div>
</FeatureCard> </FeatureCard>
@ -93,8 +115,20 @@
</p> </p>
<div class="_wrapper absolute inset-0 select-none" aria-hidden> <div class="_wrapper absolute inset-0 select-none" aria-hidden>
<div class="feature-image"> <div class="feature-image">
<img src={tileDefaultImage} class="feature-image_inner" alt="" aria-hidden="true" /> <img
<img src={tileHoverImage} class="feature-image_inner-hover" alt="" aria-hidden="true" /> src={tileDefaultImage}
class="feature-image_inner"
alt=""
aria-hidden="true"
loading="lazy"
/>
<img
src={tileHoverImage}
class="feature-image_inner-hover"
alt=""
aria-hidden="true"
loading="lazy"
/>
</div> </div>
</div> </div>
</FeatureCard> </FeatureCard>
@ -121,6 +155,7 @@
<a <a
href="https://wiki.hyprland.org/Configuring/Variables/#gestures" href="https://wiki.hyprland.org/Configuring/Variables/#gestures"
class="icon-feature hover:underline" class="icon-feature hover:underline"
target="_blank"
> >
<TouchpadIcon class="h-8 w-8" />Touchpad gestures <TouchpadIcon class="h-8 w-8" />Touchpad gestures
</a> </a>
@ -137,6 +172,9 @@
inset: 0 0 0 0; inset: 0 0 0 0;
opacity: 0.5; opacity: 0.5;
z-index: -10; z-index: -10;
display: flex;
align-items: center;
justify-content: center;
._wrapper:hover & { ._wrapper:hover & {
opacity: 1; opacity: 1;
@ -147,15 +185,15 @@
transition: opacity 1500ms ease-in-out; transition: opacity 1500ms ease-in-out;
pointer-events: none; pointer-events: none;
width: 500px; width: 400px;
aspect-ratio: 1;
right: -80px; right: -80px;
top: -80px; top: 50%;
translate: 0px -50%;
@media screen(sm) { @media screen(md) {
width: 800px; width: 600px;
height: 800px; right: -80px;
right: -200px;
top: -209px;
} }
} }
} }

25
src/routes/Hero.svelte
View File

@ -7,6 +7,8 @@
import { inview } from 'svelte-inview' import { inview } from 'svelte-inview'
import HeroBackground from './HeroBackground.svelte' import HeroBackground from './HeroBackground.svelte'
export let backgroundData
let isVisible = true let isVisible = true
let isMobile = false let isMobile = false
@ -27,13 +29,15 @@
class="pointer-events-none z-10 flex h-screen min-h-max flex-col items-center justify-center px-5" class="pointer-events-none z-10 flex h-screen min-h-max flex-col items-center justify-center px-5"
> >
<div class="mb-8 flex flex-col items-center gap-6 text-center sm:-mt-20"> <div class="mb-8 flex flex-col items-center gap-6 text-center sm:-mt-20">
<img src={Logo} alt="Hyprland Logo" class="ani-in mb-6 h-40 fill-mode-backwards sm:h-48" /> <img
src={Logo}
alt="Hyprland Logo"
class="ani-in mb-6 h-40 w-48 object-contain fill-mode-backwards sm:h-48 sm:w-56"
loading="eager"
decoding="async"
/>
<div class="ani-in relative fill-mode-backwards [animation-delay:384ms]"> <div class="ani-in relative fill-mode-backwards [animation-delay:384ms]">
<h1 <h1 class="hyprgradient title">Hyprland</h1>
class="hyprgradient pointer-events-auto bg-clip-text p-2 font-london text-6xl font-bold tracking-wider text-transparent md:text-7xl md:tracking-widest"
>
Hyprland
</h1>
</div> </div>
</div> </div>
<h2 <h2
@ -55,7 +59,7 @@
</div> </div>
<div class="absolute inset-0"> <div class="absolute inset-0">
<HeroBackground /> <HeroBackground {backgroundData} />
</div> </div>
<!-- Fireflies --> <!-- Fireflies -->
@ -73,6 +77,13 @@
</section> </section>
<style lang="postcss"> <style lang="postcss">
.title {
background-clip: text;
padding: 0.5rem;
pointer-events: auto;
@apply font-london text-6xl font-bold tracking-wider text-transparent md:text-7xl md:tracking-widest;
}
@keyframes slidein { @keyframes slidein {
from { from {
transform: translateX(0%); transform: translateX(0%);

124
src/routes/HeroBackground.svelte
View File

@ -1,38 +1,8 @@
<script> <script>
import baseColors from 'tailwindcss/colors' export let backgroundData
const workspacesPerRow = 4 const { workspacesPerRow, gapLength, workspaceHeight, height, leftColumns, rightColumns } =
const workspaceHeight = 240 backgroundData
const gapLength = 32
const colors = [baseColors.blue[500], baseColors.cyan[400], baseColors.sky[500]]
const leftColumns = Array.from({ length: 3 }, () => generateRow(workspacesPerRow))
const rightColumns = Array.from({ length: 3 }, () => generateRow(workspacesPerRow))
/** Used to transform the rows by their own lenght*/
const height = workspacesPerRow * (workspaceHeight + gapLength)
function generateRow(amount) {
const base = Array.from({ length: amount }).map(generateWorkspace)
// For the effect to work, the items need to be duplicated
return [...base, ...base]
}
function generateWorkspace() {
return [
generateTiles(),
Math.random() > 0.4 ? generateTiles() : false,
Math.random() > 0.7 ? generateTiles() : false
].filter(Boolean)
}
function generateTiles() {
const result = Math.random() > 0.5 ? [getRandomColor()] : [getRandomColor(), getRandomColor()]
return result
}
function getRandomColor() {
return colors.at(Math.floor(Math.random() * colors.length))
}
</script> </script>
<div class="wrapper" aria-hidden="true"> <div class="wrapper" aria-hidden="true">
@ -50,8 +20,13 @@
<div class="workspace"> <div class="workspace">
{#each workspace as tiles} {#each workspace as tiles}
<div class="tiles"> <div class="tiles">
{#each tiles as tile} {#each tiles as { color, image }}
<div class="tile" style:--color={tile}></div> <div
class="tile"
style:--color={color}
class:with-image={image}
style:--image={`url(${image})`}
></div>
{/each} {/each}
</div> </div>
{/each} {/each}
@ -68,8 +43,13 @@
<div class="workspace"> <div class="workspace">
{#each workspace as tiles} {#each workspace as tiles}
<div class="tiles"> <div class="tiles">
{#each tiles as tile} {#each tiles as { color, image }}
<div class="tile" style:--color={tile}></div> <div
class="tile"
style:--color={color}
class:with-image={image}
style:--image={`url(${image})`}
></div>
{/each} {/each}
</div> </div>
{/each} {/each}
@ -83,10 +63,10 @@
<style lang="postcss"> <style lang="postcss">
.left { .left {
transform: rotateY(10deg) rotateZ(90deg); transform: rotateY(10deg);
} }
.right { .right {
transform: rotateY(-10deg) rotateZ(-90deg); transform: rotateY(-10deg);
} }
.wrapper { .wrapper {
@ -96,6 +76,7 @@
justify-content: center; justify-content: center;
height: calc(100vh - 48px); height: calc(100vh - 48px);
contain: strict; contain: strict;
pointer-events: none;
@apply max-sm:hidden; @apply max-sm:hidden;
} }
@ -109,6 +90,7 @@
display: flex; display: flex;
mask-image: linear-gradient(to top, transparent 0%, black 20%); mask-image: linear-gradient(to top, transparent 0%, black 20%);
contain: layout style content; contain: layout style content;
pointer-events: none;
&::after { &::after {
content: ' '; content: ' ';
@ -148,9 +130,9 @@
/* animation: loop 98s infinite linear; */ /* animation: loop 98s infinite linear; */
contain: layout style content; contain: layout style content;
@media (prefers-reduced-motion) { /* @media (prefers-reduced-motion) {
animation: none; animation: none;
} } */
} }
.workspace { .workspace {
@ -171,24 +153,49 @@
} }
.tile { .tile {
--reveal-length: 0.5s;
border: var(--color) 2px solid; border: var(--color) 2px solid;
flex-grow: 1; flex-grow: 1;
height: var(--height); height: var(--height);
border-radius: 12px; border-radius: 12px;
pointer-events: auto; pointer-events: auto;
transition: 380ms ease-in-out; transition: 480ms ease-in-out;
transition-property: background opacity scale box-shadow; transition-property: background-color background-image opacity scale box-shadow;
opacity: 0.5; opacity: 0.5;
contain: strict; contain: strict;
pointer-events: all;
&:hover { &:hover {
opacity: 1; opacity: 1;
scale: 1.02; scale: 1.02;
background: color-mix(in hsl, var(--color), transparent 20%); background-color: color-mix(in hsl, var(--color), transparent 20%);
box-shadow: box-shadow:
0px 0px 10px var(--color), 0px 0px 10px var(--color),
0px 0px 40px var(--color); 0px 0px 40px var(--color);
} }
&:hover.with-image {
scale: 1;
animation: reveal-artwork_tile calc(var(--reveal-length) + 280ms)
cubic-bezier(1, -0.4, 0.165, 1) forwards;
}
&.with-image::after {
content: ' ';
position: absolute;
inset: 0;
background-image: var(--image);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 1520ms ease-in-out;
}
&:hover::after {
animation: reveal-artwork var(--reveal-length) ease-in-out 400ms both;
opacity: 1;
transition: opacity 1520ms ease-in-out;
}
} }
.top-light { .top-light {
@ -207,4 +214,33 @@
pointer-events: none; pointer-events: none;
contain: strict; contain: strict;
} }
@keyframes reveal-artwork {
0% {
opacity: 0%;
filter: brightness(1);
}
50% {
filter: brightness(1.45);
opacity: 40%;
}
100% {
filter: brightness(1);
opacity: 100%;
}
}
@keyframes reveal-artwork_tile {
0% {
opacity: inherit;
scale: 1;
}
50% {
filter: brightness(1.5);
scale: 1.1;
}
100% {
opacity: 100%;
scale: 1;
}
}
</style> </style>

8
src/routes/Hypractive.svelte
View File

@ -77,6 +77,7 @@
$: hue = lerp(200, 130, $cubibRelativeLevel$) $: hue = lerp(200, 130, $cubibRelativeLevel$)
$: scale = lerp(0.9, 2, $cubibRelativeLevel$) $: scale = lerp(0.9, 2, $cubibRelativeLevel$)
$: translateY = lerp(0, 10, $cubibRelativeLevel$)
/** @type {HTMLDivElement} */ /** @type {HTMLDivElement} */
let containerElement let containerElement
@ -95,16 +96,17 @@
<div class="relative overflow-visible"> <div class="relative overflow-visible">
<button <button
class="flex hover:underline text-slate-400 gap-3 font-bold items-center active:scale-95 transition-colors drop-shadow-lg shadow-black" class="flex items-center gap-3 font-bold text-slate-400 shadow-black drop-shadow-lg transition-colors hover:underline active:scale-95"
on:click={onClick} on:click={onClick}
style:color={$relativeLevel$ > 0 ? `hsl(${hue} 64% 53%)` : undefined} style:color={$relativeLevel$ > 0 ? `hsl(${hue} 64% 53%)` : undefined}
style:scale={$relativeLevel$ > 0 ? scale : undefined} style:scale={$relativeLevel$ > 0 ? scale : undefined}
style:translate={$relativeLevel$ > 0 ? `0px -${translateY}px` : undefined}
> >
<ActiveGitIcon class="h-8 w-8" /> <ActiveGitIcon class="h-8 w-8" />
<span class="transition-colors"> Hypractive development </span> <span class="transition-colors"> Hypractive development </span>
</button> </button>
<div class="absolute left-1/2 top-1/2 -z-10 pointer-events-none"> <div class="pointer-events-none absolute left-1/2 top-1/2 -z-10">
{#each $tiles$ as _} {#each $tiles$ as _}
<GitTile <GitTile
lifeSpan={lerp(MIN_LIFESPAN_TILE, MAX_LIFESPAN_TILE, $cubibRelativeLevel$)} lifeSpan={lerp(MIN_LIFESPAN_TILE, MAX_LIFESPAN_TILE, $cubibRelativeLevel$)}
@ -117,7 +119,7 @@
<div class="mask" bind:this={containerElement}> <div class="mask" bind:this={containerElement}>
{#if $hasAscended$} {#if $hasAscended$}
<div <div
class="animate-in slide-in-from-bottom-[500px] fade-in-0 slide-in-from-left-20 [animation-duration:2.5s] vaxx-wrapper zoom-in-95 absolute bottom-[240px] left-1/2 z-50 -translate-x-[100px] rounded-full aspect-square" class="vaxx-wrapper absolute bottom-[240px] left-1/2 z-50 aspect-square -translate-x-[100px] rounded-full animate-in fade-in-0 zoom-in-95 slide-in-from-bottom-[500px] slide-in-from-left-20 [animation-duration:2.5s]"
style:width={vaxrySize + 'px'} style:width={vaxrySize + 'px'}
> >
<DiscordProfilePicture <DiscordProfilePicture

25
src/routes/InstallButton.svelte
View File

@ -23,40 +23,45 @@
}) })
</script> </script>
<div class="flex group flex-col md:flex-row md:gap-4 gap-2 items-center"> <div class="group flex flex-col items-center gap-2 md:flex-row md:gap-4">
<div <div
class="flex group-focus-within:-translate-y-1 transition-transform flex-col gap-3 justify-center items-center text-primary text-lg font-medium rounded-full w-32 h-32" class="flex h-32 w-32 flex-col items-center justify-center gap-3 rounded-full text-lg font-medium text-primary transition-transform group-focus-within:-translate-y-1"
> >
<img src={image} alt="Arch Logo" />{name} <img
src={image}
class="h-20 w-32 object-contain"
alt="Distrubution Logo"
loading="lazy"
/>{name}
</div> </div>
<div class="flex flex-col relative font-mono mb-2"> <div class="relative mb-2 flex flex-col font-mono">
<button <button
class="flex text-base transition-transform min-w-[18rem] items-center font-medium rounded-full border-primary border py-3 pl-6 pr-6 gap-4 justify-center active:scale-[1.01]" class="flex min-w-[18rem] items-center justify-center gap-4 rounded-full border border-primary py-3 pl-6 pr-6 text-base font-medium transition-transform active:scale-[1.01]"
on:click={$$slots.default ? undefined : copyCommand} on:click={$$slots.default ? undefined : copyCommand}
> >
<slot> <slot>
<div class="flex gap-4 relative justify-between w-full"> <div class="relative flex w-full justify-between gap-4">
<div class="flex gap-4"> <div class="flex gap-4">
<div class="text-primary select-none font-bold">></div> <div class="select-none font-bold text-primary">></div>
<span>{command}</span> <span>{command}</span>
</div> </div>
<ClipboardIcon <ClipboardIcon
class="group-hover:opacity-80 text-white group-active:opacity-100 opacity-0 w-6 h-6 hover:!opacity-100 transition-opacity duration-100" class="h-6 w-6 text-white opacity-0 transition-opacity duration-100 hover:!opacity-100 group-hover:opacity-80 group-active:opacity-100"
/> />
</div> </div>
</slot> </slot>
</button> </button>
<div <div
class="text-green-400 [translate:-50%_0px] select-none pointer-events-none absolute md:-top-8 max-md:-bottom-6 bg-black/10 backdrop-blur rounded-full z-20 px-2 w-full left-1/2 hidden max-w-max" class="pointer-events-none absolute left-1/2 z-20 hidden w-full max-w-max select-none rounded-full bg-black/10 px-2 text-green-400 backdrop-blur [translate:-50%_0px] max-md:-bottom-6 md:-top-8"
class:copy={isShowingCopied} class:copy={isShowingCopied}
> >
Copied to clipboard ✔ Copied to clipboard ✔
</div> </div>
{#if $$slots.extra} {#if $$slots.extra}
<div class="text-xs font-sans opacity-80 absolute -bottom-6 w-full flex justify-center"> <div class="absolute -bottom-6 flex w-full justify-center font-sans text-xs opacity-80">
<slot name="extra" /> <slot name="extra" />
</div> </div>
{/if} {/if}

12
src/routes/InstallSlice.svelte
View File

@ -15,29 +15,29 @@
<span slot="title">Install now</span><span slot="subtitle"> For your favourite distro </span> <span slot="title">Install now</span><span slot="subtitle"> For your favourite distro </span>
</Title> </Title>
<div class="flex flex-col md:gap-6 gap-12 items-center" use:animateIn={{ slide: 24, fade: 0 }}> <div class="flex flex-col items-center gap-12 md:gap-6" use:animateIn={{ slide: 24, fade: 0 }}>
<div <div
class="md:outline md:outline-1 flex flex-col gap-12 md:gap-6 md:outline-blue-500 md:from-blue-500/40 md:to-transparent md:bg-gradient-to-tr md:shadow-xl md:p-8 md:rounded-3xl" class="flex flex-col gap-12 md:gap-6 md:rounded-3xl md:bg-gradient-to-tr md:from-blue-500/40 md:to-transparent md:p-8 md:shadow-xl md:outline md:outline-1 md:outline-blue-500"
> >
<InstallButton name="Arch" command="pacman -S hyprland" image={archLogo} <InstallButton name="Arch" command="pacman -S hyprland" image={archLogo}
><div slot="extra"> ><div slot="extra">
AUR git version: <a AUR git version: <a
class="hover:underline hover:text-white" class="hover:text-white hover:underline"
target="_blank" target="_blank"
href="https://aur.archlinux.org/packages/hyprland-git/">hyprland-git</a href="https://aur.archlinux.org/packages/hyprland-git/">hyprland-git</a
> >
</div></InstallButton </div></InstallButton
> >
<InstallButton name="NixOs" image={nixLogo} <InstallButton name="NixOS" image={nixLogo}
><a ><a
href="https://wiki.hyprland.org/Nix/" href="https://wiki.hyprland.org/Nix/"
target="_blank" target="_blank"
class="flex hover:underline gap-4 items-center justify-between w-full" class="flex w-full items-center justify-between gap-4 hover:underline"
>See instructions <LinkOutIcon /></a >See instructions <LinkOutIcon /></a
></InstallButton ></InstallButton
> >
<InstallButton name="FreeBSD" command="pkg install hyprland" image={bsdLogo} /> <InstallButton name="FreeBSD" command="pkg install hyprland" image={bsdLogo} />
<InstallButton name="openSuse" command="zypper in hyprland" image={suseLogo} <InstallButton name="openSUSE" command="zypper in hyprland" image={suseLogo}
><div slot="extra">or install “hyprland” via YaST2 Software.</div></InstallButton ><div slot="extra">or install “hyprland” via YaST2 Software.</div></InstallButton
> >
</div> </div>

2
src/routes/Navbar.svelte
View File

@ -24,7 +24,7 @@
href="/" href="/"
class="flex items-center gap-4 rounded-full py-1 font-london text-sm font-bold tracking-wider text-white lg:bg-black/50 lg:px-4 lg:py-2 lg:backdrop-blur" class="flex items-center gap-4 rounded-full py-1 font-london text-sm font-bold tracking-wider text-white lg:bg-black/50 lg:px-4 lg:py-2 lg:backdrop-blur"
> >
<img src={logo} alt="Hyprland Logo" class="w-6" /><span <img src={logo} alt="Hyprland Logo" class="h-8 w-6 object-contain" /><span
class="hidden text-lg tracking-widest lg:mt-1 lg:block">Hyprland</span class="hidden text-lg tracking-widest lg:mt-1 lg:block">Hyprland</span
></a ></a
> >

6
src/routes/WallOfFameSlice.svelte
View File

@ -16,7 +16,7 @@
<div class="atmosphere" /> <div class="atmosphere" />
<div <div
class="relative -mt-24 flex w-full max-w-[1100px] flex-col items-center justify-end gap-16 overflow-hidden [perspective:100px] md:px-16 lg:gap-24" class="relative -mt-8 flex w-full max-w-[1100px] flex-col items-center justify-end gap-16 overflow-hidden [perspective:100px] md:px-16 lg:gap-24"
use:animateIn={{ slide: 24, fade: 0.5, duration: 800 }} use:animateIn={{ slide: 24, fade: 0.5, duration: 800 }}
> >
<a class="absolute bottom-24 left-1/2 z-20 -translate-x-1/2" href="/wall_of_fame"> <a class="absolute bottom-24 left-1/2 z-20 -translate-x-1/2" href="/wall_of_fame">
@ -35,7 +35,7 @@
/> />
<FameRicePreview <FameRicePreview
image="/imgs/ricing_competitions/1/flicko.webp" image="/imgs/ricing_competitions/1/flicko.webp"
imageClass="!rounded-none !rounded-t-xl [mask-image:linear-gradient(black,black_50%,transparent)] rounded-t-xl h-[200px] sm:h-[250px] lg:h-[500px]" imageClass="!rounded-none !rounded-t-xl [mask-image:linear-gradient(black,black_50%,transparent)] rounded-t-xl -mb-4 sm:-mb-8 md:-mb-24 "
/> />
</div> </div>
@ -56,6 +56,8 @@
translate: -50% 0px; translate: -50% 0px;
height: 100vh; height: 100vh;
width: 200vw; width: 200vw;
max-width: 2400px;
max-height: 1000px;
background: radial-gradient(closest-side, theme(colors.blue.500 / 30%), transparent), background: radial-gradient(closest-side, theme(colors.blue.500 / 30%), transparent),
radial-gradient(15% 20%, theme(colors.cyan.500 / 70%), transparent); radial-gradient(15% 20%, theme(colors.cyan.500 / 70%), transparent);
} }

113
src/routes/wall_of_fame/+page.svelte
View File

@ -3,21 +3,57 @@
import Contest from './Contest.svelte' import Contest from './Contest.svelte'
import FamedRice from './FamedRice.svelte' import FamedRice from './FamedRice.svelte'
import colors from 'tailwindcss/colors' import colors from 'tailwindcss/colors'
const wisdoms = [
'炊き込みご飯',
'米どころでの休日',
'マッサージライス',
'天国の米',
'ジーンズの中には何キロもの米が入っているから、毎日がトレーニングなんだ。',
'田んぼで撃たれたんだ！',
'田んぼでの作業',
'国の保護による田んぼでの仕事',
'巨大な米ベースの子猫用フードがある。',
'スパイシー米麺',
'激辛炊飯器',
'絶対にご飯を炊いた'
]
const wisdomObjects = wisdoms.map((text) => ({
text,
z: Math.round(Math.random() * 10)
}))
</script> </script>
<section> <section>
<div class="hero-wrapper" role="heading" aria-level={0}> <div class="hero-wrapper">
<div class="japanese" aria-hidden="true">
<div class="rice-symbol">「 米 」</div>
<div class="wisdoms">
{#each wisdomObjects as { text, z }}
<div class="wisdom" style:--z={z}>
{text}
</div>
{/each}
</div>
</div>
<Title> <Title>
<span slot="title">Wall of fame</span> <span slot="title" class="title">Wall of fame</span>
<div slot="subtitle"> <div slot="subtitle" class="max-w-[40ch]">
The chronicles of the triumphant<br /> from bygone rice contests held within our Discord The chronicles of the triumphant from bygone rice contests held within our Discord
</div> </div>
</Title> </Title>
<!-- <div class="background-images" aria-hidden="true">
{#each data.images as image}
<img src={image} class="background-image" alt="" />
{/each}
</div> -->
</div> </div>
<Contest name="Summer" number={2} date="May 2023" --color="orange"> <Contest name="Summer" number={2} date="May 2023" --color="orange">
<FamedRice <FamedRice
name="Novel Nock" name="Unnamed"
creator="end_4" creator="end_4"
pretitel="#1" pretitel="#1"
dotfilesLink="https://github.com/end-4/dots-hyprland/tree/novelknock" dotfilesLink="https://github.com/end-4/dots-hyprland/tree/novelknock"
@ -98,10 +134,69 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 800px;
width: 100%;
min-height: max-content; min-height: max-content;
margin-bottom: min(-10vh, -12rem); height: 85vh;
background: radial-gradient(100% 50% at 50% 0%, theme(colors.cyan.500 / 50%), transparent); max-height: 900px;
width: 100%;
margin-bottom: min(-10vh, -6rem);
background: radial-gradient(70% 50% at 50% 0%, theme(colors.cyan.500 / 50%), transparent);
animation: enter 1200ms ease-in-out;
} }
.japanese {
position: relative;
width: 100%;
height: max-content;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
animation: enter 1200ms ease-in-out;
}
.rice-symbol {
font-size: 120px;
color: transparent;
background: linear-gradient(125deg, cyan 15%, blue);
background-clip: text;
font-weight: bold;
text-shadow: 0px 0px 20px rgba(0, 255, 255, 0.3);
}
.wisdoms {
position: absolute;
width: 500px;
/* translate: -50% 0px; */
display: flex;
align-items: center;
gap: 1rem;
z-index: -10;
opacity: 0.6;
/* font-size: 1.5rem; */
}
.wisdom {
width: max-content;
height: max-content;
text-align: center;
color: theme(colors.cyan.700);
text-shadow: 0px 0px 8px blue;
}
/* .background-images {
z-index: -100;
position: absolute;
inset: 1/2;
translate: 0px -50%;
display: grid;
width: 600px;
height: 200px;
grid: auto-flow / 1fr 1fr 1fr;
opacity: 0.4;
& .background-image {
width: 200px;
}
} */
</style> </style>

9
src/routes/wall_of_fame/Contest.svelte
View File

@ -50,12 +50,17 @@
<style lang="postcss"> <style lang="postcss">
section { section {
border-top: rgba(255, 255, 255, 0.1) 1px solid; border-top: rgba(255, 255, 255, 0.1) 1px solid;
padding-top: 5rem; padding-top: 4rem;
padding-bottom: 5rem;
position: relative; position: relative;
display: flex; display: flex;
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
border-radius: 1rem 1rem 0rem 0rem;
@media screen(lg) {
border-radius: 4rem 4rem 0rem 0rem; border-radius: 4rem 4rem 0rem 0rem;
}
&::after { &::after {
content: ' '; content: ' ';
@ -106,7 +111,7 @@
opacity: 0.25; opacity: 0.25;
scale: 0.95 1; scale: 0.95 1;
transition: all 1200ms ease-in-out 120ms; transition: all 1200ms ease-in-out 70ms;
top: 200px; top: 200px;
left: 50%; left: 50%;

4
src/routes/wall_of_fame/FamedRice.svelte
View File

@ -34,6 +34,7 @@
src={creatorProfilePicture} src={creatorProfilePicture}
class="aspect-square h-6 rounded-full" class="aspect-square h-6 rounded-full"
alt={creator + ' profile picture'} alt={creator + ' profile picture'}
loading="lazy"
/> />
<div class="text-lg font-medium text-slate-300 transition-colors group-hover:text-white"> <div class="text-lg font-medium text-slate-300 transition-colors group-hover:text-white">
{creator} {creator}
@ -43,7 +44,7 @@
<div class="image-wrapper"> <div class="image-wrapper">
<a class="rice" href={dotfilesLink} target="_blank"> <a class="rice" href={dotfilesLink} target="_blank">
<img src={thumbnail} alt={`${name} by ${creator} thumbnail`} class="" /> <img src={thumbnail} alt={`${name} by ${creator} thumbnail`} class="" loading="lazy" />
</a> </a>
<!-- blur background --> <!-- blur background -->
<img <img
@ -51,6 +52,7 @@
aria-hidden="true" aria-hidden="true"
class="background-blurred" class="background-blurred"
alt={`${name} by ${creator} thumbnail`} alt={`${name} by ${creator} thumbnail`}
loading="lazy"
/> />
</div> </div>
</div> </div>

238
static/imgs/chan/joy.svg Executable file
View File

@ -0,0 +1,238 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="55.195702mm"
height="50.226509mm"
viewBox="0 0 55.195702 50.226509"
version="1.1"
id="svg1"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
sodipodi:docname="joy.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
inkscape:zoom="3.8075125"
inkscape:cx="89.165828"
inkscape:cy="109.25769"
inkscape:window-width="1920"
inkscape:window-height="1080"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs1">
<filter
inkscape:collect="always"
style="color-interpolation-filters:sRGB"
id="filter51-5"
x="-0.037558171"
y="-0.041991195"
width="1.0751161"
height="1.0839849">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="0.24405608"
id="feGaussianBlur51-9" />
</filter>
<filter
inkscape:collect="always"
style="color-interpolation-filters:sRGB"
id="filter53-0"
x="-0.076547285"
y="-0.064526052"
width="1.1531256"
height="1.13197">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="0.24405608"
id="feGaussianBlur53-9" />
</filter>
<filter
inkscape:collect="always"
style="color-interpolation-filters:sRGB"
id="filter52-4"
x="-0.14455578"
y="-0.11419457"
width="1.2901799"
height="1.2301751">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="0.24405608"
id="feGaussianBlur52-9" />
</filter>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient25"
id="linearGradient56"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.0833182,0.17840957,-0.17840957,1.0833182,68.1168,-12.027181)"
x1="37.503448"
y1="64.628593"
x2="37.693779"
y2="57.443047" />
<linearGradient
id="linearGradient25"
inkscape:collect="always">
<stop
style="stop-color:#0060f2;stop-opacity:1;"
offset="0"
id="stop25" />
<stop
style="stop-color:#2be7ff;stop-opacity:1;"
offset="1"
id="stop26" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient25"
id="linearGradient57"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.96177466,-0.105551,0.105551,0.96177466,80.033249,4.0461172)"
x1="37.503448"
y1="64.628593"
x2="37.693779"
y2="57.443047" />
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-74.540718,-71.13755)">
<g
id="g96"
transform="translate(-4.6428008,40.58543)">
<path
style="fill:#00ffff;fill-opacity:1;stroke:#4cb6ff;stroke-width:2.685;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter51-5)"
d="m 81.111729,67.225617 c 0,0 1.8504,10.984846 22.469961,11.168349 26.69842,0.237603 28.86933,-14.022575 28.86933,-14.022575 0,0 -3.57314,1.720542 -4.0421,0.903392 0,0 4.01112,-5.016688 2.87298,-11.259163 0,0 -0.63553,2.702598 -3.42379,0.894575 0,0 1.25012,-2.589896 -3.30432,-5.994584 0,0 6.92504,-9.239836 -4.54348,-16.435394 0,0 1.47325,8.830328 -12.79879,8.687801 0,0 -8.28178,0.362869 -13.120501,6.265933 0,0 0.540185,-0.517891 -0.965062,-2.011337 0,0 -4.953283,2.731414 -1.9964,7.330799 -0.105743,-0.156986 -0.868322,-0.319905 -1.888088,0.963288 -1.019766,1.283193 -1.546939,4.720444 -5.135824,2.132322 -0.125961,-0.110312 -5.464383,10.905512 5.046487,13.691904 0,0 -3.181314,-2.134582 -8.040403,-2.315315 z"
id="path42-5"
sodipodi:nodetypes="cscccccccccczcccc" />
<path
style="fill:#00ffff;fill-opacity:1;stroke:#4cb6ff;stroke-width:2.685;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter53-0)"
d="M 110.71618,78.763355 C 96.972001,72.898082 95.430152,62.93072 95.430152,62.93072 c 0,0 -0.461566,-13.776977 14.899308,-14.045396 15.36087,-0.268419 8.9726,19.798029 8.9726,19.798029 0,0 -2.94074,8.304227 -8.58588,10.080002 z"
id="path44-7" />
<g
id="g90">
<path
style="fill:#00ffff;fill-opacity:1;stroke:#4cb6ff;stroke-width:2.685;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter52-4)"
d="m 115.08629,62.972525 c 0,0 -5.09148,4.033305 1.91508,7.23519 3.75023,1.713795 3.32631,5.807283 -0.15425,5.68464 0,0 12.79178,3.464984 9.02073,-11.432942 -2.31599,-9.149592 -8.64586,-3.296421 -10.78155,-1.486888 z"
id="path43-9"
sodipodi:nodetypes="cscscc" />
<path
style="display:inline;fill:#1be449;fill-opacity:1;stroke:#010000;stroke-width:1.18533;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 81.111729,67.225617 c 0,0 1.8504,10.984846 22.469961,11.168349 26.69842,0.237603 28.86933,-14.022575 28.86933,-14.022575 0,0 -3.57314,1.720542 -4.0421,0.903392 0,0 4.01112,-5.016688 2.87298,-11.259163 0,0 -0.63553,2.702598 -3.42379,0.894575 0,0 1.25012,-2.589896 -3.30432,-5.994584 0,0 6.92504,-9.239836 -4.54348,-16.435394 0,0 1.47325,8.830328 -12.79879,8.687801 0,0 -8.28178,0.362869 -13.120501,6.265933 0,0 0.540185,-0.517891 -0.965062,-2.011337 0,0 -4.953283,2.731414 -1.9964,7.330799 -0.105743,-0.156986 -0.868322,-0.319905 -1.888088,0.963288 -1.019766,1.283193 -1.546939,4.720444 -5.135824,2.132322 -0.125961,-0.110312 -5.464383,10.905512 5.046487,13.691904 0,0 -3.181314,-2.134582 -8.040403,-2.315315 z"
id="path22-2-7"
sodipodi:nodetypes="cscccccccccczcccc" />
<path
style="display:inline;fill:#1be449;fill-opacity:1;stroke:#010000;stroke-width:1.18533;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="m 115.08629,62.972525 c 0,0 -5.09148,4.033305 1.91508,7.23519 3.75023,1.713795 3.32631,5.807283 -0.15425,5.68464 0,0 12.79178,3.464984 9.02073,-11.432942 -2.31599,-9.149592 -8.64586,-3.296421 -10.78155,-1.486888 z"
id="path24-5-8-6"
sodipodi:nodetypes="cscscc" />
<path
style="display:inline;fill:#1be449;fill-opacity:1;stroke:#010000;stroke-width:1.18533;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="M 110.71618,78.763355 C 96.972001,72.898082 95.430152,62.93072 95.430152,62.93072 c 0,0 -0.461566,-13.776977 14.899308,-14.045396 15.36087,-0.268419 8.9726,19.798029 8.9726,19.798029 0,0 -2.94074,8.304227 -8.58588,10.080002 z"
id="path21-9-7" />
<path
style="fill:#157def;fill-opacity:1;stroke:none;stroke-width:0.245146px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 81.11173,67.225615 c 0,0 1.8504,10.984846 22.46996,11.168349 26.69842,0.237603 28.86933,-14.022575 28.86933,-14.022575 0,0 -3.57314,1.720542 -4.0421,0.903392 0,0 4.01112,-5.016688 2.87298,-11.259163 0,0 -0.63553,2.702598 -3.42379,0.894575 0,0 1.25012,-2.589896 -3.30432,-5.994584 0,0 6.92504,-9.239836 -4.54348,-16.435394 0,0 1.47325,8.830328 -12.79879,8.687801 0,0 -8.281779,0.362869 -13.1205,6.265933 0,0 0.540185,-0.517891 -0.965062,-2.011337 0,0 -4.953283,2.731414 -1.9964,7.330799 -0.105743,-0.156986 -0.868322,-0.319905 -1.888088,0.963288 -1.019766,1.283193 -1.546939,4.720444 -5.135824,2.132322 -0.125961,-0.110312 -5.464383,10.905512 5.046487,13.691904 0,0 -3.181314,-2.134582 -8.040403,-2.315315 z"
id="path22-3"
sodipodi:nodetypes="cscccccccccczcccc" />
<path
style="fill:#1bf4ff;fill-opacity:1;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 115.34887,63.23803 c 0,0 -5.09148,4.033305 1.91508,7.23519 3.75023,1.713795 3.32632,5.807283 -0.15425,5.68464 0,0 12.79178,3.464984 9.02073,-11.432942 -2.31599,-9.149592 -8.64586,-3.296421 -10.78155,-1.486888 z"
id="path24-5-6"
sodipodi:nodetypes="cscscc" />
<path
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.3;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="M 110.71618,78.763355 C 96.972002,72.898082 95.430153,62.93072 95.430153,62.93072 c 0,0 -0.461566,-13.776977 14.899307,-14.045396 15.36087,-0.268419 8.9726,19.798029 8.9726,19.798029 0,0 -2.94074,8.304227 -8.58588,10.080002 z"
id="path21-5" />
<path
style="fill:#1bf4ff;fill-opacity:1;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 94.864951,62.718752 c 0,0 -6.320233,2.122207 -0.752747,7.446399 4.633073,4.430612 -0.162964,5.652016 -1.920412,5.150286 0,0 11.625128,7.524499 11.386268,-6.478142 -0.16097,-9.436787 -6.077342,-7.061045 -8.713109,-6.118543 z m 3.042093,2.162416"
id="path24-6"
sodipodi:nodetypes="cscsc" />
<path
style="display:inline;fill:none;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 110.83863,69.794932 0.89836,-0.898366 0.79635,0.855326"
id="path34-4"
sodipodi:nodetypes="ccc" />
<path
style="display:inline;fill:none;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 106.62892,66.290836 -1.29819,-0.738089"
id="path35-8"
sodipodi:nodetypes="cc" />
<path
style="display:inline;fill:none;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 106.02809,67.320816 -1.14337,0.4605"
id="path36-1"
sodipodi:nodetypes="cc" />
<path
style="display:inline;fill:none;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 116.16865,66.597072 1.49301,-0.792762"
id="path37-2"
sodipodi:nodetypes="cc" />
<path
style="display:inline;fill:none;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 116.58443,67.797154 1.19919,0.616066"
id="path38-9"
sodipodi:nodetypes="cc" />
<path
style="fill:#157def;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 94.864951,62.718752 c 0,0 8.998139,3.357621 13.917659,-6.560232 0,0 2.97765,2.701407 0.87848,6.584832 0,0 12.00032,-5.847747 6.7862,-14.490444 0,0 -2.84881,11.315605 4.54277,13.632726 9.22397,2.891542 -1.1854,-15.659935 -1.39291,-15.6744 0,0 -29.798339,-7.904202 -24.978713,13.247126"
id="path23-9"
sodipodi:nodetypes="ccccscc" />
<path
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.533;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="m 97.720105,57.862129 c 0,0 -2.461542,1.806323 -2.436221,4.10365 0.02532,2.297315 4.324952,2.848845 4.745686,0.537049 0.42075,-2.311795 -0.745544,-4.45118 -0.745544,-4.45118"
id="path25-2-9-08"
sodipodi:nodetypes="cssc" />
<path
style="fill:none;fill-opacity:1;stroke:url(#linearGradient56);stroke-width:1.32444;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none"
d="m 97.717092,57.867528 c 0,0 -2.461542,1.806322 -2.436221,4.10365 0.02532,2.297314 4.324953,2.848844 4.745689,0.537048 0.42075,-2.311795 -0.745547,-4.45118 -0.745547,-4.45118"
id="path25-2-8"
sodipodi:nodetypes="cssc" />
<path
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.23256;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="m 121.73718,56.341676 c 0,0 -1.66073,2.117 -1.09429,4.060825 0.56644,1.943812 4.34653,1.392001 4.15524,-0.669913 -0.19128,-2.061915 -1.68864,-3.601038 -1.68864,-3.601038"
id="path25-2-9-0-5"
sodipodi:nodetypes="cssc" />
<path
style="fill:none;fill-opacity:1;stroke:url(#linearGradient57);stroke-width:1.16718;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none"
d="m 121.7359,56.346973 c 0,0 -1.66073,2.116998 -1.09429,4.060824 0.56644,1.943812 4.34653,1.392 4.15524,-0.669913 -0.19127,-2.061915 -1.68863,-3.601038 -1.68863,-3.601038"
id="path25-2-2-0"
sodipodi:nodetypes="cssc" />
<path
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 108.11348,73.834367 c 0,0 3.57824,-1.023997 6.06449,0.05696 0,0 -1.96202,2.805521 -3.06241,2.739971 -1.1004,-0.06555 -2.91441,-1.611065 -3.00208,-2.796931 z"
id="path60"
sodipodi:nodetypes="ccsc" />
<path
style="fill:none;stroke:#000000;stroke-width:0.661458;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="m 107.37273,72.677535 c -0.0617,-0.07068 4.1901,-1.67498 7.3397,-0.0547 0.25432,0.167151 -1.9285,4.053852 -3.59687,4.008463 -1.88117,-0.05117 -4.03008,-3.679411 -3.74283,-3.953763 z"
id="path59"
sodipodi:nodetypes="ccsc" />
<path
style="fill:none;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="m 106.02809,67.320815 c 0,0 2.10194,-2.8531 4.7869,-0.930791"
id="path61" />
</g>
<path
style="fill:none;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="m 116.58443,67.797152 c 0,0 -1.16832,-2.913599 -3.2849,-1.299353"
id="path62" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

273
static/imgs/chan/surprise.svg Executable file
View File

@ -0,0 +1,273 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="55.195705mm"
height="50.226509mm"
viewBox="0 0 55.195706 50.226509"
version="1.1"
id="svg1"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
sodipodi:docname="surprise.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
inkscape:zoom="3.8075125"
inkscape:cx="89.297147"
inkscape:cy="109.78296"
inkscape:window-width="1920"
inkscape:window-height="1080"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs1">
<filter
inkscape:collect="always"
style="color-interpolation-filters:sRGB"
id="filter51"
x="-0.037558168"
y="-0.041991194"
width="1.0751161"
height="1.0839849">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="0.24405608"
id="feGaussianBlur51" />
</filter>
<filter
inkscape:collect="always"
style="color-interpolation-filters:sRGB"
id="filter52"
x="-0.14455576"
y="-0.11419457"
width="1.2901799"
height="1.2301751">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="0.24405608"
id="feGaussianBlur52" />
</filter>
<filter
inkscape:collect="always"
style="color-interpolation-filters:sRGB"
id="filter53"
x="-0.07654728"
y="-0.064526052"
width="1.1531256"
height="1.13197">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="0.24405608"
id="feGaussianBlur53" />
</filter>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient31"
id="linearGradient32"
x1="77.300636"
y1="39.613533"
x2="77.300636"
y2="39.616539"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.0015904,0,0,0.95874731,-43.068978,0.94362174)" />
<linearGradient
id="linearGradient31"
inkscape:collect="always">
<stop
style="stop-color:#3992f3;stop-opacity:1;"
offset="0"
id="stop31" />
<stop
style="stop-color:#1bf4ff;stop-opacity:1;"
offset="1"
id="stop32" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient31"
id="linearGradient34"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.0015904,0,0,0.95874731,-42.580495,0.94362174)"
x1="77.300636"
y1="39.613533"
x2="77.300636"
y2="39.616539" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient25"
id="linearGradient26"
x1="37.503448"
y1="64.628593"
x2="37.693779"
y2="57.443047"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.0833182,0.17840957,-0.17840957,1.0833182,-5.2481461,-38.336674)" />
<linearGradient
id="linearGradient25"
inkscape:collect="always">
<stop
style="stop-color:#0060f2;stop-opacity:1;"
offset="0"
id="stop25" />
<stop
style="stop-color:#2be7ff;stop-opacity:1;"
offset="1"
id="stop26" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient25"
id="linearGradient27"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.96177466,-0.105551,0.105551,0.96177466,6.6683033,-22.263376)"
x1="37.503448"
y1="64.628593"
x2="37.693779"
y2="57.443047" />
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-74.540716,-71.13755)">
<g
id="g94"
transform="translate(68.722143,66.894923)">
<path
style="fill:#00ffff;fill-opacity:1;stroke:#4cb6ff;stroke-width:2.685;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter51)"
d="m 7.746783,40.916124 c 0,0 1.8504,10.984846 22.469963,11.168349 26.698422,0.237603 28.869332,-14.022575 28.869332,-14.022575 0,0 -3.57314,1.720542 -4.0421,0.903392 0,0 4.01112,-5.016688 2.87298,-11.259163 0,0 -0.63553,2.702598 -3.42379,0.894575 0,0 1.25012,-2.589896 -3.30432,-5.994584 0,0 6.92504,-9.239836 -4.543483,-16.4353943 0,0 1.473253,8.8303283 -12.798793,8.6878013 0,0 -8.281778,0.362869 -13.120499,6.265933 0,0 0.540185,-0.517891 -0.965062,-2.011337 0,0 -4.953283,2.731414 -1.9964,7.330799 -0.105743,-0.156986 -0.868322,-0.319905 -1.888088,0.963288 -1.019766,1.283193 -1.546939,4.720444 -5.135824,2.132322 -0.125961,-0.110312 -5.464383,10.905512 5.046487,13.691904 0,0 -3.181314,-2.134582 -8.040403,-2.315315 z"
id="path42"
sodipodi:nodetypes="cscccccccccczcccc" />
<path
style="fill:#00ffff;fill-opacity:1;stroke:#4cb6ff;stroke-width:2.685;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter52)"
d="m 41.721345,36.663032 c 0,0 -5.091479,4.033305 1.91508,7.23519 3.75023,1.713795 3.32631,5.807283 -0.15425,5.68464 0,0 12.791783,3.464984 9.020733,-11.432942 -2.31599,-9.149592 -8.645863,-3.296421 -10.781553,-1.486888 z"
id="path43"
sodipodi:nodetypes="cscscc" />
<path
style="fill:#00ffff;fill-opacity:1;stroke:#4cb6ff;stroke-width:2.685;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter53)"
d="M 37.351233,52.453862 C 23.607055,46.588589 22.065206,36.621227 22.065206,36.621227 c 0,0 -0.461566,-13.776977 14.899306,-14.045396 15.360876,-0.268419 8.972603,19.798029 8.972603,19.798029 0,0 -2.94074,8.304227 -8.585882,10.080002 z"
id="path44" />
<path
style="display:inline;fill:#1be449;fill-opacity:1;stroke:#010000;stroke-width:1.18533;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 7.746783,40.916124 c 0,0 1.8504,10.984846 22.469963,11.168349 26.698422,0.237603 28.869332,-14.022575 28.869332,-14.022575 0,0 -3.57314,1.720542 -4.0421,0.903392 0,0 4.01112,-5.016688 2.87298,-11.259163 0,0 -0.63553,2.702598 -3.42379,0.894575 0,0 1.25012,-2.589896 -3.30432,-5.994584 0,0 6.92504,-9.239836 -4.543483,-16.4353943 0,0 1.473253,8.8303283 -12.798793,8.6878013 0,0 -8.281778,0.362869 -13.120499,6.265933 0,0 0.540185,-0.517891 -0.965062,-2.011337 0,0 -4.953283,2.731414 -1.9964,7.330799 -0.105743,-0.156986 -0.868322,-0.319905 -1.888088,0.963288 -1.019766,1.283193 -1.546939,4.720444 -5.135824,2.132322 -0.125961,-0.110312 -5.464383,10.905512 5.046487,13.691904 0,0 -3.181314,-2.134582 -8.040403,-2.315315 z"
id="path22-2"
sodipodi:nodetypes="cscccccccccczcccc" />
<path
style="display:inline;fill:#1be449;fill-opacity:1;stroke:#010000;stroke-width:1.18533;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="m 41.721345,36.663032 c 0,0 -5.091479,4.033305 1.91508,7.23519 3.75023,1.713795 3.32631,5.807283 -0.15425,5.68464 0,0 12.791783,3.464984 9.020733,-11.432942 -2.31599,-9.149592 -8.645863,-3.296421 -10.781553,-1.486888 z"
id="path24-5-8"
sodipodi:nodetypes="cscscc" />
<path
style="display:inline;fill:#1be449;fill-opacity:1;stroke:#010000;stroke-width:1.18533;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="M 37.351233,52.453862 C 23.607055,46.588589 22.065206,36.621227 22.065206,36.621227 c 0,0 -0.461566,-13.776977 14.899306,-14.045396 15.360876,-0.268419 8.972603,19.798029 8.972603,19.798029 0,0 -2.94074,8.304227 -8.585882,10.080002 z"
id="path21-9" />
<path
style="fill:#157def;fill-opacity:1;stroke:none;stroke-width:0.245146px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 2.7682708,-12.13863 c 0,0 1.8503998,10.9848457 22.4699632,11.16834932 26.698418,0.23760229 28.86933,-14.02257532 28.86933,-14.02257532 0,0 -3.573145,1.720542 -4.042106,0.903392 0,0 4.011124,-5.016688 2.872987,-11.259163 0,0 -0.635532,2.702598 -3.42379,0.894575 0,0 1.250114,-2.589896 -3.304321,-5.994584 0,0 6.925039,-9.239836 -4.543485,-16.435394 0,0 1.473257,8.830328 -12.798789,8.687801 0,0 -8.281778,0.362869 -13.120499,6.265933 0,0 0.540185,-0.517891 -0.965062,-2.011337 0,0 -4.9532829,2.731414 -1.9964,7.330799 -0.105743,-0.156986 -0.868322,-0.319905 -1.888088,0.963288 -1.0197657,1.283193 -1.5469391,4.720444 -5.1358243,2.132322 -0.1259607,-0.110312 -5.464383,10.905512 5.0464873,13.6919045 0,0 -3.1813142,-2.1345825 -8.0404032,-2.3153155 z"
id="path22"
sodipodi:nodetypes="cscccccccccczcccc"
transform="translate(4.9785135,53.054753)" />
<path
style="fill:#1bf4ff;fill-opacity:1;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 41.983931,36.928537 c 0,0 -5.091482,4.033305 1.915076,7.23519 3.75023,1.713795 3.326315,5.807283 -0.154254,5.68464 0,0 12.791785,3.464984 9.020737,-11.432942 -2.315996,-9.149592 -8.645866,-3.296421 -10.781555,-1.486888 z"
id="path24-5"
sodipodi:nodetypes="cscscc" />
<path
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.3;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="M 37.351234,52.453862 C 23.607056,46.588589 22.065207,36.621227 22.065207,36.621227 c 0,0 -0.461566,-13.776977 14.899306,-14.045396 15.360872,-0.268419 8.972603,19.798029 8.972603,19.798029 0,0 -2.940741,8.304227 -8.585882,10.080002 z"
id="path21" />
<path
style="fill:#1bf4ff;fill-opacity:1;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 21.500005,36.409259 c 0,0 -6.320233,2.122207 -0.752747,7.446399 4.633073,4.430612 -0.162964,5.652016 -1.920412,5.150286 0,0 11.625129,7.524499 11.386271,-6.478142 -0.160973,-9.436787 -6.077345,-7.061045 -8.713112,-6.118543 z m 3.042093,2.162416"
id="path24"
sodipodi:nodetypes="cscsc" />
<path
style="fill:url(#linearGradient32);fill-opacity:1;stroke:#000000;stroke-width:0.661458;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="m 33.00865,37.156616 c -0.0177,0.497819 -0.60444,4.077766 1.144726,6.17621 1.900309,2.279767 3.463832,-8.609579 2.660397,-9.603751 -0.856762,-1.06016 -3.177245,-1.420138 -3.805123,3.427541 z"
id="path29"
sodipodi:nodetypes="cssc"
transform="translate(-0.52916667)" />
<path
style="display:inline;fill:url(#linearGradient34);fill-opacity:1;stroke:#000000;stroke-width:0.661458;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="m 33.497133,37.156616 c -0.0177,0.497819 -0.60444,4.077766 1.144726,6.17621 1.900309,2.279767 3.463832,-8.609579 2.660397,-9.603751 -0.856762,-1.06016 -3.177245,-1.420138 -3.805123,3.427541 z"
id="path29-4"
sodipodi:nodetypes="cssc"
transform="translate(6.8427925)" />
<path
style="display:inline;fill:none;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 30.675768,44.979851 0.898366,-0.898366 0.796347,0.855326"
id="path34"
sodipodi:nodetypes="ccc"
transform="translate(6.8427925)" />
<path
style="display:inline;fill:none;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 25.774405,36.302907 24.476209,35.564818"
id="path35"
sodipodi:nodetypes="cc"
transform="translate(6.8427925)" />
<path
style="display:inline;fill:none;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 25.820353,41.54049 -1.143367,0.4605"
id="path36"
sodipodi:nodetypes="cc"
transform="translate(6.8427925)" />
<path
style="display:inline;fill:none;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 37.439691,36.68831 1.493007,-0.792762"
id="path37"
sodipodi:nodetypes="cc"
transform="translate(6.8427925)" />
<path
style="display:inline;fill:none;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 36.376691,42.016828 1.199192,0.616066"
id="path38"
sodipodi:nodetypes="cc"
transform="translate(6.8427925)" />
<path
style="display:inline;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.661458;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="m 31.443452,47.285107 c -0.30895,-0.303188 -0.964784,0.2281 -1.011287,1.940058 -0.01227,0.451619 0.06676,1.117548 0.410049,1.216118 0.554366,0.159183 0.827326,-0.606137 0.842344,-1.608248 0.0081,-0.542463 0.03586,-1.276126 -0.241106,-1.547928 z"
id="path39"
sodipodi:nodetypes="sssss"
transform="translate(6.8427925)" />
<path
style="fill:#157def;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 21.500005,36.409259 c 0,0 8.998139,3.357621 13.917664,-6.560232 0,0 2.977644,2.701407 0.878475,6.584832 0,0 12.000318,-5.847747 6.786203,-14.490444 0,0 -2.627919,10.702597 4.542765,13.632726 6.634525,2.711041 -1.392911,-15.6744 -1.392911,-15.6744 0,0 -29.798336,-7.904202 -24.97871,13.247126"
id="path23"
sodipodi:nodetypes="ccccscc" />
<path
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.61937;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="m 24.355159,31.552636 c 0,0 -2.461542,1.806323 -2.436221,4.10365 0.02532,2.297315 4.324952,2.848845 4.745687,0.537049 0.420747,-2.311795 -0.745545,-4.45118 -0.745545,-4.45118"
id="path25-2-9"
sodipodi:nodetypes="cssc" />
<path
style="fill:none;fill-opacity:1;stroke:url(#linearGradient26);stroke-width:1.32292;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none"
d="m 24.352146,31.558035 c 0,0 -2.461542,1.806322 -2.436221,4.10365 0.02532,2.297314 4.324953,2.848844 4.745688,0.537048 0.420747,-2.311795 -0.745546,-4.45118 -0.745546,-4.45118"
id="path25-2"
sodipodi:nodetypes="cssc" />
<path
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.61937;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="m 48.37223,30.032183 c 0,0 -1.660728,2.117 -1.094288,4.060825 0.566438,1.943812 4.34653,1.392001 4.155243,-0.669913 -0.191277,-2.061915 -1.688639,-3.601038 -1.688639,-3.601038"
id="path25-2-9-0"
sodipodi:nodetypes="cssc" />
<path
style="fill:none;fill-opacity:1;stroke:url(#linearGradient27);stroke-width:1.32292;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none"
d="m 48.370954,30.03748 c 0,0 -1.660728,2.116998 -1.094288,4.060824 0.566437,1.943812 4.346531,1.392 4.155243,-0.669913 -0.191278,-2.061915 -1.688639,-3.601038 -1.688639,-3.601038"
id="path25-2-2"
sodipodi:nodetypes="cssc" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

258
static/imgs/chan/tongueout.svg Executable file
View File

@ -0,0 +1,258 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="55.195698mm"
height="50.226509mm"
viewBox="0 0 55.195698 50.226509"
version="1.1"
id="svg1"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
sodipodi:docname="tongueout.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
inkscape:zoom="0.75391217"
inkscape:cx="113.40844"
inkscape:cy="194.98293"
inkscape:window-width="1920"
inkscape:window-height="1080"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs1">
<filter
inkscape:collect="always"
style="color-interpolation-filters:sRGB"
id="filter51-5-1"
x="-0.037558156"
y="-0.041991194"
width="1.0751161"
height="1.0839849">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="0.24405608"
id="feGaussianBlur51-9-8" />
</filter>
<filter
inkscape:collect="always"
style="color-interpolation-filters:sRGB"
id="filter52-4-9"
x="-0.14455578"
y="-0.11419459"
width="1.2901799"
height="1.2301752">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="0.24405608"
id="feGaussianBlur52-9-6" />
</filter>
<filter
inkscape:collect="always"
style="color-interpolation-filters:sRGB"
id="filter53-0-4"
x="-0.076547279"
y="-0.064526055"
width="1.1531256"
height="1.13197">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="0.24405608"
id="feGaussianBlur53-9-3" />
</filter>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient31"
id="linearGradient68"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.0015904,0,0,0.95874731,42.118933,110.0862)"
x1="77.300636"
y1="39.613533"
x2="77.300636"
y2="39.616539" />
<linearGradient
id="linearGradient31"
inkscape:collect="always">
<stop
style="stop-color:#3992f3;stop-opacity:1;"
offset="0"
id="stop31" />
<stop
style="stop-color:#1bf4ff;stop-opacity:1;"
offset="1"
id="stop32" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient25"
id="linearGradient66"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.0833182,0.17840957,-0.17840957,1.0833182,80.261912,70.923785)"
x1="37.503448"
y1="64.628593"
x2="37.693779"
y2="57.443047" />
<linearGradient
id="linearGradient25"
inkscape:collect="always">
<stop
style="stop-color:#0060f2;stop-opacity:1;"
offset="0"
id="stop25" />
<stop
style="stop-color:#2be7ff;stop-opacity:1;"
offset="1"
id="stop26" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient25"
id="linearGradient67"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.96177466,-0.105551,0.105551,0.96177466,92.178361,86.997083)"
x1="37.503448"
y1="64.628593"
x2="37.693779"
y2="57.443047" />
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-74.54072,-71.13755)">
<g
id="g97"
transform="translate(-16.787912,-42.365534)">
<path
style="fill:#00ffff;fill-opacity:1;stroke:#4cb6ff;stroke-width:2.685;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter51-5-1)"
d="m 93.256841,150.17658 c 0,0 1.8504,10.98485 22.469959,11.16835 26.69842,0.2376 28.86933,-14.02257 28.86933,-14.02257 0,0 -3.57314,1.72054 -4.0421,0.90339 0,0 4.01112,-5.01669 2.87298,-11.25916 0,0 -0.63553,2.70259 -3.42379,0.89457 0,0 1.25012,-2.5899 -3.30432,-5.99458 0,0 6.92504,-9.23984 -4.54348,-16.4354 0,0 1.47325,8.83033 -12.79879,8.6878 0,0 -8.28178,0.36287 -13.1205,6.26594 0,0 0.54019,-0.51789 -0.96506,-2.01134 0,0 -4.95328,2.73141 -1.9964,7.3308 -0.10574,-0.15699 -0.86832,-0.31991 -1.88809,0.96329 -1.01977,1.28319 -1.546938,4.72044 -5.135823,2.13232 -0.125961,-0.11031 -5.464383,10.90551 5.046483,13.6919 0,0 -3.18131,-2.13458 -8.040399,-2.31531 z"
id="path42-5-6"
sodipodi:nodetypes="cscccccccccczcccc" />
<path
style="fill:#00ffff;fill-opacity:1;stroke:#4cb6ff;stroke-width:2.685;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter52-4-9)"
d="m 127.2314,145.92349 c 0,0 -5.09148,4.03331 1.91508,7.23519 3.75023,1.7138 3.32631,5.80728 -0.15425,5.68464 0,0 12.79178,3.46498 9.02073,-11.43294 -2.31599,-9.14959 -8.64586,-3.29642 -10.78155,-1.48689 z"
id="path43-9-0"
sodipodi:nodetypes="cscscc" />
<path
style="fill:#00ffff;fill-opacity:1;stroke:#4cb6ff;stroke-width:2.685;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter53-0-4)"
d="m 122.86129,161.71432 c -13.74418,-5.86527 -15.28603,-15.83263 -15.28603,-15.83263 0,0 -0.46156,-13.77698 14.89931,-14.0454 15.36087,-0.26842 8.9726,19.79803 8.9726,19.79803 0,0 -2.94074,8.30423 -8.58588,10.08 z"
id="path44-7-4" />
<path
style="display:inline;fill:#1be449;fill-opacity:1;stroke:#010000;stroke-width:1.18533;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 93.256841,150.17658 c 0,0 1.8504,10.98485 22.469959,11.16835 26.69842,0.2376 28.86933,-14.02257 28.86933,-14.02257 0,0 -3.57314,1.72054 -4.0421,0.90339 0,0 4.01112,-5.01669 2.87298,-11.25916 0,0 -0.63553,2.70259 -3.42379,0.89457 0,0 1.25012,-2.5899 -3.30432,-5.99458 0,0 6.92504,-9.23984 -4.54348,-16.4354 0,0 1.47325,8.83033 -12.79879,8.6878 0,0 -8.28178,0.36287 -13.1205,6.26594 0,0 0.54019,-0.51789 -0.96506,-2.01134 0,0 -4.95328,2.73141 -1.9964,7.3308 -0.10574,-0.15699 -0.86832,-0.31991 -1.88809,0.96329 -1.01977,1.28319 -1.546938,4.72044 -5.135823,2.13232 -0.125961,-0.11031 -5.464383,10.90551 5.046483,13.6919 0,0 -3.18131,-2.13458 -8.040399,-2.31531 z"
id="path22-2-7-8"
sodipodi:nodetypes="cscccccccccczcccc" />
<path
style="display:inline;fill:#1be449;fill-opacity:1;stroke:#010000;stroke-width:1.18533;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="m 127.2314,145.92349 c 0,0 -5.09148,4.03331 1.91508,7.23519 3.75023,1.7138 3.32631,5.80728 -0.15425,5.68464 0,0 12.79178,3.46498 9.02073,-11.43294 -2.31599,-9.14959 -8.64586,-3.29642 -10.78155,-1.48689 z"
id="path24-5-8-6-8"
sodipodi:nodetypes="cscscc" />
<path
style="display:inline;fill:#1be449;fill-opacity:1;stroke:#010000;stroke-width:1.18533;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="m 122.86129,161.71432 c -13.74418,-5.86527 -15.28603,-15.83263 -15.28603,-15.83263 0,0 -0.46156,-13.77698 14.89931,-14.0454 15.36087,-0.26842 8.9726,19.79803 8.9726,19.79803 0,0 -2.94074,8.30423 -8.58588,10.08 z"
id="path21-9-7-8" />
<path
style="fill:#157def;fill-opacity:1;stroke:none;stroke-width:0.245146px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 93.256842,150.17658 c 0,0 1.8504,10.98485 22.469958,11.16835 26.69842,0.2376 28.86933,-14.02258 28.86933,-14.02258 0,0 -3.57314,1.72055 -4.0421,0.9034 0,0 4.01112,-5.01669 2.87298,-11.25917 0,0 -0.63553,2.7026 -3.42379,0.89458 0,0 1.25012,-2.5899 -3.30432,-5.99459 0,0 6.92504,-9.23983 -4.54348,-16.43539 0,0 1.47325,8.83033 -12.79879,8.6878 0,0 -8.28178,0.36287 -13.1205,6.26593 0,0 0.54019,-0.51789 -0.96506,-2.01133 0,0 -4.95328,2.73141 -1.9964,7.3308 -0.10574,-0.15699 -0.86832,-0.31991 -1.88809,0.96328 -1.01976,1.2832 -1.546937,4.72045 -5.135822,2.13233 -0.125961,-0.11032 -5.464383,10.90551 5.046482,13.6919 0,0 -3.181309,-2.13458 -8.040398,-2.31531 z"
id="path22-3-9"
sodipodi:nodetypes="cscccccccccczcccc" />
<path
style="fill:#1bf4ff;fill-opacity:1;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 127.23672,146.17498 c 0,0 -5.09148,4.03331 1.91508,7.23519 3.75023,1.7138 3.32632,5.80728 -0.15425,5.68464 0,0 12.79178,3.46498 9.02073,-11.43294 -2.31599,-9.14959 -8.64586,-3.29642 -10.78155,-1.48689 z"
id="path24-5-6-7"
sodipodi:nodetypes="cscscc" />
<path
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.3;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="m 122.86129,161.71432 c -13.74418,-5.86527 -15.28603,-15.83263 -15.28603,-15.83263 0,0 -0.46156,-13.77698 14.89931,-14.0454 15.36087,-0.26842 8.9726,19.79803 8.9726,19.79803 0,0 -2.94074,8.30423 -8.58588,10.08 z"
id="path21-5-7" />
<path
style="fill:#1bf4ff;fill-opacity:1;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 107.01006,145.66972 c 0,0 -6.32023,2.1222 -0.75274,7.4464 4.63307,4.43061 -0.16297,5.65201 -1.92042,5.15028 0,0 11.62513,7.5245 11.38627,-6.47814 -0.16097,-9.43679 -6.07734,-7.06104 -8.71311,-6.11854 z m 3.0421,2.16241"
id="path24-6-6"
sodipodi:nodetypes="cscsc" />
<path
style="display:inline;fill:none;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 122.98374,153.27507 0.89836,-0.89837 0.79635,0.85533"
id="path34-4-4"
sodipodi:nodetypes="ccc" />
<path
style="display:inline;fill:none;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 128.31376,149.54804 1.49301,-0.79276"
id="path37-2-3"
sodipodi:nodetypes="cc" />
<path
style="display:inline;fill:none;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 128.72954,150.74812 1.19919,0.61607"
id="path38-9-0"
sodipodi:nodetypes="cc" />
<path
style="display:inline;fill:url(#linearGradient68);fill-opacity:1;stroke:#000000;stroke-width:0.661458;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="m 118.19656,146.29921 c -0.0177,0.49781 -0.60444,4.07776 1.14472,6.17621 1.90031,2.27976 3.46383,-8.60958 2.6604,-9.60376 -0.85676,-1.06016 -3.17725,-1.42013 -3.80512,3.42755 z"
id="path29-7"
sodipodi:nodetypes="cssc" />
<path
style="fill:#157def;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 107.01006,145.66972 c 0,0 8.99814,3.35762 13.91766,-6.56023 -0.0322,0.12423 3.21504,3.14853 1.21067,6.66674 0,0 11.66813,-5.92966 6.45401,-14.57236 0,0 -2.75048,11.02255 4.54277,13.63273 9.21093,3.2965 -1.14741,-15.61861 -1.39291,-15.6744 0,0 -29.79834,-7.9042 -24.97871,13.24713"
id="path23-9-9"
sodipodi:nodetypes="ccccscc" />
<path
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.533;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="m 109.86522,140.81309 c 0,0 -2.46155,1.80633 -2.43622,4.10365 0.0253,2.29732 4.32495,2.84885 4.74568,0.53705 0.42075,-2.31179 -0.74554,-4.45118 -0.74554,-4.45118"
id="path25-2-9-08-2"
sodipodi:nodetypes="cssc" />
<path
style="fill:none;fill-opacity:1;stroke:url(#linearGradient66);stroke-width:1.32444;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none"
d="m 109.8622,140.81849 c 0,0 -2.46154,1.80633 -2.43622,4.10365 0.0253,2.29732 4.32496,2.84885 4.74569,0.53705 0.42075,-2.31179 -0.74555,-4.45118 -0.74555,-4.45118"
id="path25-2-8-5"
sodipodi:nodetypes="cssc" />
<path
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.23256;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="m 133.88229,139.29264 c 0,0 -1.66073,2.117 -1.09429,4.06083 0.56644,1.94381 4.34653,1.392 4.15524,-0.66992 -0.19128,-2.06191 -1.68864,-3.60103 -1.68864,-3.60103"
id="path25-2-9-0-5-4"
sodipodi:nodetypes="cssc" />
<path
style="fill:none;fill-opacity:1;stroke:url(#linearGradient67);stroke-width:1.16718;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none"
d="m 133.88101,139.29794 c 0,0 -1.66073,2.117 -1.09429,4.06082 0.56644,1.94381 4.34653,1.392 4.15524,-0.66991 -0.19127,-2.06192 -1.68863,-3.60104 -1.68863,-3.60104"
id="path25-2-2-0-0"
sodipodi:nodetypes="cssc" />
<path
style="fill:none;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="m 128.72954,150.74812 c 0,0 -1.16832,-2.9136 -3.2849,-1.29936"
id="path62-6" />
<path
style="display:inline;fill:none;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 118.33427,145.4455 -1.2982,-0.73809"
id="path35-5"
sodipodi:nodetypes="cc" />
<path
style="display:inline;fill:none;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 118.38022,150.68308 -1.14337,0.4605"
id="path36-4"
sodipodi:nodetypes="cc" />
<path
style="fill:none;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="m 123.52728,157.0533 c 0,0 2.64152,0.53068 4.06767,-1.54766"
id="path68"
sodipodi:nodetypes="cc" />
<path
style="fill:#f339ba;fill-opacity:1;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="m 126.9766,156.38454 c 0,0 1.08724,0.97558 0.39701,1.64472 -0.69024,0.66914 -2.06493,-0.95688 -2.06493,-0.95688 0,0 0.83567,-0.0607 1.3715,-0.64538"
id="path69"
sodipodi:nodetypes="cscc" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

252
static/imgs/chan/wink.svg Executable file
View File

@ -0,0 +1,252 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="55.195705mm"
height="50.226513mm"
viewBox="0 0 55.195706 50.226513"
version="1.1"
id="svg1"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
sodipodi:docname="wink.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
inkscape:zoom="3.8075125"
inkscape:cx="89.559786"
inkscape:cy="109.52032"
inkscape:window-width="1920"
inkscape:window-height="1080"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs1">
<filter
inkscape:collect="always"
style="color-interpolation-filters:sRGB"
id="filter51-3"
x="-0.037558168"
y="-0.041991192"
width="1.0751161"
height="1.0839849">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="0.24405608"
id="feGaussianBlur51-8" />
</filter>
<filter
inkscape:collect="always"
style="color-interpolation-filters:sRGB"
id="filter52-5"
x="-0.14455576"
y="-0.11419455"
width="1.2901799"
height="1.2301751">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="0.24405608"
id="feGaussianBlur52-6" />
</filter>
<filter
inkscape:collect="always"
style="color-interpolation-filters:sRGB"
id="filter53-1"
x="-0.07654728"
y="-0.064526044"
width="1.1531256"
height="1.13197">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="0.24405608"
id="feGaussianBlur53-1" />
</filter>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient31"
id="linearGradient64"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.0015904,0,0,0.95874731,-30.177903,58.544126)"
x1="77.300636"
y1="39.613533"
x2="77.300636"
y2="39.616539" />
<linearGradient
id="linearGradient31"
inkscape:collect="always">
<stop
style="stop-color:#3992f3;stop-opacity:1;"
offset="0"
id="stop31" />
<stop
style="stop-color:#1bf4ff;stop-opacity:1;"
offset="1"
id="stop32" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient25"
id="linearGradient62"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.0833182,0.17840957,-0.17840957,1.0833182,0.31165329,19.26383)"
x1="37.503448"
y1="64.628593"
x2="37.693779"
y2="57.443047" />
<linearGradient
id="linearGradient25"
inkscape:collect="always">
<stop
style="stop-color:#0060f2;stop-opacity:1;"
offset="0"
id="stop25" />
<stop
style="stop-color:#2be7ff;stop-opacity:1;"
offset="1"
id="stop26" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient25"
id="linearGradient63"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.96177466,-0.105551,0.105551,0.96177466,12.228102,35.337128)"
x1="37.503448"
y1="64.628593"
x2="37.693779"
y2="57.443047" />
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-74.540716,-71.137548)">
<g
id="g95"
transform="translate(63.162344,9.2944166)">
<path
style="fill:#00ffff;fill-opacity:1;stroke:#4cb6ff;stroke-width:2.685;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter51-3)"
d="m 13.306582,98.516628 c 0,0 1.8504,10.984842 22.469963,11.168352 26.698422,0.2376 28.869332,-14.022578 28.869332,-14.022578 0,0 -3.57314,1.720542 -4.0421,0.903392 0,0 4.01112,-5.016688 2.87298,-11.259163 0,0 -0.63553,2.702598 -3.42379,0.894575 0,0 1.25012,-2.589896 -3.30432,-5.994584 0,0 6.92504,-9.239836 -4.543483,-16.435394 0,0 1.473253,8.830328 -12.798793,8.687801 0,0 -8.281778,0.362869 -13.120499,6.265933 0,0 0.540185,-0.517891 -0.965062,-2.011337 0,0 -4.953283,2.731414 -1.9964,7.330799 -0.105743,-0.156986 -0.868322,-0.319905 -1.888088,0.963288 -1.019766,1.283193 -1.546939,4.720444 -5.135824,2.132322 -0.125961,-0.110312 -5.464383,10.905512 5.046487,13.691906 0,0 -3.181314,-2.134584 -8.040403,-2.315317 z"
id="path42-1"
sodipodi:nodetypes="cscccccccccczcccc" />
<path
style="fill:#00ffff;fill-opacity:1;stroke:#4cb6ff;stroke-width:2.685;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter52-5)"
d="m 47.281144,94.263536 c 0,0 -5.091479,4.033305 1.91508,7.235194 3.75023,1.71379 3.32631,5.80728 -0.15425,5.68464 0,0 12.791783,3.46498 9.020733,-11.432946 -2.31599,-9.149592 -8.645863,-3.296421 -10.781553,-1.486888 z"
id="path43-0"
sodipodi:nodetypes="cscscc" />
<path
style="fill:#00ffff;fill-opacity:1;stroke:#4cb6ff;stroke-width:2.685;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter53-1)"
d="M 42.911032,110.05437 C 29.166854,104.18909 27.625005,94.221731 27.625005,94.221731 c 0,0 -0.461566,-13.776977 14.899306,-14.045396 15.360876,-0.268419 8.972603,19.798029 8.972603,19.798029 0,0 -2.94074,8.304226 -8.585882,10.080006 z"
id="path44-3" />
<path
style="display:inline;fill:#1be449;fill-opacity:1;stroke:#010000;stroke-width:1.18533;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 13.306582,98.516628 c 0,0 1.8504,10.984842 22.469963,11.168352 26.698422,0.2376 28.869332,-14.022578 28.869332,-14.022578 0,0 -3.57314,1.720542 -4.0421,0.903392 0,0 4.01112,-5.016688 2.87298,-11.259163 0,0 -0.63553,2.702598 -3.42379,0.894575 0,0 1.25012,-2.589896 -3.30432,-5.994584 0,0 6.92504,-9.239836 -4.543483,-16.435394 0,0 1.473253,8.830328 -12.798793,8.687801 0,0 -8.281778,0.362869 -13.120499,6.265933 0,0 0.540185,-0.517891 -0.965062,-2.011337 0,0 -4.953283,2.731414 -1.9964,7.330799 -0.105743,-0.156986 -0.868322,-0.319905 -1.888088,0.963288 -1.019766,1.283193 -1.546939,4.720444 -5.135824,2.132322 -0.125961,-0.110312 -5.464383,10.905512 5.046487,13.691906 0,0 -3.181314,-2.134584 -8.040403,-2.315317 z"
id="path22-2-0"
sodipodi:nodetypes="cscccccccccczcccc" />
<path
style="display:inline;fill:#1be449;fill-opacity:1;stroke:#010000;stroke-width:1.18533;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="m 47.281144,94.263536 c 0,0 -5.091479,4.033305 1.91508,7.235194 3.75023,1.71379 3.32631,5.80728 -0.15425,5.68464 0,0 12.791783,3.46498 9.020733,-11.432946 -2.31599,-9.149592 -8.645863,-3.296421 -10.781553,-1.486888 z"
id="path24-5-8-4"
sodipodi:nodetypes="cscscc" />
<path
style="display:inline;fill:#1be449;fill-opacity:1;stroke:#010000;stroke-width:1.18533;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="M 42.911032,110.05437 C 29.166854,104.18909 27.625005,94.221731 27.625005,94.221731 c 0,0 -0.461566,-13.776977 14.899306,-14.045396 15.360876,-0.268419 8.972603,19.798029 8.972603,19.798029 0,0 -2.94074,8.304226 -8.585882,10.080006 z"
id="path21-9-4" />
<path
style="fill:#157def;fill-opacity:1;stroke:none;stroke-width:0.245146px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 13.306584,98.516626 c 0,0 1.8504,10.984844 22.469963,11.168354 26.698418,0.2376 28.86933,-14.02258 28.86933,-14.02258 0,0 -3.573145,1.720542 -4.042106,0.903392 0,0 4.011124,-5.016688 2.872987,-11.259163 0,0 -0.635532,2.702598 -3.42379,0.894575 0,0 1.250114,-2.589896 -3.304321,-5.994584 0,0 6.925039,-9.239836 -4.543485,-16.435394 0,0 1.473257,8.830328 -12.798789,8.687801 0,0 -8.281778,0.362869 -13.120499,6.265933 0,0 0.540185,-0.517891 -0.965062,-2.011337 0,0 -4.953283,2.731414 -1.9964,7.330799 -0.105743,-0.156986 -0.868322,-0.319905 -1.888088,0.963288 -1.019765,1.283193 -1.546939,4.720444 -5.135824,2.132322 -0.125961,-0.110312 -5.464383,10.905512 5.046487,13.691908 0,0 -3.181314,-2.134586 -8.040403,-2.315319 z"
id="path22-4"
sodipodi:nodetypes="cscccccccccczcccc" />
<path
style="fill:#1bf4ff;fill-opacity:1;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 47.54373,94.529041 c 0,0 -5.091482,4.033305 1.915076,7.235199 3.75023,1.71379 3.326315,5.80728 -0.154254,5.68464 0,0 12.791785,3.46498 9.020737,-11.432951 -2.315996,-9.149592 -8.645866,-3.296421 -10.781555,-1.486888 z"
id="path24-5-4"
sodipodi:nodetypes="cscscc" />
<path
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.3;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="M 42.911033,110.05437 C 29.166855,104.18909 27.625006,94.221731 27.625006,94.221731 c 0,0 -0.461566,-13.776977 14.899306,-14.045396 15.360872,-0.268419 8.972603,19.798029 8.972603,19.798029 0,0 -2.940741,8.304226 -8.585882,10.080006 z"
id="path21-7" />
<path
style="fill:#1bf4ff;fill-opacity:1;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 27.059804,94.009763 c 0,0 -6.320233,2.122207 -0.752747,7.446397 4.633073,4.43061 -0.162964,5.65202 -1.920412,5.15029 0,0 11.625129,7.5245 11.386271,-6.47814 -0.160973,-9.436791 -6.077345,-7.061049 -8.713112,-6.118547 z m 3.042093,2.162416"
id="path24-63"
sodipodi:nodetypes="cscsc" />
<path
style="display:inline;fill:url(#linearGradient64);fill-opacity:1;stroke:#000000;stroke-width:0.661458;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="m 45.899725,94.75712 c -0.0177,0.497819 -0.60444,4.077766 1.144726,6.17621 1.900309,2.27977 3.463832,-8.609579 2.660397,-9.603751 -0.856762,-1.06016 -3.177245,-1.420138 -3.805123,3.427541 z"
id="path29-4-7"
sodipodi:nodetypes="cssc" />
<path
style="display:inline;fill:none;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 43.07836,102.58036 0.898366,-0.89837 0.796347,0.85533"
id="path34-5"
sodipodi:nodetypes="ccc" />
<path
style="display:inline;fill:none;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 49.842283,94.288814 51.33529,93.496052"
id="path37-21"
sodipodi:nodetypes="cc" />
<path
style="display:inline;fill:none;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 48.779283,99.617332 1.199192,0.616068"
id="path38-7"
sodipodi:nodetypes="cc" />
<path
style="fill:#157def;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 27.059804,94.009763 c 0,0 8.998139,3.357621 13.917664,-6.560232 0,0 2.977644,2.701407 0.878475,6.584832 0,0 12.000318,-5.847747 6.786203,-14.490444 0,0 -2.547078,10.512071 4.542765,13.632726 9.206656,4.052389 -1.067255,-15.504573 -1.392911,-15.6744 0,0 -29.798336,-7.904202 -24.97871,13.247126"
id="path23-5"
sodipodi:nodetypes="ccccscc" />
<path
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.533;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="m 29.914958,89.15314 c 0,0 -2.461542,1.806323 -2.436221,4.10365 0.02532,2.297315 4.324952,2.848845 4.745687,0.537049 0.420747,-2.311795 -0.745545,-4.45118 -0.745545,-4.45118"
id="path25-2-9-7"
sodipodi:nodetypes="cssc" />
<path
style="fill:none;fill-opacity:1;stroke:url(#linearGradient62);stroke-width:1.32444;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none"
d="m 29.911945,89.158539 c 0,0 -2.461542,1.806322 -2.436221,4.10365 0.02532,2.297314 4.324953,2.848844 4.745688,0.537048 0.420747,-2.311795 -0.745546,-4.45118 -0.745546,-4.45118"
id="path25-2-4"
sodipodi:nodetypes="cssc" />
<path
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.23256;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="m 53.932029,87.632687 c 0,0 -1.660728,2.117 -1.094288,4.060825 0.566438,1.943812 4.34653,1.392001 4.155243,-0.669913 -0.191277,-2.061915 -1.688639,-3.601038 -1.688639,-3.601038"
id="path25-2-9-0-1"
sodipodi:nodetypes="cssc" />
<path
style="fill:none;fill-opacity:1;stroke:url(#linearGradient63);stroke-width:1.16718;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none"
d="m 53.930753,87.637984 c 0,0 -1.660728,2.116998 -1.094288,4.060824 0.566437,1.943812 4.346531,1.392 4.155243,-0.669913 -0.191278,-2.061915 -1.688639,-3.601038 -1.688639,-3.601038"
id="path25-2-2-8"
sodipodi:nodetypes="cssc" />
<path
style="display:inline;fill:none;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 38.455849,99.049613 -1.29819,-0.738089"
id="path35-8-5"
sodipodi:nodetypes="cc" />
<path
style="display:inline;fill:none;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 37.855019,100.07959 -1.14337,0.4605"
id="path36-1-3"
sodipodi:nodetypes="cc" />
<path
style="fill:none;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
d="m 37.855019,100.07959 c 0,0 2.10194,-2.853098 4.7869,-0.930789"
id="path61-8" />
<path
style="fill:none;stroke:#000000;stroke-width:0.661458;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 41.308082,105.6503 4.591734,-0.0947 c 0,0 -1.306516,0.98705 -2.447646,0.96141 -1.141127,-0.0257 -2.144088,-0.86672 -2.144088,-0.86672 z"
id="path65" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
static/imgs/profile_pictures/Mathisbuilder.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 59 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

88
static/imgs/profile_pictures/jacekpoz.svg Executable file
View File

@ -0,0 +1,88 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
fill="none"
height="32"
viewBox="0 0 32 32"
width="32"
version="1.1"
id="svg113"
sodipodi:docname="jacekpoz revolt.svg"
inkscape:version="1.2 (dc2aedaf03, 2022-05-15)"
inkscape:export-filename="jacekpoz revolt.png"
inkscape:export-xdpi="1800"
inkscape:export-ydpi="1800"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs117" />
<sodipodi:namedview
id="namedview115"
pagecolor="#505050"
bordercolor="#ffffff"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="1"
inkscape:deskcolor="#505050"
showgrid="false"
inkscape:zoom="37.28125"
inkscape:cx="9.0796312"
inkscape:cy="16"
inkscape:window-width="2560"
inkscape:window-height="1399"
inkscape:window-x="1920"
inkscape:window-y="41"
inkscape:window-maximized="1"
inkscape:current-layer="g111" />
<clipPath
id="a">
<path
d="m0 0h32v32h-32z"
id="path90" />
</clipPath>
<g
clip-path="url(#a)"
id="g111">
<path
d="m31.1028 20.9925c0 2.0091-.5252 3.4351-1.3444 4.4745-.8271 1.0495-2.0166 1.7841-3.4762 2.2907-2.9616 1.0282-6.7719 1.0379-10.1824 1.0379-3.4093 0-7.27255-.0094-10.28664-1.0393-1.48698-.5081-2.7015-1.2447-3.54601-2.2958-.83532-1.0397-1.370401-2.4634-1.370401-4.468 0-3.748.807291-8.3097 3.108411-11.90376 2.26699-3.54072 6.01294-6.19919 12.09464-6.19919 5.7647 0 9.4692 2.66321 11.7712 6.23125 2.3312 3.6131 3.2318 8.1799 3.2318 11.8717z"
fill="#fbc546"
stroke="#000"
stroke-width="1.7935"
id="path93" />
<g
clip-rule="evenodd"
fill-rule="evenodd"
id="g109">
<path
d="m19.4545 22.4125c.4709 0 .8531.3822.8531.8531 0 .471-.3822.8532-.8531.8532h-6.8253c-.4709 0-.8531-.3822-.8531-.8532 0-.4709.3822-.8531.8531-.8531z"
fill="#593604"
id="path95" />
<path
d="m27.1329 19.853c0-.9427-.7636-1.7063-1.7063-1.7063-1.0426 0-2.3701 0-3.4126 0-.9428 0-1.7064.7636-1.7064 1.7063 0 .9428.7636 1.7064 1.7064 1.7064h3.4126c.9427 0 1.7063-.7636 1.7063-1.7064z"
fill="#ed6b44"
id="path97" />
<path
d="m11.7761 19.853c0-.9427-.7636-1.7063-1.7064-1.7063-1.04251 0-2.37002 0-3.41258 0-.94274 0-1.70631.7636-1.70631 1.7063 0 .9428.76357 1.7064 1.70631 1.7064h3.41258c.9428 0 1.7064-.7636 1.7064-1.7064z"
fill="#ed6b44"
id="path99" />
<path
d="m 6.498,18.9998 c 1.0178,0 1.9938,-0.4044 2.7139,-1.1236 0.7192,-0.72 1.1236,-1.696 1.1236,-2.7139 0,-0.2841 0,-0.5707 0,-0.8548 0,-2.1201 -1.7191,-3.8392 -3.8392,-3.8392 -8e-4,0 -8e-4,0 -0.0017,0 -1.01781,0 -1.99382,0.4044 -2.71389,1.1236 -0.71921,0.72 -1.12361,1.696 -1.12361,2.7139 v 0.8548 c 0,2.1201 1.71912,3.8392 3.8392,3.8392 z"
fill="#ffffff"
id="path101" />
<path
d="m 5.21658,14.7256 c 0,-0.9376 0.76017,-1.6978 1.69782,-1.6978 h 0.017 c 0.9376,0 1.6978,0.7602 1.6978,1.6978 v 0.0026 c 0,0.9376 -0.7602,1.6978 -1.6978,1.6978 -0.0059,0 -0.0111,0 -0.017,0 -0.93765,0 -1.69782,-0.7602 -1.69782,-1.6978 0,-9e-4 0,-0.0017 0,-0.0026 z"
fill="#000000"
id="path103" />
<path
d="m 25.5857,18.9998 c -1.0178,0 -1.9939,-0.4044 -2.7139,-1.1236 -0.7192,-0.72 -1.1236,-1.696 -1.1236,-2.7139 0,-0.2849 0,-0.5716 0,-0.8565 0,-1.0179 0.4044,-1.9939 1.1236,-2.7139 0.72,-0.7192 1.6961,-1.1236 2.7139,-1.1236 h 0.0034 c 1.0178,0 1.9938,0.4044 2.7139,1.1236 0.7192,0.72 1.1236,1.696 1.1236,2.7139 v 0.8548 c 0,2.1201 -1.7191,3.8392 -3.8392,3.8392 -9e-4,0 -9e-4,0 -0.0017,0 z"
fill="#ffffff"
id="path105" />
<path
d="m 26.8671,14.7256 c 0,-0.9376 -0.7602,-1.6978 -1.6978,-1.6978 -0.006,0 -0.0111,0 -0.017,0 -0.9377,0 -1.6978,0.7602 -1.6978,1.6978 v 0.0026 c 0,0.9376 0.7601,1.6978 1.6978,1.6978 h 0.017 c 0.9376,0 1.6978,-0.7602 1.6978,-1.6978 0,-9e-4 0,-0.0017 0,-0.0026 z"
fill="#000000"
id="path107" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
static/imgs/waylnad.webp Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 836 B

2
svelte.config.js
View File

@ -9,7 +9,7 @@ const config = {
// See https://kit.svelte.dev/docs/adapters for more information about adapters. // See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter() adapter: adapter()
}, },
preprocess: vitePreprocess() preprocess: vitePreprocess(),
} }
export default config export default config