hyprwm/hyprland-website
1
0
Fork 0
mirror of https://github.com/hyprwm/hyprland-website.git synced 2024-11-17 02:45:59 +01:00
Code Issues Projects Releases Packages Wiki Activity

improve organization page

Browse source
This commit is contained in:
VDawg 2024-05-04 21:04:11 +03:00
parent be8353b7f6
commit 6a0d96086a
2 changed files with 14 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/lib/components/3dCard/CardContainer.svelte
View file

@ -5,6 +5,7 @@
import { setContext } from 'svelte'
import { writable, type Writable } from 'svelte/store'
import type { Card3dContext } from './Types'
import { animateIn } from '$lib/Helper.mjs'
export let containerClass: string | undefined = undefined
@ -34,7 +35,10 @@
}
</script>
<div class="flex items-center justify-center [perspective:1000px]">
<div
class="flex items-center justify-center [perspective:1000px]"
use:animateIn={{ slide: 24, fade: 0 }}
>
<div
class={`${containerClass} group/card translate flex w-max items-center justify-center transition-all [transform-style:preserve-3d] `}
on:mouseenter={handleMouseEnter}

41
src/routes/organization/+page.svelte
View file

@ -13,13 +13,11 @@
<div slot="subtitle" class="max-w-[40ch]">The HyprWm Organization</div>
</Title>
</div>
<section
class="flex flex-col items-center [animation-duration:2800ms] [&>*]:animate-in [&>*]:fade-in-0 [&>*]:slide-in-from-bottom-6 [&>*]:fill-mode-backwards"
>
<section class="flex flex-col items-center">
<h2 class="mb-4 text-4xl font-bold [animation-delay:300ms]">Teams</h2>
<div
class="flex max-w-full flex-wrap items-center justify-center gap-8 px-8 [animation-delay:500ms] lg:grid lg:grid-cols-2 xl:grid-cols-3"
class="flex max-w-full flex-wrap items-center justify-center gap-8 px-8 lg:grid lg:grid-cols-2 xl:grid-cols-3 [&>*]:animate-in [&>*]:fade-in-0 [&>*]:slide-in-from-bottom-6 [&>*]:fill-mode-backwards [&>*]:[animation-duration:1400ms]"
>
<!-- RFC -->
<CardContainer containerClass="mt-20">
@ -49,7 +47,12 @@
</CardContainer>
<!-- Uhay Web -->
<CardContainer let:hasMouseEntered containerClass="mt-20">
<CardContainer
let:hasMouseEntered
containerClass="mt-20"
style="animation-delay:640ms"
animateInDelay={150}
>
<CardBody
class="group/card relative h-auto w-[21rem] rounded-3xl border border-white/[0.2] bg-black p-6 hover:shadow-2xl hover:shadow-cyan-500/[0.1] "
>
@ -68,7 +71,7 @@
<CardItem class="h-6 w-full text-base text-white" translateZ={90}>
<div class=" font-medium text-slate-400">
<p class="group-hover/web:visible">
{hasMouseEntered ? 'Most awesome obviously' : 'Web. JS. Design.'}
{hasMouseEntered ? 'Hello world' : 'Web. JS. Design.'}
</p>
</div>
</CardItem>
@ -78,32 +81,6 @@
class="absolute inset-[-1px] -z-10 rounded-3xl bg-gradient-to-tl from-blue-500 to-cyan-500 opacity-50 transition-opacity duration-200 group-hover/card:opacity-100"
></div>
</CardContainer>
<CardContainer containerClass="mt-20">
<CardBody
class="group/card relative h-auto w-[21rem] rounded-3xl border border-white/[0.2] bg-black p-6 hover:shadow-2xl hover:shadow-cyan-500/[0.1] "
>
<CardItem class="w-full text-xl font-bold text-white" translateZ={30}>
<div class="mb-4 flex w-full items-center justify-center">
<img
src="https://media.discordapp.net/attachments/1233710054729842729/1235516223819878420/visualdawg_logo_black_background_globe_minimalistic_illustratio_addd6568-b95f-40ec-8de6-e90366f66bea.png?ex=6636a1e6&is=66355066&hm=83c0f90353c3a748589b25ac919c3e1acd56029efbdc9c86b2f5a5427d12d563&=&format=webp&quality=lossless&width=560&height=560"
class="-mt-20 size-64 rounded-xl shadow-2xl shadow-blue-500 outline outline-blue-500/20 group-hover/card:outline-cyan-500/50"
alt="RFC Team logo"
/>
</div>
</CardItem>
<CardItem class="mb-1 text-xl font-bold text-white" translateZ={50}>
<h3 class="">Uhay</h3>
</CardItem>
<CardItem class="text-base text-white" translateZ={90}>
<p class="font-medium text-slate-400">Web. JS. Design.</p>
</CardItem>
</CardBody>
<div
class="absolute inset-[-1px] -z-10 rounded-3xl bg-gradient-to-tl from-blue-500 to-cyan-500 opacity-50 transition-opacity duration-200 group-hover/card:opacity-100"
></div>
</CardContainer>
</div>
</section>
</main>