aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts/globalStyles.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/dev-tools-pages/ts/globalStyles.tsx')
-rw-r--r--packages/dev-tools-pages/ts/globalStyles.tsx90
1 files changed, 90 insertions, 0 deletions
diff --git a/packages/dev-tools-pages/ts/globalStyles.tsx b/packages/dev-tools-pages/ts/globalStyles.tsx
new file mode 100644
index 000000000..a77fb4eef
--- /dev/null
+++ b/packages/dev-tools-pages/ts/globalStyles.tsx
@@ -0,0 +1,90 @@
+import hljsStyles from 'highlight.js/styles/github-gist.css';
+import { createGlobalStyle } from 'styled-components';
+import styledNormalize from 'styled-normalize';
+
+import { ContextInterface } from 'ts/context';
+import { media } from 'ts/variables';
+
+const GlobalStyles =
+ createGlobalStyle <
+ ContextInterface >
+ `
+ ${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;
+
+ ${media.small`font-size: 0.875rem;`};
+ }
+
+ a {
+ color: inherit;
+ text-decoration: none;
+ }
+
+ a:not([class]) {
+ color: ${props => props.colors.type_alt};
+ text-decoration: none;
+
+ &:hover {
+ color: ${props => props.colors.type_alt};
+ }
+ }
+
+ h1, h2, h3, h4 {
+ font-weight: 500;
+ margin: 0;
+ }
+
+ p {
+ margin-top: 0;
+ margin-bottom: 1em;
+ &:not([class]):last-of-type {
+ margin-bottom: 0;
+ }
+ }
+
+ code {
+ font-family: "Maison Neue Mono", monospace;
+ ${media.small`
+ font-size: .75rem;
+ `}
+ }
+`;
+
+export { GlobalStyles };