More styling changes for responsiveness

Author: kyleect

src/components/header.js

@@ -20,15 +20,19 @@ export default styled.div`
     margin-bottom: ${props => (props.fullscreen ? `.25em` : `0`)};
 
     @media (max-width: 800px) {
-      font-size: ${props => (props.fullscreen ? `4em` : `2.5em`)};
+      font-size: ${props => (props.fullscreen ? `4em` : `3em`)};
     }
 
-    @media (max-width: 400px) {
-      font-size: ${props => (props.fullscreen ? `4em` : `1.75em`)};
+    @media (max-width: 650px) {
+      font-size: ${props => (props.fullscreen ? `2em` : `2.5em`)};
+    }
+
+    @media (max-width: 650px) {
+      font-size: ${props => (props.fullscreen ? `2em` : `2.5em`)};
     }
-  }
 
-  @media (max-width: 800px) {
-    margin-bottom: 1em;
+    @media (max-width: 400px) {
+      font-size: ${props => (props.fullscreen ? `1.75em` : `1.75em`)};
+    }
   }
 `;

src/pages/about.js

@@ -45,9 +45,9 @@ const Picture = styled.img`
     margin-top: 0;
     margin-left: 0;
 
-    width: 11em;
-    min-width: 11em;
-    height: 11em;
+    width: 9em;
+    min-width: 9em;
+    height: 9em;
   }
 `;