Merge pull request #2070 from FormidableLabs/docs/fix-feature-typography

Fix font stack and correct margins in docs

Author: Becca Bailey

docs/src/partials/home/features.js

@@ -28,18 +28,21 @@ const FeaturesList = styled.ul`
   grid-template-columns: 1fr;
   grid-auto-rows: auto;
   grid-gap: 4rem;
-  margin: 6rem 0;
+  margin: 3rem 0;
+  padding: 2rem;
   @media ${({ theme }) => theme.mediaQuery.sm} {
     grid-template-columns: repeat(3, 1fr);
     grid-auto-rows: 1fr;
     grid-gap: 3rem;
+    margin: 6rem 0;
+    padding: 0;
   }
 `;
 
 const Feature = styled.li`
   justify-self: center;
   padding: 0;
-  width: 18.5rem;
+  width: 100%;
   @media ${({ theme }) => theme.mediaQuery.md} {
     width: 28rem;
   }
@@ -53,29 +56,29 @@ const FeatureImg = styled(LazyImage)`
 
 const FeatureTitle = styled.h3`
   color: ${({ theme }) => theme.color.darkBrown};
-  font-family: HelveticaNeue;
+  font-family: Helvetica Neue;
   font-size: 1.8rem;
   font-weight: bold;
   margin-top: 4rem;
   line-height: 0.96;
   text-align: center;
   @media ${({ theme }) => theme.mediaQuery.sm} {
-    margin-top: 3rem;
-    text-align: left;
+    margin-top: calc(2rem + 20px);
   }
   @media ${({ theme }) => theme.mediaQuery.md} {
-    font-size: 2.4rem;
+    font-size: 2rem;
   }
 `;
 
 const FeatureText = styled.p`
-  font-size: 1.4rem;
+  font-size: 1.5rem;
   line-height: 1.29;
+  text-align: center;
+  margin: 2.75rem 0 0;
   @media ${({ theme }) => theme.mediaQuery.sm} {
     line-height: 1.29;
   }
   @media ${({ theme }) => theme.mediaQuery.md} {
-    font-size: 2.4rem;
     line-height: 1.6;
   }
 `;

docs/src/partials/home/more-oss.js

@@ -84,7 +84,7 @@ const OSSLink = styled.a`
 `;
 
 const OSSTitle = styled.h3`
-  font-family: HelveticaNeue;
+  font-family: Helvetica Neue;
   font-size: 1.8rem;
   font-weight: bold;
   margin: 0;