diff --git a/src/components/LayoutRoot.tsx b/src/components/LayoutRoot.tsx index 50a751687..d809f17ca 100644 --- a/src/components/LayoutRoot.tsx +++ b/src/components/LayoutRoot.tsx @@ -1,7 +1,6 @@ import * as React from 'react' -import { Global, css } from '@emotion/core' import styled from '@emotion/styled' -import base from '../styles/base' +import { BaseStyles } from '../styles/base' const StyledLayoutRoot = styled.div` display: flex; @@ -15,7 +14,7 @@ interface LayoutRootProps { const LayoutRoot: React.SFC = ({ children, className }) => ( <> - css(base)} /> + {children} ) diff --git a/src/layouts/docs.tsx b/src/layouts/docs.tsx index d3999bde0..110969d2b 100644 --- a/src/layouts/docs.tsx +++ b/src/layouts/docs.tsx @@ -3,9 +3,6 @@ import React from 'react' import IndexLayout from './index' import styled from '@emotion/styled' import { colors, sizes } from '../styles/variables' -import DocSideBar from '../components/docs/DocSideBar' -import DocTopicChooser from '../components/docs/DocTopicChooser' -import BackToTopButton from '../components/BackToTopButton' const StyledDocsLayout = styled.div` .content { @@ -134,18 +131,14 @@ interface DocsLayoutProps { body: JSX.Element } -const DocsLayout: React.SFC = ({ canonical, title, body}) => ( +const DocsLayout: React.SFC = ({ canonical, title, body }) => ( -
-
- - - {body} -
+
+
+ {body}
- - +
) diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index d06456e3b..424e47659 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -1,57 +1,52 @@ import * as React from 'react' import { Helmet } from 'react-helmet' -import { StaticQuery, graphql, Link } from 'gatsby' -import CookieConsent from 'react-cookie-consent' +import { StaticQuery, graphql } from 'gatsby' -import { colors, borders } from '../styles/variables' import GitpodIcon from '../resources/gitpod.svg' import GitpodIcon196 from '../resources/gitpod-196x196.png' import GitpodIconApple from '../resources/apple-touch-icon.png' import LayoutRoot from '../components/LayoutRoot' import LayoutMain from '../components/LayoutMain' -import Nav from '../components/Nav' -import Footer from '../components/Footer' -import MinimalFooter from '../components/MinimalFooter' -import AnnoucementBanner from '../components/AnnouncementBanner' + type StaticQueryProps = { - site: { - siteMetadata: { - title: string - description: string - siteUrl: string + site: { + siteMetadata: { + title: string + description: string + siteUrl: string + } } - } } -class IndexLayout extends React.Component<{ title?: string; canonical?: string; description?: string, isAFlowPage?: boolean, showReInstallExtensionButton?: boolean, ogImage?:string}, {}> { - handleFirstTab = (e: any) => { - if (e.key === 'Tab') { - // the "I am a keyboard user" key - document.body.classList.add('user-is-tabbing') - window.removeEventListener('keydown', this.handleFirstTab) - window.addEventListener('mousedown', this.handleMouseDownOnce) +class IndexLayout extends React.Component<{ title?: string; canonical?: string; description?: string, ogImage?: string }, {}> { + handleFirstTab = (e: any) => { + if (e.key === 'Tab') { + // the "I am a keyboard user" key + document.body.classList.add('user-is-tabbing') + window.removeEventListener('keydown', this.handleFirstTab) + window.addEventListener('mousedown', this.handleMouseDownOnce) + } } - } - handleMouseDownOnce = () => { - document.body.classList.remove('user-is-tabbing') + handleMouseDownOnce = () => { + document.body.classList.remove('user-is-tabbing') - window.removeEventListener('mousedown', this.handleMouseDownOnce) - window.addEventListener('keydown', this.handleFirstTab) - } + window.removeEventListener('mousedown', this.handleMouseDownOnce) + window.addEventListener('keydown', this.handleFirstTab) + } - componentDidMount() { - window.addEventListener('keydown', this.handleFirstTab) - } + componentDidMount() { + window.addEventListener('keydown', this.handleFirstTab) + } - render() { - const { title, canonical, description, ogImage, children } = this.props + render() { + const { title, canonical, description, ogImage, children } = this.props - return ( - ( - - - - {(title && `${title} - Gitpod`) || data.site.siteMetadata.title} - - - {canonical ? : null} - - - - - + render={(data: StaticQueryProps) => ( + + + + {(title && `${title} - Gitpod`) || data.site.siteMetadata.title} + + + {canonical ? : null} + + + + - - - + + + - - - - + + + + - - - -
- - ) diff --git a/static/font.css b/static/font.css new file mode 100644 index 000000000..c25e5794d --- /dev/null +++ b/static/font.css @@ -0,0 +1,30 @@ +@font-face { + font-family: 'ABCDiatype'; + font-style: normal; + font-weight: 400; + src: url('./fonts/ABCDiatype-Regular.woff') format('woff'); +} + +@font-face { + font-family: 'ABCDiatype'; + font-style: bold; + font-weight: 600; + src: url('./fonts/ABCDiatype-Bold.woff') format('woff'); +} + +/* @font-face { + font-family: 'ABCDiatype'; + font-style: italic; + font-weight: 400; + src: url('./fonts/ABCDiatype-RegularItalic.woff') format('woff'); +} +@font-face { + font-family: 'ABCDiatype'; + font-style: italic; + font-weight: 600; + src: url('./fonts/ABCDiatype-BoldItalic.woff') format('woff'); +} */ + +body { + color: red; +} diff --git a/static/fonts/ABCDiatype-Bold.woff b/static/fonts/ABCDiatype-Bold.woff new file mode 100644 index 000000000..14b2455a2 Binary files /dev/null and b/static/fonts/ABCDiatype-Bold.woff differ diff --git a/static/fonts/ABCDiatype-BoldItalic.woff b/static/fonts/ABCDiatype-BoldItalic.woff new file mode 100644 index 000000000..61667273d Binary files /dev/null and b/static/fonts/ABCDiatype-BoldItalic.woff differ diff --git a/static/fonts/ABCDiatype-Regular.woff b/static/fonts/ABCDiatype-Regular.woff new file mode 100644 index 000000000..5e91a78a6 Binary files /dev/null and b/static/fonts/ABCDiatype-Regular.woff differ diff --git a/static/fonts/ABCDiatype-RegularItalic.woff b/static/fonts/ABCDiatype-RegularItalic.woff new file mode 100644 index 000000000..fa46f5afc Binary files /dev/null and b/static/fonts/ABCDiatype-RegularItalic.woff differ