mirror of
https://github.com/Stone-Red-Code/website.git
synced 2026-09-04 09:15:58 +02:00
feat: set up new homepage using new branding
This commit is contained in:
Jean-Philippe Sirois
@@ -1,13 +1,12 @@
|
||||
import { Link } from "gatsby"
|
||||
import React, { PropsWithChildren } from "react"
|
||||
import logo from "../../images/tph-logo.png"
|
||||
import { Container } from "../Container"
|
||||
import * as SC from "./styles"
|
||||
|
||||
function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) {
|
||||
return (
|
||||
<SC.MenuItem to={to} activeClassName="active">
|
||||
{children}
|
||||
<SC.MenuItemText>{children}</SC.MenuItemText>
|
||||
<SC.MenuItemLine />
|
||||
</SC.MenuItem>
|
||||
)
|
||||
}
|
||||
@@ -15,21 +14,57 @@ function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) {
|
||||
export function Header() {
|
||||
return (
|
||||
<SC.HeaderWrapper>
|
||||
<Container>
|
||||
<SC.InnerWrapper>
|
||||
<Link to="/">
|
||||
<SC.Logo src={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.StyledWavesTop />
|
||||
<SC.StyledWavesBottom />
|
||||
<SC.StyledParticles
|
||||
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>
|
||||
<Link to="/">
|
||||
<SC.Logo />
|
||||
</Link>
|
||||
<SC.Title>The Programmer's Hangout</SC.Title>
|
||||
<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.DiscordButton>
|
||||
<SC.StyledDiscordLogo /> join us
|
||||
</SC.DiscordButton>
|
||||
</SC.InnerWrapper>
|
||||
</SC.HeaderWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,81 +1,185 @@
|
||||
import { Link } from "gatsby"
|
||||
import Particles from "react-particles-js"
|
||||
import styled from "styled-components"
|
||||
import DiscordLogo from "../../images/discord-logo.svg"
|
||||
import TPHLogo from "../../images/tph-logo.svg"
|
||||
import WavesBottom from "../../images/waves-bot.svg"
|
||||
import WavesTop from "../../images/waves-top.svg"
|
||||
|
||||
export const HeaderWrapper = styled.header`
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
background: #121240;
|
||||
overflow: hidden;
|
||||
`
|
||||
|
||||
export const Title = styled.h1`
|
||||
margin: 32px 0;
|
||||
font-weight: 700;
|
||||
font-size: 110px;
|
||||
text-transform: uppercase;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
font-size: 72px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
font-size: 40px;
|
||||
}
|
||||
`
|
||||
|
||||
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;
|
||||
`
|
||||
|
||||
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 DiscordButton = 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;
|
||||
`
|
||||
|
||||
export const InnerWrapper = styled.div`
|
||||
width: 800px;
|
||||
max-width: calc(100% - 64px);
|
||||
padding: 0 32px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
`
|
||||
|
||||
export const Logo = styled.img`
|
||||
export const Logo = styled(TPHLogo)`
|
||||
width: 122px;
|
||||
height: 122px;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
`
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
&[href="/"] {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&[href="/"] ${MenuItemLine} {
|
||||
bottom: 50%;
|
||||
}
|
||||
|
||||
&.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;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
@@ -14,7 +14,11 @@ import { Footer } from "../Footer"
|
||||
import { Header } from "../Header"
|
||||
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 {
|
||||
@@ -29,13 +33,15 @@ export function Layout({ children }: PropsWithChildren<{}>) {
|
||||
<SC.LayoutWrapper>
|
||||
<GlobalStyles />
|
||||
<Header />
|
||||
<SC.MainContent>
|
||||
<Container>
|
||||
<h1>{data.site.siteMetadata.title}</h1>
|
||||
{children}
|
||||
</Container>
|
||||
</SC.MainContent>
|
||||
<Footer />
|
||||
{!isHome && (
|
||||
<SC.MainContent>
|
||||
<Container>
|
||||
<h1>{data.site.siteMetadata.title}</h1>
|
||||
{children}
|
||||
</Container>
|
||||
</SC.MainContent>
|
||||
)}
|
||||
{!isHome && <Footer />}
|
||||
</SC.LayoutWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -4,7 +4,6 @@ export const LayoutWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 20px;
|
||||
`
|
||||
|
||||
export const MainContent = styled.main`
|
||||
|
||||
Reference in New Issue
Block a user