Merge pull request #15 from brianlovin/more-changes

Last polish

components/BottomShare/index.js

@@ -6,7 +6,7 @@ import { CardContent, TopBorder } from './style';
 import { SmallHeading, SmallSubheading } from '../Page/style';
 
 const BottomShare = () => (
-  <Card style={{ width: '100%' }}>
+  <Card style={{ width: '100%', marginTop: '48px' }}>
     <TopBorder />
     <CardContent>
       <SmallHeading>Feeling more secure?</SmallHeading>

components/ChecklistItem/style.js

@@ -272,6 +272,19 @@ export const ResourceRowContainer = styled.a`
   width: calc(100% + 8px);
   line-height: 1.3;
 
+  &:first-of-type {
+    margin-top: 8px;
+  }
+
+  .icon {
+    margin-right: 8px;
+  }
+
+  &:hover {
+    background: ${theme.bg.wash};
+    color: ${theme.text.default};
+  }
+
   @media (max-width: 768px) {
     width: calc(100% + 40px);
     border-radius: 0;
@@ -284,22 +297,11 @@ export const ResourceRowContainer = styled.a`
     }
 
     .icon {
-      margin-top: 2px;
+      margin-top: 1px;
+      margin-left: 6px;
+      margin-right: 18px !important;
     }
   }
-
-  &:first-of-type {
-    margin-top: 8px;
-  }
-
-  .icon {
-    margin-right: 8px;
-  }
-
-  &:hover {
-    background: ${theme.bg.wash};
-    color: ${theme.text.default};
-  }
 `;
 
 export const ResourceName = styled.p`

components/ShareButtons/style.js

@@ -11,7 +11,7 @@ export const Container = styled.div`
     width: 100%;
   }
 
-  @media (max-width: 440px) {
+  @media (max-width: 568px) {
     grid-template-columns: 1fr;
     grid-gap: 0;