More styling changes for responsiveness

Author: kyleect

src/components/header.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 export default styled.div`
   background: #333;
   color: #fff;
-  margin-bottom: ${props => (props.fullscreen ? `0` : `3em`)};
+  margin-bottom: 0;
   text-align: center;
   padding: 1em;
   height: ${props => (props.fullscreen ? `100vh` : `inherit`)};
@@ -20,8 +20,11 @@ export default styled.div`
     margin-bottom: ${props => (props.fullscreen ? `.25em` : `0`)};
 
     @media (max-width: 800px) {
-      font-size: ${props => (props.fullscreen ? `3em` : `2.5em`)};
-      margin-bottom: 0;
+      font-size: ${props => (props.fullscreen ? `4em` : `2.5em`)};
+    }
+
+    @media (max-width: 400px) {
+      font-size: ${props => (props.fullscreen ? `4em` : `1.75em`)};
     }
   }
 

src/components/nav-menu.js

@@ -7,6 +7,13 @@ const NavMenuStyle = styled(InlineList)`
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
+  font-size: 1.3em;
+  margin: 0;
+  margin-top: 0.5em;
+
+  @media (max-width: 400px) {
+    font-size: 1em;
+  }
 `;
 
 export default function NavMenu({ children }) {