From 9ad0b5d7e1afd3b547476abb2c26fc6e09812ea8 Mon Sep 17 00:00:00 2001
From: Eric Jinks <ericjinks@gmail.com>
Date: Fri, 1 Jun 2018 15:35:14 +1000
Subject: [PATCH] CSS updates

---
 src/components/Footer.css            | 13 +-----------
 src/components/Footer.js             |  6 ++----
 src/components/GithubCorner.css      |  6 ++++--
 src/components/Logo.css              |  1 -
 src/components/Nav.css               |  4 ++++
 src/components/PostCard.css          | 31 +++++++++++++++++++---------
 src/components/PostCategoriesNav.css |  2 +-
 src/components/PostSection.css       |  4 ++++
 src/components/PostSection.js        | 14 ++++++-------
 src/views/Contact.css                | 22 +++++++++++---------
 10 files changed, 56 insertions(+), 47 deletions(-)

diff --git a/src/components/Footer.css b/src/components/Footer.css
index f33dc74..3b60975 100644
--- a/src/components/Footer.css
+++ b/src/components/Footer.css
@@ -1,15 +1,4 @@
 .Footer {
   padding: 3rem 0;
-  background: var(--darkGrey);
-  color: white;
-}
-
-.Footer--Lower {
-  background: var(--darkGrey);
-  padding: 1rem 0;
-  font-weight: 100;
-}
-
-.Footer--Lower a {
-  color: inherit;
+  background: var(--lightGrey);
 }
diff --git a/src/components/Footer.js b/src/components/Footer.js
index af8e749..55a5fa6 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -4,10 +4,8 @@ import './Footer.css'
 
 export default ({ globalSettings, socialSettings, navLinks }) => (
   <footer className='Footer'>
-    <div className='Footer--Lower'>
-      <div className='container taCenter'>
-        <span>© 2017 All rights reserved.</span>
-      </div>
+    <div className='container taCenter'>
+      <span>© 2017 All rights reserved.</span>
     </div>
   </footer>
 )
diff --git a/src/components/GithubCorner.css b/src/components/GithubCorner.css
index c3e89aa..15ac354 100644
--- a/src/components/GithubCorner.css
+++ b/src/components/GithubCorner.css
@@ -7,8 +7,10 @@
 .GithubCorner svg {
   color: #fff;
   border: 0;
-  max-width: 12.5vmin;
-  max-height: 12.5vmin;
+  width: 12vmin;
+  height: 12vmin;
+  max-width: 6rem;
+  max-height: 6rem;
 }
 
 .GithubCorner .octo-arm {
diff --git a/src/components/Logo.css b/src/components/Logo.css
index 6ca7d06..cf6bcfe 100644
--- a/src/components/Logo.css
+++ b/src/components/Logo.css
@@ -5,7 +5,6 @@
   background-position: center;
   height: 2.5rem;
   width: 2.5rem;
-  margin-right: 1rem;
   align-items: center;
   justify-content: center;
 }
diff --git a/src/components/Nav.css b/src/components/Nav.css
index 96f12c7..c65dcdd 100644
--- a/src/components/Nav.css
+++ b/src/components/Nav.css
@@ -10,3 +10,7 @@
   align-items: center;
   height: 6rem;
 }
+
+.Nav .Logo {
+  margin-right: 3rem;
+}
diff --git a/src/components/PostCard.css b/src/components/PostCard.css
index 545ad71..b5920f0 100644
--- a/src/components/PostCard.css
+++ b/src/components/PostCard.css
@@ -1,7 +1,19 @@
 .PostCard {
   text-decoration: none;
-  margin: 4rem 2rem;
+  margin: 2rem;
   background: white;
+  color: inherit;
+  border: 1px solid var(--lightGrey);
+  border-radius: var(--borderRadius);
+  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
+  transition: all 0.15s ease-in-out;
+  overflow: hidden;
+}
+
+.PostCard:hover,
+.PostCard:focus {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.15);
 }
 
 .PostCard--Image {
@@ -10,16 +22,15 @@
   height: 15rem;
 }
 
+.PostCard--Title {
+  margin: 0;
+}
+
+.PostCard--Content {
+  padding: 0 2.5rem 2.5rem;
+}
+
 .PostCard--Category {
   font-size: 1rem;
   text-align: right;
 }
-
-.PostCard--Content {
-  margin: 0 auto;
-  width: 90%;
-}
-
-.PostCard--Title {
-  margin: 2rem 0;
-}
diff --git a/src/components/PostCategoriesNav.css b/src/components/PostCategoriesNav.css
index 86580ae..a9ac3a6 100644
--- a/src/components/PostCategoriesNav.css
+++ b/src/components/PostCategoriesNav.css
@@ -1,5 +1,5 @@
 .PostCategoriesNav {
-  margin: 4rem 0;
+  margin: 2rem 0;
   display: flex;
   align-items: center;
   justify-content: flex-start;
diff --git a/src/components/PostSection.css b/src/components/PostSection.css
index ff1f1eb..20e3674 100644
--- a/src/components/PostSection.css
+++ b/src/components/PostSection.css
@@ -1,3 +1,6 @@
+.PostSection {
+  padding: 2rem 0;
+}
 .PostSection .PostCard {
   width: calc(33.33% - 4rem);
 }
@@ -7,6 +10,7 @@
   align-items: flex-start;
   justify-content: center;
   flex-wrap: wrap;
+  align-items: stretch;
 }
 
 @supports (display: grid) {
diff --git a/src/components/PostSection.js b/src/components/PostSection.js
index b082323..380b1d1 100644
--- a/src/components/PostSection.js
+++ b/src/components/PostSection.js
@@ -34,7 +34,7 @@ class PostSection extends React.Component {
       .slice(0, limit || posts.length)
 
     return (
-      <div className='section thin PostSection'>
+      <div className='PostSection'>
         <div className='container'>
           {title && <h2 className='PostSection--Title'>{title}</h2>}
           {!!visiblePosts.length && (
@@ -46,12 +46,12 @@ class PostSection extends React.Component {
           )}
           {showLoadMore &&
             visiblePosts.length < posts.length && (
-              <div className='taCenter'>
-                <button className='button' onClick={this.increaseLimit}>
-                  {loadMoreTitle}
-                </button>
-              </div>
-            )}
+            <div className='taCenter'>
+              <button className='button' onClick={this.increaseLimit}>
+                {loadMoreTitle}
+              </button>
+            </div>
+          )}
         </div>
       </div>
     )
diff --git a/src/views/Contact.css b/src/views/Contact.css
index 0b2659c..fc57605 100644
--- a/src/views/Contact.css
+++ b/src/views/Contact.css
@@ -1,16 +1,6 @@
 .Contact {
 }
 
-.Contact--Section1--Container {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-}
-
-.Contact--Section1--Container > * {
-  width: calc(50% - 2rem);
-}
-
 .Contact--Details {
   margin-top: 3rem;
 }
@@ -34,3 +24,15 @@
   margin-right: 1.5rem;
   color: var(--primary);
 }
+
+@media (min-width: 750px) {
+  .Contact--Section1--Container {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+
+  .Contact--Section1--Container > * {
+    width: calc(50% - 2rem);
+  }
+}