1
1
import NextLink from "next/link"
2
2
import { ReactNode } from "react"
3
3
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"
5
8
6
9
export function Footer ( {
7
10
links,
@@ -11,7 +14,8 @@ export function Footer({
11
14
logo : ReactNode
12
15
} ) {
13
16
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 />
15
19
< div className = "mb-10 flex flex-wrap items-start justify-between xl:mb-32 xl:gap-10" >
16
20
< div className = "border-neu-400 p-5 max-md:w-full max-md:border-b md:p-4" >
17
21
{ logo }
@@ -37,7 +41,7 @@ export function Footer({
37
41
</ ul >
38
42
) ) }
39
43
</ 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" >
41
45
< div className = "flex flex-col font-light max-md:gap-5" >
42
46
< p >
43
47
Copyright © { new Date ( ) . getFullYear ( ) } The GraphQL Foundation. All
@@ -62,3 +66,56 @@ export function Footer({
62
66
</ footer >
63
67
)
64
68
}
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