CSS updates

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);
 }

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>
 )

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 {

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;
 }

src/components/Nav.css

@@ -10,3 +10,7 @@
   align-items: center;
   height: 6rem;
 }
+
+.Nav .Logo {
+  margin-right: 3rem;
+}

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;
-}

src/components/PostCategoriesNav.css

@@ -1,5 +1,5 @@
 .PostCategoriesNav {
-  margin: 4rem 0;
+  margin: 2rem 0;
   display: flex;
   align-items: center;
   justify-content: flex-start;

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) {

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>
     )

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);
+  }
+}