forked from
flo-bit.dev/blento
your personal website on atproto - mirror
CSS updates, calculated widths
Doing testing :)
+7
-8
+7
-8
src/lib/cards/BlueskyTopEight/BlueskyTopEightCard.svelte
+7
-8
src/lib/cards/BlueskyTopEight/BlueskyTopEightCard.svelte
···
12
12
const profiles = data[item.cardType][item.id] as AppBskyActorDefs.ProfileViewDetailed[];
13
13
</script>
14
14
15
-
<div class="flex h-full flex-col justify-center-safe overflow-y-scroll p-4">
16
-
<div class="topEightTitle">favorite posters</div>
15
+
<div class="flex h-full flex-col justify-center-safe overflow-y-scroll p-2">
17
16
<div class="topEightContainer">
18
17
{#each profiles as profile (profile.did)}
19
18
<img
20
19
class="topEightProfilePicture"
21
20
src={profile.avatar}
22
21
alt="Profile picture of {profile.handle}"
22
+
style="--card-height: {item.h}; --card-width: {item.w}"
23
23
/>
24
24
{/each}
25
25
</div>
26
26
</div>
27
27
28
28
<style scoped>
29
-
.topEightTitle {
30
-
line-height: 1.5rem;
31
-
}
32
-
33
29
.topEightContainer {
34
30
flex-grow: 1;
35
31
overflow: hidden;
36
32
display: flex;
37
33
flex-direction: row;
38
34
flex-wrap: wrap;
39
-
justify-content: space-evenly;
35
+
justify-content: center;
40
36
}
41
37
42
38
.topEightProfilePicture {
43
-
padding: 0.5rem;
39
+
margin: 0.5rem;
40
+
width: calc(var(--card-width) * 1.15rem);
41
+
aspect-ratio: 1 / 1;
42
+
border-radius: 0.5rem;
44
43
}
45
44
</style>