👁️
5
fork

Configure Feed

Select the types of activity you want to include in your feed.

flashier deck and card previews

+55 -15
+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
··· 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