responsive text sizing & more width break points

Author: Jeddf

Diff for: package-lock.json

@@ -11,9 +11,9 @@ const Footer = () => (
       }
     }) => (
       <Row>
-        <h5>
+        <footer>
           Diff Ltd <Em>|</Em> {address} <Em>|</Em> #{companyNumber}
-        </h5>
+        </footer>
       </Row>
     )}
   />

Diff for: src/components/footer.js

@@ -5,3 +5,27 @@ body {
   margin: 0;
   background: lavender;
 }
+
+footer {
+  font-size: 0.8rem;
+  font-weight: bold;
+  margin: 1.67rem;
+}
+
+@media (max-width: 600px) {
+  html {
+    font-size: 14px;
+  }
+}
+
+@media (max-width: 430px) {
+  html {
+    font-size: 11px;
+  }
+}
+
+@media (max-width: 319px) {
+  html {
+    font-size: 8px;
+  }
+}

Diff for: src/components/layout.css

@@ -22,9 +22,9 @@ const Index = () => (
           <Content>
             <h1 style={{ marginTop: 0, marginBottom: "0.4rem" }}>{header}</h1>
             <h2 style={{ marginTop: 0, marginBottom: "0.8rem" }}>{byline}</h2>
-            <strong>
+            <h3 style={{ marginTop: 0, marginBottom: "0.4rem" }}>
               <a href={`mailto:${contactEmail}`}>{contactEmail}</a>
-            </strong>
+            </h3>
           </Content>
         </Row>
       </Layout>
@@ -64,13 +64,13 @@ const Row = styled.div`
 
 const FluidImg = styled.img`
   width: 550px;
-  @media (max-width: 800px) {
-    width: 500px;
-  }
   @media (max-width: 600px) {
-    width: 450px;
+    width: 350px;
+  }
+  @media (max-width: 430px) {
+    width: 300px;
   }
-  @media (max-width: 400px) {
+  @media (max-width: 319px) {
     width: 250px;
   }
 `;