From a225bac191eb528d565c9dc4d4acc2a5a1386ad1 Mon Sep 17 00:00:00 2001 From: Amam Mustofa Date: Thu, 20 Jun 2019 15:21:03 +0800 Subject: [PATCH 01/16] add globalstyle --- gatsby-config.js | 1 + package-lock.json | 110 +++++++++++++++++++++++++++++++++++++ package.json | 5 +- src/themes/global-style.js | 5 ++ 4 files changed, 120 insertions(+), 1 deletion(-) create mode 100644 src/themes/global-style.js diff --git a/gatsby-config.js b/gatsby-config.js index 2cc56b69364..e5c93fb39ac 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -6,6 +6,7 @@ module.exports = { }, plugins: [ `gatsby-plugin-react-helmet`, + `gatsby-plugin-styled-components`, { resolve: `gatsby-source-filesystem`, options: { diff --git a/package-lock.json b/package-lock.json index e15b7c3df85..786c82a508e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -874,6 +874,24 @@ "to-fast-properties": "^2.0.0" } }, + "@emotion/is-prop-valid": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.1.tgz", + "integrity": "sha512-Wtaek/KGUP+HusWIa8DqtOR6U/Tl+QIdVkfJQHV3IT6ZImnJwklP5UVVPKZvkfljeFk3Q45CAPJ5N10gJ5XoLA==", + "requires": { + "@emotion/memoize": "0.7.1" + } + }, + "@emotion/memoize": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.1.tgz", + "integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==" + }, + "@emotion/unitless": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.3.tgz", + "integrity": "sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg==" + }, "@gatsbyjs/relay-compiler": { "version": "2.0.0-printer-fix.2", "resolved": "https://registry.npmjs.org/@gatsbyjs/relay-compiler/-/relay-compiler-2.0.0-printer-fix.2.tgz", @@ -1745,11 +1763,27 @@ "resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.6.3.tgz", "integrity": "sha512-vZEuO4kpPJsPex63BIMn5bBZGIDO42FQtzSD9UsDHjoWHfCB9/EQDnimtggI3Eyv4L3hwxsGNvVbS4IfFDJrlQ==" }, + "babel-plugin-styled-components": { + "version": "1.10.1", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.1.tgz", + "integrity": "sha512-F6R2TnPGNN6iuXCs0xQ+EsrunwNoWI55J5I8Pkd/+fzzbv1I4gFgTaZepMOVpLobYWU2XaLIm+73L0zD3CnOdQ==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.0.0", + "@babel/helper-module-imports": "^7.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.11" + } + }, "babel-plugin-syntax-dynamic-import": { "version": "6.18.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz", "integrity": "sha1-jWomIpyDdFqZgqRBBRVyyqF5sdo=" }, + "babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=" + }, "babel-plugin-syntax-object-rest-spread": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", @@ -2675,6 +2709,11 @@ } } }, + "camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=" + }, "caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -3450,6 +3489,11 @@ "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz", "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=" }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=" + }, "css-color-names": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", @@ -3556,6 +3600,16 @@ } } }, + "css-to-react-native": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.1.tgz", + "integrity": "sha512-yO+oEx1Lf+hDKasqQRVrAvzMCz825Huh1VMlEEDlRWyAhFb/FWb6I0KpEF1PkyKQ7NEdcx9d5M2ZEWgJAsgPvQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^3.3.0" + } + }, "css-tree": { "version": "1.0.0-alpha.28", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.28.tgz", @@ -6612,6 +6666,14 @@ } } }, + "gatsby-plugin-styled-components": { + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/gatsby-plugin-styled-components/-/gatsby-plugin-styled-components-3.0.7.tgz", + "integrity": "sha512-a9sg4qWC5K75eip7TwN4F2TGXCaoRZhx9lvu1U5aQQrC8OpTgWus66Fzws0XVcUCe18isfOm1kGfhLNm5/lOFw==", + "requires": { + "@babel/runtime": "^7.0.0" + } + }, "gatsby-react-router-scroll": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/gatsby-react-router-scroll/-/gatsby-react-router-scroll-2.0.7.tgz", @@ -8253,6 +8315,11 @@ "is-invalid-path": "^0.1.0" } }, + "is-what": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.2.3.tgz", + "integrity": "sha512-c4syLgFnjXTH5qd82Fp/qtUIeM0wA69xbI0KH1QpurMIvDaZFrS8UtAa4U52Dc2qSznaMxHit0gErMp6A/Qk1w==" + }, "is-windows": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz", @@ -8963,6 +9030,11 @@ "mimic-fn": "^1.0.0" } }, + "memoize-one": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.0.4.tgz", + "integrity": "sha512-P0z5IeAH6qHHGkJIXWw0xC2HNEgkx/9uWWBQw64FJj3/ol14VYdfVGWWr0fXfjhhv3TKVIqUq65os6O4GUNksA==" + }, "memory-fs": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz", @@ -9057,6 +9129,14 @@ } } }, + "merge-anything": { + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/merge-anything/-/merge-anything-2.2.5.tgz", + "integrity": "sha512-WgZGR7EQ1D8pyh57uKBbkPhUCJZLGdMzbDaxL4MDTJSGsvtpGdm8myr6DDtgJwT46xiFBlHqxbveDRpFBWlKWQ==", + "requires": { + "is-what": "^3.2.3" + } + }, "merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", @@ -13048,6 +13128,26 @@ "schema-utils": "^0.4.5" } }, + "styled-components": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.3.2.tgz", + "integrity": "sha512-NppHzIFavZ3TsIU3R1omtddJ0Bv1+j50AKh3ZWyXHuFvJq1I8qkQ5mZ7uQgD89Y8zJNx2qRo6RqAH1BmoVafHw==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.0.0", + "@emotion/is-prop-valid": "^0.8.1", + "@emotion/unitless": "^0.7.0", + "babel-plugin-styled-components": ">= 1", + "css-to-react-native": "^2.2.2", + "memoize-one": "^5.0.0", + "merge-anything": "^2.2.4", + "prop-types": "^15.5.4", + "react-is": "^16.6.0", + "stylis": "^3.5.0", + "stylis-rule-sheet": "^0.0.10", + "supports-color": "^5.5.0" + } + }, "stylehacks": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz", @@ -13080,6 +13180,16 @@ } } }, + "stylis": { + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz", + "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==" + }, + "stylis-rule-sheet": { + "version": "0.0.10", + "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", + "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==" + }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", diff --git a/package.json b/package.json index ebbd5785f5d..7494224caa0 100644 --- a/package.json +++ b/package.json @@ -4,18 +4,21 @@ "version": "0.1.0", "author": "Binary.com", "dependencies": { + "babel-plugin-styled-components": "^1.10.1", "gatsby": "^2.9.4", "gatsby-image": "^2.1.4", "gatsby-plugin-manifest": "^2.1.1", "gatsby-plugin-offline": "^2.1.3", "gatsby-plugin-react-helmet": "^3.0.12", "gatsby-plugin-sharp": "^2.1.5", + "gatsby-plugin-styled-components": "^3.0.7", "gatsby-source-filesystem": "^2.0.39", "gatsby-transformer-sharp": "^2.1.21", "prop-types": "^15.7.2", "react": "^16.8.6", "react-dom": "^16.8.6", - "react-helmet": "^5.2.1" + "react-helmet": "^5.2.1", + "styled-components": "^4.3.2" }, "devDependencies": { "prettier": "^1.18.2" diff --git a/src/themes/global-style.js b/src/themes/global-style.js new file mode 100644 index 00000000000..5506353d554 --- /dev/null +++ b/src/themes/global-style.js @@ -0,0 +1,5 @@ +import { createGlobalStyle } from "styled-component"; + +const GlobalStyle = () => createGlobalStyle` + +` \ No newline at end of file From 810717bc50592372b6f5696c7ec04c6bd4585ccf Mon Sep 17 00:00:00 2001 From: Amam Mustofa Date: Fri, 21 Jun 2019 15:25:24 +0800 Subject: [PATCH 02/16] setup reusable image component --- gatsby-browser.js | 1 + package-lock.json | 5 + package.json | 3 +- src/components/elements/image.js | 25 +- src/components/form/button.js | 7 +- src/components/layout/header.js | 146 ++++---- src/components/layout/layout.css | 622 ------------------------------- src/components/layout/layout.js | 36 +- src/pages/index.js | 16 +- src/themes/global-style.js | 33 +- src/themes/reset.js | 57 +++ 11 files changed, 211 insertions(+), 740 deletions(-) create mode 100644 gatsby-browser.js delete mode 100644 src/components/layout/layout.css create mode 100644 src/themes/reset.js diff --git a/gatsby-browser.js b/gatsby-browser.js new file mode 100644 index 00000000000..cadaf899047 --- /dev/null +++ b/gatsby-browser.js @@ -0,0 +1 @@ +require('typeface-ibm-plex-sans'); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 786c82a508e..64148325389 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13650,6 +13650,11 @@ "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" }, + "typeface-ibm-plex-sans": { + "version": "0.0.61", + "resolved": "https://registry.npmjs.org/typeface-ibm-plex-sans/-/typeface-ibm-plex-sans-0.0.61.tgz", + "integrity": "sha512-lR/PiUiki2n3+oSsrMditaAHpiUUtNEb8GTd1vebKcQ6XJdpgtwE7iYSNTgmSXYYPp71e8zVVJfg+M9rlaltfg==" + }, "ua-parser-js": { "version": "0.7.20", "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.20.tgz", diff --git a/package.json b/package.json index 7494224caa0..c12512fdfa0 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,8 @@ "react": "^16.8.6", "react-dom": "^16.8.6", "react-helmet": "^5.2.1", - "styled-components": "^4.3.2" + "styled-components": "^4.3.2", + "typeface-ibm-plex-sans": "0.0.61" }, "devDependencies": { "prettier": "^1.18.2" diff --git a/src/components/elements/image.js b/src/components/elements/image.js index b48e7c04c92..fe6e9aa5c1f 100644 --- a/src/components/elements/image.js +++ b/src/components/elements/image.js @@ -13,24 +13,29 @@ import Img from 'gatsby-image' * - `StaticQuery`: https://gatsby.dev/staticquery */ -const Image = () => ( +const Image = ({ img_name, alt }) => ( ( - - )} + render={data => { + const image = data.allImageSharp.edges.find(edge => edge.node.fluid.originalName === img_name); + if (!image) return null; + + return {alt} + } + } /> ) export default Image diff --git a/src/components/form/button.js b/src/components/form/button.js index 7776137451e..2b774e03642 100644 --- a/src/components/form/button.js +++ b/src/components/form/button.js @@ -1,4 +1,7 @@ -import React from 'react' +import { styled } from 'styled-components' -const Button = ({ text }) => +const Button = styled.Button` + width: 2rem; + +` export default Button diff --git a/src/components/layout/header.js b/src/components/layout/header.js index 78beb332b89..dfb605fc5e9 100644 --- a/src/components/layout/header.js +++ b/src/components/layout/header.js @@ -1,74 +1,90 @@ import { Link } from 'gatsby' import PropTypes from 'prop-types' import React from 'react' +import styled from 'styled-components'; +import Image from '../elements/image'; + +const StyledHeader = styled.header` + background-color: var(--background-color); + border-bottom: 1px solid rgba(0, 0, 0, 0.0975); +` + +const Wrapper = styled.div` + width: 80%; + margin: 0 auto; + display: flex; + align-items: center; + padding: 1rem 1rem; +` + +const NavLeft = styled.div` + width: 25%; + text-align: left; +`; + +const NavCenter = styled.div` + width: 50%; + text-align: center; +`; + +const NavRight = styled.div` + width: 25%; + text-align: right; +`; + + +const LogoWrapper = styled.div` + max-width: 50px; + +`; + +const StyledLink = styled((props) => )` + color: var(--white-color); + text-decoration: none; + padding: ${rem('12px')}; +`; + +const NavButton = styled.button` + border: 1px solid var(--main-color); + color: var(--main-color); + background-color: transparent; + + &:active, + &:focus { + background-color: var(--main-color); + color: var(--white-color); + } +` const Header = ({ siteTitle }) => ( -
-
-

