Created
December 16, 2018 15:14
-
-
Save ajmalafif/b309e9cf86bb31052ad8c650c3ab7a6a to your computer and use it in GitHub Desktop.
Gatsby-interUI layout.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { createGlobalStyle } from 'styled-components' | |
| import * as font from '../utils/font' | |
| import React from 'react' | |
| import PropTypes from 'prop-types' | |
| import Helmet from 'react-helmet' | |
| import { StaticQuery, graphql } from 'gatsby' | |
| import Header from './header' | |
| const GlobalStyle = createGlobalStyle` | |
| @font-face { | |
| font-family: "Inter UI"; | |
| font-display: swap; | |
| font-style: normal; | |
| font-weight: normal; | |
| src: url(${font.InterUIRegularWOFF2}) format("woff2"), | |
| url(${font.InterUIRegularWOFF}) format("woff"); | |
| } | |
| @font-face { | |
| font-family: "Inter UI Medium"; | |
| font-display: swap; | |
| font-style: normal; | |
| font-weight: 500; | |
| src: url(${font.InterUIMediumWOFF2}) format("woff2"), | |
| url(${font.InterUIMediumWOFF}) format("woff"); | |
| } | |
| @font-face { | |
| font-family: "Inter UI Bold"; | |
| font-display: swap; | |
| font-style: normal; | |
| font-weight: 700; | |
| src: url(${font.InterUIBoldWOFF2}) format("woff2"), | |
| url(${font.InterUIBoldWOFF}) format("woff"); | |
| } | |
| body { | |
| color: hsla(0, 0%, 0%, 0.8); | |
| font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; | |
| 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"; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| font-family: "Inter UI Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; | |
| 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"; | |
| } | |
| ` | |
| const Layout = ({ children, data }) => ( | |
| <StaticQuery | |
| query={graphql` | |
| query SiteTitleQuery { | |
| site { | |
| siteMetadata { | |
| title | |
| } | |
| } | |
| } | |
| `} | |
| render={data => ( | |
| <> | |
| <Helmet | |
| title={data.site.siteMetadata.title} | |
| meta={[ | |
| { name: 'description', content: 'Sample' }, | |
| { name: 'keywords', content: 'sample, something' }, | |
| ]} | |
| > | |
| <html lang="en" /> | |
| {/* noscript elements */} | |
| <noscript>{` | |
| Your browser does not support JavaScript! | |
| `}</noscript> | |
| </Helmet> | |
| <Header siteTitle={data.site.siteMetadata.title} /> | |
| <div | |
| style={{ | |
| margin: '0 auto', | |
| maxWidth: 960, | |
| padding: '0px 1.0875rem 1.45rem', | |
| paddingTop: 0, | |
| }} | |
| > | |
| {children} | |
| </div> | |
| <GlobalStyle /> | |
| </> | |
| )} | |
| /> | |
| ) | |
| Layout.propTypes = { | |
| children: PropTypes.node.isRequired, | |
| } | |
| export default Layout |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment