Stone_Red/website
1
0
Fork 0
mirror of https://github.com/Stone-Red-Code/website.git synced 2026-09-04 01:05:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

ui: prepare base layout

Browse Source
This commit is contained in:
Jean-Philippe Sirois
2019-07-27 01:10:49 -04:00
parent 7f7e713f9f
commit c599d10224
15 changed files with 264 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gatsby-config.js
+1
View File
@@ -27,6 +27,7 @@ module.exports = {
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-react-svg`,
`gatsby-plugin-sharp`,
`gatsby-plugin-sass`,
{
package-lock.json
Generated
+131 -14
View File
@@ -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",
@@ -6295,7 +6313,8 @@
},
"ansi-regex": {
"version": "2.1.1",
"bundled": true
"bundled": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
@@ -6313,11 +6332,13 @@
},
"balanced-match": {
"version": "1.0.0",
"bundled": true
"bundled": true,
"optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -6330,15 +6351,18 @@
},
"code-point-at": {
"version": "1.1.0",
"bundled": true
"bundled": true,
"optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true
"bundled": true,
"optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true
"bundled": true,
"optional": true
},
"core-util-is": {
"version": "1.0.2",
@@ -6441,7 +6465,8 @@
},
"inherits": {
"version": "2.0.3",
"bundled": true
"bundled": true,
"optional": true
},
"ini": {
"version": "1.3.5",
@@ -6451,6 +6476,7 @@
"is-fullwidth-code-point": {
"version": "1.0.0",
"bundled": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -6463,17 +6489,20 @@
"minimatch": {
"version": "3.0.4",
"bundled": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
},
"minimist": {
"version": "0.0.8",
"bundled": true
"bundled": true,
"optional": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@@ -6490,6 +6519,7 @@
"mkdirp": {
"version": "0.5.1",
"bundled": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -6562,7 +6592,8 @@
},
"number-is-nan": {
"version": "1.0.1",
"bundled": true
"bundled": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
@@ -6572,6 +6603,7 @@
"once": {
"version": "1.4.0",
"bundled": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@@ -6647,7 +6679,8 @@
},
"safe-buffer": {
"version": "5.1.2",
"bundled": true
"bundled": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -6677,6 +6710,7 @@
"string-width": {
"version": "1.0.2",
"bundled": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -6694,6 +6728,7 @@
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@@ -6732,11 +6767,13 @@
},
"wrappy": {
"version": "1.0.2",
"bundled": true
"bundled": true,
"optional": true
},
"yallist": {
"version": "3.0.3",
"bundled": true
"bundled": true,
"optional": true
}
}
},
@@ -7288,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",
@@ -8736,12 +8781,14 @@
"ansi-regex": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
"integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
"integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
"optional": true
},
"is-fullwidth-code-point": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
"integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
"integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
"optional": true
},
"slice-ansi": {
"version": "1.0.0",
@@ -8767,6 +8814,7 @@
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
"integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
"optional": true,
"requires": {
"ansi-regex": "^4.1.0"
}
@@ -9864,7 +9912,8 @@
"ansi-regex": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
"integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
"integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
"optional": true
},
"is-fullwidth-code-point": {
"version": "2.0.0",
@@ -9887,6 +9936,7 @@
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
"integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
"optional": true,
"requires": {
"ansi-regex": "^4.1.0"
}
@@ -12710,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",
@@ -13549,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",
@@ -15071,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",
@@ -15446,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",
package.json
+1
View File
@@ -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",
src/components/Container/index.tsx
+12
View File
@@ -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 => (
<SC.ContainerWrapper {...restProps}>{children}</SC.ContainerWrapper>
)
export default Container
src/components/Container/styles.tsx
+18
View File
@@ -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;
}
`
src/components/Layout/index.tsx
+17 -15
View File
@@ -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 (
<Scrollbar>
<Navbar siteTitle={data.site.siteMetadata.title} />
<div
style={{
margin: `0 auto`,
maxWidth: 960,
padding: `0px 1.0875rem 1.45rem`,
paddingTop: 0,
}}
>
<MainContent>{children}</MainContent>
<footer>
<Container>
<Main>
<Sidebar />
<MainContent>
<h1>{data.site.siteMetadata.title}</h1>
{children}
</MainContent>
</Main>
</Container>
<footer>
<Container>
© {new Date().getFullYear()}, Built with
{` `}
<a href="https://www.gatsbyjs.org">Gatsby</a>
</footer>
</div>
</Container>
</footer>
</Scrollbar>
)
}
src/components/Layout/layout.scss
+3 -2
View File
@@ -1,7 +1,8 @@
// TODO: refactor this into styled components
html {
font-family: 'Lato', 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,4 +38,4 @@ body {
padding: 0;
padding-left: 2.8em;
overflow: initial;
}
}
src/components/Layout/styles.tsx
+17 -3
View File
@@ -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;
}
`
src/components/Navbar/index.tsx
-29
View File
@@ -1,29 +0,0 @@
import {Link} from "gatsby";
import React from "react";
import icon from "./icon.png";
import {NavbarWrapper, NavbarItems} from "./styles";
const Navbar = ({siteTitle = ""}) => (
<NavbarWrapper>
<NavbarItems>
{/* <img src={icon} style={{ width: "70px" }} /> */}
<h1 style={{margin: 0}}>
<Link
to="/"
style={{
color: `white`,
textDecoration: `none`,
}}
>
{siteTitle}
</Link>
</h1>
</NavbarItems>
<NavbarItems>
<button>discord link here</button>
<button>reddit (maybe?) link here</button>
</NavbarItems>
</NavbarWrapper>
)
export default Navbar;
src/components/Navbar/styles.tsx
-15
View File
@@ -1,15 +0,0 @@
import styled from "styled-components";
export const NavbarWrapper = styled.header`
background: #ba1a2e;
marginBottom: 1.45rem;
padding: 1.3rem;
display: flex;
justify-content: space-between;
`;
export const NavbarItems = styled.div`
display: flex;
flex-direction: row;
align-items: center;
`
src/components/Sidebar/index.tsx
+31
View File
@@ -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 (
<SC.MenuItem>
{children} <ArrowRight />
</SC.MenuItem>
)
}
const Sidebar = () => {
return (
<SC.SidebarWrapper>
<SC.Logo src={logo} />
<SC.Menu>
<MenuItem>about</MenuItem>
<MenuItem>rules</MenuItem>
<MenuItem>faq</MenuItem>
<MenuItem>hotbot</MenuItem>
<MenuItem>documentation</MenuItem>
<MenuItem>tech spotlight</MenuItem>
</SC.Menu>
</SC.SidebarWrapper>
)
}
export default Sidebar
src/components/Sidebar/styles.tsx
+29
View File
@@ -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;
}
`
src/icons/arrow-right.svg
+3
View File
@@ -0,0 +1,3 @@
<svg viewBox="0 0 8 15">
<path fill="#B0B0B0" fill-rule="nonzero" d="M7.76 6.73L1.25.2A.73.73 0 1 0 .21 1.24l6 6-6 6a.73.73 0 1 0 1.04 1.03l6.51-6.51a.74.74 0 0 0 0-1.03z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 182 B

src/images/tph-logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

typings.d.ts
Vendored
+1
View File
@@ -0,0 +1 @@
declare module "*.svg"