- - {siteTitle} + + + + + + Deriv.com + -

- - Home - - - About - - - Contact - - - Terms and Conditions - -
-
+ + + + Home + + + about + + + contact + + + terms and conditions + + + + Login + + + ) Header.propTypes = { diff --git a/src/components/layout/layout.css b/src/components/layout/layout.css deleted file mode 100644 index b6f63320fb8..00000000000 --- a/src/components/layout/layout.css +++ /dev/null @@ -1,622 +0,0 @@ -html { - font-family: sans-serif; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; -} -body { - margin: 0; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} -article, -aside, -details, -figcaption, -figure, -footer, -header, -main, -menu, -nav, -section, -summary { - display: block; -} -audio, -canvas, -progress, -video { - display: inline-block; -} -audio:not([controls]) { - display: none; - height: 0; -} -progress { - vertical-align: baseline; -} -[hidden], -template { - display: none; -} -a { - background-color: transparent; - -webkit-text-decoration-skip: objects; -} -a:active, -a:hover { - outline-width: 0; -} -abbr[title] { - border-bottom: none; - text-decoration: underline; - text-decoration: underline dotted; -} -b, -strong { - font-weight: inherit; - font-weight: bolder; -} -dfn { - font-style: italic; -} -h1 { - font-size: 2em; - margin: 0.67em 0; -} -mark { - background-color: #ff0; - color: #000; -} -small { - font-size: 80%; -} -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} -sub { - bottom: -0.25em; -} -sup { - top: -0.5em; -} -img { - border-style: none; -} -svg:not(:root) { - overflow: hidden; -} -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; -} -figure { - margin: 1em 40px; -} -hr { - box-sizing: content-box; - height: 0; - overflow: visible; -} -button, -input, -optgroup, -select, -textarea { - font: inherit; - margin: 0; -} -optgroup { - font-weight: 700; -} -button, -input { - overflow: visible; -} -button, -select { - text-transform: none; -} -[type="reset"], -[type="submit"], -button, -html [type="button"] { - -webkit-appearance: button; -} -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner, -button::-moz-focus-inner { - border-style: none; - padding: 0; -} -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring, -button:-moz-focusring { - outline: 1px dotted ButtonText; -} -fieldset { - border: 1px solid silver; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} -legend { - box-sizing: border-box; - color: inherit; - display: table; - max-width: 100%; - padding: 0; - white-space: normal; -} -textarea { - overflow: auto; -} -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; - padding: 0; -} -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} -[type="search"] { - -webkit-appearance: textfield; - outline-offset: -2px; -} -[type="search"]::-webkit-search-cancel-button, -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} -::-webkit-input-placeholder { - color: inherit; - opacity: 0.54; -} -::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; -} -html { - font: 112.5%/1.45em georgia, serif; - box-sizing: border-box; - overflow-y: scroll; -} -* { - box-sizing: inherit; -} -*:before { - box-sizing: inherit; -} -*:after { - box-sizing: inherit; -} -body { - color: hsla(0, 0%, 0%, 0.8); - font-family: georgia, serif; - font-weight: normal; - word-wrap: break-word; - font-kerning: normal; - -moz-font-feature-settings: "kern", "liga", "clig", "calt"; - -ms-font-feature-settings: "kern", "liga", "clig", "calt"; - -webkit-font-feature-settings: "kern", "liga", "clig", "calt"; - font-feature-settings: "kern", "liga", "clig", "calt"; -} -img { - max-width: 100%; - 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; -} -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; -} -hgroup { - 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; -} -ul { - margin-left: 1.45rem; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - list-style-position: outside; - list-style-image: none; -} -ol { - margin-left: 1.45rem; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - list-style-position: outside; - list-style-image: none; -} -dl { - 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; -} -dd { - 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; -} -p { - 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; -} -figure { - 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; -} -pre { - margin-left: 0; - margin-right: 0; - margin-top: 0; - margin-bottom: 1.45rem; - font-size: 0.85rem; - line-height: 1.42; - background: hsla(0, 0%, 0%, 0.04); - border-radius: 3px; - overflow: auto; - word-wrap: normal; - padding: 1.45rem; -} -table { - 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; - font-size: 1rem; - line-height: 1.45rem; - border-collapse: collapse; - width: 100%; -} -fieldset { - 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; -} -blockquote { - margin-left: 1.45rem; - margin-right: 1.45rem; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; -} -form { - 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; -} -noscript { - 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; -} -iframe { - 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; -} -hr { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: calc(1.45rem - 1px); - background: hsla(0, 0%, 0%, 0.2); - border: none; - height: 1px; -} -address { - 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; -} -b { - font-weight: bold; -} -strong { - font-weight: bold; -} -dt { - font-weight: bold; -} -th { - font-weight: bold; -} -li { - margin-bottom: calc(1.45rem / 2); -} -ol li { - padding-left: 0; -} -ul li { - padding-left: 0; -} -li > ol { - margin-left: 1.45rem; - margin-bottom: calc(1.45rem / 2); - margin-top: calc(1.45rem / 2); -} -li > ul { - margin-left: 1.45rem; - margin-bottom: calc(1.45rem / 2); - margin-top: calc(1.45rem / 2); -} -blockquote *:last-child { - margin-bottom: 0; -} -li *:last-child { - margin-bottom: 0; -} -p *:last-child { - margin-bottom: 0; -} -li > p { - margin-bottom: calc(1.45rem / 2); -} -code { - font-size: 0.85rem; - line-height: 1.45rem; -} -kbd { - font-size: 0.85rem; - line-height: 1.45rem; -} -samp { - font-size: 0.85rem; - line-height: 1.45rem; -} -abbr { - border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); - cursor: help; -} -acronym { - border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); - cursor: help; -} -abbr[title] { - border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); - cursor: help; - text-decoration: none; -} -thead { - text-align: left; -} -td, -th { - text-align: left; - border-bottom: 1px solid hsla(0, 0%, 0%, 0.12); - font-feature-settings: "tnum"; - -moz-font-feature-settings: "tnum"; - -ms-font-feature-settings: "tnum"; - -webkit-font-feature-settings: "tnum"; - padding-left: 0.96667rem; - padding-right: 0.96667rem; - padding-top: 0.725rem; - padding-bottom: calc(0.725rem - 1px); -} -th:first-child, -td:first-child { - padding-left: 0; -} -th:last-child, -td:last-child { - padding-right: 0; -} -tt, -code { - background-color: hsla(0, 0%, 0%, 0.04); - border-radius: 3px; - font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono", - "Liberation Mono", Menlo, Courier, monospace; - padding: 0; - padding-top: 0.2em; - padding-bottom: 0.2em; -} -pre code { - background: none; - line-height: 1.42; -} -code:before, -code:after, -tt:before, -tt:after { - letter-spacing: -0.2em; - content: " "; -} -pre code:before, -pre code:after, -pre tt:before, -pre tt:after { - content: ""; -} -@media only screen and (max-width: 480px) { - html { - font-size: 100%; - } -} diff --git a/src/components/layout/layout.js b/src/components/layout/layout.js index 1eb05e382c3..c77fc1d0b72 100644 --- a/src/components/layout/layout.js +++ b/src/components/layout/layout.js @@ -1,39 +1,17 @@ import React from 'react' import PropTypes from 'prop-types' -import { StaticQuery, graphql } from 'gatsby' import Header from './header' import Footer from './footer' -import './layout.css' +import GlobalStyle from '../../themes/global-style'; const Layout = ({ children }) => ( - ( - <> -
-
-
{children}
-
-