aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/dev-tools-pages/ts')
-rw-r--r--packages/dev-tools-pages/ts/components/Code.tsx16
-rw-r--r--packages/dev-tools-pages/ts/globalStyles.tsx122
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);