From 561f441a5bfc4822b0974169605d089b4f687bf5 Mon Sep 17 00:00:00 2001 From: Megan Pearson Date: Fri, 19 Oct 2018 09:37:14 +0200 Subject: Implements color variables and updates components --- packages/dev-tools-pages/ts/components/Button.tsx | 3 ++- packages/dev-tools-pages/ts/components/Code.tsx | 5 +++-- packages/dev-tools-pages/ts/components/Compiler.tsx | 3 ++- packages/dev-tools-pages/ts/components/InlineCode.tsx | 3 ++- packages/dev-tools-pages/ts/components/Intro.tsx | 6 +++--- packages/dev-tools-pages/ts/components/Tabs.tsx | 4 +++- packages/dev-tools-pages/ts/components/Trace.tsx | 3 ++- packages/dev-tools-pages/ts/variables.tsx | 12 ++++++++++++ 8 files changed, 29 insertions(+), 10 deletions(-) create mode 100644 packages/dev-tools-pages/ts/variables.tsx diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx index e676961c8..fb36f7669 100644 --- a/packages/dev-tools-pages/ts/components/Button.tsx +++ b/packages/dev-tools-pages/ts/components/Button.tsx @@ -1,4 +1,5 @@ import styled from 'styled-components'; +import variables from '../variables'; import { withContext, Props } from './withContext'; @@ -16,7 +17,7 @@ const Button = white-space: nowrap; vertical-align: middle; background-color: ${props => props.colors.secondary}; - color: #000; + color: ${variables.colors.black}; border: 0; border-radius: 5rem; padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')}; diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx index 42d4234f1..42893a70a 100644 --- a/packages/dev-tools-pages/ts/components/Code.tsx +++ b/packages/dev-tools-pages/ts/components/Code.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import styled from 'styled-components'; +import variables from '../variables'; import BaseButton from './Button'; @@ -25,8 +26,8 @@ const Base = styled.div < CodeProps > ` - color: ${props => (props.language === undefined ? '#FFF' : 'inherit')}; - background-color: ${props => (props.language === undefined ? '#000' : '#F1F4F5')}; + color: ${props => (props.language === undefined ? variables.colors.white : 'inherit')}; + background-color: ${props => (props.language === undefined ? variables.colors.black : variables.colors.lightGray)}; white-space: ${props => (props.language === undefined ? 'nowrap' : '')}; position: relative; &:hover ${Button} { diff --git a/packages/dev-tools-pages/ts/components/Compiler.tsx b/packages/dev-tools-pages/ts/components/Compiler.tsx index 6dcfda70c..fcdbb6bfe 100644 --- a/packages/dev-tools-pages/ts/components/Compiler.tsx +++ b/packages/dev-tools-pages/ts/components/Compiler.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import styled from 'styled-components'; +import variables from '../variables'; import InlineCode from './InlineCode'; @@ -13,7 +14,7 @@ const Cards = styled.dl` `; const Card = styled.div` - background-color: #f1f4f5; + background-color: ${variables.colors.lightGray}; padding: 3.125rem; padding-bottom: 2.5rem; `; diff --git a/packages/dev-tools-pages/ts/components/InlineCode.tsx b/packages/dev-tools-pages/ts/components/InlineCode.tsx index 037cfa675..f8aad8795 100644 --- a/packages/dev-tools-pages/ts/components/InlineCode.tsx +++ b/packages/dev-tools-pages/ts/components/InlineCode.tsx @@ -1,7 +1,8 @@ import styled from 'styled-components'; +import variables from '../variables'; const InlineCode = styled.code` - background-color: #eceff9; + background-color: ${variables.colors.blueGray} padding: 0.1875rem; `; diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx index c16c888b7..2d4a30f9f 100644 --- a/packages/dev-tools-pages/ts/components/Intro.tsx +++ b/packages/dev-tools-pages/ts/components/Intro.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; import styled from 'styled-components'; +import variables from '../variables'; import { Alpha, Beta } from './Typography'; const Main = styled.div` - background-color: #f1f4f5; + background-color: ${variables.colors.lightGray}; padding: 6.25rem; display: flex; justify-content: space-between; @@ -16,13 +17,12 @@ const Title = styled(Alpha)` const Content = styled.div` max-width: 25.9375rem; - display: flex; flex-direction: column; `; const Code = styled.div` - background-color: #e9eced; + background-color: ${variables.colors.darkGray}; width: 520px; height: 350px; `; diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx index 1efbe1f61..b36b354f3 100644 --- a/packages/dev-tools-pages/ts/components/Tabs.tsx +++ b/packages/dev-tools-pages/ts/components/Tabs.tsx @@ -1,5 +1,7 @@ import * as React from 'react'; import styled from 'styled-components'; +import variables from '../variables'; + import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs' import {withContext, Props} from './withContext'; @@ -34,7 +36,7 @@ const Root = styled.div<{primaryColor: string;}>` background-color: ${props => props.primaryColor}; } ${StyledTab}[aria-selected="true"] { - background-color: #F1F2F7; + background-color: ${variables.colors.gray}; } `; diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx index 50bbd449a..98695177d 100644 --- a/packages/dev-tools-pages/ts/components/Trace.tsx +++ b/packages/dev-tools-pages/ts/components/Trace.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import styled from 'styled-components'; +import variables from '../variables'; import { withContext, Props } from './withContext'; import { Alpha, Beta, Gamma } from './Typography'; @@ -97,7 +98,7 @@ const StyledSection = ` max-width: 90rem; margin: 0 auto; - background: linear-gradient(to right, #000 50%, ${props => props.background} 50%); + background: linear-gradient(to right, ${variables.colors.black} 50%, ${props => props.background} 50%); padding-top: 6.25rem; padding-bottom: 5.25rem; `; diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx new file mode 100644 index 000000000..8590547df --- /dev/null +++ b/packages/dev-tools-pages/ts/variables.tsx @@ -0,0 +1,12 @@ +const variables = { + colors: { + black: '#000000', + white: '#FFFFFF', + lightGray: '#F1F4F5', + gray: '#F1F2F7', + darkGray: '#E9ECED', + blueGray: '#ECEFF9', + }, +}; + +export default variables; -- cgit v1.2.3 From 585ca203b02e902b3dd5141bcacd0ffc5740e0c1 Mon Sep 17 00:00:00 2001 From: Megan Pearson Date: Fri, 19 Oct 2018 11:32:59 +0200 Subject: Changed name of export to colors and updates components --- packages/dev-tools-pages/ts/components/Button.tsx | 4 ++-- packages/dev-tools-pages/ts/components/Code.tsx | 6 +++--- packages/dev-tools-pages/ts/components/Compiler.tsx | 4 ++-- packages/dev-tools-pages/ts/components/InlineCode.tsx | 4 ++-- packages/dev-tools-pages/ts/components/Intro.tsx | 6 +++--- packages/dev-tools-pages/ts/components/Tabs.tsx | 4 ++-- packages/dev-tools-pages/ts/components/Trace.tsx | 8 ++++---- packages/dev-tools-pages/ts/variables.tsx | 6 ++++-- 8 files changed, 22 insertions(+), 20 deletions(-) diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx index fb36f7669..2d0fbc353 100644 --- a/packages/dev-tools-pages/ts/components/Button.tsx +++ b/packages/dev-tools-pages/ts/components/Button.tsx @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import variables from '../variables'; +import { colors } from '../variables'; import { withContext, Props } from './withContext'; @@ -17,7 +17,7 @@ const Button = white-space: nowrap; vertical-align: middle; background-color: ${props => props.colors.secondary}; - color: ${variables.colors.black}; + color: ${colors.black}; border: 0; border-radius: 5rem; padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')}; diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx index 42893a70a..44d1cb99c 100644 --- a/packages/dev-tools-pages/ts/components/Code.tsx +++ b/packages/dev-tools-pages/ts/components/Code.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import styled from 'styled-components'; -import variables from '../variables'; +import { colors } from '../variables'; import BaseButton from './Button'; @@ -26,8 +26,8 @@ const Base = styled.div < CodeProps > ` - color: ${props => (props.language === undefined ? variables.colors.white : 'inherit')}; - background-color: ${props => (props.language === undefined ? variables.colors.black : variables.colors.lightGray)}; + color: ${props => (props.language === undefined ? colors.white : 'inherit')}; + background-color: ${props => (props.language === undefined ? colors.black : colors.lightGray)}; white-space: ${props => (props.language === undefined ? 'nowrap' : '')}; position: relative; &:hover ${Button} { diff --git a/packages/dev-tools-pages/ts/components/Compiler.tsx b/packages/dev-tools-pages/ts/components/Compiler.tsx index fcdbb6bfe..bda29dc1f 100644 --- a/packages/dev-tools-pages/ts/components/Compiler.tsx +++ b/packages/dev-tools-pages/ts/components/Compiler.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import styled from 'styled-components'; -import variables from '../variables'; +import { colors } from '../variables'; import InlineCode from './InlineCode'; @@ -14,7 +14,7 @@ const Cards = styled.dl` `; const Card = styled.div` - background-color: ${variables.colors.lightGray}; + background-color: ${colors.lightGray}; padding: 3.125rem; padding-bottom: 2.5rem; `; diff --git a/packages/dev-tools-pages/ts/components/InlineCode.tsx b/packages/dev-tools-pages/ts/components/InlineCode.tsx index f8aad8795..bfbaeb395 100644 --- a/packages/dev-tools-pages/ts/components/InlineCode.tsx +++ b/packages/dev-tools-pages/ts/components/InlineCode.tsx @@ -1,8 +1,8 @@ import styled from 'styled-components'; -import variables from '../variables'; +import { colors } from '../variables'; const InlineCode = styled.code` - background-color: ${variables.colors.blueGray} + background-color: ${colors.blueGray} padding: 0.1875rem; `; diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx index 2d4a30f9f..cddee5b6f 100644 --- a/packages/dev-tools-pages/ts/components/Intro.tsx +++ b/packages/dev-tools-pages/ts/components/Intro.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; import styled from 'styled-components'; -import variables from '../variables'; +import { colors } from '../variables'; import { Alpha, Beta } from './Typography'; const Main = styled.div` - background-color: ${variables.colors.lightGray}; + background-color: ${colors.lightGray}; padding: 6.25rem; display: flex; justify-content: space-between; @@ -22,7 +22,7 @@ const Content = styled.div` `; const Code = styled.div` - background-color: ${variables.colors.darkGray}; + background-color: ${colors.darkGray}; width: 520px; height: 350px; `; diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx index b36b354f3..64f87bea3 100644 --- a/packages/dev-tools-pages/ts/components/Tabs.tsx +++ b/packages/dev-tools-pages/ts/components/Tabs.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import styled from 'styled-components'; -import variables from '../variables'; +import { colors } from '../variables'; import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs' @@ -36,7 +36,7 @@ const Root = styled.div<{primaryColor: string;}>` background-color: ${props => props.primaryColor}; } ${StyledTab}[aria-selected="true"] { - background-color: ${variables.colors.gray}; + background-color: ${colors.gray}; } `; diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx index 98695177d..f4b4e76a3 100644 --- a/packages/dev-tools-pages/ts/components/Trace.tsx +++ b/packages/dev-tools-pages/ts/components/Trace.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import styled from 'styled-components'; -import variables from '../variables'; +import { colors } from '../variables'; import { withContext, Props } from './withContext'; import { Alpha, Beta, Gamma } from './Typography'; @@ -98,7 +98,7 @@ const StyledSection = ` max-width: 90rem; margin: 0 auto; - background: linear-gradient(to right, ${variables.colors.black} 50%, ${props => props.background} 50%); + background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%); padding-top: 6.25rem; padding-bottom: 5.25rem; `; @@ -116,8 +116,8 @@ const Block = TraceProps > ` width: 50%; - background: ${props => (props.background ? props.background : '#000')}; - color: ${props => (props.background ? 'inherit' : '#fff')}; + background: ${props => (props.background ? props.background : colors.black)}; + color: ${props => (props.background ? 'inherit' : colors.white)}; :first-of-type { padding-right: 6.25rem; diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx index 8590547df..b1e0271d1 100644 --- a/packages/dev-tools-pages/ts/variables.tsx +++ b/packages/dev-tools-pages/ts/variables.tsx @@ -1,5 +1,6 @@ -const variables = { - colors: { +import { css } from 'styled-components'; + +const colors = { black: '#000000', white: '#FFFFFF', lightGray: '#F1F4F5', @@ -10,3 +11,4 @@ const variables = { }; export default variables; +export { colors, media }; -- cgit v1.2.3 From 45a24738b585d568c765b641a94e9bbf941a8fd7 Mon Sep 17 00:00:00 2001 From: Megan Pearson Date: Fri, 19 Oct 2018 11:33:41 +0200 Subject: Exports media breakpoints --- packages/dev-tools-pages/ts/variables.tsx | 35 ++++++++++++++++++++++++------- 1 file changed, 27 insertions(+), 8 deletions(-) diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx index b1e0271d1..b23bb3e52 100644 --- a/packages/dev-tools-pages/ts/variables.tsx +++ b/packages/dev-tools-pages/ts/variables.tsx @@ -1,14 +1,33 @@ import { css } from 'styled-components'; const colors = { - black: '#000000', - white: '#FFFFFF', - lightGray: '#F1F4F5', - gray: '#F1F2F7', - darkGray: '#E9ECED', - blueGray: '#ECEFF9', - }, + black: '#000000', + white: '#FFFFFF', + lightGray: '#F1F4F5', + gray: '#F1F2F7', + darkGray: '#E9ECED', + blueGray: '#ECEFF9', }; -export default variables; +interface SizesInterface { + [key: string]: number; +} + +const sizes: SizesInterface = { + large: 992, + medium: 768, + small: 376, +}; + +const media = Object.keys(sizes).reduce((acc: any, label: string) => { + acc[label] = (args: any) => css` + @media (max-width: ${sizes[label] / 16}em) { + ${css(args)}; + } + `; + + return acc; +}, {}); + +export default media; export { colors, media }; -- cgit v1.2.3 From ba0b9b259fdd84c34254cb9d9cab4a2dc4c91f94 Mon Sep 17 00:00:00 2001 From: Megan Pearson Date: Fri, 19 Oct 2018 11:59:03 +0200 Subject: Responsive header --- packages/dev-tools-pages/ts/components/Header.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/dev-tools-pages/ts/components/Header.tsx b/packages/dev-tools-pages/ts/components/Header.tsx index dca562421..aeefae3cc 100644 --- a/packages/dev-tools-pages/ts/components/Header.tsx +++ b/packages/dev-tools-pages/ts/components/Header.tsx @@ -5,6 +5,8 @@ import { withContext, Props } from './withContext'; import Container from './Container'; import { Small } from './Typography'; +import { media } from '../variables'; + function Header(props: Props) { const { icon, title, colors } = props; @@ -36,6 +38,8 @@ const StyledHeader = styled.header` justify-content: space-between; align-items: center; } + + ${media.small`padding-top: 2.125rem;`}; `; const LogoMark = styled.div` @@ -53,6 +57,8 @@ const Title = styled.h1` font-size: 1.5rem; margin: 0; margin-left: 0.8125rem; + + ${media.small`font-size: 1.25rem;`}; `; const StyledLink = styled(Small)` -- cgit v1.2.3 From 135a623b1f783a24ff4885a3dd0209fcaeb85678 Mon Sep 17 00:00:00 2001 From: Megan Pearson Date: Fri, 19 Oct 2018 14:29:59 +0200 Subject: Responsive trace --- packages/dev-tools-pages/ts/components/Trace.tsx | 38 ++++++++++++++++++++++-- 1 file changed, 36 insertions(+), 2 deletions(-) diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx index f4b4e76a3..fe1f357c7 100644 --- a/packages/dev-tools-pages/ts/components/Trace.tsx +++ b/packages/dev-tools-pages/ts/components/Trace.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import styled from 'styled-components'; -import { colors } from '../variables'; +import { colors, media } from '../variables'; import { withContext, Props } from './withContext'; import { Alpha, Beta, Gamma } from './Typography'; @@ -101,6 +101,8 @@ const StyledSection = background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%); padding-top: 6.25rem; padding-bottom: 5.25rem; + + ${media.small`background: none`}; `; const Wrapper = styled(Container)` @@ -108,7 +110,14 @@ const Wrapper = styled(Container)` ${Alpha} { padding-bottom: 2.5rem; + + ${media.small`padding-bottom: 1.875rem;`}; } + + ${media.small` + display: block; + width: 100%; + `}; `; const Block = @@ -125,27 +134,52 @@ const Block = :last-of-type { padding-left: 6.25rem; } + + ${media.small` + width: 100%; + padding-top: 2.5rem; + padding-bottom: 3.4375rem; + + :first-of-type { + padding-left: 1.875rem; + padding-right: 1.875rem; + } + :last-of-type { + padding-left: 1.875rem; + padding-right: 1.875rem; + } + `}; `; const MainCopy = styled(Beta)` margin-bottom: 3.1875rem; + ${media.small`margin-bottom: 1.125rem;`}; `; const List = styled.ul` margin-top: 6.25rem; margin-bottom: 0; padding: 0; + + ${media.small`margin-top: 3.4375rem;`}; `; const Item = styled.li` display: flex; align-items: center; - margin-bottom: 4.4375rem; + + :not(:last-child) { + margin-bottom: 4.4375rem; + + ${media.small`margin-bottom: 3.4375rem;`}; + } `; const Copy = styled.div` max-width: 20rem; margin-right: 5.875rem; + + ${media.small`margin-right: 2.0625rem;`}; `; export default withContext(Trace); -- cgit v1.2.3 From 9a024fdacf885cbeb1d070064b0ab2314a092f13 Mon Sep 17 00:00:00 2001 From: Megan Pearson Date: Fri, 19 Oct 2018 14:30:38 +0200 Subject: Responsive font sizes in typography and globalstyles --- packages/dev-tools-pages/ts/components/Typography.tsx | 7 +++++++ packages/dev-tools-pages/ts/globalStyles.tsx | 4 ++++ 2 files changed, 11 insertions(+) diff --git a/packages/dev-tools-pages/ts/components/Typography.tsx b/packages/dev-tools-pages/ts/components/Typography.tsx index 9251d31b4..5f9587335 100644 --- a/packages/dev-tools-pages/ts/components/Typography.tsx +++ b/packages/dev-tools-pages/ts/components/Typography.tsx @@ -1,17 +1,24 @@ import styled from 'styled-components'; +import { media } from '../variables'; const Alpha = styled.h2` font-size: 1.75rem; line-height: 1; + + ${media.small`font-size: 1.5rem;`}; `; const Beta = styled.h3` font-size: 1.25rem; line-height: 1.65; + + ${media.small`font-size: 1rem;`}; `; const Gamma = styled.h4` font-size: 1rem; + + ${media.small`font-size: 0.875rem;`}; `; const Small = styled.p` diff --git a/packages/dev-tools-pages/ts/globalStyles.tsx b/packages/dev-tools-pages/ts/globalStyles.tsx index 1a2a1769a..e8ef630da 100644 --- a/packages/dev-tools-pages/ts/globalStyles.tsx +++ b/packages/dev-tools-pages/ts/globalStyles.tsx @@ -1,4 +1,5 @@ import { createGlobalStyle } from 'styled-components'; +import { media } from './variables'; import styledNormalize from 'styled-normalize'; import hljsStyles from 'highlight.js/styles/github-gist.css'; @@ -44,6 +45,9 @@ const BaseStyles = createGlobalStyle` font-weight: 300; font-size: 1rem; line-height: 1.8; + + ${media.small`font-size: 0.875rem;`}; + } a { -- cgit v1.2.3 From 8a7c61c6f46dc283d9387fb29860295f58e683e7 Mon Sep 17 00:00:00 2001 From: Megan Pearson Date: Fri, 19 Oct 2018 15:31:26 +0200 Subject: Responsive footer --- packages/dev-tools-pages/ts/components/Footer.tsx | 40 ++++++++++++++++++++--- 1 file changed, 35 insertions(+), 5 deletions(-) diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx index 82b2de1a3..15e6a5b86 100644 --- a/packages/dev-tools-pages/ts/components/Footer.tsx +++ b/packages/dev-tools-pages/ts/components/Footer.tsx @@ -4,6 +4,7 @@ import styled from 'styled-components'; import { Alpha, Beta } from './Typography'; import { withContext, Props } from './withContext'; import Container from './Container'; +import { media } from '../variables'; import MainIcon from 'ts/icons/logos/0x.svg'; import compiler from 'ts/context/compiler'; @@ -23,7 +24,7 @@ function Footer(props: Props) { Other tools by 0x {tools.map(({ title, subtitle, icon }) => ( - +
{title} @@ -49,21 +50,38 @@ const StyledFooter = styled.footer` background-color: ${(props: { background: string }) => props.background}; padding-top: 6.25rem; padding-bottom: 5.4375rem; + + ${media.small`padding-top: 2.5rem;`}; `; const Top = styled.div` display: flex; justify-content: space-between; margin-bottom: 9.375rem; + + ${media.small` + display: block; + margin-bottom: 5.3125rem; + `}; + + ${Alpha} { + ${media.small`margin-bottom: 3.8125rem;`}; + } +`; + +const Icon = styled.div` + margin-right: 1.3125rem; + + ${media.small`margin-right: 0.9375rem`}; `; const Media = styled.div` display: flex; align-items: center; -`; -const Icon = styled.div` - margin-right: 1.3125rem; + ${Icon} { + align-self: flex-start; + } `; const List = styled.ul` @@ -73,14 +91,26 @@ const List = styled.ul` flex-direction: row; margin: 0; padding: 0; + + ${media.small` + display: block; + width: 100%; + `}; `; -const ListItem = styled(Media)` +const ListItem = styled.li` + display: flex; + align-items: center; flex-basis: 50%; margin-bottom: 3.3125rem; + :nth-last-of-type(-n + 2) { margin-bottom: 0; + + ${media.small`margin-bottom: 1.875rem`}; } + + ${media.small`margin-bottom: 1.875rem`}; `; const Small = styled.small` -- cgit v1.2.3 From d6ac1a4f782c55407760d4502325b6aa2cf3730c Mon Sep 17 00:00:00 2001 From: Megan Pearson Date: Fri, 19 Oct 2018 15:32:02 +0200 Subject: Remove font size adjustment for small screens from Beta --- packages/dev-tools-pages/ts/components/Trace.tsx | 5 ++++- packages/dev-tools-pages/ts/components/Typography.tsx | 2 -- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx index fe1f357c7..545e87d53 100644 --- a/packages/dev-tools-pages/ts/components/Trace.tsx +++ b/packages/dev-tools-pages/ts/components/Trace.tsx @@ -153,7 +153,10 @@ const Block = const MainCopy = styled(Beta)` margin-bottom: 3.1875rem; - ${media.small`margin-bottom: 1.125rem;`}; + ${media.small` + margin-bottom: 1.125rem; + font-size: 1rem; + `}; `; const List = styled.ul` diff --git a/packages/dev-tools-pages/ts/components/Typography.tsx b/packages/dev-tools-pages/ts/components/Typography.tsx index 5f9587335..deac8a976 100644 --- a/packages/dev-tools-pages/ts/components/Typography.tsx +++ b/packages/dev-tools-pages/ts/components/Typography.tsx @@ -11,8 +11,6 @@ const Alpha = styled.h2` const Beta = styled.h3` font-size: 1.25rem; line-height: 1.65; - - ${media.small`font-size: 1rem;`}; `; const Gamma = styled.h4` -- cgit v1.2.3 From 7d7f54c751a2a5b8fca6791fb6685f4b5f969fff Mon Sep 17 00:00:00 2001 From: August Skare Date: Fri, 19 Oct 2018 15:02:15 +0100 Subject: Feature/build step (#2) * BundleAnalyzerPlugin * lazy load highlight.js * seperate bundles for each page * prerender apps to html on build * preload important font files * dont prerender code copy button * fix woff2 variant of font * added missing doctype * remove metatags component --- packages/dev-tools-pages/.gitignore | 3 +- packages/dev-tools-pages/assets/crawl.html | 20 + .../dev-tools-pages/assets/favicons/compiler.ico | Bin 0 -> 6518 bytes packages/dev-tools-pages/assets/favicons/cov.ico | Bin 0 -> 6518 bytes .../dev-tools-pages/assets/favicons/profiler.ico | Bin 0 -> 6518 bytes packages/dev-tools-pages/assets/favicons/trace.ico | Bin 0 -> 6518 bytes packages/dev-tools-pages/assets/index.html | 14 + packages/dev-tools-pages/package.json | 12 +- packages/dev-tools-pages/pages.js | 72 +++ .../dev-tools-pages/public/favicons/compiler.ico | Bin 6518 -> 0 bytes packages/dev-tools-pages/public/favicons/cov.ico | Bin 6518 -> 0 bytes .../dev-tools-pages/public/favicons/profiler.ico | Bin 6518 -> 0 bytes packages/dev-tools-pages/public/favicons/trace.ico | Bin 6518 -> 0 bytes packages/dev-tools-pages/public/index.html | 15 - packages/dev-tools-pages/ts/components/Base.tsx | 26 + packages/dev-tools-pages/ts/components/Code.tsx | 6 +- .../dev-tools-pages/ts/components/MetaTags.tsx | 28 -- packages/dev-tools-pages/ts/globalStyles.tsx | 6 +- packages/dev-tools-pages/ts/globals.d.ts | 2 + packages/dev-tools-pages/ts/highlight.tsx | 6 + packages/dev-tools-pages/ts/index.tsx | 37 -- packages/dev-tools-pages/ts/pages/Base.tsx | 28 -- packages/dev-tools-pages/ts/pages/Compiler.tsx | 13 +- packages/dev-tools-pages/ts/pages/Cov.tsx | 13 +- packages/dev-tools-pages/ts/pages/Profiler.tsx | 13 +- packages/dev-tools-pages/ts/pages/Trace.tsx | 13 +- packages/dev-tools-pages/webpack.config.js | 27 +- yarn.lock | 532 ++++++++++++++++++--- 28 files changed, 691 insertions(+), 195 deletions(-) create mode 100644 packages/dev-tools-pages/assets/crawl.html create mode 100644 packages/dev-tools-pages/assets/favicons/compiler.ico create mode 100644 packages/dev-tools-pages/assets/favicons/cov.ico create mode 100644 packages/dev-tools-pages/assets/favicons/profiler.ico create mode 100644 packages/dev-tools-pages/assets/favicons/trace.ico create mode 100644 packages/dev-tools-pages/assets/index.html create mode 100644 packages/dev-tools-pages/pages.js delete mode 100644 packages/dev-tools-pages/public/favicons/compiler.ico delete mode 100644 packages/dev-tools-pages/public/favicons/cov.ico delete mode 100644 packages/dev-tools-pages/public/favicons/profiler.ico delete mode 100644 packages/dev-tools-pages/public/favicons/trace.ico delete mode 100644 packages/dev-tools-pages/public/index.html create mode 100644 packages/dev-tools-pages/ts/components/Base.tsx delete mode 100644 packages/dev-tools-pages/ts/components/MetaTags.tsx create mode 100644 packages/dev-tools-pages/ts/highlight.tsx delete mode 100644 packages/dev-tools-pages/ts/index.tsx delete mode 100644 packages/dev-tools-pages/ts/pages/Base.tsx diff --git a/packages/dev-tools-pages/.gitignore b/packages/dev-tools-pages/.gitignore index 6446c8579..9e9db7dae 100644 --- a/packages/dev-tools-pages/.gitignore +++ b/packages/dev-tools-pages/.gitignore @@ -1 +1,2 @@ -/public/fonts \ No newline at end of file +public +assets/fonts \ No newline at end of file diff --git a/packages/dev-tools-pages/assets/crawl.html b/packages/dev-tools-pages/assets/crawl.html new file mode 100644 index 000000000..9135c3ede --- /dev/null +++ b/packages/dev-tools-pages/assets/crawl.html @@ -0,0 +1,20 @@ + + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/packages/dev-tools-pages/assets/favicons/compiler.ico b/packages/dev-tools-pages/assets/favicons/compiler.ico new file mode 100644 index 000000000..e43c5fc8a Binary files /dev/null and b/packages/dev-tools-pages/assets/favicons/compiler.ico differ diff --git a/packages/dev-tools-pages/assets/favicons/cov.ico b/packages/dev-tools-pages/assets/favicons/cov.ico new file mode 100644 index 000000000..4f1172186 Binary files /dev/null and b/packages/dev-tools-pages/assets/favicons/cov.ico differ diff --git a/packages/dev-tools-pages/assets/favicons/profiler.ico b/packages/dev-tools-pages/assets/favicons/profiler.ico new file mode 100644 index 000000000..65d38812b Binary files /dev/null and b/packages/dev-tools-pages/assets/favicons/profiler.ico differ diff --git a/packages/dev-tools-pages/assets/favicons/trace.ico b/packages/dev-tools-pages/assets/favicons/trace.ico new file mode 100644 index 000000000..af00455d4 Binary files /dev/null and b/packages/dev-tools-pages/assets/favicons/trace.ico differ diff --git a/packages/dev-tools-pages/assets/index.html b/packages/dev-tools-pages/assets/index.html new file mode 100644 index 000000000..5ab1a45f1 --- /dev/null +++ b/packages/dev-tools-pages/assets/index.html @@ -0,0 +1,14 @@ + + + + + + + + + <%= htmlWebpackPlugin.options.title %> + + +
+ + \ No newline at end of file diff --git a/packages/dev-tools-pages/package.json b/packages/dev-tools-pages/package.json index 8fb4bed7b..eb34e3715 100644 --- a/packages/dev-tools-pages/package.json +++ b/packages/dev-tools-pages/package.json @@ -7,7 +7,7 @@ "private": true, "description": "0x Dev tools pages", "scripts": { - "build": "node --max_old_space_size=8192 ../../node_modules/.bin/webpack --mode production", + "build": "node --max_old_space_size=8192 ../../node_modules/.bin/webpack --mode production && react-snap", "build:ci": "yarn build", "build:dev": "../../node_modules/.bin/webpack --mode development", "clean": "shx rm -f public/bundle*", @@ -28,7 +28,7 @@ "styled-normalize": "^8.0.1" }, "devDependencies": { - "@reach/router": "^1.2.1", + "@types/highlight.js": "^9.12.3", "@types/lodash": "4.14.104", "@types/node": "*", "@types/reach__router": "^1.2.0", @@ -40,11 +40,15 @@ "@types/react-tap-event-plugin": "0.0.30", "@types/styled-components": "^4.0.1", "awesome-typescript-loader": "^5.2.1", + "clean-webpack-plugin": "^0.1.19", + "copy-webpack-plugin": "^4.5.4", "copyfiles": "^2.0.0", "css-loader": "0.23.x", + "html-webpack-plugin": "^3.2.0", "less-loader": "^4.1.0", "make-promises-safe": "^1.1.0", "raw-loader": "^0.5.1", + "react-snap": "^1.19.0", "react-svg-loader": "^2.1.0", "shx": "^0.2.2", "source-map-loader": "^0.2.4", @@ -55,7 +59,11 @@ "typescript": "3.0.1", "uglifyjs-webpack-plugin": "^2.0.1", "webpack": "^4.20.2", + "webpack-bundle-analyzer": "^3.0.3", "webpack-cli": "3.1.2", "webpack-dev-server": "^3.1.9" + }, + "reactSnap": { + "source": "public" } } diff --git a/packages/dev-tools-pages/pages.js b/packages/dev-tools-pages/pages.js new file mode 100644 index 000000000..581904068 --- /dev/null +++ b/packages/dev-tools-pages/pages.js @@ -0,0 +1,72 @@ +const pages = [ + { + title: 'sol-compiler', + filename: 'compiler/index.html', + template: 'assets/index.html', + chunks: ['compiler'], + favicon: 'assets/favicons/compiler.ico', + minify: true, + meta: { + description: 'Solidity compilation that just works', + 'og-title': { property: 'og:title', content: 'sol-compiler' }, + 'og-description': { property: 'og:description', content: 'Solidity compilation that just works' }, + 'og-type': { property: 'og:type', content: 'website' }, + 'og-image': { property: 'og:image', content: '' }, + 'twitter:site': '@0xproject', + 'twitter:image': '', + }, + }, + { + title: 'sol-cov', + filename: 'cov/index.html', + template: 'assets/index.html', + chunks: ['cov'], + favicon: 'assets/favicons/cov.ico', + minify: true, + meta: { + description: 'Solidity code coverage', + 'og-title': { property: 'og:title', content: 'sol-cov' }, + 'og-description': { property: 'og:description', content: 'Solidity code coverage' }, + 'og-type': { property: 'og:type', content: 'website' }, + 'og-image': { property: 'og:image', content: '' }, + 'twitter:site': '@0xproject', + 'twitter:image': '', + }, + }, + { + title: 'sol-profiler', + filename: 'profiler/index.html', + template: 'assets/index.html', + chunks: ['profiler'], + favicon: 'assets/favicons/profiler.ico', + minify: true, + meta: { + description: 'Gas profiling for Solidity', + 'og-title': { property: 'og:title', content: 'sol-profiler' }, + 'og-description': { property: 'og:description', content: 'Gas profiling for Solidity' }, + 'og-type': { property: 'og:type', content: 'website' }, + 'og-image': { property: 'og:image', content: '' }, + 'twitter:site': '@0xproject', + 'twitter:image': '', + }, + }, + { + title: 'sol-trace', + filename: 'trace/index.html', + template: 'assets/index.html', + chunks: ['trace'], + favicon: 'assets/favicons/trace.ico', + minify: true, + meta: { + description: 'Human-readable stack traces', + 'og-title': { property: 'og:title', content: 'sol-trace' }, + 'og-description': { property: 'og:description', content: 'Human-readable stack traces' }, + 'og-type': { property: 'og:type', content: 'website' }, + 'og-image': { property: 'og:image', content: '' }, + 'twitter:site': '@0xproject', + 'twitter:image': '', + }, + }, +]; + +module.exports = pages; diff --git a/packages/dev-tools-pages/public/favicons/compiler.ico b/packages/dev-tools-pages/public/favicons/compiler.ico deleted file mode 100644 index e43c5fc8a..000000000 Binary files a/packages/dev-tools-pages/public/favicons/compiler.ico and /dev/null differ diff --git a/packages/dev-tools-pages/public/favicons/cov.ico b/packages/dev-tools-pages/public/favicons/cov.ico deleted file mode 100644 index 4f1172186..000000000 Binary files a/packages/dev-tools-pages/public/favicons/cov.ico and /dev/null differ diff --git a/packages/dev-tools-pages/public/favicons/profiler.ico b/packages/dev-tools-pages/public/favicons/profiler.ico deleted file mode 100644 index 65d38812b..000000000 Binary files a/packages/dev-tools-pages/public/favicons/profiler.ico and /dev/null differ diff --git a/packages/dev-tools-pages/public/favicons/trace.ico b/packages/dev-tools-pages/public/favicons/trace.ico deleted file mode 100644 index af00455d4..000000000 Binary files a/packages/dev-tools-pages/public/favicons/trace.ico and /dev/null differ diff --git a/packages/dev-tools-pages/public/index.html b/packages/dev-tools-pages/public/index.html deleted file mode 100644 index f8131aece..000000000 --- a/packages/dev-tools-pages/public/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - 0x: The Protocol for Trading Tokens - - - -
- - - - \ No newline at end of file diff --git a/packages/dev-tools-pages/ts/components/Base.tsx b/packages/dev-tools-pages/ts/components/Base.tsx new file mode 100644 index 000000000..16e9560f0 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/Base.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; + +import ThemeContext from 'ts/context'; +import GlobalStyles from 'ts/globalStyles'; +import Header from 'ts/components/Header'; +import Hero from 'ts/components/Hero'; +import Footer from 'ts/components/Footer'; + +interface BaseProps { + context: any; + children: React.ReactNode; +} + +function Base(props: BaseProps) { + return ( + + +
+ + {props.children} +