diff options
Diffstat (limited to 'packages/dev-tools-pages/ts/globalStyles.tsx')
-rw-r--r-- | packages/dev-tools-pages/ts/globalStyles.tsx | 122 |
1 files changed, 62 insertions, 60 deletions
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); |