Tweak styling of homepage styles

Author: CompuIves

packages/homepage/src/components/PostElements.js

@@ -8,8 +8,9 @@ export const Container = styled.div`
 export const Title = styled.h2`
   font-family: 'Poppins', sans-serif;
   font-weight: 600;
-  font-size: 1.5rem;
+  font-size: 1.25rem;
   line-height: 1.2;
+  margin-bottom: 1rem;
 
   color: #f2f2f2;
 `;
@@ -20,6 +21,7 @@ export const PostDate = styled.span`
   font-size: 14px;
   color: #b8b9ba;
   display: block;
+  margin-bottom: 0.5rem;
 `;
 
 export const AuthorImage = styled.img`

packages/homepage/src/pages/_blog.elements.js

@@ -14,8 +14,8 @@ export const Posts = styled.article`
 `;
 
 export const Subtitle = styled.h3`
-  font-family: 'Poppins', sans-serif;
-  font-weight: 300;
+  font-family: 'Open Sans', sans-serif;
+  font-weight: 500;
   font-size: 16px;
   line-height: 1.5;
 
@@ -98,8 +98,9 @@ export const PageTitle = styled.h1`
 `;
 
 export const PageSubtitle = styled.h2`
-  font-family: 'Poppins', sans-serif;
-  font-weight: 500;
+  font-family: 'Open Sans', sans-serif;
+  font-weight: 600;
   font-size: 18px;
   line-height: 1.5;
+  margin-bottom: 0;
 `;

packages/homepage/src/templates/_post.elements.js

@@ -7,7 +7,7 @@ export const mainStyle = css`
   line-height: 1.7;
 
   font-weight: 500;
-  font-size: 16px;
+  font-size: 18px;
 
   color: rgba(255, 255, 255, 0.9);
 
@@ -17,8 +17,14 @@ export const mainStyle = css`
   h4,
   h5,
   h6 {
-    font-family: 'Poppins', sans-serif;
     color: white;
+    font-weight: 800;
+  }
+
+  h1,
+  h2,
+  h3 {
+    font-family: 'Poppins', sans-serif;
   }
 
   h2 {
@@ -36,7 +42,7 @@ export const mainStyle = css`
     margin-top: 2rem;
     margin-bottom: 0.5rem;
     font-size: 20px;
-    font-weight: 400;
+    font-weight: 600;
   }
 
   p {
@@ -47,6 +53,7 @@ export const mainStyle = css`
   p,
   li {
     font-family: 'Open Sans', sans-serif;
+    color: rgba(255, 255, 255, 0.8);
   }
 
   img {
@@ -58,6 +65,10 @@ export const mainStyle = css`
     text-align: center;
     color: rgba(255, 255, 255, 0.6);
   }
+
+  a {
+    color: ${props => props.theme.shySecondary};
+  }
 `;
 
 export const Image = styled.img`