diff --git a/gatsby-config.js b/gatsby-config.js index 5a932e3..b61de85 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -27,6 +27,7 @@ module.exports = { }, }, `gatsby-transformer-sharp`, + `gatsby-plugin-react-svg`, `gatsby-plugin-sharp`, `gatsby-plugin-sass`, { diff --git a/package-lock.json b/package-lock.json index 4c5c51c..96ede04 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4089,6 +4089,24 @@ "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz", "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=" }, + "css": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz", + "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==", + "requires": { + "inherits": "^2.0.3", + "source-map": "^0.6.1", + "source-map-resolve": "^0.5.2", + "urix": "^0.1.0" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" + } + } + }, "css-color-keywords": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", @@ -7307,6 +7325,14 @@ "@babel/runtime": "^7.0.0" } }, + "gatsby-plugin-react-svg": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/gatsby-plugin-react-svg/-/gatsby-plugin-react-svg-2.1.1.tgz", + "integrity": "sha512-aWG283AvueCS0U4yZ+QujQnz4GDNoIBYMQ8MpQEvB+k6o+5DPZ473Cz+rlEejoevVxVeCVwuuu4K9phGIGk+7Q==", + "requires": { + "svg-react-loader": "^0.4.4" + } + }, "gatsby-plugin-sass": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/gatsby-plugin-sass/-/gatsby-plugin-sass-2.1.3.tgz", @@ -12734,6 +12760,11 @@ "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.1.1.tgz", "integrity": "sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==" }, + "ramda": { + "version": "0.21.0", + "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.21.0.tgz", + "integrity": "sha1-oAGr7bP/YQd9T/HVd9RN536NCjU=" + }, "randombytes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", @@ -13573,6 +13604,11 @@ "aproba": "^1.1.1" } }, + "rx": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/rx/-/rx-4.1.0.tgz", + "integrity": "sha1-pfE/957zt0D+MKqAP7CfmIBdR4I=" + }, "rx-lite": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz", @@ -15095,6 +15131,58 @@ "has-flag": "^3.0.0" } }, + "svg-react-loader": { + "version": "0.4.6", + "resolved": "https://registry.npmjs.org/svg-react-loader/-/svg-react-loader-0.4.6.tgz", + "integrity": "sha512-HVEypjWQsQuJdBIPzXGxpmQsQts7QwfQuYgK1rah6BVCMoLNSCh/ESKVNd7/tHq8DkWYHHTyaUMDA1FjqZYrgA==", + "requires": { + "css": "2.2.4", + "loader-utils": "1.1.0", + "ramda": "0.21.0", + "rx": "4.1.0", + "traverse": "0.6.6", + "xml2js": "0.4.17" + }, + "dependencies": { + "big.js": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz", + "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==" + }, + "json5": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz", + "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=" + }, + "loader-utils": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.1.0.tgz", + "integrity": "sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=", + "requires": { + "big.js": "^3.1.3", + "emojis-list": "^2.0.0", + "json5": "^0.5.0" + } + }, + "xml2js": { + "version": "0.4.17", + "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.17.tgz", + "integrity": "sha1-F76T6q4/O3eTWceVtBlwWogX6Gg=", + "requires": { + "sax": ">=0.6.0", + "xmlbuilder": "^4.1.0" + } + }, + "xmlbuilder": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-4.2.1.tgz", + "integrity": "sha1-qlijBBoGb5DqoWwvU4n/GfP0YaU=", + "requires": { + "lodash": "^4.0.0" + } + } + } + }, "svgo": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.0.tgz", @@ -15470,6 +15558,11 @@ } } }, + "traverse": { + "version": "0.6.6", + "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz", + "integrity": "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=" + }, "trim": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz", diff --git a/package.json b/package.json index d5af87e..144058f 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "gatsby-plugin-manifest": "^2.2.4", "gatsby-plugin-offline": "^2.2.4", "gatsby-plugin-react-helmet": "^3.1.2", + "gatsby-plugin-react-svg": "^2.1.1", "gatsby-plugin-sass": "^2.1.3", "gatsby-plugin-sharp": "^2.2.9", "gatsby-plugin-styled-components": "^3.1.2", diff --git a/src/components/Container/index.tsx b/src/components/Container/index.tsx new file mode 100644 index 0000000..c209636 --- /dev/null +++ b/src/components/Container/index.tsx @@ -0,0 +1,12 @@ +import React from "react" +import * as SC from "./styles" + +interface ContainerProps { + children: React.ReactNode +} + +const Container = ({ children, ...restProps }: ContainerProps): JSX.Element => ( + {children} +) + +export default Container diff --git a/src/components/Container/styles.tsx b/src/components/Container/styles.tsx new file mode 100644 index 0000000..7c6616c --- /dev/null +++ b/src/components/Container/styles.tsx @@ -0,0 +1,18 @@ +import styled from "styled-components" + +export const ContainerWrapper = styled.div` + display: flex; + flex-direction: column; + padding: 0 32px; + margin: 0 auto; + width: 100%; + max-width: 1015px; + + & > :first-child { + margin-top: 0; + } + + & > :last-child { + margin-bottom: 0; + } +` diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index 52359df..bfe4f70 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -8,11 +8,13 @@ import React, { PropsWithChildren } from "react" import { useStaticQuery, graphql } from "gatsby" +import Container from "../Container" import Navbar from "../Navbar" +import Sidebar from "../Sidebar" import "./layout.scss" -import { MainContent } from "./styles"; +import { Main, MainContent } from "./styles" import Scrollbar from "react-perfect-scrollbar" -import "react-perfect-scrollbar/dist/css/styles.css"; +import "react-perfect-scrollbar/dist/css/styles.css" const Layout = ({ children }: PropsWithChildren<{}>) => { const data = useStaticQuery(graphql` @@ -27,22 +29,22 @@ const Layout = ({ children }: PropsWithChildren<{}>) => { return ( - -
- {children} -
+ + ) } diff --git a/src/components/Layout/layout.scss b/src/components/Layout/layout.scss index a868107..5b224f1 100644 --- a/src/components/Layout/layout.scss +++ b/src/components/Layout/layout.scss @@ -1,7 +1,8 @@ // @import "~prismjs/themes/prism-tomorrow.css"; html { - font-family: sans-serif; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, + sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } @@ -37,106 +38,3 @@ body { padding-left: 2.8em; overflow: initial; } - -h1 { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - color: inherit; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - font-weight: bold; - text-rendering: optimizeLegibility; - font-size: 2.25rem; - line-height: 1.1; -} -h2 { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - color: inherit; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - font-weight: bold; - text-rendering: optimizeLegibility; - font-size: 1.62671rem; - line-height: 1.1; -} -h3 { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - color: inherit; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - font-weight: bold; - text-rendering: optimizeLegibility; - font-size: 1.38316rem; - line-height: 1.1; -} -h4 { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - color: inherit; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - font-weight: bold; - text-rendering: optimizeLegibility; - font-size: 1rem; - line-height: 1.1; -} -h5 { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - color: inherit; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - font-weight: bold; - text-rendering: optimizeLegibility; - font-size: 0.85028rem; - line-height: 1.1; -} -h6 { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - color: inherit; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - font-weight: bold; - text-rendering: optimizeLegibility; - font-size: 0.78405rem; - line-height: 1.1; -} diff --git a/src/components/Layout/styles.tsx b/src/components/Layout/styles.tsx index ce77c09..5bc63b3 100644 --- a/src/components/Layout/styles.tsx +++ b/src/components/Layout/styles.tsx @@ -1,5 +1,19 @@ -import styled from "styled-components"; +import styled from "styled-components" + +export const Main = styled.div` + display: flex; + margin: 128px auto 64px !important; + width: 100%; +` export const MainContent = styled.main` - padding: 2.5em 0; -`; + flex: 1 0 auto; + + & > :first-child { + margin-top: 0; + } + + & > :last-child { + margin-bottom: 0; + } +` diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx new file mode 100644 index 0000000..d30938c --- /dev/null +++ b/src/components/Sidebar/index.tsx @@ -0,0 +1,31 @@ +import React from "react" +import logo from "../../images/tph-logo.png" +import * as SC from "./styles" +import ArrowRight from "../../icons/arrow-right.svg" + +function MenuItem({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ) +} + +const Sidebar = () => { + return ( + + + + + about + rules + faq + hotbot + documentation + tech spotlight + + + ) +} + +export default Sidebar diff --git a/src/components/Sidebar/styles.tsx b/src/components/Sidebar/styles.tsx new file mode 100644 index 0000000..fd9488d --- /dev/null +++ b/src/components/Sidebar/styles.tsx @@ -0,0 +1,29 @@ +import styled from "styled-components" + +export const SidebarWrapper = styled.aside` + width: 200px; +` + +export const Logo = styled.img` + width: 122px; +` + +export const Menu = styled.nav` + margin-top: 16px; +` + +export const MenuItem = styled.div` + display: flex; + align-items: center; + font-size: 22px; + + & + & { + margin-top: 8px; + } + + svg { + margin-left: 6px; + width: 8px; + height: 15px; + } +` diff --git a/src/icons/arrow-right.svg b/src/icons/arrow-right.svg new file mode 100644 index 0000000..d84390b --- /dev/null +++ b/src/icons/arrow-right.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/images/tph-logo.png b/src/images/tph-logo.png new file mode 100644 index 0000000..a30f363 Binary files /dev/null and b/src/images/tph-logo.png differ diff --git a/typings.d.ts b/typings.d.ts new file mode 100644 index 0000000..677e3d5 --- /dev/null +++ b/typings.d.ts @@ -0,0 +1 @@ +declare module "*.svg"