mirror of
https://github.com/hyprwm/hyprland-website.git
synced 2024-11-16 18:35:59 +01:00
work
This commit is contained in:
parent
620e61842a
commit
e4354a407c
13 changed files with 211 additions and 68 deletions
|
@ -4,4 +4,4 @@ export default {
|
|||
tailwindcss: {},
|
||||
autoprefixer: {}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
@ -2,16 +2,16 @@
|
|||
import { animateIn } from '$lib/Helper.mjs'
|
||||
</script>
|
||||
|
||||
<div use:animateIn={{ slide: 24, fade: 0 }} class="text-center {$$restProps.class}">
|
||||
<div class="font-extrabold mb-3 text-slate-300">
|
||||
<div use:animateIn={{ slide: 24, fade: 0 }} class="px-3 text-center {$$restProps.class}">
|
||||
<div class="mb-3 font-extrabold text-slate-300">
|
||||
<slot name="pre" />
|
||||
</div>
|
||||
|
||||
<h1 class="text-6xl md:text-8xl font-bold text-center mb-8">
|
||||
<h1 class="mb-8 text-center text-5xl font-bold md:text-8xl">
|
||||
<slot name="title">No title given!!!</slot>
|
||||
</h1>
|
||||
|
||||
<div class="text-center text-lg font-extrabold text-slate-300"><slot name="subtitle" /></div>
|
||||
<div class="text-center font-extrabold text-slate-300 sm:text-lg"><slot name="subtitle" /></div>
|
||||
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
<img
|
||||
src={image}
|
||||
alt="Rice desktop"
|
||||
class="nice-hover w-full rounded-xl object-cover object-top shadow-2xl hover:scale-[1.01] max-sm:[xmask-image:none] {imageClass}"
|
||||
class="nice-hover w-full rounded-xl object-cover object-top shadow-2xl hover:scale-[1.01] {imageClass}"
|
||||
/>
|
||||
<div class="rice-blurred">
|
||||
<img
|
||||
|
@ -49,11 +49,13 @@
|
|||
z-index: -10;
|
||||
background-color: red;
|
||||
mask-image: radial-gradient(50% 50% at 50% 50%, black, transparent);
|
||||
contain: content layout size style;
|
||||
|
||||
@apply -z-10 transition-[filter] duration-500;
|
||||
|
||||
.rice:hover & {
|
||||
/* Too laggy on firefox */
|
||||
/* .rice:hover & {
|
||||
filter: brightness(4);
|
||||
}
|
||||
} */
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -100,7 +100,7 @@
|
|||
|
||||
<style lang="postcss">
|
||||
.card {
|
||||
@apply relative flex h-full w-full items-end justify-end rounded-3xl bg-slate-950 transition-colors duration-300 md:bg-slate-900 md:hover:bg-blue-900;
|
||||
@apply relative flex h-full w-full items-end justify-end rounded-3xl bg-neutral-950 transition-colors duration-300 md:bg-slate-900 md:hover:bg-blue-900;
|
||||
z-index: 2;
|
||||
contain: paint style layout;
|
||||
}
|
||||
|
|
|
@ -46,14 +46,14 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<section class="px-3 md:px-8 flex flex-col items-center">
|
||||
<section class="flex flex-col items-center px-3 md:px-8">
|
||||
<Title>
|
||||
<span slot="pre">TLDR</span>
|
||||
<span slot="title">Features</span>
|
||||
</Title>
|
||||
|
||||
<div
|
||||
class="grid lg:grid-cols-2 lg:grid-rows-2 w-full gap-6 text-lg text-white/70 font-medium flex-wrap group"
|
||||
class="group grid w-full flex-wrap gap-6 text-lg font-medium text-white/70 lg:grid-cols-2 lg:grid-rows-2"
|
||||
role="contentinfo"
|
||||
on:mouseenter={!isMobile && onMouseEnter}
|
||||
on:mouseleave={!isMobile && onMouseLeave}
|
||||
|
@ -70,7 +70,7 @@
|
|||
Live reloading config. Easy plain-text format. Sensible defaults. Great documentation.
|
||||
</p>
|
||||
|
||||
<div class="absolute _wrapper inset-0 select-none" aria-hidden>
|
||||
<div class="_wrapper absolute inset-0 select-none" aria-hidden>
|
||||
<div class="feature-image">
|
||||
<img src={configDefaultImage} class="feature-image_inner" alt="" aria-hidden="true" />
|
||||
<img src={configHoverImage} class="feature-image_inner-hover" alt="" aria-hidden="true" />
|
||||
|
@ -81,7 +81,7 @@
|
|||
<p class="max-w-[60ch]">
|
||||
Automatic tiling which just works. Supports multiple fine-tuneable layouts.
|
||||
</p>
|
||||
<div class="absolute _wrapper inset-0 select-none" aria-hidden>
|
||||
<div class="_wrapper absolute inset-0 select-none" aria-hidden>
|
||||
<div class="feature-image">
|
||||
<img src={tileDefaultImage} class="feature-image_inner" alt="" aria-hidden="true" />
|
||||
<img src={tileHoverImage} class="feature-image_inner-hover" alt="" aria-hidden="true" />
|
||||
|
@ -90,7 +90,7 @@
|
|||
</FeatureCard>
|
||||
</div>
|
||||
|
||||
<div class="mt-14 z-10 flex-wrap justify-center flex sm:flex-row flex-col gap-8">
|
||||
<div class="z-10 mt-14 flex flex-col flex-wrap justify-center gap-8 sm:flex-row">
|
||||
<a
|
||||
href="https://github.com/hyprland-community/awesome-hyprland#plugins"
|
||||
target="_blank"
|
||||
|
@ -133,13 +133,21 @@
|
|||
}
|
||||
|
||||
& img {
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
position: absolute;
|
||||
right: -200px;
|
||||
top: -209px;
|
||||
transition: opacity 1500ms ease-in-out;
|
||||
pointer-events: none;
|
||||
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
right: -80px;
|
||||
top: -140px;
|
||||
|
||||
@media screen(sm) {
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
right: -200px;
|
||||
top: -209px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.feature-image_inner-hover {
|
||||
|
|
|
@ -27,7 +27,7 @@
|
|||
class="pointer-events-none 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" />
|
||||
<img src={Logo} alt="Hyprland Logo" class="ani-in mb-6 h-40 fill-mode-backwards sm:h-48" />
|
||||
<div class="ani-in relative fill-mode-backwards [animation-delay:384ms]">
|
||||
<h1
|
||||
class="hyprgradient pointer-events-auto bg-clip-text p-2 font-london text-6xl font-bold tracking-wider text-transparent md:text-7xl md:tracking-widest"
|
||||
|
@ -39,7 +39,7 @@
|
|||
<h2
|
||||
class="ani-in pointer-events-auto 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 with the looks
|
||||
</h2>
|
||||
|
||||
<div
|
||||
|
@ -73,7 +73,6 @@
|
|||
</section>
|
||||
|
||||
<style lang="postcss">
|
||||
|
||||
@keyframes slidein {
|
||||
from {
|
||||
transform: translateX(0%);
|
||||
|
|
|
@ -10,8 +10,6 @@
|
|||
/** Used to transform the rows by their own lenght*/
|
||||
const height = workspacesPerRow * (workspaceHeight + gapLength)
|
||||
|
||||
let wrapperElement, mouseX, mouseY
|
||||
|
||||
function generateRow(amount) {
|
||||
const base = Array.from({ length: amount }).map(generateWorkspace)
|
||||
// For the effect to work, the items need to be duplicated
|
||||
|
@ -37,7 +35,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="wrapper" aria-hidden="true" bind:this={wrapperElement}>
|
||||
<div class="wrapper" aria-hidden="true">
|
||||
<div
|
||||
class="inner-wrapper"
|
||||
style={`--amount: ${workspacesPerRow}; --workspace-gap: ${gapLength}px;--workspace-height: ${workspaceHeight}px; --length: ${height}px;`}
|
||||
|
@ -110,6 +108,7 @@
|
|||
contain: strict;
|
||||
display: flex;
|
||||
mask-image: linear-gradient(to top, transparent 0%, black 20%);
|
||||
contain: layout style content;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
|
@ -122,6 +121,7 @@
|
|||
height: 100%;
|
||||
z-index: -10;
|
||||
pointer-events: none;
|
||||
contain: strict;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -134,6 +134,8 @@
|
|||
height: var(--length);
|
||||
min-height: var(--length);
|
||||
max-height: var(--length);
|
||||
animation: backwards animate-in ease-in 2000ms 300ms;
|
||||
contain: layout style content;
|
||||
}
|
||||
|
||||
.column {
|
||||
|
@ -143,7 +145,8 @@
|
|||
width: 100%;
|
||||
gap: var(--workspace-gap);
|
||||
z-index: -50;
|
||||
animation: loop 98s infinite linear;
|
||||
/* animation: loop 98s infinite linear; */
|
||||
contain: layout style content;
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
animation: none;
|
||||
|
@ -156,6 +159,7 @@
|
|||
min-height: var(--workspace-height);
|
||||
max-height: var(--workspace-height);
|
||||
width: 100%;
|
||||
contain: layout style content;
|
||||
}
|
||||
|
||||
.tiles {
|
||||
|
@ -163,6 +167,7 @@
|
|||
flex-direction: column;
|
||||
gap: 8px;
|
||||
flex-grow: 1;
|
||||
contain: layout style content;
|
||||
}
|
||||
|
||||
.tile {
|
||||
|
@ -171,9 +176,14 @@
|
|||
height: var(--height);
|
||||
border-radius: 12px;
|
||||
pointer-events: auto;
|
||||
transition: all 280ms ease-in-out;
|
||||
transition: 380ms ease-in-out;
|
||||
transition-property: background opacity scale box-shadow;
|
||||
opacity: 0.5;
|
||||
contain: strict;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
scale: 1.02;
|
||||
background: color-mix(in hsl, var(--color), transparent 20%);
|
||||
box-shadow:
|
||||
0px 0px 10px var(--color),
|
||||
|
@ -184,7 +194,7 @@
|
|||
.top-light {
|
||||
background: radial-gradient(
|
||||
100% 80% at top,
|
||||
theme(colors.cyan.500 / 60%) 0%,
|
||||
theme(colors.cyan.500 / 50%) 0%,
|
||||
theme(colors.sky.500 / 20%),
|
||||
transparent
|
||||
);
|
||||
|
@ -195,6 +205,7 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
@keyframes loop {
|
||||
|
@ -203,4 +214,13 @@
|
|||
/* translate: 0px -50%; */
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animate-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -79,6 +79,7 @@
|
|||
.nav {
|
||||
/* Base classes */
|
||||
font-weight: 600;
|
||||
font-size: 1.5rem;
|
||||
|
||||
/* Mobile classes */
|
||||
position: absolute;
|
||||
|
@ -90,18 +91,18 @@
|
|||
align-items: center;
|
||||
gap: 1rem;
|
||||
backdrop-filter: blur(8px);
|
||||
padding: 3rem 1rem;
|
||||
padding: 5rem 2rem;
|
||||
display: none;
|
||||
|
||||
/* Desktop classes */
|
||||
@media screen(lg) {
|
||||
@apply relative flex h-min w-max flex-row rounded-full bg-black/40 p-2 pl-5 outline outline-primary/10;
|
||||
@apply relative flex h-min w-max flex-row rounded-full bg-black/40 p-2 pl-5 text-base outline outline-primary/10;
|
||||
}
|
||||
}
|
||||
|
||||
.social-icon {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
display: block;
|
||||
|
||||
@apply rounded-full p-1 hover:bg-purple-500 hover:text-white;
|
||||
|
|
|
@ -13,7 +13,6 @@
|
|||
let videoElement
|
||||
|
||||
let isVisible = false
|
||||
let isShowingControls = false
|
||||
let isMuted = true
|
||||
let isPaused = false
|
||||
|
||||
|
@ -39,10 +38,7 @@
|
|||
})
|
||||
</script>
|
||||
|
||||
<section
|
||||
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 z-10{$$restProps.class}"
|
||||
class:isVisible
|
||||
>
|
||||
<section class={$$restProps.class} class:isVisible>
|
||||
<div
|
||||
class="rice-video"
|
||||
role="banner"
|
||||
|
@ -56,8 +52,6 @@
|
|||
videoElement.pause()
|
||||
}}
|
||||
on:inview_leave={() => (isVisible = false)}
|
||||
on:mouseenter={() => (isShowingControls = true)}
|
||||
on:mouseleave={() => (isShowingControls = false)}
|
||||
>
|
||||
<video
|
||||
bind:this={videoElement}
|
||||
|
@ -75,7 +69,7 @@
|
|||
<div
|
||||
class={clsx(
|
||||
'z-20 opacity-0 transition-opacity ',
|
||||
isShowingControls ? 'opacity-100' : 'pointer-events-none'
|
||||
isPaused ? 'opacity-100' : 'pointer-events-none'
|
||||
)}
|
||||
>
|
||||
<!-- Currently there is no audio. Component might get refractored into a stand-alone player, so lets leave that here -->
|
||||
|
@ -108,6 +102,11 @@
|
|||
</section>
|
||||
|
||||
<style lang="postcss">
|
||||
section {
|
||||
@apply relative z-10 -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;
|
||||
|
||||
contain: layout style content;
|
||||
}
|
||||
.rice-video {
|
||||
@apply mx-3 rounded-xl transition-all;
|
||||
transition-duration: 1460ms;
|
||||
|
|
|
@ -5,10 +5,7 @@
|
|||
import FameRicePreview from './FameRicePreview.svelte'
|
||||
</script>
|
||||
|
||||
<section
|
||||
class="relative flex w-full flex-col items-center"
|
||||
use:animateIn={{ fade: 0, slide: 24, duration: 3000, threshold: 0.1 }}
|
||||
>
|
||||
<section class="" use:animateIn={{ fade: 0, slide: 24, duration: 3000, threshold: 0.1 }}>
|
||||
<div class="z-20 -mb-40 px-4">
|
||||
<Title>
|
||||
<span slot="pre"> Memorials of the ricing legends </span>
|
||||
|
@ -46,6 +43,10 @@
|
|||
</section>
|
||||
|
||||
<style lang="postcss">
|
||||
section {
|
||||
@apply relative flex w-full flex-col items-center;
|
||||
contain: layout style content size;
|
||||
}
|
||||
/* The blue gradient in the background */
|
||||
.atmosphere {
|
||||
position: absolute;
|
||||
|
|
|
@ -1,18 +1,86 @@
|
|||
<script lang="ts">
|
||||
<script>
|
||||
import Title from '$lib/components/Title.svelte'
|
||||
import Contest from './Contest.svelte'
|
||||
import FamedRice from './FamedRice.svelte'
|
||||
import colors from 'tailwindcss/colors'
|
||||
import { onMount } from 'svelte'
|
||||
|
||||
/** Maximum rotation in degrees */
|
||||
const maxDegress = 45
|
||||
const tiles = [
|
||||
{ top: '40px', left: '20px', z: -40 },
|
||||
{ top: '10px', left: '40px', z: -80 },
|
||||
{ top: '-120px', left: '70px', z: -80 },
|
||||
{ top: '30px', left: '5px', z: -80 },
|
||||
{ top: '80px', left: '4px', z: -80 },
|
||||
{ top: '20px', left: '4px', z: -80 },
|
||||
{ top: '80px', left: '20px' }
|
||||
]
|
||||
|
||||
/** @type {HTMLElement} */
|
||||
let titleWrapper
|
||||
/** @type {DOMRect} */
|
||||
let container
|
||||
|
||||
/**
|
||||
* Bind the generated tiles here and iterate over them later
|
||||
* @type {HTMLElement[]}*/
|
||||
const boundTiles = []
|
||||
|
||||
onMount(() => {
|
||||
container = titleWrapper.getBoundingClientRect()
|
||||
})
|
||||
|
||||
function rotateTiles({ clientX, clientY }) {
|
||||
boundTiles.forEach((tile) => {
|
||||
const { x, y, width, height } = tile.getBoundingClientRect()
|
||||
const middleX = x + width / 2
|
||||
const middleY = y + height / 2
|
||||
|
||||
console.log({ middleX, middleY, clientX, clientY })
|
||||
|
||||
const offsetX = minMax(((clientX - middleX) / clientX) * maxDegress, 95)
|
||||
const offsetY = minMax(((clientY - middleY) / clientY) * maxDegress, 95)
|
||||
|
||||
tile.style.setProperty('--rotateX', offsetX)
|
||||
tile.style.setProperty('--rotateY', -offsetY)
|
||||
})
|
||||
}
|
||||
|
||||
function minMax(value, minMax) {
|
||||
return value
|
||||
// return Math.max(Math.min(value, minMax), minMax * -1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<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">
|
||||
<section
|
||||
class="relative flex min-h-screen flex-col items-center justify-center gap-14 overflow-x-hidden"
|
||||
>
|
||||
<div
|
||||
class="relative -mb-14 flex h-[90vh] min-h-min w-full flex-col items-center justify-center bg-white/10"
|
||||
bind:this={titleWrapper}
|
||||
on:mousemove={rotateTiles}
|
||||
role="heading"
|
||||
aria-level={0}
|
||||
>
|
||||
<Title>
|
||||
<h1 slot="title">Wall of fame</h1>
|
||||
<span slot="title">Wall of fame</span>
|
||||
<div slot="subtitle">
|
||||
The chronicles of the triumphant<br /> from bygone rice contests held within our Discord
|
||||
</div>
|
||||
</Title>
|
||||
|
||||
<div class="floating-wrapper">
|
||||
{#each tiles as { left, top, z }, index}
|
||||
<div
|
||||
class="floating-panel"
|
||||
style:--left={left}
|
||||
style:--top={top}
|
||||
style:--z={z}
|
||||
bind:this={boundTiles[index]}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Contest name="Summer" number={2} date="May 2023" --color="orange">
|
||||
|
@ -82,6 +150,51 @@
|
|||
dotfilesLink="https://github.com/lauroro/hyprland-dotfiles"
|
||||
creatorProfilePicture="https://avatars.githubusercontent.com/u/88981092?s=48&v=4"
|
||||
thumbnail="/imgs/ricing_competitions/1/lauroro.webp"
|
||||
class="pb-16"
|
||||
/>
|
||||
</Contest>
|
||||
</section>
|
||||
|
||||
<style lang="postcss">
|
||||
.floating-wrapper {
|
||||
perspective: 1000px;
|
||||
transform-style: preserve-3d;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: red solid 1px;
|
||||
position: absolute;
|
||||
/* contain: strict; */
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.floating-panel {
|
||||
position: absolute;
|
||||
/* margin-left: var(--left);
|
||||
margin-top: var(--top); */
|
||||
left: var(--left);
|
||||
top: var(--top);
|
||||
|
||||
min-height: 100px;
|
||||
min-width: 200px;
|
||||
|
||||
transform-style: preserve-3d;
|
||||
translate: 0px 0px calc(var(--z) * 1px);
|
||||
|
||||
/* contain: layout; */
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
border: solid white 2px;
|
||||
border-radius: 24px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
inset: 0px;
|
||||
position: absolute;
|
||||
transform: rotateY(calc(var(--rotateX) * 1deg)) rotateX(calc(var(--rotateY) * 1deg));
|
||||
/* transition: transform 40ms; */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -12,7 +12,6 @@
|
|||
let enabled = false
|
||||
|
||||
function setEnabled({ detail }) {
|
||||
console.log({ detail })
|
||||
const { inView, scrollDirection } = detail
|
||||
const isScrollingUp = scrollDirection.vertical === 'up'
|
||||
|
||||
|
@ -26,15 +25,15 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<section class="relative flex flex-col py-24">
|
||||
<div class="relative py-56">
|
||||
<section class="relative flex flex-col">
|
||||
<div class="relative py-24 sm:py-40">
|
||||
<div
|
||||
class="flex flex-col items-center p-6 mix-blend-color-dodge"
|
||||
use:inview={{ threshold: 0.25 }}
|
||||
use:inview={{ threshold: 0.45 }}
|
||||
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>
|
||||
<div class="text-xl font-bold text-neutral-300/80 sm:text-2xl">Contest #{number}</div>
|
||||
<h2 class="text-center text-6xl font-bold text-neutral-200/80 sm:text-9xl">{name}</h2>
|
||||
<h2 class="mt-2 text-center text-xl font-bold text-slate-200/80">{date}</h2>
|
||||
</div>
|
||||
|
||||
|
@ -50,7 +49,7 @@
|
|||
|
||||
<style lang="postcss">
|
||||
.mask {
|
||||
overflow: hidden;
|
||||
/* overflow: hidden; */
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
width: 400%;
|
||||
|
@ -70,14 +69,12 @@
|
|||
--c4: color-mix(in hsl shorter hue, var(--color), hsl(0, 100%, 0%) 30%);
|
||||
|
||||
position: absolute;
|
||||
top: 500px;
|
||||
left: 50%;
|
||||
translate: -50% -50%;
|
||||
width: 100%;
|
||||
height: 1000px;
|
||||
z-index: -10;
|
||||
background: radial-gradient(140px 100px at 50% 45%, var(--color), transparent),
|
||||
radial-gradient(145px 110px at 50% 45%, var(--c1) 80%, transparent),
|
||||
radial-gradient(145px 110px at 50% 45%, var(--c1), 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),
|
||||
|
@ -85,12 +82,20 @@
|
|||
|
||||
mask-image: radial-gradient(100% 100% at 50% 50%, black 20%, transparent 50%);
|
||||
|
||||
opacity: 0.1;
|
||||
opacity: 0.25;
|
||||
scale: 0.95 1;
|
||||
transition: all 1200ms ease-in-out 120ms;
|
||||
|
||||
top: 200px;
|
||||
left: 50%;
|
||||
|
||||
@media screen(sm) {
|
||||
top: 200px;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.enabled & {
|
||||
opacity: 1;
|
||||
opacity: 0.9;
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -23,10 +23,10 @@
|
|||
let background = blurredThumbnail ?? getBlurredPath(thumbnail)
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col gap-12 px-4">
|
||||
<div class="flex flex-col gap-12 px-4 {$$restProps.class}">
|
||||
<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">
|
||||
<h3 class="mb-6 text-4xl font-bold hover:text-slate-200 sm:text-6xl">
|
||||
<a href={dotfilesLink} target="_blank">{name}</a>
|
||||
</h3>
|
||||
<a class="group flex gap-3" href={dotfilesLink} target="_blank">
|
||||
|
@ -45,13 +45,6 @@
|
|||
<a class="rice" href={dotfilesLink} target="_blank">
|
||||
<img src={thumbnail} alt={`${name} by ${creator} thumbnail`} class="" />
|
||||
</a>
|
||||
<!-- wide background -->
|
||||
<!-- <img
|
||||
src={background}
|
||||
aria-hidden="true"
|
||||
class="background"
|
||||
alt={`${name} by ${creator} thumbnail`}
|
||||
/> -->
|
||||
<!-- blur background -->
|
||||
<img
|
||||
src={background}
|
||||
|
@ -66,6 +59,7 @@
|
|||
.rice {
|
||||
position: relative;
|
||||
display: block;
|
||||
contain: layout style;
|
||||
@apply w-full rounded-lg transition-transform;
|
||||
box-shadow: 0px 0px 8px theme(colors.black / 40%);
|
||||
|
||||
|
@ -104,6 +98,7 @@
|
|||
translate: -50%;
|
||||
z-index: -10;
|
||||
filter: contrast(2.5);
|
||||
contain: layout size style paint;
|
||||
|
||||
mask-image: radial-gradient(farthest-side, black, transparent);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue