diff options
| -rw-r--r-- | packages/dev-tools-pages/ts/components/Code.tsx | 16 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/globalStyles.tsx | 122 |
2 files changed, 70 insertions, 68 deletions
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx index 72b3e1af7..63c9d369b 100644 --- a/packages/dev-tools-pages/ts/components/Code.tsx +++ b/packages/dev-tools-pages/ts/components/Code.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import styled from 'styled-components'; -import { colors } from '../variables'; +import { colors } from '../variables'; import BaseButton from './Button'; interface CodeProps { @@ -26,13 +26,13 @@ const Base = styled.div < CodeProps > ` - 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} { - opacity: 1; - } + 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} { + opacity: 1; + } `; const StyledCode = styled.code` diff --git a/packages/dev-tools-pages/ts/globalStyles.tsx b/packages/dev-tools-pages/ts/globalStyles.tsx index 13ecde7aa..f51ea4b1d 100644 --- a/packages/dev-tools-pages/ts/globalStyles.tsx +++ b/packages/dev-tools-pages/ts/globalStyles.tsx @@ -6,75 +6,77 @@ import hljsStyles from 'highlight.js/styles/github-gist.css'; import { withContext } from 'ts/components/withContext'; const BaseStyles = createGlobalStyle` - ${styledNormalize} - ${hljsStyles} + ${styledNormalize} + ${hljsStyles} - @font-face { - font-family: "Maison Neue"; - src: url("/fonts/MaisonNeue-Book-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Book-subset.woff") format("woff"); - font-weight: 300; - font-display: swap; - unicode-range: U+20-7E; - } - @font-face { - font-family: "Maison Neue"; - src: url("/fonts/MaisonNeue-Bold-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Bold-subset.woff") format("woff"); - font-weight: 500; - font-display: swap; - unicode-range: U+20-7E; - } - @font-face { - font-family: "Maison Neue Mono"; - src: url("/fonts/MaisonNeue-Mono-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Mono-subset.woff") format("woff"); - font-weight: 300; - font-display: optional; - unicode-range: U+20-7E; - } - - html { - font-size: 100%; - box-sizing: border-box; - } - - *, *::before, *::after { - box-sizing: inherit; - } - - body { - font-family: "Maison Neue", system-ui, sans-serif; - font-weight: 300; - font-size: 1rem; - line-height: 1.8; + @font-face { + font-family: "Maison Neue"; + src: url("/fonts/MaisonNeue-Book-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Book-subset.woff") format("woff"); + font-weight: 300; + font-display: swap; + unicode-range: U+20-7E; + } + @font-face { + font-family: "Maison Neue"; + src: url("/fonts/MaisonNeue-Bold-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Bold-subset.woff") format("woff"); + font-weight: 500; + font-display: swap; + unicode-range: U+20-7E; + } + @font-face { + font-family: "Maison Neue Mono"; + src: url("/fonts/MaisonNeue-Mono-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Mono-subset.woff") format("woff"); + font-weight: 300; + font-display: optional; + unicode-range: U+20-7E; + } - ${media.small`font-size: 0.875rem;`}; + html { + font-size: 100%; + box-sizing: border-box; + } + + *, *::before, *::after { + box-sizing: inherit; + } + + body { + font-family: "Maison Neue", system-ui, sans-serif; + font-weight: 300; + font-size: 1rem; + line-height: 1.8; - } + ${media.small`font-size: 0.875rem;`}; + } - a { - color: ${(props: any) => props.colors.link}; - text-decoration: none; + a { + color: ${(props: any) => props.colors.link}; + text-decoration: none; - &:hover { - color: red; //what should this be? + &:hover { + color: red; //what should this be? + } + } + + h1, h2, h3, h4 { + font-weight: 500; + margin: 0; } - } - - h1, h2, h3, h4 { - font-weight: 500; - margin: 0; - } - p { - margin-top: 0; - margin-bottom: 1em; - &:not([class]):last-of-type { - margin-bottom: 0; + p { + margin-top: 0; + margin-bottom: 1em; + &:not([class]):last-of-type { + margin-bottom: 0; + } } - } - code { - font-family: "Maison Neue Mono", monospace; - } + code { + font-family: "Maison Neue Mono", monospace; + ${media.small` + font-size: .75rem; + `} + } `; export default withContext(BaseStyles); |