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:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
|
||||
"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": [
|
||||
"hyprland"
|
||||
|
|
@ -26,39 +27,39 @@
|
|||
"node": ">=16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify/json": "^2.2.98",
|
||||
"@iconify/json": "^2.2.109",
|
||||
"@interactjs/types": "^1.10.18",
|
||||
"@sveltejs/adapter-auto": "^2.1.0",
|
||||
"@sveltejs/adapter-static": "^2.0.3",
|
||||
"@sveltejs/kit": "^1.22.4",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"eslint": "^8.46.0",
|
||||
"eslint-config-prettier": "^8.10.0",
|
||||
"eslint-plugin-svelte": "^2.32.4",
|
||||
"postcss": "^8.4.27",
|
||||
"prettier": "^3.0.1",
|
||||
"@sveltejs/kit": "^1.24.0",
|
||||
"autoprefixer": "^10.4.15",
|
||||
"eslint": "^8.48.0",
|
||||
"eslint-config-prettier": "^9.0.0",
|
||||
"eslint-plugin-svelte": "^2.33.0",
|
||||
"postcss": "^8.4.29",
|
||||
"prettier": "^3.0.3",
|
||||
"prettier-plugin-svelte": "^3.0.3",
|
||||
"svelte": "^4.1.2",
|
||||
"svelte-add": "2023.6.28-0.0",
|
||||
"svelte-check": "^3.4.6",
|
||||
"svelte": "^4.2.0",
|
||||
"svelte-add": "2023.8.31-0.0",
|
||||
"svelte-check": "^3.5.1",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"tailwindcss-animate": "^1.0.6",
|
||||
"typescript": "^5.1.6",
|
||||
"unplugin-icons": "^0.16.5",
|
||||
"vite": "^4.4.8"
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"typescript": "^5.2.2",
|
||||
"unplugin-icons": "^0.16.6",
|
||||
"vite": "^4.4.9"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@fontsource-variable/inter": "^5.0.7",
|
||||
"@fontsource-variable/work-sans": "^5.0.8",
|
||||
"@fontsource/ibm-plex-mono": "^5.0.7",
|
||||
"@fontsource-variable/inter": "^5.0.8",
|
||||
"@fontsource-variable/work-sans": "^5.0.9",
|
||||
"@fontsource/ibm-plex-mono": "^5.0.8",
|
||||
"clsx": "^2.0.0",
|
||||
"interactjs": "^1.10.18",
|
||||
"prettier-plugin-tailwindcss": "^0.4.1",
|
||||
"remeda": "^1.24.0",
|
||||
"prettier-plugin-tailwindcss": "^0.5.4",
|
||||
"remeda": "^1.26.0",
|
||||
"rxjs": "^7.8.1",
|
||||
"simplex-noise": "^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
|
||||
brightness_threshold=$( python -c "print( $max_brightness * 0.5 )" )
|
||||
|
||||
# Adjust the brightness, make it brighter if dark, otherwise lighten it
|
||||
brightness_boost=$( python -c "print( (1 - ($brightness / $brightness_threshold)) * 50 )" )
|
||||
# Boost the brightness if the image is very dark
|
||||
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"
|
||||
# magick "$generated_filename" "./hald-clut.png" -hald-clut "$generated_filename"
|
||||
# Modify colors with LUT
|
||||
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
|
||||
|
|
|
|||
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
|
||||
}
|
||||
|
||||
/**
|
||||
* @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
|
||||
*/
|
||||
|
|
@ -118,3 +96,8 @@ export function getIsMobile() {
|
|||
})(navigator.userAgent || navigator.vendor || window.opera)
|
||||
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>
|
||||
import clsx from 'clsx'
|
||||
|
||||
/** @type { 'md'|'lg'}*/
|
||||
/** @type { 'md'|'lg'|'xl'}*/
|
||||
export let size = 'md'
|
||||
/** @type { 'primary'|'outline'|'fancyOutline' }*/
|
||||
export let type = 'primary'
|
||||
|
||||
$: 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',
|
||||
'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',
|
||||
'md' == size && 'px-4 py-2 min-w-[5rem]',
|
||||
'lg' == size && 'px-6 py-2.5 min-w-[5rem] text-lg',
|
||||
'md' == size && 'min-w-[5rem] px-4 py-2',
|
||||
'lg' == size && 'min-w-[5rem] px-6 py-2.5 ',
|
||||
'xl' == size && 'min-w-[5rem] px-8 py-4 ',
|
||||
$$restProps.class
|
||||
)
|
||||
</script>
|
||||
|
|
@ -21,15 +22,15 @@
|
|||
<div class="relative">
|
||||
<button class={classes} on:click><slot>NO LABEL PROVIDED</slot></button>
|
||||
<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;"
|
||||
/>
|
||||
<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;"
|
||||
/>
|
||||
<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;"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,13 +15,13 @@
|
|||
</script>
|
||||
|
||||
<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
|
||||
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="text-slate-400 text-sm uppercase font-bold">Developers</div>
|
||||
<div class="pretitle">Developers</div>
|
||||
<ul class="flex flex-col gap-3 font-medium">
|
||||
<li>
|
||||
<a href="https://github.com/vaxerski">
|
||||
|
|
@ -45,8 +45,8 @@
|
|||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="text-slate-400 font-bold text-sm uppercase">Links</div>
|
||||
<ul class="flex flex-col font-medium gap-3">
|
||||
<div class="pretitle">Links</div>
|
||||
<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/Getting-Started/Master-Tutorial/">Get started</a>
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
</div>
|
||||
|
||||
<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">
|
||||
<li class="">
|
||||
<a
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
</ul>
|
||||
</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 Development {new Date().getFullYear()}.</div>
|
||||
<div>Doki doki waku waku.</div>
|
||||
|
|
@ -83,6 +83,10 @@
|
|||
</footer>
|
||||
|
||||
<style lang="postcss">
|
||||
.pretitle {
|
||||
@apply text-sm font-bold uppercase text-slate-400;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
filter: brightness(1.5);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<script>
|
||||
import { easeOutT, lerp } from '$lib/Helper.mjs'
|
||||
import { lerp } from '$lib/Helper.mjs'
|
||||
import { createNoise2D } from 'simplex-noise'
|
||||
import { onMount } from 'svelte'
|
||||
import { expoIn } from 'svelte/easing'
|
||||
|
||||
/** Lifespan in milliseconds */
|
||||
export let lifeSpan = 1500
|
||||
|
|
@ -36,8 +37,8 @@
|
|||
async function animate() {
|
||||
const deltaTime = (timestamp - Date.now()) / 17 // One frame should last roughly 17ms for 60fps
|
||||
|
||||
x += noiseX(i, 1) * speed * deltaTime * easeOutT(lifePercentage)
|
||||
y += noiseY(i, 1) * speed * deltaTime * easeOutT(lifePercentage)
|
||||
x += noiseX(i, 1) * speed * deltaTime * expoIn(lifePercentage)
|
||||
y += noiseY(i, 1) * speed * deltaTime * expoIn(lifePercentage)
|
||||
|
||||
i += wobbliness * deltaTime
|
||||
|
||||
|
|
@ -54,7 +55,7 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class="absolute w-6 h-6 rounded-md"
|
||||
class="absolute h-6 w-6 rounded-md"
|
||||
style:translate={`${x}px ${y}px`}
|
||||
style:background={color}
|
||||
style:opacity={(lifeRemaining / lifeSpan - (1 - maxOpacity)) ** 5}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { animateIn } from '$lib/Helper.mjs'
|
||||
import { animateIn, getBlurredPath } from '$lib/Helper.mjs'
|
||||
|
||||
/** @type {string}
|
||||
* The path to the image. Usually the file within `static`, but can also be an URL
|
||||
|
|
@ -12,13 +12,20 @@
|
|||
</script>
|
||||
|
||||
<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
|
||||
src={image}
|
||||
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>
|
||||
|
||||
|
|
@ -29,11 +36,24 @@
|
|||
.nice-hover {
|
||||
transition: all 540ms cubic-bezier(0.1, -0.81, 0.31, 2);
|
||||
}
|
||||
.rice-bg {
|
||||
@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;
|
||||
.rice-blurred {
|
||||
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 & {
|
||||
@apply brightness-200;
|
||||
filter: brightness(4);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -13,15 +13,19 @@
|
|||
let container
|
||||
let isMobile = false
|
||||
|
||||
const fillX = spring(999, { damping: 0.9, stiffness: 0.021, precision: 0.3 })
|
||||
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 borderY = spring(999, { damping: 0.9, stiffness: 0.03, precision: 0.3 })
|
||||
const damping = 0.2
|
||||
|
||||
const fillX = spring(999, { damping, stiffness: 0.021, 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 soft = 0.8
|
||||
|
||||
let isMouseOver = false
|
||||
/** Has the mouse entered and not left*/
|
||||
let hasMouseEntered = false
|
||||
|
||||
$: {
|
||||
if (container && $mouseX !== undefined) {
|
||||
|
|
@ -45,10 +49,16 @@
|
|||
$borderY = normY
|
||||
|
||||
if (!isMouseOver) {
|
||||
/* Put it in the corners again. As it is scaled by half,
|
||||
coordinates should be multiplied by two. But it looks better when they peek in more */
|
||||
fillX.set(width * 1.5, { soft: 4 })
|
||||
fillY.set(height * 1.5, { soft: 4 })
|
||||
hasMouseEntered = false
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
// 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
|
||||
}
|
||||
|
||||
|
|
@ -63,7 +73,7 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class={clsx('card min-h-[20rem] group', $$restProps.class)}
|
||||
class={clsx('card group min-h-[20rem]', $$restProps.class)}
|
||||
style:--x={$fillX}
|
||||
style:--y={$fillY}
|
||||
style:--borderX={$borderX}
|
||||
|
|
@ -78,8 +88,8 @@
|
|||
class:purpleGradient={color === 'purple'}
|
||||
role="contentinfo"
|
||||
>
|
||||
<div class="p-8 sm:p-12 z-10 w-full h-full flex flex-col justify-end">
|
||||
<h1 class="text-5xl font-bold mb-6 text-white">{title}</h1>
|
||||
<div class="z-10 flex h-full w-full flex-col justify-end p-8 sm:p-12">
|
||||
<h1 class="mb-6 text-5xl font-bold text-white">{title}</h1>
|
||||
|
||||
<slot>Nothing in the slot here</slot>
|
||||
</div>
|
||||
|
|
@ -96,7 +106,7 @@
|
|||
}
|
||||
|
||||
.gradient_black {
|
||||
@apply absolute inset-[1px];
|
||||
@apply absolute inset-[2px];
|
||||
z-index: 2;
|
||||
border-radius: inherit;
|
||||
contain: strict;
|
||||
|
|
@ -109,6 +119,7 @@
|
|||
);
|
||||
}
|
||||
|
||||
/* This gradient is visible on the borders when hovering */
|
||||
.border-gradient {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
|
@ -117,17 +128,17 @@
|
|||
height: 100%;
|
||||
opacity: 0%;
|
||||
transform-origin: top left;
|
||||
transition: opacity 140ms ease-in-out;
|
||||
transition: opacity 120ms ease-in-out;
|
||||
left: 0%;
|
||||
top: 0%;
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
filter: brightness(1.2) saturate(2);
|
||||
filter: brightness(1.5) saturate(4);
|
||||
contain: strict;
|
||||
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(--color2, theme(colors.blue.500)), transparent 90%)
|
||||
transparent
|
||||
);
|
||||
|
||||
.isHoverCards & {
|
||||
|
|
@ -141,12 +152,12 @@
|
|||
border-radius: inherit;
|
||||
height: calc(100% - 2px);
|
||||
border-radius: inherit;
|
||||
margin: 1px;
|
||||
margin: 0px;
|
||||
z-index: 20;
|
||||
mix-blend-mode: hard-light;
|
||||
contain: strict;
|
||||
|
||||
/* Gradient */
|
||||
/* Gradient blob */
|
||||
&::before {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
|
|
|
|||
|
|
@ -7,15 +7,16 @@
|
|||
|
||||
// Idea: Boid behavior
|
||||
|
||||
const maxSize = 18
|
||||
const size = Math.max(Math.random() * maxSize, 6)
|
||||
const maxSize = 24
|
||||
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. */
|
||||
const edgeClip = maxSize * 8
|
||||
const noiseY = createNoise2D()
|
||||
const noiseX = createNoise2D()
|
||||
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 y = 0
|
||||
|
|
@ -67,7 +68,7 @@
|
|||
</script>
|
||||
|
||||
<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:--y={y + 'px'}
|
||||
style="--size:{size}px; --fadeDelay: {Math.random() * 6 - 3}s"
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
import Button from '$lib/components/Button.svelte'
|
||||
import Logo from '$lib/images/logos/hyprland-color.svg'
|
||||
import { onMount } from 'svelte'
|
||||
import Firefly from './Firefly.svelte'
|
||||
// import Firefly from './Firefly.svelte'
|
||||
import { inview } from 'svelte-inview'
|
||||
|
||||
let isVisible = true
|
||||
|
|
@ -15,32 +15,32 @@
|
|||
</script>
|
||||
|
||||
<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
|
||||
on:inview_change={({ detail: { inView } }) => {
|
||||
isVisible = inView
|
||||
}}
|
||||
>
|
||||
<!-- Hero text and logo -->
|
||||
<div class="flex h-screen min-h-max justify-center flex-col items-center z-10">
|
||||
<div class="text-center -mt-20 items-center flex flex-col gap-6 mb-8">
|
||||
<img src={Logo} alt="Hyprland Logo" class="h-36 mb-4 ani-in fill-mode-backwards" />
|
||||
<div class="relative ani-in fill-mode-backwards [animation-delay:584ms]">
|
||||
<div class="x z-10 flex h-screen min-h-max flex-col items-center justify-center">
|
||||
<div class="-mt-20 mb-8 flex flex-col items-center gap-6 text-center">
|
||||
<img src={Logo} alt="Hyprland Logo" class="ani-in mb-6 h-48 fill-mode-backwards" />
|
||||
<div class="ani-in relative fill-mode-backwards [animation-delay:384ms]">
|
||||
<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
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<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/">
|
||||
<Button size="lg">Install</Button>
|
||||
|
|
@ -52,31 +52,31 @@
|
|||
</div>
|
||||
|
||||
<!-- Fireflies -->
|
||||
{#if isVisible}
|
||||
<!-- {#if isVisible}
|
||||
<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 _}
|
||||
<Firefly />
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{/if} -->
|
||||
|
||||
<!-- Gradient background -->
|
||||
<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
|
||||
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;"
|
||||
/>
|
||||
</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
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -87,41 +87,8 @@
|
|||
.bg {
|
||||
width: calc(120vw + 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 {
|
||||
from {
|
||||
transform: translateX(0%);
|
||||
|
|
@ -133,6 +100,7 @@
|
|||
}
|
||||
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
AUR git version: <a
|
||||
class="hover:underline hover:text-white"
|
||||
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
|
||||
>
|
||||
|
|
|
|||
|
|
@ -18,19 +18,19 @@
|
|||
</script>
|
||||
|
||||
<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
|
||||
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
|
||||
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
|
||||
>
|
||||
|
||||
<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}
|
||||
>
|
||||
{#if isExpanded}
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
|
||||
<nav class="nav" class:!flex={isExpanded}>
|
||||
<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>
|
||||
<a href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get started</a>
|
||||
|
|
@ -55,21 +55,21 @@
|
|||
</li>
|
||||
</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>
|
||||
<a href="https://discord.com/invite/hQ9XvMUjjr" class="social-icon">
|
||||
<DiscordIcon class="w-full h-full" />
|
||||
<DiscordIcon class="h-full w-full" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/hyprwm/Hyprland" class="social-icon">
|
||||
<GithubIcon class="w-full h-full" />
|
||||
<GithubIcon class="h-full w-full" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<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
|
||||
>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -17,9 +17,10 @@
|
|||
let isMuted = true
|
||||
let isPaused = false
|
||||
|
||||
function toggleMute() {
|
||||
isMuted = !isMuted
|
||||
}
|
||||
// Video has no sound anymore
|
||||
// function toggleMute() {
|
||||
// isMuted = !isMuted
|
||||
// }
|
||||
function togglePlay() {
|
||||
videoElement.paused ? videoElement.play() : videoElement.pause()
|
||||
isPaused = videoElement.paused
|
||||
|
|
@ -39,15 +40,13 @@
|
|||
</script>
|
||||
|
||||
<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
|
||||
class={clsx(
|
||||
'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'
|
||||
)}
|
||||
class="rice-video"
|
||||
role="banner"
|
||||
use:inview={{ threshold: 0.8 }}
|
||||
use:inview={{ threshold: 0.5 }}
|
||||
on:inview_enter={() => {
|
||||
isVisible = true
|
||||
videoElement.play()
|
||||
|
|
@ -75,12 +74,12 @@
|
|||
/>
|
||||
<div
|
||||
class={clsx(
|
||||
'opacity-0 transition-opacity z-20 ',
|
||||
'z-20 opacity-0 transition-opacity ',
|
||||
isShowingControls ? 'opacity-100' : 'pointer-events-none'
|
||||
)}
|
||||
>
|
||||
<button
|
||||
class="absolute p-2 h-10 bg-black/5 rounded-full w-10 bottom-4 right-4 opacity-70 hover:opacity-100"
|
||||
<!-- <button
|
||||
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}
|
||||
>
|
||||
{#if isMuted}
|
||||
|
|
@ -88,10 +87,10 @@
|
|||
{:else}
|
||||
<AudioIcon class="h-full w-full" />
|
||||
{/if}
|
||||
</button>
|
||||
</button> -->
|
||||
{#if isPaused}
|
||||
<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" />
|
||||
</div>
|
||||
|
|
@ -99,18 +98,57 @@
|
|||
</div>
|
||||
|
||||
<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
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="preview-rice-bg overflow-x-hidden" aria="hidden" />
|
||||
<div class="preview-rice-bg" aria="hidden" />
|
||||
</section>
|
||||
|
||||
<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 {
|
||||
@apply absolute inset-0 -top-40 -z-10 w-full opacity-50;
|
||||
/* background-color: red; */
|
||||
background-image: radial-gradient(closest-side, theme(colors.sky.500), transparent);
|
||||
position: absolute;
|
||||
z-index: -10;
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -6,40 +6,38 @@
|
|||
</script>
|
||||
|
||||
<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 }}
|
||||
>
|
||||
<div class="px-4 -mb-40 z-20">
|
||||
<div class="z-20 -mb-40 px-4">
|
||||
<Title>
|
||||
<span slot="pre"> Memorials of the ricing legends </span>
|
||||
<span slot="title">Wall of Fame</span>
|
||||
</Title>
|
||||
</div>
|
||||
|
||||
<div class="atmosphere" />
|
||||
|
||||
<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 }}
|
||||
>
|
||||
<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>
|
||||
</a>
|
||||
|
||||
<div
|
||||
class="w-full [translate:0px_40px_-10px] md:[translate:0px_0px_-40px] absolute top-0 inset-0 -z-30 atmosphere"
|
||||
/>
|
||||
|
||||
<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"
|
||||
imageClass="[mask-image:linear-gradient(black,black_45%,transparent_65%)] opacity-50 hover:opacity-60"
|
||||
/>
|
||||
<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"
|
||||
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
|
||||
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]"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -48,8 +46,17 @@
|
|||
</section>
|
||||
|
||||
<style lang="postcss">
|
||||
/* The blue gradient in the background */
|
||||
.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 {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ body {
|
|||
}
|
||||
|
||||
.hyprgradient {
|
||||
background-image: linear-gradient(to bottom right, #00e6cf, #00c4e3, #00a1f8);
|
||||
background-image: linear-gradient(to bottom right, #00e6cf, #00c4e3, #0081c6);
|
||||
}
|
||||
|
||||
::selection {
|
||||
|
|
|
|||
|
|
@ -2,10 +2,11 @@
|
|||
import Title from '$lib/components/Title.svelte'
|
||||
import Contest from './Contest.svelte'
|
||||
import FamedRice from './FamedRice.svelte'
|
||||
import colors from 'tailwindcss/colors'
|
||||
</script>
|
||||
|
||||
<section class="min-h-screen flex flex-col gap-14 items-center justify-center p-8 overflow-hidden">
|
||||
<div class="h-[50vh] min-h-min flex flex-col items-center justify-center">
|
||||
<section class="flex min-h-screen flex-col items-center justify-center gap-14 overflow-hidden">
|
||||
<div class="flex h-[50vh] min-h-min flex-col items-center justify-center">
|
||||
<Title>
|
||||
<h1 slot="title">Wall of fame</h1>
|
||||
<div slot="subtitle">
|
||||
|
|
@ -14,7 +15,7 @@
|
|||
</Title>
|
||||
</div>
|
||||
|
||||
<Contest name="Summer" number={2}>
|
||||
<Contest name="Summer" number={2} date="May 2023" --color="orange">
|
||||
<FamedRice
|
||||
name="Novel Nock"
|
||||
creator="end_4"
|
||||
|
|
@ -41,7 +42,7 @@
|
|||
/>
|
||||
</Contest>
|
||||
|
||||
<Contest name="Winter" number={1}>
|
||||
<Contest name="Winter" number={1} date="December 2022" --color={colors.cyan[500]}>
|
||||
<FamedRice
|
||||
name="Unnamed"
|
||||
creator="Flafy"
|
||||
|
|
|
|||
|
|
@ -1,18 +1,46 @@
|
|||
<script>
|
||||
import { inview } from 'svelte-inview'
|
||||
|
||||
/** @type {string} */
|
||||
export let name
|
||||
/** @type {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>
|
||||
|
||||
<section class="flex flex-col mt-24">
|
||||
<div class="relative mb-24">
|
||||
<div class="mix-blend-color-dodge p-6 flex items-center flex-col">
|
||||
<div class="text-2xl font-bold text-slate-300/80">Contest #{number}</div>
|
||||
<h2 class="text-9xl text-slate-200/80 text-center font-bold">{name}</h2>
|
||||
<section class="relative flex flex-col py-24">
|
||||
<div class="relative py-56">
|
||||
<div
|
||||
class="flex flex-col items-center p-6 mix-blend-color-dodge"
|
||||
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 class="background" aria-hidden="true"></div>
|
||||
<div class="mask" class:enabled>
|
||||
<div class="background" aria-hidden="true"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-40">
|
||||
|
|
@ -21,30 +49,49 @@
|
|||
</section>
|
||||
|
||||
<style lang="postcss">
|
||||
.background {
|
||||
.mask {
|
||||
overflow: hidden;
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
width: 400%;
|
||||
translate: -50% 0px;
|
||||
transform-origin: center;
|
||||
height: 250%;
|
||||
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%;
|
||||
translate: -50% -50%;
|
||||
width: 100vw;
|
||||
width: 100%;
|
||||
height: 1000px;
|
||||
z-index: -10;
|
||||
background: radial-gradient(
|
||||
140px 100px at 50% 45%,
|
||||
var(--color, theme(colors.cyan.500)),
|
||||
transparent
|
||||
),
|
||||
radial-gradient(
|
||||
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);
|
||||
background: radial-gradient(140px 100px at 50% 45%, var(--color), transparent),
|
||||
radial-gradient(145px 110px at 50% 45%, var(--c1) 80%, transparent),
|
||||
radial-gradient(210px 140px, var(--c2, theme(colors.blue.600)), 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(1100px 420px, var(--c4, theme(colors.blue.800 / 60%)), transparent);
|
||||
|
||||
& ::after {
|
||||
content: ' ';
|
||||
mask-image: radial-gradient(100% 100% at 50% 50%, black 20%, transparent 50%);
|
||||
|
||||
opacity: 0.1;
|
||||
scale: 0.95 1;
|
||||
transition: all 1200ms ease-in-out 120ms;
|
||||
|
||||
.enabled & {
|
||||
opacity: 1;
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
<script>
|
||||
import { getBlurredPath } from '$lib/Helper.mjs'
|
||||
import { inview } from 'svelte-inview'
|
||||
|
||||
/** @type {string} */
|
||||
export let name
|
||||
/** @type {string} */
|
||||
|
|
@ -17,37 +20,30 @@
|
|||
/** @type {string} */
|
||||
export let pretitel
|
||||
|
||||
let background =
|
||||
blurredThumbnail ??
|
||||
// Get the `generated_<filename>` if blurredThumbnail is not set manually
|
||||
`${thumbnail.substring(0, thumbnail.lastIndexOf('/'))}/generated_${thumbnail.split('/').at(-1)}`
|
||||
let background = blurredThumbnail ?? getBlurredPath(thumbnail)
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col gap-14">
|
||||
<div class="flex justify-center items-center flex-col">
|
||||
<div class="text-lg font-bold mb-2">{pretitel}</div>
|
||||
<h3 class="text-6xl hover:text-slate-200 mb-6 font-bold">
|
||||
<div class="flex flex-col gap-12 px-4">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<div class="mb-2 text-lg font-bold">{pretitel}</div>
|
||||
<h3 class="mb-6 text-6xl font-bold hover:text-slate-200">
|
||||
<a href={dotfilesLink} target="_blank">{name}</a>
|
||||
</h3>
|
||||
<a class="flex gap-3 group" href={dotfilesLink} target="_blank">
|
||||
<a class="group flex gap-3" href={dotfilesLink} target="_blank">
|
||||
<img
|
||||
src={creatorProfilePicture}
|
||||
class="rounded-full h-6 aspect-square"
|
||||
class="aspect-square h-6 rounded-full"
|
||||
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}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="px-6 sm:px-8 w-full max-w-[1100px] relative">
|
||||
<a class="" href={dotfilesLink} target="_blank">
|
||||
<img
|
||||
src={thumbnail}
|
||||
alt={`${name} by ${creator} thumbnail`}
|
||||
class="rounded-lg hover:scale-[1.01] duration-300 transition-transform w-full"
|
||||
/>
|
||||
<div class="relative w-full max-w-[1100px] px-6 sm:px-8">
|
||||
<a class="rice" href={dotfilesLink} target="_blank">
|
||||
<img src={thumbnail} alt={`${name} by ${creator} thumbnail`} class="" />
|
||||
</a>
|
||||
<!-- wide background -->
|
||||
<!-- <img
|
||||
|
|
@ -67,29 +63,47 @@
|
|||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.background {
|
||||
position: absolute;
|
||||
opacity: 0.4;
|
||||
min-width: calc(200% + 400px);
|
||||
height: calc(100% + 200px);
|
||||
pointer-events: none;
|
||||
inset: 0px 0 0 -200px;
|
||||
translate: 0px -50%;
|
||||
z-index: -10;
|
||||
background: red;
|
||||
.rice {
|
||||
position: relative;
|
||||
display: block;
|
||||
@apply w-full rounded-lg transition-transform;
|
||||
box-shadow: 0px 0px 8px theme(colors.black / 40%);
|
||||
|
||||
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 {
|
||||
position: absolute;
|
||||
opacity: 0.3;
|
||||
min-width: calc(120% + 400px);
|
||||
min-width: calc(120% + 200px);
|
||||
height: calc(120% + 200px);
|
||||
pointer-events: none;
|
||||
top: -55%;
|
||||
top: -45%;
|
||||
left: 50%;
|
||||
translate: -50%;
|
||||
z-index: -10;
|
||||
filter: contrast(2.5);
|
||||
|
||||
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