forked from
flo-bit.dev/blento
your personal website on atproto - mirror
small fixes
+97
-43
+66
-19
src/lib/Profile.svelte
+66
-19
src/lib/Profile.svelte
···
22
22
`<a target="_blank" href="${href}" title="${title}">${text}</a>`;
23
23
</script>
24
24
25
+
<Head
26
+
favicon={'https://cdn.bsky.app/img/avatar/plain/' + did + '/' + profileData?.avatar.ref.$link}
27
+
title={(profileData?.displayName || handle) + "'s blento"}
28
+
/>
29
+
25
30
<!-- lg:fixed lg:h-screen lg:w-1/4 lg:max-w-none lg:px-12 lg:pt-24 xl:w-1/3 -->
26
31
<div
27
-
class="mx-auto flex max-w-2xl flex-col justify-between px-8 pt-16 pb-8 @5xl/wrapper:fixed @5xl/wrapper:h-screen @5xl/wrapper:w-1/4 @5xl/wrapper:max-w-none @5xl/wrapper:px-12 @5xl/wrapper:pt-24 @7xl/wrapper:w-1/3"
32
+
class="mx-auto flex max-w-2xl flex-col justify-between px-8 @5xl/wrapper:fixed @5xl/wrapper:h-screen @5xl/wrapper:w-1/4 @5xl/wrapper:max-w-none @5xl/wrapper:px-12 @7xl/wrapper:w-1/3"
28
33
>
29
-
<div class="flex flex-col gap-4">
30
-
<Head
31
-
favicon={'https://cdn.bsky.app/img/avatar/plain/' + did + '/' + profileData?.avatar.ref.$link}
32
-
title={(profileData?.displayName || handle) + "'s blento"}
33
-
/>
34
+
<div class="flex flex-col gap-4 pt-16 pb-8 @5xl/wrapper:h-screen @5xl/wrapper:pt-24">
34
35
<img
35
36
class="rounded-fulll size-32 rounded-full @5xl/wrapper:size-44"
36
37
src={'https://cdn.bsky.app/img/avatar/plain/' + did + '/' + profileData?.avatar.ref.$link}
37
38
alt=""
38
39
/>
39
-
<div class="line-clamp-2 text-4xl font-bold wrap-anywhere">
40
+
<div class="text-4xl font-bold wrap-anywhere">
40
41
{profileData?.displayName || handle}
41
42
</div>
42
43
43
-
<div
44
-
class="text-base-600 dark:text-base-400 prose dark:prose-invert prose-a:text-accent-500 prose-a:no-underline line-clamp-3"
45
-
>
46
-
{@html marked.parse(profileData.description ?? '', { renderer })}
44
+
<div class="scrollbar flex-grow overflow-y-scroll px-4 -mx-4">
45
+
<div
46
+
class="text-base-600 dark:text-base-400 prose dark:prose-invert prose-a:text-accent-500 prose-a:no-underline"
47
+
>
48
+
{@html marked.parse(profileData.description ?? '', { renderer })}
49
+
</div>
47
50
</div>
48
51
49
52
{#if showEditButton && client.isLoggedIn && client.profile?.did === did}
···
103
106
</div>
104
107
{/if}
105
108
{/if}
106
-
</div>
107
-
<div class="hidden text-xs font-light @5xl/wrapper:block">
108
-
made with <a
109
-
href="https://blento.app"
110
-
target="_blank"
111
-
class="hover:text-accent-600 dark:hover:text-accent-400 font-medium transition-colors duration-200"
112
-
>blento</a
113
-
>
109
+
<div class="hidden text-xs font-light @5xl/wrapper:flex">
110
+
made with <a
111
+
href="https://blento.app"
112
+
target="_blank"
113
+
class="hover:text-accent-600 dark:hover:text-accent-400 font-medium transition-colors duration-200"
114
+
>blento</a
115
+
>
116
+
</div>
114
117
</div>
115
118
</div>
119
+
120
+
<style>
121
+
.scrollbar::-webkit-scrollbar-track {
122
+
background-color: transparent;
123
+
}
124
+
125
+
@supports (scrollbar-width: auto) {
126
+
.scrollbar {
127
+
scrollbar-color: var(--color-base-400) transparent;
128
+
scrollbar-width: thin;
129
+
}
130
+
131
+
:global(.dark .scrollbar) {
132
+
scrollbar-color: var(--color-base-800) transparent;
133
+
}
134
+
}
135
+
136
+
@supports not (scrollbar-width: auto) {
137
+
:global(.scrollbar::-webkit-scrollbar) {
138
+
width: 14px;
139
+
height: 14px;
140
+
}
141
+
}
142
+
143
+
.scrollbar::-webkit-scrollbar-thumb {
144
+
background-color: var(--color-base-400);
145
+
border-radius: 20px;
146
+
border: 4px solid transparent;
147
+
background-clip: content-box;
148
+
}
149
+
150
+
.scrollbar::-webkit-scrollbar-thumb:hover {
151
+
background-color: var(--color-base-500);
152
+
}
153
+
154
+
/* Dark mode rules */
155
+
:global(.dark .scrollbar::-webkit-scrollbar-thumb) {
156
+
background-color: var(--color-base-800);
157
+
}
158
+
159
+
:global(.dark .scrollbar::-webkit-scrollbar-thumb:hover) {
160
+
background-color: var(--color-base-700);
161
+
}
162
+
</style>
+29
-22
src/lib/cards/BaseCard/BaseCard.svelte
+29
-22
src/lib/cards/BaseCard/BaseCard.svelte
···
28
28
bind:this={ref}
29
29
draggable={isEditing}
30
30
class={[
31
-
'card border-base-200 bg-base-50 group dark:border-base-800 dark:bg-base-900 focus-within:outline-accent-500 absolute z-0 rounded-2xl border outline-offset-2 focus-within:outline-2 @5xl/wrapper:hidden'
31
+
'card border-base-200 bg-base-50 group dark:border-base-800 dark:bg-base-900 focus-within:outline-accent-500 absolute z-0 rounded-2xl border outline-offset-2 focus-within:outline-2'
32
32
]}
33
-
style={`translate: calc(${(item.mobileX / 4) * 100}cqw + ${mobileMargin}px) calc(${(item.mobileY / 4) * 100}cqw + ${mobileMargin}px);
34
-
width: calc(${(item.mobileW / 4) * 100}cqw - ${mobileMargin * 2}px);
35
-
height: calc(${(item.mobileH / 4) * 100}cqw - ${mobileMargin * 2}px);`}
33
+
style={`
34
+
--mx: ${item.mobileX};
35
+
--my: ${item.mobileY};
36
+
--mw: ${item.mobileW};
37
+
--mh: ${item.mobileH};
38
+
--mm: ${mobileMargin}px;
39
+
40
+
--dx: ${item.x};
41
+
--dy: ${item.y};
42
+
--dw: ${item.w};
43
+
--dh: ${item.h};
44
+
--dm: ${margin}px;`}
36
45
{...rest}
37
46
>
38
47
<div class="relative h-full w-full overflow-hidden rounded-[15px]">
···
41
50
{@render controls?.()}
42
51
</div>
43
52
44
-
<div
45
-
id={item.id}
46
-
data-flip-id={item.id}
47
-
bind:this={ref}
48
-
draggable={isEditing}
49
-
class={[
50
-
'card border-base-200 bg-base-50 group dark:border-base-800 dark:bg-base-900 focus-within:outline-accent-500 absolute z-0 hidden rounded-2xl border outline-offset-2 focus-within:outline-2 @5xl/wrapper:block'
51
-
]}
52
-
style={`translate: calc(${(item.x / 4) * 100}cqw + ${margin}px) calc(${(item.y / 4) * 100}cqw + ${margin}px);
53
-
width: calc(${(item.w / 4) * 100}cqw - ${margin * 2}px);
54
-
height: calc(${(item.h / 4) * 100}cqw - ${margin * 2}px);`}
55
-
{...rest}
56
-
>
57
-
<div class="relative h-full w-full overflow-hidden rounded-[15px]">
58
-
{@render children?.()}
59
-
</div>
60
-
{@render controls?.()}
61
-
</div>
53
+
<style>
54
+
.card {
55
+
translate: calc((var(--mx) / 4) * 100cqw + var(--mm)) calc((var(--my) / 4) * 100cqw + var(--mm));
56
+
width: calc((var(--mw) / 4) * 100cqw - (var(--mm) * 2));
57
+
height: calc((var(--mh) / 4) * 100cqw - (var(--mm) * 2));
58
+
}
59
+
60
+
@container wrapper (width >= 64rem) {
61
+
.card {
62
+
translate: calc((var(--dx) / 4) * 100cqw + var(--dm))
63
+
calc((var(--dy) / 4) * 100cqw + var(--dm));
64
+
width: calc((var(--dw) / 4) * 100cqw - (var(--dm) * 2));
65
+
height: calc((var(--dh) / 4) * 100cqw - (var(--dm) * 2));
66
+
}
67
+
}
68
+
</style>
+1
-1
src/lib/cards/TextCard/EditingTextCard.svelte
+1
-1
src/lib/cards/TextCard/EditingTextCard.svelte
···
8
8
9
9
<BaseEditingCard {item} {...rest}>
10
10
<div
11
-
class="prose dark:prose-invert prose-base prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-400 prose-sm hover:bg-base-500/20 prose-p:first:mt-0 prose-p:last:mb-0 m-1 rounded-md p-1"
11
+
class="prose dark:prose-invert prose-base prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-400 prose-sm hover:bg-base-500/20 prose-p:first:mt-0 prose-p:last:mb-0 m-1 rounded-md p-1 overflow-y-scroll max-h-full"
12
12
>
13
13
<MarkdownTextEditor bind:item />
14
14
</div>
+1
-1
src/lib/cards/TextCard/TextCard.svelte
+1
-1
src/lib/cards/TextCard/TextCard.svelte
···
11
11
12
12
<BaseCard {item} {...rest}>
13
13
<div
14
-
class="prose dark:prose-invert prose-base prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-400 prose-sm prose-p:first:mt-0 prose-p:last:mb-0 m-1 rounded-md p-1 break-words"
14
+
class="prose dark:prose-invert prose-base prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-400 prose-sm prose-p:first:mt-0 prose-p:last:mb-0 m-1 rounded-md p-1 break-words overflow-y-scroll max-h-full"
15
15
>
16
16
{@html marked.parse(item.cardData.text ?? '', { renderer })}
17
17
</div>