mirror of
https://github.com/Stone-Red-Code/website.git
synced 2026-09-04 09:15:58 +02:00
Merge pull request #72 from the-programmers-hangout/feat-new-homepage
feat: set up new homepage using new branding
This commit is contained in:
Jean-Philippe Sirois
@@ -16,6 +16,10 @@ module.exports = {
|
||||
family: `Oxygen`,
|
||||
variants: [`400`, `700`],
|
||||
},
|
||||
{
|
||||
family: `Oxygen Mono`,
|
||||
variants: [`400`],
|
||||
},
|
||||
{
|
||||
family: `Montserrat`,
|
||||
variants: [`400`, `700`],
|
||||
|
||||
Generated
+8
@@ -14123,6 +14123,14 @@
|
||||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
|
||||
},
|
||||
"react-particles-js": {
|
||||
"version": "2.7.0",
|
||||
"resolved": "https://registry.npmjs.org/react-particles-js/-/react-particles-js-2.7.0.tgz",
|
||||
"integrity": "sha512-gsYIr55plOMB6nZW2iBjgXoqOZqBvggW9trNTk0mYHkvqQUpuxhcCDGwRwnts10XQ442PjzxZbklwMlhSOcfgA==",
|
||||
"requires": {
|
||||
"lodash": "^4.17.11"
|
||||
}
|
||||
},
|
||||
"react-perfect-scrollbar": {
|
||||
"version": "1.5.3",
|
||||
"resolved": "https://registry.npmjs.org/react-perfect-scrollbar/-/react-perfect-scrollbar-1.5.3.tgz",
|
||||
|
||||
@@ -50,6 +50,7 @@
|
||||
"react-dom": "^16.8.6",
|
||||
"react-helmet": "^5.2.1",
|
||||
"react-highlight": "^0.12.0",
|
||||
"react-particles-js": "^2.7.0",
|
||||
"react-perfect-scrollbar": "^1.5.3",
|
||||
"styled-components": "^4.3.2",
|
||||
"typescript": "^3.5.3"
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
import React from "react"
|
||||
import React, { PropsWithChildren } from "react"
|
||||
import * as SC from "./styles"
|
||||
|
||||
function DiscordButton({
|
||||
lined = false,
|
||||
children,
|
||||
}: React.PropsWithChildren<{ lined: boolean }>) {
|
||||
function DiscordButton({ children }: PropsWithChildren<{}>) {
|
||||
return (
|
||||
<button>
|
||||
<div>{children}</div>
|
||||
</button>
|
||||
<SC.DiscordButtonWrapper>
|
||||
<SC.StyledDiscordLogo /> {children}
|
||||
</SC.DiscordButtonWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
import styled from "styled-components"
|
||||
import DiscordLogo from "../../images/discord-logo.svg"
|
||||
|
||||
export const DiscordButtonWrapper = styled.div`
|
||||
margin-top: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: "Oxygen", sans-serif;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
background: #7289da;
|
||||
color: #fff;
|
||||
padding: 22px 35px;
|
||||
border-radius: 5px;
|
||||
transition: background 0.3s;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 3px 18px rgba(0, 0, 0, 0.3);
|
||||
|
||||
&:hover {
|
||||
background: #5265ad;
|
||||
}
|
||||
`
|
||||
|
||||
export const StyledDiscordLogo = styled(DiscordLogo)`
|
||||
width: 38px;
|
||||
margin-right: 16px;
|
||||
`
|
||||
@@ -4,5 +4,16 @@ import styled from "styled-components"
|
||||
export const FooterWrapper = styled.footer`
|
||||
& a {
|
||||
display: inline;
|
||||
color: #0090d8;
|
||||
font-weight: 700;
|
||||
border-bottom: 2px solid;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #5dbbea;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
@@ -1,35 +1,90 @@
|
||||
import { Link } from "gatsby"
|
||||
import React, { PropsWithChildren } from "react"
|
||||
import logo from "../../images/tph-logo.png"
|
||||
import { Container } from "../Container"
|
||||
import React, { PropsWithChildren, useLayoutEffect, useState } from "react"
|
||||
import DiscordButton from "../DiscordButton"
|
||||
import { WavesBottom, WavesTop } from "../Waves"
|
||||
import * as SC from "./styles"
|
||||
|
||||
interface IHeaderProps {
|
||||
isHome: boolean
|
||||
}
|
||||
|
||||
function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) {
|
||||
return (
|
||||
<SC.MenuItem to={to} activeClassName="active">
|
||||
{children}
|
||||
<SC.MenuItem
|
||||
to={to}
|
||||
activeClassName="active"
|
||||
className={to === "/" ? "disabled" : ""}
|
||||
>
|
||||
<SC.MenuItemText>{children}</SC.MenuItemText>
|
||||
<SC.MenuItemLine />
|
||||
</SC.MenuItem>
|
||||
)
|
||||
}
|
||||
|
||||
export function Header() {
|
||||
export function Header({ isHome }: IHeaderProps) {
|
||||
// Hack to force Particle.js to rerender
|
||||
const [noop, setNoop] = useState(0)
|
||||
useLayoutEffect(() => {
|
||||
setNoop(prevState => prevState + 1)
|
||||
}, [isHome])
|
||||
|
||||
return (
|
||||
<SC.HeaderWrapper>
|
||||
<Container>
|
||||
<SC.InnerWrapper>
|
||||
<SC.HeaderWrapper className={isHome ? "is-home" : ""}>
|
||||
<WavesTop />
|
||||
<SC.FadedBottomWave>
|
||||
<WavesBottom />
|
||||
</SC.FadedBottomWave>
|
||||
|
||||
<SC.StyledParticles
|
||||
key={noop}
|
||||
params={{
|
||||
particles: {
|
||||
number: { value: 5, density: { enable: true, value_area: 500 } },
|
||||
color: { value: "#ffffff" },
|
||||
opacity: {
|
||||
value: 0.5,
|
||||
random: false,
|
||||
anim: { enable: false },
|
||||
},
|
||||
size: {
|
||||
value: 36,
|
||||
random: true,
|
||||
anim: { enable: false },
|
||||
},
|
||||
line_linked: {
|
||||
enable: false,
|
||||
},
|
||||
move: {
|
||||
enable: true,
|
||||
speed: 1.5,
|
||||
direction: "top",
|
||||
random: false,
|
||||
straight: false,
|
||||
out_mode: "out",
|
||||
bounce: false,
|
||||
attract: { enable: false },
|
||||
},
|
||||
},
|
||||
retina_detect: true,
|
||||
}}
|
||||
/>
|
||||
<SC.InnerWrapper>
|
||||
<SC.TitleWrapper>
|
||||
<Link to="/">
|
||||
<SC.Logo src={logo} />
|
||||
<SC.Logo />
|
||||
</Link>
|
||||
<SC.Menu>
|
||||
<MenuItem to="/about">about</MenuItem>
|
||||
<MenuItem to="/rules">rules</MenuItem>
|
||||
<MenuItem to="/">faq</MenuItem>
|
||||
<MenuItem to="/">hotbot</MenuItem>
|
||||
<MenuItem to="/resources">resources</MenuItem>
|
||||
<MenuItem to="/">tech spotlight</MenuItem>
|
||||
</SC.Menu>
|
||||
</SC.InnerWrapper>
|
||||
</Container>
|
||||
<SC.Title>The Programmer's Hangout</SC.Title>
|
||||
</SC.TitleWrapper>
|
||||
<SC.Menu>
|
||||
<MenuItem to="/about">about</MenuItem>
|
||||
<MenuItem to="/rules">rules</MenuItem>
|
||||
<MenuItem to="/">faq</MenuItem>
|
||||
<MenuItem to="/">hotbot</MenuItem>
|
||||
<MenuItem to="/resources">resources</MenuItem>
|
||||
<MenuItem to="/">tech spotlight</MenuItem>
|
||||
</SC.Menu>
|
||||
<DiscordButton>join us</DiscordButton>
|
||||
</SC.InnerWrapper>
|
||||
</SC.HeaderWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,81 +1,191 @@
|
||||
import { Link } from "gatsby"
|
||||
import Particles from "react-particles-js"
|
||||
import styled from "styled-components"
|
||||
import TPHLogo from "../../images/tph-logo.svg"
|
||||
|
||||
export const HeaderWrapper = styled.header`
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
min-height: auto;
|
||||
background: #121240;
|
||||
overflow: hidden;
|
||||
|
||||
&.is-home {
|
||||
min-height: 100vh;
|
||||
}
|
||||
`
|
||||
|
||||
export const TitleWrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 22px;
|
||||
|
||||
.is-home & {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
`
|
||||
|
||||
export const Title = styled.h1`
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
font-size: 50px;
|
||||
text-transform: uppercase;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
||||
|
||||
.is-home & {
|
||||
margin: 32px 0;
|
||||
font-size: 110px;
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
font-size: 72px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const FadedBottomWave = styled.div`
|
||||
position: absolute;
|
||||
transform: translateY(100%);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transition: opacity 0.5s, transform 0.5s;
|
||||
opacity: 0;
|
||||
|
||||
svg {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.is-home & {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.is-home & svg {
|
||||
position: static;
|
||||
}
|
||||
`
|
||||
|
||||
export const StyledParticles = styled(Particles)`
|
||||
mask-image: -webkit-linear-gradient(
|
||||
top,
|
||||
rgba(0, 0, 0, 0) 5%,
|
||||
rgba(0, 0, 0, 1) 25%,
|
||||
rgba(0, 0, 0, 1) 75%,
|
||||
rgba(0, 0, 0, 0) 95%
|
||||
);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
`
|
||||
|
||||
export const InnerWrapper = styled.div`
|
||||
width: 800px;
|
||||
max-width: calc(100% - 64px);
|
||||
padding: 32px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
`
|
||||
|
||||
export const Logo = styled.img`
|
||||
width: 122px;
|
||||
height: 122px;
|
||||
margin-bottom: 10px;
|
||||
export const Logo = styled(TPHLogo)`
|
||||
width: 70px;
|
||||
margin: 0 15px 0 0;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
|
||||
.is-home & {
|
||||
width: 122px;
|
||||
margin-bottom: 0 0 10px 0;
|
||||
}
|
||||
`
|
||||
|
||||
export const Menu = styled.nav`
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
`
|
||||
|
||||
export const MenuItemText = styled.div`
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
`
|
||||
|
||||
/* underline bar, getting animated through hover */
|
||||
export const MenuItemLine = styled.div`
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
margin-top: -3px;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
transition: all 0.3s;
|
||||
`
|
||||
|
||||
export const MenuItem = styled(Link)`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 22px;
|
||||
text-decoration: none;
|
||||
color: #555;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
transition: color 0.3s;
|
||||
margin: 5px 10px;
|
||||
|
||||
/* underline bar, getting animated through hover */
|
||||
&::after {
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
margin-top: -3px;
|
||||
bottom: 0;
|
||||
background: #555;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
margin: 10px 20px 5px 0;
|
||||
font-family: "Oxygen Mono";
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
&:hover ${MenuItemLine} {
|
||||
padding: 8px;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
background: #cf2e7d;
|
||||
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1), 0 5px 11px rgba(0, 0, 0, 0.25);
|
||||
margin-left: -8px;
|
||||
margin-bottom: -8px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
opacity: 0.7;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
&.disabled ${MenuItemLine} {
|
||||
bottom: 50%;
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: 700;
|
||||
color: #d33636;
|
||||
color: #cf2e7d;
|
||||
|
||||
&::after {
|
||||
background: #d33636;
|
||||
${MenuItemLine} {
|
||||
background: #cf2e7d;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
background: #d33636;
|
||||
&:hover ${MenuItemLine} {
|
||||
background: #cf2e7d;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
@@ -6,15 +6,20 @@
|
||||
*/
|
||||
|
||||
import { graphql, useStaticQuery } from "gatsby"
|
||||
import React, { PropsWithChildren } from "react"
|
||||
import React, { Fragment, PropsWithChildren } from "react"
|
||||
|
||||
import { GlobalStyles } from "../../globalStyles"
|
||||
import { Container } from "../Container"
|
||||
import { Footer } from "../Footer"
|
||||
import { Header } from "../Header"
|
||||
import { WavesBottom } from "../Waves"
|
||||
import * as SC from "./styles"
|
||||
|
||||
export function Layout({ children }: PropsWithChildren<{}>) {
|
||||
export function Layout({
|
||||
children,
|
||||
location,
|
||||
}: PropsWithChildren<{ location: Location }>) {
|
||||
const isHome = location.pathname === "/"
|
||||
const data = useStaticQuery(graphql`
|
||||
query {
|
||||
site {
|
||||
@@ -28,14 +33,17 @@ export function Layout({ children }: PropsWithChildren<{}>) {
|
||||
return (
|
||||
<SC.LayoutWrapper>
|
||||
<GlobalStyles />
|
||||
<Header />
|
||||
<SC.MainContent>
|
||||
<Container>
|
||||
<h1>{data.site.siteMetadata.title}</h1>
|
||||
{children}
|
||||
</Container>
|
||||
</SC.MainContent>
|
||||
<Footer />
|
||||
<Header isHome={isHome} />
|
||||
{!isHome && (
|
||||
<Fragment>
|
||||
<SC.MainContent>
|
||||
<Container>{children}</Container>
|
||||
</SC.MainContent>
|
||||
<Footer />
|
||||
<WavesBottom />
|
||||
<SC.WavesSpacer />
|
||||
</Fragment>
|
||||
)}
|
||||
</SC.LayoutWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,14 +1,41 @@
|
||||
import styled from "styled-components"
|
||||
|
||||
export const LayoutWrapper = styled.div`
|
||||
background: #121240;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 20px;
|
||||
`
|
||||
|
||||
export const MainContent = styled.main`
|
||||
margin-top: 64px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
max-width: 800px;
|
||||
width: 800px;
|
||||
max-width: calc(100% - 64px);
|
||||
padding: 0 32px;
|
||||
|
||||
.anchor svg path {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
a:not(.anchor) {
|
||||
color: #0090d8;
|
||||
font-weight: 700;
|
||||
border-bottom: 2px solid;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #5dbbea;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const WavesSpacer = styled.div`
|
||||
height: 50vw;
|
||||
`
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
import React from "react"
|
||||
import * as SC from "./styles"
|
||||
|
||||
export function WavesTop() {
|
||||
return <SC.StyledWavesTop />
|
||||
}
|
||||
|
||||
export function WavesBottom() {
|
||||
return <SC.StyledWavesBottom />
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import styled from "styled-components"
|
||||
import WavesBottom from "../../images/waves-bot.svg"
|
||||
import WavesTop from "../../images/waves-top.svg"
|
||||
|
||||
export const StyledWavesTop = styled(WavesTop)`
|
||||
width: 100vw;
|
||||
max-width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
`
|
||||
|
||||
export const StyledWavesBottom = styled(WavesBottom)`
|
||||
width: 100vw;
|
||||
max-width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
`
|
||||
@@ -0,0 +1,4 @@
|
||||
<svg fill="none" viewBox="0 0 43 48">
|
||||
<path fill="#fff" fill-rule="evenodd" d="M15.17 21.01c0-1.19 1.04-2.17 2.34-2.17 1.3 0 2.36.98 2.34 2.17 0 1.2-1.03 2.18-2.34 2.18-1.28 0-2.34-.98-2.34-2.18zm8.37 0c0-1.19 1.03-2.17 2.34-2.17 1.3 0 2.34.98 2.34 2.17 0 1.2-1.03 2.18-2.34 2.18-1.28 0-2.34-.98-2.34-2.18z" clip-rule="evenodd"/>
|
||||
<path fill="#fff" fill-rule="evenodd" d="M5.6 0H37.8c2.71 0 4.92 2.2 4.92 4.93v42.9l-5.16-4.55-2.9-2.68-3.08-2.84 1.27 4.42H5.6a4.92 4.92 0 0 1-4.92-4.92V4.93A4.92 4.92 0 0 1 5.6 0zm21.33 29.3c.72.9 1.59 1.93 1.59 1.93 5.3-.17 7.35-3.63 7.35-3.63 0-7.7-3.46-13.95-3.46-13.95-3.46-2.58-6.75-2.5-6.75-2.5l-.34.38c4.08 1.24 5.98 3.03 5.98 3.03a19.64 19.64 0 0 0-12.49-2.2 18.1 18.1 0 0 0-6.87 2.2s2-1.89 6.32-3.13l-.24-.29s-3.29-.07-6.75 2.51c0 0-3.46 6.25-3.46 13.95 0 0 2.02 3.46 7.33 3.63 0 0 .89-1.08 1.6-1.98-3.04-.91-4.2-2.83-4.2-2.83s.25.17.68.41c.02.02.05.05.1.07.03.03.07.04.1.06l.11.06a20.23 20.23 0 0 0 5.28 1.84 16.9 16.9 0 0 0 9.7-1c.85-.31 1.78-.77 2.77-1.41 0 0-1.2 1.96-4.35 2.84z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
@@ -0,0 +1,12 @@
|
||||
<svg fill="none" viewBox="0 0 95 115">
|
||||
<path fill="url(#logo_gradient)" d="M.64 9.55c12.16.05 24.3.36 36.46.25a29.31 29.31 0 0 1 23.23 11.32c4.55 5.72 6.63 13.18 6.2 20.44.4 12.78-8.6 25.15-20.96 28.56-3.68 1.14-7.53 1.17-11.34 1.3-2.48.02-4.68 2-4.87 4.47-.38 5.77 0 11.57-.19 17.34a23.62 23.62 0 0 1-19.24 21.09c-5.17.87-9.42-3.8-9.4-9.04 0-4.96 4.49-7.16 8.4-10.21.24-.19.47-.4.68-.64 1.94-2.07 1.12-5.07 1.37-7.61.51-5.8-.68-11.82 1.44-17.4 1.65-4.57 1.7-9.8.12-14.4a22.3 22.3 0 0 1-1.2-6.27c-.14-5.25-.16-10.5-.5-15.75a5.17 5.17 0 0 0-4.52-4.85c-3.2-.4-5.78-2.84-5.8-6.08-.03-4.18-.08-8.35.12-12.52zm28.6 19.79c.25 5.74.54 11.5.15 17.23a7.1 7.1 0 0 0 5.4 7.4c6.42 1.76 13.28-3.18 14.55-9.52 1.58-6.47-3.2-13.52-9.68-14.75-3.13-.54-6.32-.32-9.7-.35l-.71-.01z"/>
|
||||
<path fill="#EEF2F5" d="M74.9.2a20.1 20.1 0 1 1 0 40.2H62.56a7.76 7.76 0 0 1-7.76-7.76V20.3A20.1 20.1 0 0 1 74.9.2z"/>
|
||||
<path fill="#141414" d="M71.57 22.6h-9.92a1.84 1.84 0 0 0 0 3.68h9.92c1.02 0 1.84-.83 1.84-1.85 0-1.01-.82-1.84-1.84-1.84zM76.96 29.25H61.65a1.84 1.84 0 1 0 0 3.68h15.31a1.84 1.84 0 1 0 0-3.68z"/>
|
||||
<defs>
|
||||
<linearGradient id="logo_gradient" x1="50.52" x2="-31.83" y1="16.07" y2="75.5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#9423FC"/>
|
||||
<stop offset=".51" stop-color="#FF70A5"/>
|
||||
<stop offset="1" stop-color="#FEAF6D"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,39 @@
|
||||
<svg fill="none" viewBox="0 0 1825 862">
|
||||
<mask id="#bot_mask" width="1825" height="862" x="0" y="0" maskUnits="userSpaceOnUse">
|
||||
<path fill="#C4C4C4" d="M0 0h1825v862H0z"/>
|
||||
</mask>
|
||||
<g mask="url(#bot_mask)">
|
||||
<path fill="url(#bot_gradient1)" d="M-339.72 271.98S-38.1 54.63 236.91 121.17c275 66.53 328.23 416.94 550.01 483.48 221.78 66.53 550.01-190.73 754.05-235.09 204.04-44.35 301.62-22.18 550.02 119.76 248.39 141.94 88.71 567.76 88.71 567.76s-891.56 137.5-993.58 128.63c-102.01-8.87-1042.36-128.63-1042.36-128.63l-541.14-146.37 57.66-638.73z" opacity=".64"/>
|
||||
<path fill="url(#bot_gradient2)" d="M-339.72 313.71S-38.1 96.37 236.91 162.91c275 66.53 328.23 416.94 550.01 483.47 221.78 66.54 550.01-190.73 754.05-235.08 204.04-44.36 301.62-22.18 550.02 119.76 248.39 141.94 88.71 567.75 88.71 567.75s-891.56 137.5-993.58 128.64c-102.01-8.87-1042.36-128.64-1042.36-128.64l-541.14-146.37 57.66-638.73z" opacity=".18"/>
|
||||
<path fill="url(#bot_gradient3)" d="M-556.34 194.47S-254.72-22.87 20.3 43.67c275 66.53 328.23 416.94 550.01 483.47 221.78 66.54 550.02-190.73 754.05-235.08 204.04-44.36 301.62-22.18 550.02 119.76 248.39 141.94 88.71 567.75 88.71 567.75s-891.56 137.5-993.57 128.64C867.49 1099.34-72.86 979.57-72.86 979.57L-614 833.2l57.66-638.73z" opacity=".18"/>
|
||||
<path fill="url(#bot_gradient4)" d="M-323.82 379.3S-22.2 161.94 252.8 228.47c275 66.54 328.23 416.95 550.01 483.48 221.78 66.54 550.01-190.73 754.05-235.08 204.04-44.36 301.62-22.18 550.01 119.76 248.4 141.94 88.72 567.75 88.72 567.75s-891.56 137.5-993.58 128.64c-102.02-8.87-1042.36-128.64-1042.36-128.64l-541.14-146.37 57.66-638.73z" opacity=".91"/>
|
||||
<path fill="url(#bot_gradient5)" d="M-494.73 403.14S-193.11 185.8 81.9 252.34c275 66.53 328.23 416.94 550.01 483.47 221.78 66.54 550.01-190.73 754.05-235.08 204.04-44.36 301.62-22.18 550.01 119.76 248.4 141.93 88.72 567.75 88.72 567.75s-891.56 137.5-993.58 128.63C929.1 1308.01-11.25 1188.24-11.25 1188.24l-541.14-146.37 57.66-638.73z"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="bot_gradient1" x1="1872.87" x2="573.95" y1="602.05" y2="-141.38" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#9423FC"/>
|
||||
<stop offset=".51" stop-color="#FF70A5"/>
|
||||
<stop offset="1" stop-color="#FEAF6D"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="bot_gradient2" x1="1872.87" x2="573.95" y1="643.79" y2="-99.64" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#9423FC"/>
|
||||
<stop offset=".51" stop-color="#FF70A5"/>
|
||||
<stop offset="1" stop-color="#FEAF6D"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="bot_gradient3" x1="1574.79" x2="448.43" y1="459.89" y2="-207.89" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#9423FC"/>
|
||||
<stop offset=".51" stop-color="#FF70A5"/>
|
||||
<stop offset="1" stop-color="#FEAF6D"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="bot_gradient4" x1="1993.87" x2="1553.41" y1="1147.96" y2="-218.23" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#9423FC"/>
|
||||
<stop offset=".51" stop-color="#FF70A5"/>
|
||||
<stop offset="1" stop-color="#FEAF6D"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="bot_gradient5" x1="1822.96" x2="1382.5" y1="1171.81" y2="-194.38" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#9423FC"/>
|
||||
<stop offset=".51" stop-color="#FF70A5"/>
|
||||
<stop offset="1" stop-color="#FEAF6D"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
@@ -0,0 +1,33 @@
|
||||
<svg fill="none" viewBox="0 0 1825 859">
|
||||
<mask id="top_mask" width="1825" height="859" x="0" y="0" maskUnits="userSpaceOnUse">
|
||||
<path fill="#C4C4C4" d="M0 0h1825v859H0z"/>
|
||||
</mask>
|
||||
<g mask="url(#top_mask)">
|
||||
<path fill="url(#top_gradient1)" d="M2615.01 917.26s-390.49 148.08-669.53-4.11c-279.03-152.2-234.85-547.89-456.12-684.6-221.28-136.7-652.27 46.94-886.56 35.71-234.3-11.23-333.72-63.68-561.94-289.95-228.22-226.27 68.91-641.84 68.91-641.84s1007.37 110.17 1115.48 149.48c108.11 39.3 1093.57 442.8 1093.57 442.8L2863.39 241l-248.38 676.26z"/>
|
||||
<path fill="url(#top_gradient2)" d="M2615.01 879.5s-390.49 148.08-669.53-4.11c-279.03-152.2-234.85-547.89-456.12-684.6-221.28-136.7-652.27 46.94-886.56 35.71-234.3-11.23-333.72-63.68-561.94-289.95-228.22-226.27 68.91-641.84 68.91-641.84S1117.14-595.12 1225.25-555.8c108.11 39.3 1093.57 442.8 1093.57 442.8l544.57 316.25-248.38 676.26z"/>
|
||||
<path fill="url(#top_gradient3)" d="M2615.01 897.39s-390.49 148.08-669.53-4.12c-279.03-152.2-234.85-547.88-456.12-684.6-221.28-136.7-652.27 46.95-886.56 35.72C368.5 233.16 269.08 180.7 40.86-45.56c-228.22-226.27 68.91-641.84 68.91-641.84s1007.37 110.17 1115.48 149.48c108.11 39.3 1093.57 442.8 1093.57 442.8l544.57 316.25-248.38 676.26z" opacity=".68"/>
|
||||
<path fill="url(#top_gradient4)" d="M1826.79 455.45s-182.14 69.07-312.28-1.92c-130.15-70.98-109.54-255.54-212.75-319.3-103.2-63.76-304.22 21.9-413.5 16.66-109.27-5.24-155.65-29.7-262.09-135.24-106.44-105.54 32.14-299.36 32.14-299.36s469.85 51.38 520.27 69.71c50.43 18.34 567.42 50.5 567.42 50.5l337.5 96-256.71 522.95z" opacity=".39"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="top_gradient1" x1="310.32" x2="945.33" y1="-84.55" y2="1544.99" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#345EFE"/>
|
||||
<stop offset=".51" stop-color="#03B8FF"/>
|
||||
<stop offset="1" stop-color="#00FCFF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="top_gradient2" x1="500.6" x2="1128.26" y1="11.42" y2="1481.54" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#345EFE"/>
|
||||
<stop offset=".51" stop-color="#03B8FF"/>
|
||||
<stop offset="1" stop-color="#00FCFF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="top_gradient3" x1="310.32" x2="945.33" y1="-104.42" y2="1525.11" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#345EFE"/>
|
||||
<stop offset=".51" stop-color="#03B8FF"/>
|
||||
<stop offset="1" stop-color="#00FCFF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="top_gradient4" x1="930.96" x2="1210.61" y1="106.95" y2="718.31" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#345EFE"/>
|
||||
<stop offset=".51" stop-color="#03B8FF"/>
|
||||
<stop offset="1" stop-color="#00FCFF"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
@@ -4,15 +4,17 @@ import { ResourcesLayout } from "../components/ResourcesLayout"
|
||||
|
||||
export default function BaseLayout({
|
||||
children,
|
||||
location,
|
||||
pageContext,
|
||||
}: PropsWithChildren<{
|
||||
pageContext: {
|
||||
layout?: string
|
||||
}
|
||||
location: Location
|
||||
}>) {
|
||||
if (pageContext.layout === "resources") {
|
||||
return <ResourcesLayout>{children}</ResourcesLayout>
|
||||
}
|
||||
|
||||
return <Layout>{children}</Layout>
|
||||
return <Layout location={location}>{children}</Layout>
|
||||
}
|
||||
|
||||
@@ -7,11 +7,6 @@ function IndexPage() {
|
||||
return (
|
||||
<Fragment>
|
||||
<SEO title="Home" />
|
||||
<h1>Hi people</h1>
|
||||
<p>Welcome to your new Gatsby site.</p>
|
||||
<p>Now go build something great.</p>
|
||||
<div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}></div>
|
||||
<Link to="/page-2/">Go to page 2</Link>
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user