mirror of
https://github.com/hyprwm/hyprland-website.git
synced 2024-11-17 02:45:59 +01:00
more stuff
This commit is contained in:
Christofer
parent
597865f296
commit
a7bf1e76b0
28 changed files with 614 additions and 510 deletions
45
package.json
45
package.json
|
|
@ -10,7 +10,8 @@
|
||||||
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
|
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
|
||||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
|
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
|
||||||
"lint": "prettier --plugin-search-dir . --check . && eslint .",
|
"lint": "prettier --plugin-search-dir . --check . && eslint .",
|
||||||
"format": "prettier --plugin-search-dir . --write ."
|
"format": "prettier --plugin-search-dir . --write .",
|
||||||
|
"post:install": "./scripts/generate-blurred-images.sh"
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"hyprland"
|
"hyprland"
|
||||||
|
|
@ -26,39 +27,39 @@
|
||||||
"node": ">=16.0.0"
|
"node": ">=16.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@iconify/json": "^2.2.98",
|
"@iconify/json": "^2.2.109",
|
||||||
"@interactjs/types": "^1.10.18",
|
"@interactjs/types": "^1.10.18",
|
||||||
"@sveltejs/adapter-auto": "^2.1.0",
|
"@sveltejs/adapter-auto": "^2.1.0",
|
||||||
"@sveltejs/adapter-static": "^2.0.3",
|
"@sveltejs/adapter-static": "^2.0.3",
|
||||||
"@sveltejs/kit": "^1.22.4",
|
"@sveltejs/kit": "^1.24.0",
|
||||||
"autoprefixer": "^10.4.14",
|
"autoprefixer": "^10.4.15",
|
||||||
"eslint": "^8.46.0",
|
"eslint": "^8.48.0",
|
||||||
"eslint-config-prettier": "^8.10.0",
|
"eslint-config-prettier": "^9.0.0",
|
||||||
"eslint-plugin-svelte": "^2.32.4",
|
"eslint-plugin-svelte": "^2.33.0",
|
||||||
"postcss": "^8.4.27",
|
"postcss": "^8.4.29",
|
||||||
"prettier": "^3.0.1",
|
"prettier": "^3.0.3",
|
||||||
"prettier-plugin-svelte": "^3.0.3",
|
"prettier-plugin-svelte": "^3.0.3",
|
||||||
"svelte": "^4.1.2",
|
"svelte": "^4.2.0",
|
||||||
"svelte-add": "2023.6.28-0.0",
|
"svelte-add": "2023.8.31-0.0",
|
||||||
"svelte-check": "^3.4.6",
|
"svelte-check": "^3.5.1",
|
||||||
"tailwindcss": "^3.3.3",
|
"tailwindcss": "^3.3.3",
|
||||||
"tailwindcss-animate": "^1.0.6",
|
"tailwindcss-animate": "^1.0.7",
|
||||||
"typescript": "^5.1.6",
|
"typescript": "^5.2.2",
|
||||||
"unplugin-icons": "^0.16.5",
|
"unplugin-icons": "^0.16.6",
|
||||||
"vite": "^4.4.8"
|
"vite": "^4.4.9"
|
||||||
},
|
},
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fontsource-variable/inter": "^5.0.7",
|
"@fontsource-variable/inter": "^5.0.8",
|
||||||
"@fontsource-variable/work-sans": "^5.0.8",
|
"@fontsource-variable/work-sans": "^5.0.9",
|
||||||
"@fontsource/ibm-plex-mono": "^5.0.7",
|
"@fontsource/ibm-plex-mono": "^5.0.8",
|
||||||
"clsx": "^2.0.0",
|
"clsx": "^2.0.0",
|
||||||
"interactjs": "^1.10.18",
|
"interactjs": "^1.10.18",
|
||||||
"prettier-plugin-tailwindcss": "^0.4.1",
|
"prettier-plugin-tailwindcss": "^0.5.4",
|
||||||
"remeda": "^1.24.0",
|
"remeda": "^1.26.0",
|
||||||
"rxjs": "^7.8.1",
|
"rxjs": "^7.8.1",
|
||||||
"simplex-noise": "^4.0.1",
|
"simplex-noise": "^4.0.1",
|
||||||
"svelte-inview": "^4.0.1",
|
"svelte-inview": "^4.0.1",
|
||||||
"ts-pattern": "^5.0.4"
|
"ts-pattern": "^5.0.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
524
pnpm-lock.yaml
524
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
|
|
@ -14,9 +14,14 @@ while IFS= read -r -d '' filepath; do
|
||||||
max_brightness="65535" # The possible maximum brightness possible from the previous command
|
max_brightness="65535" # The possible maximum brightness possible from the previous command
|
||||||
brightness_threshold=$( python -c "print( $max_brightness * 0.5 )" )
|
brightness_threshold=$( python -c "print( $max_brightness * 0.5 )" )
|
||||||
|
|
||||||
# Adjust the brightness, make it brighter if dark, otherwise lighten it
|
# Boost the brightness if the image is very dark
|
||||||
brightness_boost=$( python -c "print( (1 - ($brightness / $brightness_threshold)) * 50 )" )
|
brightness_boost=$( python -c "print( max( (1 - ($brightness / $brightness_threshold)) * 50 , 0) )" )
|
||||||
|
|
||||||
magick convert -scale 10% -brightness-contrast ${brightness_boost}x20 -modulate 100,500,100 -gaussian-blur 0x20 -resize 1000% "$filepath" "$generated_filename"
|
# Modify colors with LUT
|
||||||
# magick "$generated_filename" "./hald-clut.png" -hald-clut "$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 convert -modulate 100,250,100 -scale 10% -gaussian-blur 0x20 -resize 1000% -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"
|
||||||
done
|
done
|
||||||
|
|
|
||||||
BIN
scripts/hald-clut.color.io.png
Executable file
BIN
scripts/hald-clut.color.io.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
|
|
@ -78,28 +78,6 @@ export function lerp(start, end, given) {
|
||||||
return (1 - given) * start + given * end
|
return (1 - given) * start + given * end
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {number} t A number between 0 and 1
|
|
||||||
* @param {number | undefined} strength
|
|
||||||
*/
|
|
||||||
export function easeInT(t, strength) {
|
|
||||||
return t ** (strength ?? 2)
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {number} t A number between 0 and 1
|
|
||||||
* @param {number | undefined} strength
|
|
||||||
*/
|
|
||||||
export function easeOutT(t, strength) {
|
|
||||||
return 1 - (1 - t ** (strength ?? 2))
|
|
||||||
}
|
|
||||||
|
|
||||||
// easeOutT(0.5) //?
|
|
||||||
// easeOutT(0.99) //?
|
|
||||||
// easeOutT(0.2) //?
|
|
||||||
// easeOutT(0) //?
|
|
||||||
// easeOutT(1) //?
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Taken from https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser/11381730#11381730
|
* Taken from https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser/11381730#11381730
|
||||||
*/
|
*/
|
||||||
|
|
@ -118,3 +96,8 @@ export function getIsMobile() {
|
||||||
})(navigator.userAgent || navigator.vendor || window.opera)
|
})(navigator.userAgent || navigator.vendor || window.opera)
|
||||||
return check
|
return check
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** Get the `generated_<filename>` if blurredThumbnail is not set manually **/
|
||||||
|
export function getBlurredPath(path) {
|
||||||
|
return `${path.substring(0, path.lastIndexOf('/'))}/generated_${path.split('/').at(-1)}`
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,19 @@
|
||||||
<script>
|
<script>
|
||||||
import clsx from 'clsx'
|
import clsx from 'clsx'
|
||||||
|
|
||||||
/** @type { 'md'|'lg'}*/
|
/** @type { 'md'|'lg'|'xl'}*/
|
||||||
export let size = 'md'
|
export let size = 'md'
|
||||||
/** @type { 'primary'|'outline'|'fancyOutline' }*/
|
/** @type { 'primary'|'outline'|'fancyOutline' }*/
|
||||||
export let type = 'primary'
|
export let type = 'primary'
|
||||||
|
|
||||||
$: classes = clsx(
|
$: classes = clsx(
|
||||||
'animate rounded font-bold text-sm hover:scale-[1.03] active:scale-95',
|
'animate rounded text-sm font-bold hover:scale-[1.03] active:scale-95',
|
||||||
'primary' == type && 'bg-slate-200 text-black',
|
'primary' == type && 'bg-slate-200 text-black',
|
||||||
'outline' == type && 'outline-2 outline outline-slate-200 text-white bg-transparent',
|
'outline' == type && 'bg-transparent text-white outline outline-2 outline-slate-200',
|
||||||
'fancyOutline' == type && 'fancy',
|
'fancyOutline' == type && 'fancy',
|
||||||
'md' == size && 'px-4 py-2 min-w-[5rem]',
|
'md' == size && 'min-w-[5rem] px-4 py-2',
|
||||||
'lg' == size && 'px-6 py-2.5 min-w-[5rem] text-lg',
|
'lg' == size && 'min-w-[5rem] px-6 py-2.5 ',
|
||||||
|
'xl' == size && 'min-w-[5rem] px-8 py-4 ',
|
||||||
$$restProps.class
|
$$restProps.class
|
||||||
)
|
)
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -21,15 +22,15 @@
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<button class={classes} on:click><slot>NO LABEL PROVIDED</slot></button>
|
<button class={classes} on:click><slot>NO LABEL PROVIDED</slot></button>
|
||||||
<span
|
<span
|
||||||
class="-z-10 absolute fancy-bg inset-0 w-[110%] h-full px-4 py-2 min-w-[5rem] bg-cyan-500/90 blur-xl scale-y-75"
|
class="fancy-bg absolute inset-0 -z-10 h-full w-[110%] min-w-[5rem] scale-y-75 bg-cyan-500/90 px-4 py-2 blur-xl"
|
||||||
style="--easing: x; --duration: 8s;"
|
style="--easing: x; --duration: 8s;"
|
||||||
/>
|
/>
|
||||||
<span
|
<span
|
||||||
class="-z-10 absolute fancy-bg inset-0 w-[110%] h-full px-4 py-2 min-w-[5rem] bg-secondary/90 blur-xl scale-y-75"
|
class="fancy-bg absolute inset-0 -z-10 h-full w-[110%] min-w-[5rem] scale-y-75 bg-secondary/90 px-4 py-2 blur-xl"
|
||||||
style="--easing: y; --duration: 8s;"
|
style="--easing: y; --duration: 8s;"
|
||||||
/>
|
/>
|
||||||
<span
|
<span
|
||||||
class="-z-10 absolute fancy-bg inset-0 w-[110%] h-full px-4 py-2 min-w-[5rem] bg-purple-500/90 blur-xl scale-y-75"
|
class="fancy-bg absolute inset-0 -z-10 h-full w-[110%] min-w-[5rem] scale-y-75 bg-purple-500/90 px-4 py-2 blur-xl"
|
||||||
style="--easing: z;--duration: 8s;"
|
style="--easing: z;--duration: 8s;"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -15,13 +15,13 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<footer
|
<footer
|
||||||
class="bg-black/50 mt-16 md:mt-24 lg:mt-32 border-t border-blue-400/50 relative flex items-center justify-center max-w-screen"
|
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="flex flex-wrap gap-12 justify-between px-8 py-14 max-w-5xl text-slate-300 items-start"
|
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="text-slate-400 text-sm uppercase font-bold">Developers</div>
|
<div class="pretitle">Developers</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">
|
<a href="https://github.com/vaxerski">
|
||||||
|
|
@ -45,8 +45,8 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col gap-4">
|
<div class="flex flex-col gap-4">
|
||||||
<div class="text-slate-400 font-bold text-sm uppercase">Links</div>
|
<div class="pretitle">Links</div>
|
||||||
<ul class="flex flex-col font-medium gap-3">
|
<ul class="flex flex-col gap-3 font-medium">
|
||||||
<li><a href="https://wiki.hyprland.org/">Wiki</a></li>
|
<li><a href="https://wiki.hyprland.org/">Wiki</a></li>
|
||||||
<li>
|
<li>
|
||||||
<a href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get started</a>
|
<a href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get started</a>
|
||||||
|
|
@ -56,7 +56,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col gap-4">
|
<div class="flex flex-col gap-4">
|
||||||
<div class="text-slate-400 text-sm uppercase font-bold" font-bold>Socials</div>
|
<div class="pretitle" font-bold>Socials</div>
|
||||||
<ul class="flex gap-6">
|
<ul class="flex gap-6">
|
||||||
<li class="">
|
<li class="">
|
||||||
<a
|
<a
|
||||||
|
|
@ -72,7 +72,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex gap-4 flex-wrap text-sm text-slate-400 font-medium w-full">
|
<div class="flex w-full flex-wrap gap-4 text-sm font-medium text-slate-400">
|
||||||
<div>Hyprland is licensed under the BSD 3-Clause "New" or "Revised" License.</div>
|
<div>Hyprland is licensed under the BSD 3-Clause "New" or "Revised" License.</div>
|
||||||
<div>© Hyprland Development {new Date().getFullYear()}.</div>
|
<div>© Hyprland Development {new Date().getFullYear()}.</div>
|
||||||
<div>Doki doki waku waku.</div>
|
<div>Doki doki waku waku.</div>
|
||||||
|
|
@ -83,6 +83,10 @@
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<style lang="postcss">
|
<style lang="postcss">
|
||||||
|
.pretitle {
|
||||||
|
@apply text-sm font-bold uppercase text-slate-400;
|
||||||
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
filter: brightness(1.5);
|
filter: brightness(1.5);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
<script>
|
<script>
|
||||||
import { easeOutT, lerp } from '$lib/Helper.mjs'
|
import { lerp } from '$lib/Helper.mjs'
|
||||||
import { createNoise2D } from 'simplex-noise'
|
import { createNoise2D } from 'simplex-noise'
|
||||||
import { onMount } from 'svelte'
|
import { onMount } from 'svelte'
|
||||||
|
import { expoIn } from 'svelte/easing'
|
||||||
|
|
||||||
/** Lifespan in milliseconds */
|
/** Lifespan in milliseconds */
|
||||||
export let lifeSpan = 1500
|
export let lifeSpan = 1500
|
||||||
|
|
@ -36,8 +37,8 @@
|
||||||
async function animate() {
|
async function animate() {
|
||||||
const deltaTime = (timestamp - Date.now()) / 17 // One frame should last roughly 17ms for 60fps
|
const deltaTime = (timestamp - Date.now()) / 17 // One frame should last roughly 17ms for 60fps
|
||||||
|
|
||||||
x += noiseX(i, 1) * speed * deltaTime * easeOutT(lifePercentage)
|
x += noiseX(i, 1) * speed * deltaTime * expoIn(lifePercentage)
|
||||||
y += noiseY(i, 1) * speed * deltaTime * easeOutT(lifePercentage)
|
y += noiseY(i, 1) * speed * deltaTime * expoIn(lifePercentage)
|
||||||
|
|
||||||
i += wobbliness * deltaTime
|
i += wobbliness * deltaTime
|
||||||
|
|
||||||
|
|
@ -54,7 +55,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="absolute w-6 h-6 rounded-md"
|
class="absolute h-6 w-6 rounded-md"
|
||||||
style:translate={`${x}px ${y}px`}
|
style:translate={`${x}px ${y}px`}
|
||||||
style:background={color}
|
style:background={color}
|
||||||
style:opacity={(lifeRemaining / lifeSpan - (1 - maxOpacity)) ** 5}
|
style:opacity={(lifeRemaining / lifeSpan - (1 - maxOpacity)) ** 5}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import { animateIn } from '$lib/Helper.mjs'
|
import { animateIn, getBlurredPath } from '$lib/Helper.mjs'
|
||||||
|
|
||||||
/** @type {string}
|
/** @type {string}
|
||||||
* The path to the image. Usually the file within `static`, but can also be an URL
|
* The path to the image. Usually the file within `static`, but can also be an URL
|
||||||
|
|
@ -12,13 +12,20 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="rice {containerClass} group">
|
<div class="rice {containerClass} group">
|
||||||
<div class="w-full h-full" use:animateIn={{ slide: 20, duration: 800 }}>
|
<div class="h-full w-full" use:animateIn={{ slide: 20, duration: 800 }}>
|
||||||
<img
|
<img
|
||||||
src={image}
|
src={image}
|
||||||
alt="Rice desktop"
|
alt="Rice desktop"
|
||||||
class="max-sm:[xmask-image:none] w-full nice-hover object-cover object-top rounded-xl overflow-hidden shadow-2xl hover:scale-[1.01] {imageClass}"
|
class="nice-hover w-full rounded-xl object-cover object-top shadow-2xl hover:scale-[1.01] max-sm:[xmask-image:none] {imageClass}"
|
||||||
/>
|
/>
|
||||||
<img src={image} alt="Rice desktop" aria-hidden="true" class="rice-bg" />
|
<div class="rice-blurred">
|
||||||
|
<img
|
||||||
|
src={getBlurredPath(image)}
|
||||||
|
alt="Rice desktop"
|
||||||
|
aria-hidden="true"
|
||||||
|
class="h-full w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -29,11 +36,24 @@
|
||||||
.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);
|
||||||
}
|
}
|
||||||
.rice-bg {
|
.rice-blurred {
|
||||||
@apply pointer-events-none absolute -bottom-10 left-3 -z-10 h-full w-[calc(100%-24px)] rounded-3xl opacity-50 blur-2xl brightness-150 saturate-[5] transition-[filter] duration-500 max-sm:hidden;
|
translate: -50% 30%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -40px;
|
||||||
|
left: 50%;
|
||||||
|
pointer-events: none;
|
||||||
|
width: calc(100% + 120px);
|
||||||
|
height: calc(150% + 120px);
|
||||||
|
opacity: 0.9;
|
||||||
|
/* filter: brightness(2.5); */
|
||||||
|
z-index: -10;
|
||||||
|
background-color: red;
|
||||||
|
mask-image: radial-gradient(50% 50% at 50% 50%, black, transparent);
|
||||||
|
|
||||||
|
@apply -z-10 transition-[filter] duration-500;
|
||||||
|
|
||||||
.rice:hover & {
|
.rice:hover & {
|
||||||
@apply brightness-200;
|
filter: brightness(4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -13,15 +13,19 @@
|
||||||
let container
|
let container
|
||||||
let isMobile = false
|
let isMobile = false
|
||||||
|
|
||||||
const fillX = spring(999, { damping: 0.9, stiffness: 0.021, precision: 0.3 })
|
const damping = 0.2
|
||||||
const fillY = spring(999, { damping: 0.9, stiffness: 0.021, precision: 0.3 })
|
|
||||||
const borderX = spring(999, { damping: 0.9, stiffness: 0.03, precision: 0.3 })
|
const fillX = spring(999, { damping, stiffness: 0.021, precision: 0.3 })
|
||||||
const borderY = spring(999, { damping: 0.9, stiffness: 0.03, precision: 0.3 })
|
const fillY = spring(999, { damping, stiffness: 0.021, precision: 0.3 })
|
||||||
|
const borderX = spring(999, { damping, stiffness: 0.03, precision: 0.3 })
|
||||||
|
const borderY = spring(999, { damping, stiffness: 0.03, precision: 0.3 })
|
||||||
|
|
||||||
const bounceBack = 2
|
const bounceBack = 2
|
||||||
const soft = 0.8
|
const soft = 0.8
|
||||||
|
|
||||||
let isMouseOver = false
|
let isMouseOver = false
|
||||||
|
/** Has the mouse entered and not left*/
|
||||||
|
let hasMouseEntered = false
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
if (container && $mouseX !== undefined) {
|
if (container && $mouseX !== undefined) {
|
||||||
|
|
@ -45,10 +49,16 @@
|
||||||
$borderY = normY
|
$borderY = normY
|
||||||
|
|
||||||
if (!isMouseOver) {
|
if (!isMouseOver) {
|
||||||
/* Put it in the corners again. As it is scaled by half,
|
hasMouseEntered = false
|
||||||
coordinates should be multiplied by two. But it looks better when they peek in more */
|
|
||||||
fillX.set(width * 1.5, { soft: 4 })
|
return
|
||||||
fillY.set(height * 1.5, { soft: 4 })
|
}
|
||||||
|
|
||||||
|
// Instantly update the blob positon without easing when the mouse has just entered
|
||||||
|
if (hasMouseEntered === false) {
|
||||||
|
fillX.set(normX, { hard: true })
|
||||||
|
fillY.set(normY, { hard: true })
|
||||||
|
hasMouseEntered = true
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -63,7 +73,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class={clsx('card min-h-[20rem] group', $$restProps.class)}
|
class={clsx('card group min-h-[20rem]', $$restProps.class)}
|
||||||
style:--x={$fillX}
|
style:--x={$fillX}
|
||||||
style:--y={$fillY}
|
style:--y={$fillY}
|
||||||
style:--borderX={$borderX}
|
style:--borderX={$borderX}
|
||||||
|
|
@ -78,8 +88,8 @@
|
||||||
class:purpleGradient={color === 'purple'}
|
class:purpleGradient={color === 'purple'}
|
||||||
role="contentinfo"
|
role="contentinfo"
|
||||||
>
|
>
|
||||||
<div class="p-8 sm:p-12 z-10 w-full h-full flex flex-col justify-end">
|
<div class="z-10 flex h-full w-full flex-col justify-end p-8 sm:p-12">
|
||||||
<h1 class="text-5xl font-bold mb-6 text-white">{title}</h1>
|
<h1 class="mb-6 text-5xl font-bold text-white">{title}</h1>
|
||||||
|
|
||||||
<slot>Nothing in the slot here</slot>
|
<slot>Nothing in the slot here</slot>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -96,7 +106,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.gradient_black {
|
.gradient_black {
|
||||||
@apply absolute inset-[1px];
|
@apply absolute inset-[2px];
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
border-radius: inherit;
|
border-radius: inherit;
|
||||||
contain: strict;
|
contain: strict;
|
||||||
|
|
@ -109,6 +119,7 @@
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* This gradient is visible on the borders when hovering */
|
||||||
.border-gradient {
|
.border-gradient {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
@ -117,17 +128,17 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
opacity: 0%;
|
opacity: 0%;
|
||||||
transform-origin: top left;
|
transform-origin: top left;
|
||||||
transition: opacity 140ms ease-in-out;
|
transition: opacity 120ms ease-in-out;
|
||||||
left: 0%;
|
left: 0%;
|
||||||
top: 0%;
|
top: 0%;
|
||||||
content: '';
|
content: '';
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
filter: brightness(1.2) saturate(2);
|
filter: brightness(1.5) saturate(4);
|
||||||
contain: strict;
|
contain: strict;
|
||||||
background: radial-gradient(
|
background: radial-gradient(
|
||||||
320px 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 70%),
|
||||||
color-mix(in srgb, var(--color2, theme(colors.blue.500)), transparent 90%)
|
transparent
|
||||||
);
|
);
|
||||||
|
|
||||||
.isHoverCards & {
|
.isHoverCards & {
|
||||||
|
|
@ -141,12 +152,12 @@
|
||||||
border-radius: inherit;
|
border-radius: inherit;
|
||||||
height: calc(100% - 2px);
|
height: calc(100% - 2px);
|
||||||
border-radius: inherit;
|
border-radius: inherit;
|
||||||
margin: 1px;
|
margin: 0px;
|
||||||
z-index: 20;
|
z-index: 20;
|
||||||
mix-blend-mode: hard-light;
|
mix-blend-mode: hard-light;
|
||||||
contain: strict;
|
contain: strict;
|
||||||
|
|
||||||
/* Gradient */
|
/* Gradient blob */
|
||||||
&::before {
|
&::before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 20;
|
z-index: 20;
|
||||||
|
|
|
||||||
|
|
@ -7,15 +7,16 @@
|
||||||
|
|
||||||
// Idea: Boid behavior
|
// Idea: Boid behavior
|
||||||
|
|
||||||
const maxSize = 18
|
const maxSize = 24
|
||||||
const size = Math.max(Math.random() * maxSize, 6)
|
const minSize = 7
|
||||||
|
const size = Math.max(Math.random() * maxSize, minSize)
|
||||||
/** How much the fireflies can vanish into the edges of the screen. Include their invisible padding for mouse detection. */
|
/** How much the fireflies can vanish into the edges of the screen. Include their invisible padding for mouse detection. */
|
||||||
const edgeClip = maxSize * 8
|
const edgeClip = maxSize * 8
|
||||||
const noiseY = createNoise2D()
|
const noiseY = createNoise2D()
|
||||||
const noiseX = createNoise2D()
|
const noiseX = createNoise2D()
|
||||||
const SPEED = Math.random() * 5 + 2
|
const SPEED = Math.random() * 5 + 2
|
||||||
|
|
||||||
let classes = clsx(Math.random() > 0.5 ? 'bg-primary/70' : 'bg-blue-500/70')
|
let classes = clsx(size > maxSize / 2 ? 'bg-primary/70' : 'bg-blue-500/70')
|
||||||
|
|
||||||
let x = 0
|
let x = 0
|
||||||
let y = 0
|
let y = 0
|
||||||
|
|
@ -67,7 +68,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="absolute hidden max-sm:[contain:strict] md:block p-24 top-0 left-0 firefly pointer-events-auto opacity-50 hover:opacity-100 transition-opacity z-0"
|
class="firefly pointer-events-auto absolute left-0 top-0 z-0 hidden p-24 opacity-50 transition-opacity hover:opacity-100 max-sm:[contain:strict] md:block"
|
||||||
style:--x={x + 'px'}
|
style:--x={x + 'px'}
|
||||||
style:--y={y + 'px'}
|
style:--y={y + 'px'}
|
||||||
style="--size:{size}px; --fadeDelay: {Math.random() * 6 - 3}s"
|
style="--size:{size}px; --fadeDelay: {Math.random() * 6 - 3}s"
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
import Button from '$lib/components/Button.svelte'
|
import Button from '$lib/components/Button.svelte'
|
||||||
import Logo from '$lib/images/logos/hyprland-color.svg'
|
import Logo from '$lib/images/logos/hyprland-color.svg'
|
||||||
import { onMount } from 'svelte'
|
import { onMount } from 'svelte'
|
||||||
import Firefly from './Firefly.svelte'
|
// import Firefly from './Firefly.svelte'
|
||||||
import { inview } from 'svelte-inview'
|
import { inview } from 'svelte-inview'
|
||||||
|
|
||||||
let isVisible = true
|
let isVisible = true
|
||||||
|
|
@ -15,32 +15,32 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section
|
<section
|
||||||
class="w-full relative flex flex-col items-center justify-center min-h-[100svh] overflow-x-hidden h-max"
|
class="relative flex h-max min-h-[100svh] w-full flex-col items-center justify-center overflow-x-hidden"
|
||||||
use:inview
|
use:inview
|
||||||
on:inview_change={({ detail: { inView } }) => {
|
on:inview_change={({ detail: { inView } }) => {
|
||||||
isVisible = inView
|
isVisible = inView
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<!-- Hero text and logo -->
|
<!-- Hero text and logo -->
|
||||||
<div class="flex h-screen min-h-max justify-center flex-col items-center z-10">
|
<div class="x z-10 flex h-screen min-h-max flex-col items-center justify-center">
|
||||||
<div class="text-center -mt-20 items-center flex flex-col gap-6 mb-8">
|
<div class="-mt-20 mb-8 flex flex-col items-center gap-6 text-center">
|
||||||
<img src={Logo} alt="Hyprland Logo" class="h-36 mb-4 ani-in fill-mode-backwards" />
|
<img src={Logo} alt="Hyprland Logo" class="ani-in mb-6 h-48 fill-mode-backwards" />
|
||||||
<div class="relative ani-in fill-mode-backwards [animation-delay:584ms]">
|
<div class="ani-in relative fill-mode-backwards [animation-delay:384ms]">
|
||||||
<h1
|
<h1
|
||||||
class="text-5xl md:text-7xl p-2 font-bold bg-clip-text text-transparent font-london hyprgradient tracking-wider md:tracking-widest"
|
class="hyprgradient bg-clip-text p-2 font-london text-6xl font-bold tracking-wider text-transparent md:text-7xl md:tracking-widest"
|
||||||
>
|
>
|
||||||
Hyprland
|
Hyprland
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h2
|
<h2
|
||||||
class="ani-in text-center mb-10 [animation-delay:944ms] fill-mode-backwards font-medium text-xl text-blue-200/60"
|
class="ani-in mb-10 text-center text-2xl font-medium leading-9 text-blue-200/80 fill-mode-backwards [animation-delay:944ms]"
|
||||||
>
|
>
|
||||||
Dynamic tiling Wayland compositor<br />with the looks.
|
Dynamic tiling Wayland compositor<br />with the looks
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="flex gap-6 items-center animate-in fade-in-0 slide-in-from-bottom-4 [animation-delay:1390ms] duration-500 fill-mode-backwards"
|
class="flex items-center gap-6 duration-500 animate-in fade-in-0 slide-in-from-bottom-4 fill-mode-backwards [animation-delay:1390ms]"
|
||||||
>
|
>
|
||||||
<a href="https://wiki.hyprland.org/Getting-Started/Installation/">
|
<a href="https://wiki.hyprland.org/Getting-Started/Installation/">
|
||||||
<Button size="lg">Install</Button>
|
<Button size="lg">Install</Button>
|
||||||
|
|
@ -52,31 +52,31 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Fireflies -->
|
<!-- Fireflies -->
|
||||||
{#if isVisible}
|
<!-- {#if isVisible}
|
||||||
<div
|
<div
|
||||||
class="absolute animate-in fade-in-0 [animation-delay:900ms] [animation-duration:4500ms] fill-mode-backwards pointer-events-none max-w-screen inset-0 overflow-hidden -z-10"
|
class="max-w-screen pointer-events-none absolute inset-0 -z-10 overflow-hidden animate-in fade-in-0 fill-mode-backwards [animation-delay:900ms] [animation-duration:4500ms]"
|
||||||
>
|
>
|
||||||
<div class="bg-gradient-to-t from-black z-10 w-full h-52 absolute bottom-0" />
|
<div class="absolute bottom-0 z-10 h-52 w-full bg-gradient-to-t from-black" />
|
||||||
|
|
||||||
{#each { length: 40 } as _}
|
{#each { length: 40 } as _}
|
||||||
<Firefly />
|
<Firefly />
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if} -->
|
||||||
|
|
||||||
<!-- Gradient background -->
|
<!-- Gradient background -->
|
||||||
<div
|
<div
|
||||||
class="absolute -z-50 max-w-screen w-screen min-h-screen h-full right-0 top-0 overflow-hidden"
|
class="max-w-screen absolute right-0 top-0 -z-50 h-full min-h-screen w-screen overflow-hidden"
|
||||||
>
|
>
|
||||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
<div class="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2">
|
||||||
<div
|
<div
|
||||||
class="bg-gradient-radial via-emerald-300/0 to-emerald-200/0 from-sky-400/20 bg"
|
class="bg bg-gradient-radial from-sky-400/20 via-emerald-300/0 to-emerald-200/0"
|
||||||
style="--seed: 20;"
|
style="--seed: 20;"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
<div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||||
<div
|
<div
|
||||||
class="bg-gradient-radial to-cyan-400/0 from-blue-500/10 bg"
|
class="bg bg-gradient-radial from-blue-500/10 to-cyan-400/0"
|
||||||
style="--offset: -3s; --seed: 4; --duration:102s"
|
style="--offset: -3s; --seed: 4; --duration:102s"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -87,41 +87,8 @@
|
||||||
.bg {
|
.bg {
|
||||||
width: calc(120vw + 500px);
|
width: calc(120vw + 500px);
|
||||||
height: calc(120vh + 500px);
|
height: calc(120vh + 500px);
|
||||||
|
|
||||||
animation: move var(--duration, 50s) ease-in-out var(--offset, 0ms) infinite alternate both;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes move {
|
|
||||||
0% {
|
|
||||||
transform: translate3d(
|
|
||||||
calc(10vw * sin(var(--seed, 1))),
|
|
||||||
calc(20vh * sin(var(--seed, 1))),
|
|
||||||
0px
|
|
||||||
);
|
|
||||||
}
|
|
||||||
30% {
|
|
||||||
transform: translate3d(
|
|
||||||
calc(-20vw * sin(var(--seed, 1))),
|
|
||||||
calc(12vh * sin(var(--seed, 1))),
|
|
||||||
0px
|
|
||||||
);
|
|
||||||
}
|
|
||||||
70% {
|
|
||||||
transform: translate3d(
|
|
||||||
calc(-230px * sin(var(--seed, 1))),
|
|
||||||
calc(-160px * sin(var(--seed, 1))),
|
|
||||||
0px
|
|
||||||
);
|
|
||||||
opacity: sin(var(--seed, 1));
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: translate3d(
|
|
||||||
calc(50px * sin(var(--seed, 1))),
|
|
||||||
calc(200px * sin(var(--seed, 1))),
|
|
||||||
0px
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes slidein {
|
@keyframes slidein {
|
||||||
from {
|
from {
|
||||||
transform: translateX(0%);
|
transform: translateX(0%);
|
||||||
|
|
@ -133,6 +100,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.ani-in {
|
.ani-in {
|
||||||
@apply animate-in fade-in-0 slide-in-from-bottom-4 ease-in-out [animation-duration:800ms];
|
@apply ease-out animate-in fade-in-0 slide-in-from-bottom-6;
|
||||||
|
animation-duration: 1000ms;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@
|
||||||
AUR git version: <a
|
AUR git version: <a
|
||||||
class="hover:underline hover:text-white"
|
class="hover:underline hover:text-white"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
href="https://aur.aachlinux.org/packages/hyprland-git/">hyprland-git</a
|
href="https://aur.archlinux.org/packages/hyprland-git/">hyprland-git</a
|
||||||
>
|
>
|
||||||
</div></InstallButton
|
</div></InstallButton
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -18,19 +18,19 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<header
|
<header
|
||||||
class="flex items-center z-50 justify-between fixed top-0 inset-x-0 rounded-full animate-in slide-in-from-top-1 [animation-delay:0ms] lg:[animation-delay:1250ms] fade-in-0 duration-1000 fill-mode-backwards pt-2 px-6"
|
class="fixed inset-x-0 top-0 z-50 flex items-center justify-between rounded-full px-6 pt-2 duration-1000 animate-in fade-in-0 slide-in-from-top-1 fill-mode-backwards [animation-delay:0ms] lg:[animation-delay:1250ms]"
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
href="/"
|
href="/"
|
||||||
class="flex gap-4 font-london tracking-wider lg:px-4 py-1 text-sm rounded-full lg:bg-black/10 items-center lg:backdrop-blur font-bold text-white"
|
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="w-6" /><span
|
||||||
class="lg:block lg:mt-1 tracking-widest text-xl hidden">Hyprland</span
|
class="hidden text-xl tracking-widest lg:mt-1 lg:block">Hyprland</span
|
||||||
></a
|
></a
|
||||||
>
|
>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="lg:hidden rounded-full p-2 bg-black/10 z-50 md:backdrop-blur"
|
class="z-50 rounded-full bg-black/10 p-2 md:backdrop-blur lg:hidden"
|
||||||
on:click={toggleExpanded}
|
on:click={toggleExpanded}
|
||||||
>
|
>
|
||||||
{#if isExpanded}
|
{#if isExpanded}
|
||||||
|
|
@ -42,7 +42,7 @@
|
||||||
|
|
||||||
<nav class="nav" class:!flex={isExpanded}>
|
<nav class="nav" class:!flex={isExpanded}>
|
||||||
<ul
|
<ul
|
||||||
class="flex lg:flex-row flex-col gap-5 rounded-full items-center lg:max-h-full lg:h-full hover:[&_li]:text-cyan-300"
|
class="flex flex-col items-center gap-5 rounded-full lg:h-full lg:max-h-full lg:flex-row hover:[&_li]:text-cyan-300"
|
||||||
>
|
>
|
||||||
<li>
|
<li>
|
||||||
<a href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get started</a>
|
<a href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get started</a>
|
||||||
|
|
@ -55,21 +55,21 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul
|
<ul
|
||||||
class="lg:border-purple-400 lg:border lg:mr-2 lg:ml-4 lg:rounded-full flex items-center flex-row gap-3 px-4"
|
class="flex flex-row items-center gap-3 px-4 lg:ml-4 lg:mr-2 lg:rounded-full lg:border lg:border-purple-400"
|
||||||
>
|
>
|
||||||
<li>
|
<li>
|
||||||
<a href="https://discord.com/invite/hQ9XvMUjjr" class="social-icon">
|
<a href="https://discord.com/invite/hQ9XvMUjjr" class="social-icon">
|
||||||
<DiscordIcon class="w-full h-full" />
|
<DiscordIcon class="h-full w-full" />
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="https://github.com/hyprwm/Hyprland" class="social-icon">
|
<a href="https://github.com/hyprwm/Hyprland" class="social-icon">
|
||||||
<GithubIcon class="w-full h-full" />
|
<GithubIcon class="h-full w-full" />
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<a
|
<a
|
||||||
class="bg-primary rounded-full px-4 py-1 uppercase tracking-wide text-black hover:bg-cyan-200"
|
class="rounded-full bg-primary px-4 py-1 uppercase tracking-wide text-black hover:bg-cyan-200"
|
||||||
href="https://wiki.hyprland.org/Getting-Started/Installation/">Install</a
|
href="https://wiki.hyprland.org/Getting-Started/Installation/">Install</a
|
||||||
>
|
>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -17,9 +17,10 @@
|
||||||
let isMuted = true
|
let isMuted = true
|
||||||
let isPaused = false
|
let isPaused = false
|
||||||
|
|
||||||
function toggleMute() {
|
// Video has no sound anymore
|
||||||
isMuted = !isMuted
|
// function toggleMute() {
|
||||||
}
|
// isMuted = !isMuted
|
||||||
|
// }
|
||||||
function togglePlay() {
|
function togglePlay() {
|
||||||
videoElement.paused ? videoElement.play() : videoElement.pause()
|
videoElement.paused ? videoElement.play() : videoElement.pause()
|
||||||
isPaused = videoElement.paused
|
isPaused = videoElement.paused
|
||||||
|
|
@ -39,15 +40,13 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section
|
<section
|
||||||
class="max-w-[1400px] px-1 relative -mb-4 lg:px-8 w-full animate-in [animation-delay:1700ms] fade-in-0 fill-mode-backwards [animation-duration:2000ms] slide-in-from-bottom-10 {$$restProps.class}"
|
class="relative -mb-4 -mt-8 w-full max-w-[1400px] px-1 animate-in fade-in-0 slide-in-from-bottom-10 fill-mode-backwards [animation-delay:1700ms] [animation-duration:2000ms] lg:px-8 {$$restProps.class}"
|
||||||
|
class:isVisible
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class={clsx(
|
class="rice-video"
|
||||||
'rounded-xl group relative border-sky-400 border-2 transition-all [transition-duration:1460ms] mx-3 shadow-2xl shadow-cyan-400/40',
|
|
||||||
!isVisible && 'opacity-20 scale-90'
|
|
||||||
)}
|
|
||||||
role="banner"
|
role="banner"
|
||||||
use:inview={{ threshold: 0.8 }}
|
use:inview={{ threshold: 0.5 }}
|
||||||
on:inview_enter={() => {
|
on:inview_enter={() => {
|
||||||
isVisible = true
|
isVisible = true
|
||||||
videoElement.play()
|
videoElement.play()
|
||||||
|
|
@ -75,12 +74,12 @@
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class={clsx(
|
class={clsx(
|
||||||
'opacity-0 transition-opacity z-20 ',
|
'z-20 opacity-0 transition-opacity ',
|
||||||
isShowingControls ? 'opacity-100' : 'pointer-events-none'
|
isShowingControls ? 'opacity-100' : 'pointer-events-none'
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<button
|
<!-- <button
|
||||||
class="absolute p-2 h-10 bg-black/5 rounded-full w-10 bottom-4 right-4 opacity-70 hover:opacity-100"
|
class="absolute bottom-4 right-4 h-10 w-10 rounded-full bg-black/5 p-2 opacity-70 hover:opacity-100"
|
||||||
on:click|stopPropagation={toggleMute}
|
on:click|stopPropagation={toggleMute}
|
||||||
>
|
>
|
||||||
{#if isMuted}
|
{#if isMuted}
|
||||||
|
|
@ -88,10 +87,10 @@
|
||||||
{:else}
|
{:else}
|
||||||
<AudioIcon class="h-full w-full" />
|
<AudioIcon class="h-full w-full" />
|
||||||
{/if}
|
{/if}
|
||||||
</button>
|
</button> -->
|
||||||
{#if isPaused}
|
{#if isPaused}
|
||||||
<div
|
<div
|
||||||
class="absolute h-14 rounded-full -translate-x-1/2 -translate-y-1/2 w-14 top-1/2 left-1/2 opacity-80 hover:opacity-100 pointer-events-none"
|
class="pointer-events-none absolute left-1/2 top-1/2 h-14 w-14 -translate-x-1/2 -translate-y-1/2 rounded-full opacity-80 hover:opacity-100"
|
||||||
>
|
>
|
||||||
<PauseIcon class="h-full w-full" />
|
<PauseIcon class="h-full w-full" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -99,18 +98,57 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a
|
<a
|
||||||
class="px-3 pt-2 block absolute -bottom-7 left-0 max-w-max text-sm text-slate-100/70 hover:underline"
|
class="absolute -bottom-7 left-0 block max-w-max px-3 pt-2 text-sm font-medium text-slate-100/70 hover:underline"
|
||||||
href="https://github.com/end-4/">Setup by @end_4</a
|
href="https://github.com/end-4/">Setup by @end_4</a
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="preview-rice-bg overflow-x-hidden" aria="hidden" />
|
<div class="preview-rice-bg" aria="hidden" />
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<style lang="postcss">
|
<style lang="postcss">
|
||||||
|
.rice-video {
|
||||||
|
@apply mx-3 rounded-xl transition-all;
|
||||||
|
transition-duration: 1460ms;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0px 0px 44px theme(colors.primary / 80%);
|
||||||
|
border: solid 2px theme(colors.sky.400);
|
||||||
|
scale: 0.9;
|
||||||
|
background: theme(colors.cyan.300 / 70%);
|
||||||
|
|
||||||
|
& video {
|
||||||
|
@apply transition-opacity;
|
||||||
|
transition-duration: 1460ms;
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.isVisible & {
|
||||||
|
scale: 1;
|
||||||
|
background: transparent;
|
||||||
|
box-shadow: 0px 0px 24px theme(colors.primary / 50%);
|
||||||
|
|
||||||
|
& video {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.preview-rice-bg {
|
.preview-rice-bg {
|
||||||
@apply absolute inset-0 -top-40 -z-10 w-full opacity-50;
|
position: absolute;
|
||||||
/* background-color: red; */
|
z-index: -10;
|
||||||
background-image: radial-gradient(closest-side, theme(colors.sky.500), transparent);
|
opacity: 0.4;
|
||||||
|
min-width: 2800px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
top: -160px;
|
||||||
|
left: 50%;
|
||||||
|
translate: -50% 0px;
|
||||||
|
width: 1100px;
|
||||||
|
height: 200%;
|
||||||
|
|
||||||
|
background-image: radial-gradient(
|
||||||
|
closest-side,
|
||||||
|
theme(colors.sky.500),
|
||||||
|
theme(colors.indigo.500 / 0%)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -6,40 +6,38 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section
|
<section
|
||||||
class="w-full relative flex flex-col items-center"
|
class="relative flex w-full flex-col items-center"
|
||||||
use:animateIn={{ fade: 0, slide: 24, duration: 3000, threshold: 0.1 }}
|
use:animateIn={{ fade: 0, slide: 24, duration: 3000, threshold: 0.1 }}
|
||||||
>
|
>
|
||||||
<div class="px-4 -mb-40 z-20">
|
<div class="z-20 -mb-40 px-4">
|
||||||
<Title>
|
<Title>
|
||||||
<span slot="pre"> Memorials of the ricing legends </span>
|
<span slot="pre"> Memorials of the ricing legends </span>
|
||||||
<span slot="title">Wall of Fame</span>
|
<span slot="title">Wall of Fame</span>
|
||||||
</Title>
|
</Title>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="atmosphere" />
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="w-full -mt-24 max-w-[1100px] flex relative flex-col gap-16 lg:gap-24 items-center justify-end overflow-hidden md:px-16 [perspective:100px]"
|
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"
|
||||||
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">
|
||||||
<Button size="lg" type="fancyOutline">Go to Wall of Fame</Button>
|
<Button size="lg" type="fancyOutline">Go to Wall of Fame</Button>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<div
|
|
||||||
class="w-full [translate:0px_40px_-10px] md:[translate:0px_0px_-40px] absolute top-0 inset-0 -z-30 atmosphere"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FameRicePreview
|
<FameRicePreview
|
||||||
image="/imgs/ricingcomp1/lauroro.jpg"
|
image="/imgs/ricing_competitions/1/lauroro.webp"
|
||||||
containerClass="[translate:0px_50px_-100px] -mb-[30%] hover:[translate:0px_0px_-98px] transition-all duration-500"
|
containerClass="[translate:0px_50px_-100px] -mb-[30%] hover:[translate:0px_0px_-98px] transition-all duration-500"
|
||||||
imageClass="[mask-image:linear-gradient(black,black_45%,transparent_65%)] opacity-50 hover:opacity-60"
|
imageClass="[mask-image:linear-gradient(black,black_45%,transparent_65%)] opacity-50 hover:opacity-60"
|
||||||
/>
|
/>
|
||||||
<FameRicePreview
|
<FameRicePreview
|
||||||
image="/imgs/ricingcomp1/amadeus.png"
|
image="/imgs/ricing_competitions/1/amadeus.webp"
|
||||||
containerClass="[translate:0px_50px_-40px] hover:[translate:0px_0px_-38px] -mb-[30%] duration-500 transition-all group"
|
containerClass="[translate:0px_50px_-40px] hover:[translate:0px_0px_-38px] -mb-[30%] duration-500 transition-all group"
|
||||||
imageClass="md:[mask-image:linear-gradient(black,black_50%,transparent_75%)] [mask-image:linear-gradient(black,black_10%,transparent_75%)] opacity-80 group-hover:opacity-100 transition-all duration-500"
|
imageClass="md:[mask-image:linear-gradient(black,black_50%,transparent_75%)] [mask-image:linear-gradient(black,black_10%,transparent_75%)] opacity-80 group-hover:opacity-100 transition-all duration-500"
|
||||||
/>
|
/>
|
||||||
<FameRicePreview
|
<FameRicePreview
|
||||||
image="/imgs/ricingcomp1/flicko.png"
|
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 h-[200px] sm:h-[250px] lg:h-[500px]"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -48,8 +46,17 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<style lang="postcss">
|
<style lang="postcss">
|
||||||
|
/* The blue gradient in the background */
|
||||||
.atmosphere {
|
.atmosphere {
|
||||||
background: radial-gradient(closest-side, theme(colors.blue.500), transparent);
|
position: absolute;
|
||||||
|
z-index: -30;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
translate: -50% 0px;
|
||||||
|
height: 100vh;
|
||||||
|
width: 200vw;
|
||||||
|
background: radial-gradient(closest-side, theme(colors.blue.500 / 30%), transparent),
|
||||||
|
radial-gradient(15% 20%, theme(colors.cyan.500 / 70%), transparent);
|
||||||
}
|
}
|
||||||
|
|
||||||
.glow {
|
.glow {
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.hyprgradient {
|
.hyprgradient {
|
||||||
background-image: linear-gradient(to bottom right, #00e6cf, #00c4e3, #00a1f8);
|
background-image: linear-gradient(to bottom right, #00e6cf, #00c4e3, #0081c6);
|
||||||
}
|
}
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
|
|
|
||||||
|
|
@ -2,10 +2,11 @@
|
||||||
import Title from '$lib/components/Title.svelte'
|
import Title from '$lib/components/Title.svelte'
|
||||||
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'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="min-h-screen flex flex-col gap-14 items-center justify-center p-8 overflow-hidden">
|
<section class="flex min-h-screen flex-col items-center justify-center gap-14 overflow-hidden">
|
||||||
<div class="h-[50vh] min-h-min flex flex-col items-center justify-center">
|
<div class="flex h-[50vh] min-h-min flex-col items-center justify-center">
|
||||||
<Title>
|
<Title>
|
||||||
<h1 slot="title">Wall of fame</h1>
|
<h1 slot="title">Wall of fame</h1>
|
||||||
<div slot="subtitle">
|
<div slot="subtitle">
|
||||||
|
|
@ -14,7 +15,7 @@
|
||||||
</Title>
|
</Title>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Contest name="Summer" number={2}>
|
<Contest name="Summer" number={2} date="May 2023" --color="orange">
|
||||||
<FamedRice
|
<FamedRice
|
||||||
name="Novel Nock"
|
name="Novel Nock"
|
||||||
creator="end_4"
|
creator="end_4"
|
||||||
|
|
@ -41,7 +42,7 @@
|
||||||
/>
|
/>
|
||||||
</Contest>
|
</Contest>
|
||||||
|
|
||||||
<Contest name="Winter" number={1}>
|
<Contest name="Winter" number={1} date="December 2022" --color={colors.cyan[500]}>
|
||||||
<FamedRice
|
<FamedRice
|
||||||
name="Unnamed"
|
name="Unnamed"
|
||||||
creator="Flafy"
|
creator="Flafy"
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,46 @@
|
||||||
<script>
|
<script>
|
||||||
|
import { inview } from 'svelte-inview'
|
||||||
|
|
||||||
/** @type {string} */
|
/** @type {string} */
|
||||||
export let name
|
export let name
|
||||||
/** @type {number} */
|
/** @type {number} */
|
||||||
export let number
|
export let number
|
||||||
|
/** @type {string} */
|
||||||
|
export let date
|
||||||
|
|
||||||
|
/** Used to show the background gradient. Show if user scrolls, but do not disable when the user scrolls past from the top. */
|
||||||
|
let enabled = false
|
||||||
|
|
||||||
|
function setEnabled({ detail }) {
|
||||||
|
console.log({ detail })
|
||||||
|
const { inView, scrollDirection } = detail
|
||||||
|
const isScrollingUp = scrollDirection.vertical === 'up'
|
||||||
|
|
||||||
|
if (!inView && !isScrollingUp) {
|
||||||
|
enabled = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (inView) {
|
||||||
|
enabled = true
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="flex flex-col mt-24">
|
<section class="relative flex flex-col py-24">
|
||||||
<div class="relative mb-24">
|
<div class="relative py-56">
|
||||||
<div class="mix-blend-color-dodge p-6 flex items-center flex-col">
|
<div
|
||||||
<div class="text-2xl font-bold text-slate-300/80">Contest #{number}</div>
|
class="flex flex-col items-center p-6 mix-blend-color-dodge"
|
||||||
<h2 class="text-9xl text-slate-200/80 text-center font-bold">{name}</h2>
|
use:inview={{ threshold: 0.25 }}
|
||||||
|
on:inview_change={setEnabled}
|
||||||
|
>
|
||||||
|
<div class="text-2xl font-bold text-neutral-300/80">Contest #{number}</div>
|
||||||
|
<h2 class="text-center text-9xl font-bold text-neutral-200/80">{name}</h2>
|
||||||
|
<h2 class="mt-2 text-center text-xl font-bold text-slate-200/80">{date}</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="background" aria-hidden="true"></div>
|
<div class="mask" class:enabled>
|
||||||
|
<div class="background" aria-hidden="true"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col gap-40">
|
<div class="flex flex-col gap-40">
|
||||||
|
|
@ -21,30 +49,49 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<style lang="postcss">
|
<style lang="postcss">
|
||||||
.background {
|
.mask {
|
||||||
|
overflow: hidden;
|
||||||
|
top: 0px;
|
||||||
|
left: 50%;
|
||||||
|
width: 400%;
|
||||||
|
translate: -50% 0px;
|
||||||
|
transform-origin: center;
|
||||||
|
height: 250%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 150px;
|
pointer-events: none;
|
||||||
|
z-index: -10;
|
||||||
|
transform-origin: top;
|
||||||
|
}
|
||||||
|
.background {
|
||||||
|
/* scale: 0.8 0.8; */
|
||||||
|
--c1: color-mix(in hsl shorter hue, var(--color), hsl(0, 100%, 0%) 10%);
|
||||||
|
--c2: color-mix(in hsl shorter hue, var(--color), hsl(0, 100%, 0%) 15%);
|
||||||
|
--c3: color-mix(in hsl shorter hue, var(--color), hsl(0, 100%, 0%) 20%);
|
||||||
|
--c4: color-mix(in hsl shorter hue, var(--color), hsl(0, 100%, 0%) 30%);
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 500px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
translate: -50% -50%;
|
translate: -50% -50%;
|
||||||
width: 100vw;
|
width: 100%;
|
||||||
height: 1000px;
|
height: 1000px;
|
||||||
z-index: -10;
|
z-index: -10;
|
||||||
background: radial-gradient(
|
background: radial-gradient(140px 100px at 50% 45%, var(--color), transparent),
|
||||||
140px 100px at 50% 45%,
|
radial-gradient(145px 110px at 50% 45%, var(--c1) 80%, transparent),
|
||||||
var(--color, theme(colors.cyan.500)),
|
radial-gradient(210px 140px, var(--c2, theme(colors.blue.600)), transparent),
|
||||||
transparent
|
radial-gradient(300px 200px, var(--c2, theme(colors.sky.600)), transparent),
|
||||||
),
|
radial-gradient(600px 220px, var(--c3, theme(colors.blue.700)), transparent),
|
||||||
radial-gradient(
|
radial-gradient(1100px 420px, var(--c4, theme(colors.blue.800 / 60%)), transparent);
|
||||||
145px 110px at 50% 45%,
|
|
||||||
var(--color, theme(colors.blue.500 / 80%)) 80%,
|
|
||||||
transparent
|
|
||||||
),
|
|
||||||
radial-gradient(210px 140px, var(--color, theme(colors.blue.600)), transparent),
|
|
||||||
radial-gradient(300px 200px, var(--color, theme(colors.sky.600)), transparent),
|
|
||||||
radial-gradient(600px 220px, var(--color, theme(colors.blue.700)), transparent);
|
|
||||||
|
|
||||||
& ::after {
|
mask-image: radial-gradient(100% 100% at 50% 50%, black 20%, transparent 50%);
|
||||||
content: ' ';
|
|
||||||
|
opacity: 0.1;
|
||||||
|
scale: 0.95 1;
|
||||||
|
transition: all 1200ms ease-in-out 120ms;
|
||||||
|
|
||||||
|
.enabled & {
|
||||||
|
opacity: 1;
|
||||||
|
scale: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
|
import { getBlurredPath } from '$lib/Helper.mjs'
|
||||||
|
import { inview } from 'svelte-inview'
|
||||||
|
|
||||||
/** @type {string} */
|
/** @type {string} */
|
||||||
export let name
|
export let name
|
||||||
/** @type {string} */
|
/** @type {string} */
|
||||||
|
|
@ -17,37 +20,30 @@
|
||||||
/** @type {string} */
|
/** @type {string} */
|
||||||
export let pretitel
|
export let pretitel
|
||||||
|
|
||||||
let background =
|
let background = blurredThumbnail ?? getBlurredPath(thumbnail)
|
||||||
blurredThumbnail ??
|
|
||||||
// Get the `generated_<filename>` if blurredThumbnail is not set manually
|
|
||||||
`${thumbnail.substring(0, thumbnail.lastIndexOf('/'))}/generated_${thumbnail.split('/').at(-1)}`
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="flex flex-col gap-14">
|
<div class="flex flex-col gap-12 px-4">
|
||||||
<div class="flex justify-center items-center flex-col">
|
<div class="flex flex-col items-center justify-center">
|
||||||
<div class="text-lg font-bold mb-2">{pretitel}</div>
|
<div class="mb-2 text-lg font-bold">{pretitel}</div>
|
||||||
<h3 class="text-6xl hover:text-slate-200 mb-6 font-bold">
|
<h3 class="mb-6 text-6xl font-bold hover:text-slate-200">
|
||||||
<a href={dotfilesLink} target="_blank">{name}</a>
|
<a href={dotfilesLink} target="_blank">{name}</a>
|
||||||
</h3>
|
</h3>
|
||||||
<a class="flex gap-3 group" href={dotfilesLink} target="_blank">
|
<a class="group flex gap-3" href={dotfilesLink} target="_blank">
|
||||||
<img
|
<img
|
||||||
src={creatorProfilePicture}
|
src={creatorProfilePicture}
|
||||||
class="rounded-full h-6 aspect-square"
|
class="aspect-square h-6 rounded-full"
|
||||||
alt={creator + ' profile picture'}
|
alt={creator + ' profile picture'}
|
||||||
/>
|
/>
|
||||||
<div class="font-medium text-lg transition-colors group-hover:text-white text-slate-300">
|
<div class="text-lg font-medium text-slate-300 transition-colors group-hover:text-white">
|
||||||
{creator}
|
{creator}
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="px-6 sm:px-8 w-full max-w-[1100px] relative">
|
<div class="relative w-full max-w-[1100px] px-6 sm:px-8">
|
||||||
<a class="" href={dotfilesLink} target="_blank">
|
<a class="rice" href={dotfilesLink} target="_blank">
|
||||||
<img
|
<img src={thumbnail} alt={`${name} by ${creator} thumbnail`} class="" />
|
||||||
src={thumbnail}
|
|
||||||
alt={`${name} by ${creator} thumbnail`}
|
|
||||||
class="rounded-lg hover:scale-[1.01] duration-300 transition-transform w-full"
|
|
||||||
/>
|
|
||||||
</a>
|
</a>
|
||||||
<!-- wide background -->
|
<!-- wide background -->
|
||||||
<!-- <img
|
<!-- <img
|
||||||
|
|
@ -67,29 +63,47 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style lang="postcss">
|
<style lang="postcss">
|
||||||
.background {
|
.rice {
|
||||||
position: absolute;
|
position: relative;
|
||||||
opacity: 0.4;
|
display: block;
|
||||||
min-width: calc(200% + 400px);
|
@apply w-full rounded-lg transition-transform;
|
||||||
height: calc(100% + 200px);
|
box-shadow: 0px 0px 8px theme(colors.black / 40%);
|
||||||
pointer-events: none;
|
|
||||||
inset: 0px 0 0 -200px;
|
|
||||||
translate: 0px -50%;
|
|
||||||
z-index: -10;
|
|
||||||
background: red;
|
|
||||||
|
|
||||||
mask-image: radial-gradient(closest-side, black, transparent);
|
& img {
|
||||||
|
@apply rounded-lg shadow-lg duration-300;
|
||||||
|
&:hover {
|
||||||
|
scale: 1.005;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
--size: 5rem;
|
||||||
|
color: red;
|
||||||
|
z-index: -1000;
|
||||||
|
content: ' ';
|
||||||
|
@apply rounded-lg shadow-2xl;
|
||||||
|
width: calc(100% + var(--size) * 0.5);
|
||||||
|
height: calc(100% + var(--size) * 0.5);
|
||||||
|
pointer-events: none;
|
||||||
|
position: absolute;
|
||||||
|
left: calc(var(--size) * -0.25);
|
||||||
|
top: calc(var(--size) * -0.25);
|
||||||
|
/* background: red; */
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
border: rgba(255, 255, 255, 0.1) solid 1px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.background-blurred {
|
.background-blurred {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
min-width: calc(120% + 400px);
|
min-width: calc(120% + 200px);
|
||||||
height: calc(120% + 200px);
|
height: calc(120% + 200px);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
top: -55%;
|
top: -45%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
translate: -50%;
|
translate: -50%;
|
||||||
z-index: -10;
|
z-index: -10;
|
||||||
|
filter: contrast(2.5);
|
||||||
|
|
||||||
mask-image: radial-gradient(farthest-side, black, transparent);
|
mask-image: radial-gradient(farthest-side, black, transparent);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 110 KiB After Width: | Height: | Size: 272 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 169 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 123 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 154 KiB After Width: | Height: | Size: 456 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 146 KiB After Width: | Height: | Size: 295 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 81 KiB After Width: | Height: | Size: 148 KiB |
Loading…
Reference in a new issue