👁️
flashier deck and card previews
+55
-15
+1
-1
src/components/DeckPreview.tsx
+1
-1
src/components/DeckPreview.tsx
···
87
87
<Link
88
88
to="/profile/$did/deck/$rkey"
89
89
params={{ did, rkey: asRkey(rkey) }}
90
-
className="grid grid-cols-[auto_1fr] grid-rows-[auto_auto_auto_auto_auto] gap-x-4 p-4 bg-gray-50 dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg hover:border-cyan-500 dark:hover:border-cyan-500 transition-colors"
90
+
className="grid grid-cols-[auto_1fr] grid-rows-[auto_auto_auto_auto_auto] gap-x-4 p-4 bg-gray-50 dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg hover:border-cyan-500 dark:hover:border-cyan-500 motion-safe:hover:shadow-lg transition-colors motion-safe:transition-shadow"
91
91
>
92
92
{thumbnailId && (
93
93
<CardImage
+54
-14
src/components/ListPreview.tsx
+54
-14
src/components/ListPreview.tsx
···
50
50
);
51
51
}
52
52
53
-
const layouts: Record<number, { rotations: number[]; xPercents: number[] }> =
53
+
const layouts: Record<
54
+
number,
54
55
{
55
-
1: { rotations: [0], xPercents: [20] },
56
-
2: { rotations: [-8, 8], xPercents: [12, 28] },
57
-
3: { rotations: [-12, 0, 12], xPercents: [10, 22, 34] },
58
-
};
56
+
rotations: number[];
57
+
xPercents: number[];
58
+
hoverRotations: number[];
59
+
hoverZ: number;
60
+
}
61
+
> = {
62
+
1: {
63
+
rotations: [0],
64
+
xPercents: [20],
65
+
hoverRotations: [90],
66
+
hoverZ: 8,
67
+
},
68
+
2: {
69
+
rotations: [-8, 8],
70
+
xPercents: [12, 28],
71
+
hoverRotations: [-11, 11],
72
+
hoverZ: 8,
73
+
},
74
+
3: {
75
+
rotations: [-12, 0, 12],
76
+
xPercents: [10, 22, 34],
77
+
hoverRotations: [-14, 0, 14],
78
+
hoverZ: 8,
79
+
},
80
+
};
59
81
60
82
const layout = layouts[cards.length] ?? layouts[3];
61
83
62
84
return (
63
-
<div className="relative shrink-0 w-24 h-[90px]">
85
+
<div
86
+
className="relative shrink-0 w-24 h-[90px]"
87
+
style={{ perspective: "150px" }}
88
+
>
64
89
{cards.map((id, i) => (
65
90
<div
66
91
key={id}
67
-
className="absolute w-3/5 shadow-md origin-bottom"
68
-
style={{
69
-
left: `${layout.xPercents[i]}%`,
70
-
bottom: "5%",
71
-
transform: `rotate(${layout.rotations[i]}deg)`,
72
-
zIndex: i,
73
-
}}
92
+
className={`absolute w-3/5 shadow-md motion-safe:transition-all motion-safe:ease-out motion-safe:group-hover:shadow-xl ${cards.length === 1 ? "origin-center motion-safe:duration-[350ms]" : "origin-bottom motion-safe:duration-200"}`}
93
+
style={
94
+
{
95
+
left: `${layout.xPercents[i]}%`,
96
+
bottom: "5%",
97
+
transform: `rotate(${layout.rotations[i]}deg)`,
98
+
zIndex: i,
99
+
"--base-rotate": `${layout.rotations[i]}deg`,
100
+
"--hover-rotate": `${layout.hoverRotations[i]}deg`,
101
+
"--hover-z": `${layout.hoverZ}px`,
102
+
} as React.CSSProperties
103
+
}
74
104
>
75
105
<CardImage
76
106
card={{ id: id as ScryfallId, name: "" }}
···
79
109
/>
80
110
</div>
81
111
))}
112
+
<style>{`
113
+
.group:hover [style*="--hover-rotate"] {
114
+
transform: rotate(var(--hover-rotate)) translateZ(var(--hover-z)) !important;
115
+
}
116
+
@media (prefers-reduced-motion: reduce) {
117
+
.group:hover [style*="--hover-rotate"] {
118
+
transform: rotate(var(--base-rotate)) !important;
119
+
}
120
+
}
121
+
`}</style>
82
122
</div>
83
123
);
84
124
}
···
103
143
<Link
104
144
to="/profile/$did/list/$rkey"
105
145
params={{ did, rkey: asRkey(rkey) }}
106
-
className="flex items-start gap-4 p-4 bg-gray-50 dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg hover:border-cyan-500 dark:hover:border-cyan-500 transition-colors"
146
+
className="group flex items-start gap-4 p-4 bg-gray-50 dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-lg hover:border-cyan-500 dark:hover:border-cyan-500 motion-safe:hover:shadow-lg transition-colors motion-safe:transition-shadow"
107
147
>
108
148
<CardSpread cardIds={cardIds} />
109
149