Skip to content

Commit a8c7be8

Browse files
nirnejaknirnejak
committed
Shadow style updated
1 parent 3338154 commit a8c7be8

File tree

6 files changed

+74
-57
lines changed

6 files changed

+74
-57
lines changed

‎app/layout.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,10 @@ const RootLayout: React.FC<Props> = ({ children }) => {
4949
</head>
5050

5151
<body
52-
className={classNames(sansFont.variable, "overflow-x-hidden font-sans")}
52+
className={classNames(
53+
sansFont.variable,
54+
"overflow-x-hidden font-sans bg-zinc-100"
55+
)}
5356
>
5457
<Header />
5558
{children}

‎components/DetailsGallery.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const DetailsGallery: React.FC = () => {
3636
<motion.div
3737
key={index}
3838
variants={gridItemVariants}
39-
className="relative rounded-3xl bg-zinc-50 p-20"
39+
className="shadow-card relative rounded-3xl bg-zinc-50 p-20"
4040
>
4141
<AnimatedComponent />
4242
<ExpandButton

‎components/Header.tsx

+55-53
Original file line numberDiff line numberDiff line change
@@ -18,60 +18,62 @@ const Header: React.FC = () => {
1818
const pathname = usePathname()
1919

2020
return (
21-
<motion.header
22-
initial={{ translateY: "-100%" }}
23-
animate={{ translateY: 0 }}
24-
transition={{
25-
type: "spring",
26-
stiffness: 100,
27-
damping: 10,
28-
mass: 1,
29-
}}
30-
className="grid w-full grid-cols-3 items-center justify-start gap-3 bg-white px-4 py-2 text-sm text-zinc-700 shadow md:justify-between md:gap-0"
31-
>
32-
<div className="mr-auto text-base font-bold">SVG Gallery</div>
33-
<div className="order-3 col-span-3 flex justify-center md:order-2 md:col-span-1">
34-
<div className="toggle-group flex gap-1 rounded-md bg-gray-200 p-1">
35-
{links.map((link, index) => (
36-
<Link
37-
key={index}
38-
className={classNames(
39-
"rounded px-3 py-1.5 font-semibold transition-all hover:text-gray-900",
40-
pathname === link.path
41-
? "toggle-selected-item bg-white text-gray-900"
42-
: "text-gray-500"
43-
)}
44-
href={link.path}
45-
>
46-
{link.label}
47-
</Link>
48-
))}
21+
<section className="px-3 pt-3">
22+
<motion.header
23+
initial={{ translateY: "-100%" }}
24+
animate={{ translateY: 0 }}
25+
transition={{
26+
type: "spring",
27+
stiffness: 100,
28+
damping: 10,
29+
mass: 1,
30+
}}
31+
className="shadow-card grid w-full grid-cols-3 items-center justify-start gap-3 rounded-xl bg-zinc-50 px-4 py-2 text-sm text-zinc-700 md:justify-between md:gap-0"
32+
>
33+
<div className="mr-auto text-base font-bold">SVG Gallery</div>
34+
<div className="order-3 col-span-3 flex justify-center md:order-2 md:col-span-1">
35+
<div className="toggle-group flex gap-1 rounded-3xl bg-gray-200 p-1">
36+
{links.map((link, index) => (
37+
<Link
38+
key={index}
39+
className={classNames(
40+
"rounded-3xl px-3 py-1.5 font-semibold transition-all hover:text-gray-900",
41+
pathname === link.path
42+
? "toggle-selected-item bg-white text-gray-900"
43+
: "text-gray-500"
44+
)}
45+
href={link.path}
46+
>
47+
{link.label}
48+
</Link>
49+
))}
50+
</div>
4951
</div>
50-
</div>
51-
<div className="order-2 col-span-2 ml-auto flex gap-0.5 md:order-3 md:col-span-1">
52-
<a
53-
href="https://nirnejak.com/"
54-
target="_blank"
55-
className="flex items-center gap-1 rounded-md px-2 py-1.5 font-medium hover:bg-gray-200"
56-
>
57-
<LinkOut size={19} />
58-
</a>
59-
<a
60-
href="https://x.com/jeetnirnejak"
61-
target="_blank"
62-
className="flex items-center gap-1 rounded-md px-2 py-1.5 font-medium hover:bg-gray-200"
63-
>
64-
<XFill size={19} />
65-
</a>
66-
<a
67-
href="https://github.com/nirnejak/svg-animations"
68-
target="_blank"
69-
className="flex items-center gap-1 rounded-md px-2 py-1.5 font-medium hover:bg-gray-200"
70-
>
71-
<GithubFill size={19} />
72-
</a>
73-
</div>
74-
</motion.header>
52+
<div className="order-2 col-span-2 ml-auto flex gap-0.5 md:order-3 md:col-span-1">
53+
<a
54+
href="https://nirnejak.com/"
55+
target="_blank"
56+
className="flex items-center gap-1 rounded-3xl px-2 py-1.5 font-medium hover:bg-gray-200"
57+
>
58+
<LinkOut size={19} />
59+
</a>
60+
<a
61+
href="https://x.com/jeetnirnejak"
62+
target="_blank"
63+
className="flex items-center gap-1 rounded-3xl px-2 py-1.5 font-medium hover:bg-gray-200"
64+
>
65+
<XFill size={19} />
66+
</a>
67+
<a
68+
href="https://github.com/nirnejak/svg-animations"
69+
target="_blank"
70+
className="flex items-center gap-1 rounded-3xl px-2 py-1.5 font-medium hover:bg-gray-200"
71+
>
72+
<GithubFill size={19} />
73+
</a>
74+
</div>
75+
</motion.header>
76+
</section>
7577
)
7678
}
7779

‎components/HomeGallery.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const HomeGallery: React.FC = () => {
4242
<motion.div
4343
key={index}
4444
variants={gridItemVariants}
45-
className="relative rounded-3xl bg-zinc-50 p-10"
45+
className="shadow-card relative rounded-3xl bg-zinc-50 p-10"
4646
>
4747
{<AnimatedComponent />}
4848
<ExpandButton

‎components/OthersGallery.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const OthersGallery: React.FC = () => {
2727
<motion.div
2828
key={index}
2929
variants={gridItemVariants}
30-
className="relative rounded-3xl bg-zinc-50 p-10"
30+
className="shadow-card relative rounded-3xl bg-zinc-50 p-10"
3131
>
3232
<AnimatedComponent />
3333
<ExpandButton

‎styles/main.css

+12
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,15 @@
1919
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
2020
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2121
}
22+
23+
.shadow-card {
24+
box-shadow:
25+
0 1px 1px 0.5px rgba(41, 41, 41, 0.04),
26+
0 3px 3px -1.5px rgba(41, 41, 41, 0.02),
27+
0 6px 6px -3px rgba(41, 41, 41, 0.04),
28+
0 12px 12px -6px rgba(41, 41, 41, 0.04),
29+
0 24px 24px -12px rgba(41, 41, 41, 0.04),
30+
0 48px 48px -24px rgba(41, 41, 41, 0.04),
31+
0 0 0 1px rgba(41, 41, 41, 0.04),
32+
inset 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06);
33+
}

0 commit comments

Comments
 (0)