vt3e.cat
wip bsky client for the web & android
bbell.vt3e.cat
1<script setup lang="ts">
2const props = defineProps<{
3 bgImage?: string | null
4 hasImage?: boolean
5 contentPosition?: 'center' | 'bottom'
6 maxWidth?: string
7}>()
8
9const bgStyle = props.bgImage ? { backgroundImage: `url(${props.bgImage})` } : undefined
10</script>
11
12<template>
13 <div class="screen-layout" :data-position="contentPosition">
14 <div
15 class="bg-layer"
16 :class="{ 'has-image': !!bgImage || hasImage }"
17 :style="bgStyle"
18 aria-hidden="true"
19 />
20 <div class="bg-overlay" aria-hidden="true" />
21 <div class="content-layer" :style="{ maxWidth: maxWidth || '640px' }">
22 <slot />
23 </div>
24 </div>
25</template>
26
27<style scoped lang="scss">
28.screen-layout {
29 position: fixed;
30 inset: 0;
31 z-index: 1000;
32 display: flex;
33 flex-direction: column;
34 align-items: center;
35 justify-content: center;
36 background-color: hsl(var(--base));
37 color: hsl(var(--text));
38 overflow: hidden;
39 perspective: 1000px;
40}
41
42.bg-layer {
43 position: absolute;
44 inset: -10%;
45 z-index: -2;
46 will-change: transform, filter, opacity;
47 opacity: 1;
48 transition:
49 transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
50 filter 0.9s ease,
51 opacity 0.9s ease;
52 filter: blur(16px) saturate(1.05);
53 transform: scale(1.05);
54 background-size: cover;
55 background-position: center;
56 background-repeat: no-repeat;
57}
58
59.bg-overlay {
60 position: absolute;
61 inset: 0;
62 z-index: -1;
63 background: linear-gradient(
64 to bottom,
65 hsla(var(--base) / 0.12) 0%,
66 hsla(var(--base) / 0.7) 60%,
67 hsla(var(--base) / 0.95) 100%
68 );
69}
70
71.content-layer {
72 position: relative;
73 z-index: 10;
74 width: 100%;
75 padding: 2rem;
76 margin: 0 auto;
77 display: flex;
78 flex-direction: column;
79 align-items: center;
80 text-align: center;
81 will-change: transform, opacity, filter;
82 transition: all 0.6s cubic-bezier(0.6, 0, 0.4, 1);
83 justify-content: center;
84}
85
86.screen-layout[data-position='bottom'] .content-layer {
87 justify-content: flex-end;
88 padding-bottom: calc(2rem + env(safe-area-inset-bottom));
89}
90</style>