a tool for shared writing and social publishing
0
fork

Configure Feed

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

adjusted box shadow on focused card

celine 38f486bc 72043822

+8 -4
+2 -2
app/test/card.tsx
··· 20 20 id={props.id} 21 21 className={` 22 22 p-3 w-[calc(100vw-12px)] md:w-[calc(50vw-24px)] max-w-prose 23 - bg-bg-card border rounded-lg 23 + bg-bg-card rounded-lg border 24 24 grow flex flex-col gap-2 25 25 snap-center 26 - ${props.focused ? "drop-shadow-lg border-grey-80" : "border-grey-90 "}`} 26 + ${props.focused ? "shadow-md border-grey-80" : "border-grey-90"}`} 27 27 > 28 28 {props.children} 29 29 <AddCardButton
+2 -2
app/test/page.tsx
··· 12 12 let [focusedCardIndex, setFocusedCardIndex] = useState(0); 13 13 14 14 return ( 15 - <div className="pageWrapper h-screen flex flex-col gap-4 py-4 !text"> 15 + <div className="pageWrapper h-screen flex flex-col pt-4"> 16 16 <PageHeader /> 17 17 18 18 <div 19 19 className="pageContentWrapper w-full relative overflow-x-scroll snap-x snap-mandatory grow items-stretch flex " 20 20 id="card-carousel" 21 21 > 22 - <div className="pageContent flex "> 22 + <div className="pageContent flex py-4"> 23 23 <div style={{ width: `calc((100vw - ${cardWidth}px)/2)` }} /> 24 24 25 25 {cards.map((card, index) => (
+4
tailwind.config.js
··· 50 50 }, 51 51 52 52 extend: { 53 + boxShadow: { 54 + md: "0.5px 0.9px 1px hsl(0deg 0% 0% / 0.11), 1.1px 2.1px 2.3px -1.1px hsl(0deg 0% 0% / 0.09), 3px 5.8px 6.4px -2.3px hsl(0deg 0% 0% / 0.08), 7.8px 14.9px 16.5px -3.4px hsl(0deg 0% 0% / 0.06);" 55 + }, 56 + 53 57 fontFamily: { 54 58 sans: ['var(--font-quattro)'], 55 59 },