121 lines
No EOL
3.7 KiB
Svelte
121 lines
No EOL
3.7 KiB
Svelte
<script lang="ts">
|
|
import UserPanel from '$lib/components/bio/UserPanel.svelte';
|
|
import socials from '$lib/socials';
|
|
import Tooltip from '../common/Tooltip.svelte';
|
|
|
|
export let bio: BioSite | undefined = undefined;
|
|
export let dim: boolean = false;
|
|
|
|
</script>
|
|
|
|
<img
|
|
class="bg blur-[10vh] brightness-110"
|
|
class:opacity-30={dim}
|
|
src="/assets/landing/background-blur.svg"
|
|
alt="Background blur" />
|
|
|
|
<img
|
|
class="bg blur-[3.25vh] brightness-125 z-10"
|
|
class:opacity-30={dim}
|
|
src="/assets/landing/background-logo.svg"
|
|
alt="Background logo" />
|
|
|
|
<div class="relative z-20 w-full h-full flex justify-between 2xl:gap-8 px-6 py-12 xs:p-12 sm:p-16 overflow-x-hidden">
|
|
<div class="w-full h-full flex flex-col justify-between gap-8">
|
|
<div class="flex flex-col gap-[50px] 2xl:gap-[60px] 3xl:gap-[120px]">
|
|
<header>
|
|
<a class="flex gap-2 items-center box-content" href="/">
|
|
<div class="w-8 h-8 bg-white img logo" title="YourSitee logo" />
|
|
<p class="text-white text-2xl font-medium">YourSit.ee</p>
|
|
<div class="w-6 h-[18px] bg-accent img alpha" title="Alpha" />
|
|
</a>
|
|
</header>
|
|
<main class="flex flex-col gap-10">
|
|
<slot />
|
|
</main>
|
|
</div>
|
|
<footer>
|
|
<div class="flex flex-col gap-2">
|
|
<div class="flex gap-2">
|
|
{#each socials as social}
|
|
<a href={social.url} target="_blank" aria-label={social.name} class="group">
|
|
<div class="p-2 group">
|
|
<div
|
|
class="w-6 h-6 bg-text-clickable group-hover:bg-text-primary transition-colors img social"
|
|
style="--url: url({social.icon})" />
|
|
<div
|
|
class="relative opacity-0 group-hover:opacity-100 -translate-y-5 group-hover:-translate-y-8 transition-all"
|
|
aria-hidden="true">
|
|
<Tooltip>{social.name}</Tooltip>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
<div class="flex-col gap-2 inline-flex">
|
|
<div class="text-text-secondary">© YourSitee {new Date(Date.now()).getFullYear()}</div>
|
|
<div class="flex gap-4">
|
|
<a href="/privacy">Privacy Policy</a>
|
|
<a href="/terms">Terms of Service</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
{#if bio}
|
|
<div class="hidden lg:flex flex-shrink-0 items-end justify-end">
|
|
<div class="grid">
|
|
<div class="user-panel">
|
|
<UserPanel
|
|
displayName={bio.displayName}
|
|
username={bio.username}
|
|
badges={bio.badges}
|
|
description={bio.description}
|
|
socials={{ links: [], texts: [], minimal: false, invert: false }}
|
|
uid={bio.uid}
|
|
uniqueId={bio.uniqueId}
|
|
views={null}
|
|
align={bio.align}
|
|
location={bio.location ?? undefined} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style lang="postcss">
|
|
.bg {
|
|
@apply w-screen h-screen fixed top-0 object-cover;
|
|
}
|
|
|
|
.img {
|
|
mask-position: center;
|
|
mask-size: cover;
|
|
mask-repeat: no-repeat;
|
|
}
|
|
|
|
.img.logo {
|
|
mask-image: url(/assets/brand/icon.svg);
|
|
}
|
|
|
|
.img.alpha {
|
|
mask-image: url(/assets/brand/alpha.svg);
|
|
}
|
|
|
|
.img.social {
|
|
mask-image: var(--url);
|
|
mask-size: contain;
|
|
}
|
|
|
|
.grid > div {
|
|
@apply col-start-1 row-start-1;
|
|
}
|
|
|
|
.user-panel {
|
|
@apply w-[350px] xl:w-[400px];
|
|
}
|
|
|
|
footer a {
|
|
@apply !text-text-clickable hover:!text-text-primary transition-colors;
|
|
}
|
|
</style>
|
|
|