Stone_Red/website
1
0
Fork 0
mirror of https://github.com/Stone-Red-Code/website.git synced 2026-09-04 09:15: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 15:52:25 -04:00
parent 6ad1a1ae9b
commit 7b5d085b9e
13 changed files with 225 additions and 122 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
+93
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",
@@ -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",
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
+2 -104
View File
@@ -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;
}
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/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"