diff --git a/gatsby-config.js b/gatsby-config.js index 303274a..dc2587a 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -16,6 +16,10 @@ module.exports = { family: `Oxygen`, variants: [`400`, `700`], }, + { + family: `Oxygen Mono`, + variants: [`400`], + }, { family: `Montserrat`, variants: [`400`, `700`], diff --git a/package-lock.json b/package-lock.json index 371755f..cd23d6e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 8fa89d0..fbc6a5e 100644 --- a/package.json +++ b/package.json @@ -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" diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index e682f4e..ed848d1 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -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 ( - {children} + {children} + ) } @@ -15,21 +14,57 @@ function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) { export function Header() { return ( - - - - - - - about - rules - faq - hotbot - resources - tech spotlight - - - + + + + + + + + The Programmer's Hangout + + about + rules + faq + hotbot + resources + tech spotlight + + + join us + + ) } diff --git a/src/components/Header/styles.tsx b/src/components/Header/styles.tsx index 3f4efae..ac42d31 100644 --- a/src/components/Header/styles.tsx +++ b/src/components/Header/styles.tsx @@ -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; } } ` diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index bcb94c3..5a2d69e 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -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<{}>) {
- - -

{data.site.siteMetadata.title}

- {children} - - -