code fontsize on small screens

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);