Skip to content

Commit 293eb4f

Browse files
committed
Add stripes to the footer
1 parent 3dcbd53 commit 293eb4f

File tree

2 files changed

+60
-3
lines changed

2 files changed

+60
-3
lines changed
Binary file not shown.

src/app/conf/2025/components/footer.tsx renamed to src/app/conf/2025/components/footer/index.tsx

Lines changed: 60 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import NextLink from "next/link"
22
import { ReactNode } from "react"
33
import { clsx } from "clsx"
4-
import { SocialIcons } from "../../_components/social-icons"
4+
5+
import { SocialIcons } from "../../../_components/social-icons"
6+
7+
import blurBean from "./blur-bean.webp"
58

69
export function Footer({
710
links,
@@ -11,7 +14,8 @@ export function Footer({
1114
logo: ReactNode
1215
}) {
1316
return (
14-
<footer className="gql-conf-section gql-all-anchors-focusable !bg-neu-100 py-10 text-neu-900 typography-menu dark:!bg-neu-0 max-md:px-0 max-md:pt-0 lg:py-20">
17+
<footer className="gql-conf-section gql-all-anchors-focusable relative !bg-neu-100 py-10 text-neu-900 typography-menu dark:!bg-neu-0 max-md:px-0 max-md:pt-0 lg:py-20">
18+
<Stripes />
1519
<div className="mb-10 flex flex-wrap items-start justify-between xl:mb-32 xl:gap-10">
1620
<div className="border-neu-400 p-5 max-md:w-full max-md:border-b md:p-4">
1721
{logo}
@@ -37,7 +41,7 @@ export function Footer({
3741
</ul>
3842
))}
3943
</div>
40-
<div className="flex justify-between gap-10 text-sm max-lg:flex-col max-md:px-5">
44+
<div className="relative flex justify-between gap-10 text-sm max-lg:flex-col max-md:px-5">
4145
<div className="flex flex-col font-light max-md:gap-5">
4246
<p>
4347
Copyright © {new Date().getFullYear()} The GraphQL Foundation. All
@@ -62,3 +66,56 @@ export function Footer({
6266
</footer>
6367
)
6468
}
69+
70+
const maskEven =
71+
"repeating-linear-gradient(to right, transparent, transparent 12px, black 12px, black 24px)"
72+
const maskOdd =
73+
"repeating-linear-gradient(to right, black, black 12px, transparent 12px, transparent 24px)"
74+
75+
function Stripes() {
76+
return (
77+
<div
78+
role="presentation"
79+
// prettier-ignore
80+
// false positive
81+
// eslint-disable-next-line tailwindcss/no-contradicting-classname
82+
className="pointer-events-none absolute inset-0
83+
[--start-1:rgba(255,204,239,.05)]
84+
[--end-1:hsl(var(--color-pri-base)/.8)]
85+
dark:[--start-1:hsl(var(--color-pri-darker))]
86+
dark:[--end-1:hsl(var(--color-pri-base)/.9)]
87+
88+
[--start-2:transparent]
89+
[--end-2:hsl(var(--color-pri-dark)/0.8)]
90+
dark:[--start-2:rgba(255,204,239,.1)]
91+
dark:[--end-2:hsl(var(--color-pri-base)/.8)]
92+
"
93+
style={{
94+
maskImage: `url(${blurBean.src})`,
95+
WebkitMaskImage: `url(${blurBean.src})`,
96+
maskPosition: "center 300px",
97+
WebkitMaskPosition: "center 300px",
98+
maskSize: "200% 110%",
99+
WebkitMaskSize: "200% 110%",
100+
maskRepeat: "no-repeat",
101+
WebkitMaskRepeat: "no-repeat",
102+
maskOrigin: "top",
103+
}}
104+
>
105+
<div
106+
className="absolute inset-0 bg-[linear-gradient(180deg,var(--start-1)_0%,var(--end-1)_200%)]"
107+
style={{
108+
maskImage: maskEven,
109+
WebkitMaskImage: maskEven,
110+
}}
111+
/>
112+
<div
113+
className="absolute inset-0 bg-[linear-gradient(180deg,var(--start-2)_0%,var(--end-2)_200%)]"
114+
style={{
115+
maskImage: maskOdd,
116+
WebkitMaskImage: maskOdd,
117+
}}
118+
/>
119+
</div>
120+
)
121+
}

0 commit comments

Comments
 (0)