mirror of
https://github.com/LaconicNetwork/laconic.com.git
synced 2026-01-14 03:14:07 +00:00
Mobile Menu (#14)
This commit is contained in:
Nazareno Oviedo
GitHub
parent
fc7d722c6b
commit
49c4d6401e
@ -30,15 +30,15 @@
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 101%;
|
||||
content: '';
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
black 15%,
|
||||
var(--color-black) 15%,
|
||||
rgb(9 9 121 / 0) 50%,
|
||||
black 100%
|
||||
var(--color-black) 100%
|
||||
);
|
||||
@media screen and (max-width: 800px) {
|
||||
content: normal;
|
||||
@ -51,7 +51,7 @@
|
||||
background: radial-gradient(
|
||||
ellipse farthest-corner at center center,
|
||||
rgb(4 4 4 / 0.05) 45%,
|
||||
#000 0
|
||||
var(--color-black) 0
|
||||
);
|
||||
filter: blur(tovw(80px, 'default', 40px));
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
.header {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@ -25,10 +25,123 @@
|
||||
margin: 0 0 0 tovw(122px, 'default', 90px);
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
gap: tovw(32px, 'default', 20px);
|
||||
gap: tovw(32px, 'default', 16px);
|
||||
}
|
||||
|
||||
li:not(.item--mobile) {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: tovw(-16px, 'default', -16px);
|
||||
width: tovw(7px, 'default', 7px);
|
||||
height: tovw(7px, 'default', 7px);
|
||||
content: '';
|
||||
transition: opacity var(--normal-transition);
|
||||
transform: translateY(-50%);
|
||||
opacity: 0;
|
||||
background: var(--color-white);
|
||||
}
|
||||
}
|
||||
|
||||
li.active {
|
||||
&::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.burger {
|
||||
width: tovw(22px, 'default', 22px);
|
||||
width: tovw(28px, 'default', 28px);
|
||||
}
|
||||
|
||||
&__mobile {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
top: tovw(75px, 'mobile');
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(100 * var(--vh) - tovw(75px, 'mobile'));
|
||||
padding: tovw(16px, 'mobile');
|
||||
background-color: var(--color-black);
|
||||
background-image: linear-gradient(
|
||||
180deg,
|
||||
rgb(0 0 244 / 0) 1.63%,
|
||||
rgb(0 0 244 / 0.9) 81.47%
|
||||
);
|
||||
|
||||
ul {
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: tovw(50px, 'mobile');
|
||||
letter-spacing: tovw(-1px, 'mobile');
|
||||
opacity: 0.6;
|
||||
|
||||
@media screen and (max-height: 750px) {
|
||||
font-size: calc(var(--vh) * 5.2);
|
||||
}
|
||||
}
|
||||
|
||||
li.active {
|
||||
a {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
margin: tovw(59px, 'mobile') 0 tovw(44px, 'mobile') 0;
|
||||
|
||||
@media screen and (max-height: 750px) {
|
||||
margin: calc(var(--vh) * 7.2) 0 calc(var(--vh) * 5.2) 0;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.social {
|
||||
position: relative;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin: tovw(32px, 'mobile') 0;
|
||||
padding-top: tovw(32px, 'mobile');
|
||||
grid-template-columns: repeat(6, tovw(24px, 'mobile'));
|
||||
gap: tovw(24px, 'mobile');
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: tovw(-32px, 'mobile');
|
||||
left: tovw(-16px, 'mobile');
|
||||
width: calc(100% + tovw(32px, 'mobile'));
|
||||
height: tovw(1px, 'mobile', 1px);
|
||||
margin: tovw(24px, 'mobile') 0;
|
||||
content: '';
|
||||
background: white;
|
||||
}
|
||||
|
||||
li,
|
||||
a {
|
||||
display: block;
|
||||
width: tovw(24px, 'default', 24px);
|
||||
height: tovw(24px, 'default', 24px);
|
||||
}
|
||||
|
||||
a {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,15 +1,103 @@
|
||||
import clsx from 'clsx'
|
||||
import NextLink from 'next/link'
|
||||
import { useRouter } from 'next/router'
|
||||
import * as React from 'react'
|
||||
|
||||
import Burger from '~/components/icons/burguer'
|
||||
import { Logo } from '~/components/icons/logo'
|
||||
import { Button } from '~/components/primitives/button'
|
||||
import Link from '~/components/primitives/link'
|
||||
import { useIsomorphicLayoutEffect } from '~/hooks/use-isomorphic-layout-effect'
|
||||
import { DURATION, gsap } from '~/lib/gsap'
|
||||
|
||||
import { ConnectLinks } from '../footer/footer'
|
||||
import { defaultHeaderLinks } from './header'
|
||||
import s from './header.module.scss'
|
||||
|
||||
const HeaderMobile = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
JSX.IntrinsicElements['div']
|
||||
>(({ className, ...props }, ref) => {
|
||||
const router = useRouter()
|
||||
|
||||
const isActive = (href: string) => router.pathname === href
|
||||
return (
|
||||
<div {...props} className={clsx(s['header__mobile'], className)} ref={ref}>
|
||||
<ul className="items">
|
||||
{defaultHeaderLinks.length > 0 &&
|
||||
defaultHeaderLinks.map((link, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className={clsx(
|
||||
{ [s['active']]: isActive(link.href) },
|
||||
s['item--mobile']
|
||||
)}
|
||||
>
|
||||
<Link href={link.href} variant="nav">
|
||||
{link.title}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Button>Get Started</Button>
|
||||
<ul className={clsx(s['social'], 'social')}>
|
||||
{ConnectLinks.length > 0 &&
|
||||
ConnectLinks.map((link, index) => (
|
||||
<li key={index}>
|
||||
<Link href={link.href} variant="unstyled">
|
||||
<span className="sr-only">{link.title}</span>
|
||||
{link.logo && link.logo}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<p>Laconic, The Source of Proof</p>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
export const Header = () => {
|
||||
const [isOpen, setIsOpen] = React.useState(false)
|
||||
const headerMobileRef = React.useRef<HTMLDivElement>(null)
|
||||
const timelineRef = React.useRef<GSAPTimeline>()
|
||||
const router = useRouter()
|
||||
|
||||
const isActive = (href: string) => router.pathname === href
|
||||
|
||||
useIsomorphicLayoutEffect(() => {
|
||||
if (!headerMobileRef.current) return
|
||||
|
||||
const navigationItems =
|
||||
headerMobileRef.current.querySelectorAll('.items li')
|
||||
const socialItems = headerMobileRef.current.querySelectorAll('.social li')
|
||||
const button = headerMobileRef.current.querySelector('button')
|
||||
const text = headerMobileRef.current.querySelector('p')
|
||||
|
||||
timelineRef.current = gsap.timeline({
|
||||
paused: true,
|
||||
smoothChildTiming: true
|
||||
})
|
||||
timelineRef.current.fromTo(
|
||||
headerMobileRef.current,
|
||||
{
|
||||
xPercent: 100
|
||||
},
|
||||
{ xPercent: 0, duration: DURATION }
|
||||
)
|
||||
timelineRef.current.fadeIn([navigationItems, button, socialItems, text]),
|
||||
'>-40%'
|
||||
}, [])
|
||||
|
||||
useIsomorphicLayoutEffect(() => {
|
||||
if (isOpen) {
|
||||
gsap.set('body, html', { overflowY: 'hidden' })
|
||||
timelineRef.current?.timeScale(1).play()
|
||||
} else {
|
||||
gsap.set('body, html', { overflowY: 'auto' })
|
||||
timelineRef.current?.timeScale(1.5).reverse()
|
||||
}
|
||||
}, [isOpen])
|
||||
|
||||
return (
|
||||
<header className={s.header}>
|
||||
<nav>
|
||||
@ -22,7 +110,10 @@ export const Header = () => {
|
||||
<ul className="hide-on-mobile">
|
||||
{defaultHeaderLinks.length > 0 &&
|
||||
defaultHeaderLinks.map((link, index) => (
|
||||
<li key={index}>
|
||||
<li
|
||||
key={index}
|
||||
className={clsx({ [s['active']]: isActive(link.href) })}
|
||||
>
|
||||
<Link href={link.href} variant="nav">
|
||||
{link.title}
|
||||
</Link>
|
||||
@ -33,7 +124,15 @@ export const Header = () => {
|
||||
<Button size="small" className="hide-on-mobile">
|
||||
Get Started
|
||||
</Button>
|
||||
<Burger className={clsx(s['burger'], 'hide-on-desktop')} />
|
||||
<div className="hide-on-desktop">
|
||||
<Button variant="unstyled" onClick={() => setIsOpen(!isOpen)}>
|
||||
<Burger
|
||||
className={clsx(s['burger'], 'hide-on-desktop')}
|
||||
isOpen={isOpen}
|
||||
/>
|
||||
</Button>
|
||||
<HeaderMobile ref={headerMobileRef} />
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,16 +1,95 @@
|
||||
const Burger = ({ className, fill }: { className?: string; fill?: string }) => {
|
||||
import * as React from 'react'
|
||||
|
||||
import { useIsomorphicLayoutEffect } from '~/hooks/use-isomorphic-layout-effect'
|
||||
import { gsap } from '~/lib/gsap'
|
||||
|
||||
const Burger = ({
|
||||
className,
|
||||
fill,
|
||||
isOpen
|
||||
}: {
|
||||
className?: string
|
||||
fill?: string
|
||||
isOpen: boolean
|
||||
}) => {
|
||||
const timelineRef = React.useRef<GSAPTimeline>()
|
||||
const topRef = React.useRef(null)
|
||||
const middleRef = React.useRef(null)
|
||||
const bottomRef = React.useRef(null)
|
||||
|
||||
useIsomorphicLayoutEffect(() => {
|
||||
timelineRef.current = gsap.timeline({
|
||||
paused: true,
|
||||
reversed: true,
|
||||
smoothChildTiming: true
|
||||
})
|
||||
|
||||
timelineRef.current.to(topRef.current, {
|
||||
y: -4,
|
||||
transformOrigin: '50% 50%'
|
||||
})
|
||||
timelineRef.current.to(
|
||||
bottomRef.current,
|
||||
{
|
||||
y: 4,
|
||||
transformOrigin: '50% 50%'
|
||||
},
|
||||
'<'
|
||||
)
|
||||
timelineRef.current.to(
|
||||
middleRef.current,
|
||||
{
|
||||
scale: 0.1,
|
||||
transformOrigin: '50% 50%'
|
||||
},
|
||||
'<'
|
||||
)
|
||||
timelineRef.current.add('rotate')
|
||||
timelineRef.current.to(topRef.current, { y: 6 }, 'rotate')
|
||||
timelineRef.current.to(bottomRef.current, { y: -6 }, 'rotate')
|
||||
timelineRef.current.to(
|
||||
topRef.current,
|
||||
{ rotationZ: 45, transformOrigin: '50% 50%' },
|
||||
'rotate'
|
||||
)
|
||||
timelineRef.current.to(
|
||||
bottomRef.current,
|
||||
{ rotationZ: -45, transformOrigin: '50% 50%' },
|
||||
'rotate'
|
||||
)
|
||||
|
||||
timelineRef.current.timeScale(2.23)
|
||||
|
||||
return () => {
|
||||
timelineRef.current?.kill()
|
||||
}
|
||||
}, [])
|
||||
|
||||
useIsomorphicLayoutEffect(() => {
|
||||
if (isOpen) {
|
||||
timelineRef.current?.play()
|
||||
} else {
|
||||
timelineRef.current?.reverse()
|
||||
}
|
||||
}, [isOpen])
|
||||
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
viewBox="0 0 22 11"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<path
|
||||
<path ref={topRef} d="M1 8h24v2H1z" fill={fill || '#fff'} />
|
||||
<line
|
||||
ref={middleRef}
|
||||
x1="1"
|
||||
y1="15"
|
||||
x2="25"
|
||||
y2="15"
|
||||
stroke={fill || '#fff'}
|
||||
style={{ mixBlendMode: 'difference' }}
|
||||
d="M0 .5h22M0 5.5h22M0 10.5h22"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<path ref={bottomRef} d="M1 20h24v2H1z" fill={fill || '#fff'} />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import { useReactId } from '~/hooks/use-react-id'
|
||||
|
||||
const Telegram = ({
|
||||
className,
|
||||
fill
|
||||
@ -5,6 +7,7 @@ const Telegram = ({
|
||||
className?: string
|
||||
fill?: string
|
||||
}) => {
|
||||
const id = useReactId()
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
@ -15,12 +18,12 @@ const Telegram = ({
|
||||
<path
|
||||
clipRule="evenodd"
|
||||
d="M24 12c0 6.6274-5.3726 12-12 12-6.62742 0-12-5.3726-12-12C0 5.37258 5.37258 0 12 0c6.6274 0 12 5.37258 12 12ZM12.43 8.85893c-1.1672.48547-3.49986 1.49027-6.99811 3.01437-.56806.2259-.86563.4469-.89272.663-.04578.3652.41154.509 1.0343.7048.08471.0267.17248.0543.26247.0835.6127.1992 1.43689.4322 1.86535.4414.38865.0084.82244-.1518 1.30135-.4807 3.26856-2.2063 4.95576-3.32149 5.06166-3.34553.0747-.01696.1783-.03829.2485.02408.0701.06235.0632.18045.0558.21215-.0453.1931-1.8405 1.8621-2.7695 2.7258-.2896.2692-.495.4602-.537.5038-.0941.0977-.19.1902-.2821.279-.5692.5487-.99609.9602.0236 1.6322.49.3229.8822.5899 1.2733.8563.4273.291.8534.5812 1.4047.9426.1405.092.2746.1877.4053.2808.4972.3545.9438.6729 1.4957.6221.3206-.0295.6519-.331.8201-1.2302.3975-2.1253 1.1789-6.7299 1.3595-8.62743.0158-.16624-.0041-.379-.02-.4724-.016-.09339-.0494-.22646-.1708-.32497-.1438-.11666-.3658-.14126-.465-.13952-.4514.00795-1.1438.24874-4.4764 1.63485Z"
|
||||
fill="url(#telegram)"
|
||||
fill={`url(#${id})`}
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="telegram"
|
||||
id={id}
|
||||
x1="12"
|
||||
y1="0"
|
||||
x2="12"
|
||||
@ -28,7 +31,7 @@ const Telegram = ({
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor={fill || 'var(--color-white)'} />
|
||||
<stop offset="1" stopColor="#DEDEDE" />
|
||||
<stop offset="1" stopColor="var(--color-grey-lightness)" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
@ -42,6 +45,7 @@ const Twitter = ({
|
||||
className?: string
|
||||
fill?: string
|
||||
}) => {
|
||||
const id = useReactId()
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
@ -51,11 +55,11 @@ const Twitter = ({
|
||||
>
|
||||
<path
|
||||
d="M7.55016 21.3548c9.05434 0 14.00814-7.4471 14.00814-13.9033 0-.20936-.0047-.42337-.0141-.63273.9637-.69168 1.7953-1.54843 2.4558-2.52999-.8975.39631-1.8504.65515-2.8261.76765 1.0274-.61122 1.7966-1.57142 2.1652-2.7026-.9665.56851-2.0235.96954-3.1257 1.18591-.7426-.78315-1.7244-1.30169-2.7937-1.47544-1.0693-.17376-2.1665.00695-3.122.51417-.9554.50722-1.7159 1.31271-2.1639 2.29194-.4479.97922-.5584 2.07764-.3143 3.12543-1.95701-.09747-3.87156-.60206-5.61952-1.48104-1.74795-.87898-3.29029-2.11274-4.52701-3.62129-.62857 1.07562-.820913 2.34843-.53794 3.55975C1.418 7.66457 2.15506 8.7235 3.19641 9.41483c-.78178-.02463-1.54643-.23354-2.230785-.60947v.06048c-.0007 1.12879.392475 2.22296 1.112685 3.09656.72021.8736 1.72301 1.4727 2.83794 1.6955-.72419.1966-1.48427.2253-2.22141.0837.31461.9708.92673 1.8198 1.75093 2.4287.8242.6088 1.81935.9471 2.84657.9676-1.74392 1.3596-3.89817 2.0971-6.11578 2.0936C.783287 19.2309.390399 19.2069 0 19.1598c2.25286 1.4345 4.87353 2.1964 7.55016 2.195Z"
|
||||
fill="url(#twitter)"
|
||||
fill={`url(#${id})`}
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="twitter"
|
||||
id={id}
|
||||
x1="12"
|
||||
y1="2"
|
||||
x2="12"
|
||||
@ -63,7 +67,7 @@ const Twitter = ({
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor={fill || 'var(--color-white)'} />
|
||||
<stop offset="1" stopColor="#DEDEDE" />
|
||||
<stop offset="1" stopColor="var(--color-grey-lightness)" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
@ -71,6 +75,7 @@ const Twitter = ({
|
||||
}
|
||||
|
||||
const Reddit = ({ className, fill }: { className?: string; fill?: string }) => {
|
||||
const id = useReactId()
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
@ -82,11 +87,11 @@ const Reddit = ({ className, fill }: { className?: string; fill?: string }) => {
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M24 12c0 6.6274-5.3726 12-12 12-6.62742 0-12-5.3726-12-12C0 5.37258 5.37258 0 12 0c6.6274 0 12 5.37258 12 12Zm-5.7544-1.7544C19.214 10.2456 20 11.0316 20 12c0 .7158-.4351 1.3333-1.0105 1.614.0281.1684.0421.3369.0421.5193 0 2.6947-3.1298 4.8702-7.0035 4.8702-3.87371 0-7.00353-2.1755-7.00353-4.8702 0-.1824.01403-.3649.0421-.5333-.61754-.2807-1.03859-.8842-1.03859-1.6 0-.9684.78596-1.7544 1.75438-1.7544.46316 0 .89825.1965 1.20702.4912 1.20702-.88419 2.87719-1.43156 4.74382-1.4877l.8843-4.18246c.028-.08421.0701-.15438.1403-.19649.0702-.0421.1544-.05614.2386-.0421l2.9053.61754c.1965-.42105.6175-.70175 1.1087-.70175.6878 0 1.2492.5614 1.2492 1.24912s-.5614 1.24912-1.2492 1.24912c-.6736 0-1.221-.53333-1.2491-1.19298l-2.5965-.54737-.8 3.74737c1.8246.07018 3.4807.63158 4.6737 1.4877.3088-.3088.7298-.4912 1.207-.4912ZM9.24913 12c-.68772 0-1.24912.5614-1.24912 1.2491 0 .6877.5614 1.2491 1.24912 1.2491s1.24917-.5614 1.24917-1.2491c0-.6877-.56145-1.2491-1.24917-1.2491Zm2.76487 5.4596c.4772 0 2.1053-.0561 2.9614-.9123.1264-.1263.1264-.3228.0281-.4631-.1263-.1263-.3368-.1263-.4631 0-.5474.5333-1.6843.7298-2.5123.7298-.8281 0-1.979-.1965-2.5123-.7298-.12632-.1263-.33685-.1263-.46316 0-.12632.1263-.12632.3368 0 .4631.8421.8422 2.48416.9123 2.96136.9123Zm1.4878-4.2105c0 .6877.5614 1.2491 1.2491 1.2491.6877 0 1.2491-.5614 1.2491-1.2491C16 12.5614 15.4386 12 14.7509 12c-.6877 0-1.2491.5614-1.2491 1.2491Z"
|
||||
fill="url(#reddit)"
|
||||
fill={`url(#${id})`}
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="reddit"
|
||||
id={id}
|
||||
x1="12"
|
||||
y1="0"
|
||||
x2="12"
|
||||
@ -94,7 +99,7 @@ const Reddit = ({ className, fill }: { className?: string; fill?: string }) => {
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor={fill || 'var(--color-white)'} />
|
||||
<stop offset="1" stopColor="#DEDEDE" />
|
||||
<stop offset="1" stopColor="var(--color-grey-lightness)" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
@ -132,6 +137,8 @@ const Facebook = ({
|
||||
className?: string
|
||||
fill?: string
|
||||
}) => {
|
||||
const id = useReactId()
|
||||
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
@ -141,11 +148,11 @@ const Facebook = ({
|
||||
>
|
||||
<path
|
||||
d="M24 12c0-6.62742-5.3726-12-12-12C5.37258 0 0 5.37258 0 12c0 5.9895 4.3882 10.954 10.125 11.8542v-8.3855H7.07812V12H10.125V9.35625c0-3.0075 1.7916-4.66875 4.5326-4.66875 1.3125 0 2.6862.23437 2.6862.23437V7.875h-1.5132c-1.4906 0-1.9556.92508-1.9556 1.875V12h3.3281l-.532 3.4687H13.875v8.3855C19.6118 22.954 24 17.9895 24 12Z"
|
||||
fill="url(#facebook)"
|
||||
fill={`url(#${id})`}
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="facebook"
|
||||
id={id}
|
||||
x1="12"
|
||||
y1="0"
|
||||
x2="12"
|
||||
@ -153,7 +160,7 @@ const Facebook = ({
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor={fill || 'var(--color-white)'} />
|
||||
<stop offset="1" stopColor="#DEDEDE" />
|
||||
<stop offset="1" stopColor="var(--color-grey-lightness)" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
@ -167,6 +174,7 @@ const Instagram = ({
|
||||
className?: string
|
||||
fill?: string
|
||||
}) => {
|
||||
const id = useReactId()
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
@ -176,19 +184,19 @@ const Instagram = ({
|
||||
>
|
||||
<path
|
||||
d="M12 2.16094c3.2063 0 3.5859.01406 4.8469.07031 1.1719.05156 1.8047.24844 2.2265.4125.5579.21563.961.47813 1.3782.89531.4218.42188.6797.82032.8953 1.37813.164.42187.3609 1.05937.4125 2.22656.0562 1.26562.0703 1.64531.0703 4.84685 0 3.2063-.0141 3.586-.0703 4.8469-.0516 1.1719-.2485 1.8047-.4125 2.2266-.2156.5578-.4782.9609-.8953 1.3781-.4219.4219-.8203.6797-1.3782.8953-.4218.1641-1.0593.3609-2.2265.4125-1.2656.0562-1.6453.0703-4.8469.0703-3.20625 0-3.58594-.0141-4.84687-.0703-1.17188-.0516-1.80469-.2484-2.22657-.4125-.55781-.2156-.96093-.4781-1.37812-.8953-.42188-.4219-.67969-.8203-.89531-1.3781-.16407-.4219-.36094-1.0594-.4125-2.2266-.05625-1.2656-.07032-1.6453-.07032-4.8469 0-3.20622.01407-3.58591.07032-4.84685.05156-1.17188.24843-1.80469.4125-2.22656.21562-.55781.47812-.96094.89531-1.37813.42187-.42187.82031-.67968 1.37812-.89531.42188-.16406 1.05938-.36094 2.22657-.4125C8.41406 2.175 8.79375 2.16094 12 2.16094ZM12 0C8.74219 0 8.33438.0140625 7.05469.0703125 5.77969.126563 4.90313.332812 4.14375.628125 3.35156.9375 2.68125 1.34531 2.01563 2.01562 1.34531 2.68125.9375 3.35156.628125 4.13906.332812 4.90313.126563 5.775.0703125 7.05.0140625 8.33437 0 8.74219 0 12c0 3.2578.0140625 3.6656.0703125 4.9453.0562505 1.275.2624995 2.1516.5578125 2.911.309375.7921.717185 1.4625 1.387505 2.1281.66562.6656 1.33593 1.0781 2.12343 1.3828.76407.2953 1.63594.5015 2.91094.5578 1.27969.0562 1.6875.0703 4.9453.0703 3.2578 0 3.6656-.0141 4.9453-.0703 1.275-.0563 2.1516-.2625 2.911-.5578.7875-.3047 1.4578-.7172 2.1234-1.3828.6656-.6656 1.0781-1.336 1.3828-2.1235.2953-.764.5016-1.6359.5578-2.9109.0563-1.2797.0703-1.6875.0703-4.9453 0-3.25782-.014-3.66564-.0703-4.94532-.0562-1.275-.2625-2.15157-.5578-2.91094-.2953-.79688-.7031-1.46719-1.3734-2.13282C21.3188 1.35 20.6484.9375 19.8609.632812 19.0969.3375 18.225.13125 16.95.075 15.6656.0140625 15.2578 0 12 0Z"
|
||||
fill="url(#instagram-a)"
|
||||
fill={`url(#${id}-a)`}
|
||||
/>
|
||||
<path
|
||||
d="M12 5.83594c-3.40312 0-6.16406 2.76094-6.16406 6.16406 0 3.4031 2.76094 6.1641 6.16406 6.1641 3.4031 0 6.1641-2.761 6.1641-6.1641 0-3.40312-2.761-6.16406-6.1641-6.16406Zm0 10.16246c-2.20781 0-3.99844-1.7906-3.99844-3.9984 0-2.20781 1.79063-3.99844 3.99844-3.99844 2.2078 0 3.9984 1.79063 3.9984 3.99844 0 2.2078-1.7906 3.9984-3.9984 3.9984Z"
|
||||
fill="url(#instagram-b)"
|
||||
fill={`url(#${id}-b)`}
|
||||
/>
|
||||
<path
|
||||
d="M19.8469 5.59238c0 .79688-.6469 1.43907-1.4391 1.43907-.7969 0-1.439-.64688-1.439-1.43907 0-.79687.6468-1.43906 1.439-1.43906s1.4391.64688 1.4391 1.43906Z"
|
||||
fill="url(#instagram-c)"
|
||||
fill={`url(#${id}-c)`}
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="instagram-a"
|
||||
id={`${id}-a`}
|
||||
x1="11.993"
|
||||
y1="0"
|
||||
x2="11.993"
|
||||
@ -196,10 +204,10 @@ const Instagram = ({
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor={fill || 'var(--color-white)'} />
|
||||
<stop offset="1" stopColor="#DEDEDE" />
|
||||
<stop offset="1" stopColor="var(--color-grey-lightness)" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="instagram-b"
|
||||
id={`${id}-b`}
|
||||
x1="12"
|
||||
y1="5.83594"
|
||||
x2="12"
|
||||
@ -207,10 +215,10 @@ const Instagram = ({
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor={fill || 'var(--color-white)'} />
|
||||
<stop offset="1" stopColor="#DEDEDE" />
|
||||
<stop offset="1" stopColor="var(--color-grey-lightness)" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="instagram-c"
|
||||
id={`${id}-c`}
|
||||
x1="18.4078"
|
||||
y1="4.15332"
|
||||
x2="18.4078"
|
||||
@ -218,7 +226,7 @@ const Instagram = ({
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor={fill || 'var(--color-white)'} />
|
||||
<stop offset="1" stopColor="#DEDEDE" />
|
||||
<stop offset="1" stopColor="var(--color-grey-lightness)" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
@ -39,4 +39,15 @@
|
||||
&--small {
|
||||
padding: tovw(11.5px, 'default', 11.5px) tovw(24px, 'default', 10px);
|
||||
}
|
||||
|
||||
&--unstyled {
|
||||
border: none;
|
||||
padding: tovw(12px, 'default', 12px);
|
||||
background: none;
|
||||
|
||||
&:hover {
|
||||
background: none;
|
||||
color: currentcolor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,7 +9,7 @@ import s from './button.module.scss'
|
||||
|
||||
export type ButtonProps = JSX.IntrinsicElements['button'] & {
|
||||
size?: 'small' | 'medium' | 'large'
|
||||
variant?: 'default' | 'primary'
|
||||
variant?: 'default' | 'primary' | 'unstyled'
|
||||
}
|
||||
|
||||
export const Button = React.forwardRef(
|
||||
|
||||
@ -27,15 +27,15 @@
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 101%;
|
||||
content: '';
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
black 15%,
|
||||
var(--color-black) 15%,
|
||||
rgb(9 9 121 / 0) 50%,
|
||||
black 100%
|
||||
var(--color-black) 100%
|
||||
);
|
||||
@supports (aspect-ratio: 16 / 9) {
|
||||
aspect-ratio: 16 / 9;
|
||||
@ -51,7 +51,7 @@
|
||||
background: radial-gradient(
|
||||
ellipse farthest-corner at center center,
|
||||
rgb(4 4 4 / 0.25) 45%,
|
||||
#000 0
|
||||
var(--color-black) 0
|
||||
);
|
||||
filter: blur(tovw(80px, 'default', 40px));
|
||||
}
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
--color-black: #040404;
|
||||
--color-white: #fbfbfb;
|
||||
--color-grey-light: #8e8e8e;
|
||||
--color-grey-lightness: #dedede;
|
||||
|
||||
// Duration
|
||||
--duration-normal: 0.525s;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user