a tool for shared writing and social publishing
adjusted box shadow on focused card
+8
-4
+2
-2
app/test/card.tsx
+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
+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
+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
},