small CSS tweaks

packages/base-components/lib/common/Footer.jsx

@@ -1,6 +1,6 @@
 const Footer = props => {
   return (
-    <div><a href="http://telescopeapp.org" target="_blank">Powered By Telescope</a></div>
+    <div className="footer"><a href="http://telescopeapp.org" target="_blank">Powered By Telescope</a></div>
   )
 }
 

packages/base-components/lib/posts/list/LoadMore.jsx

@@ -1,3 +1,3 @@
-const LoadMore = ({loadMore, count, totalCount}) => <a href="#" className="load-more button button--primary" onClick={loadMore}>Load More ({count}/{totalCount})</a>
+const LoadMore = ({loadMore, count, totalCount}) => <a href="#" className="post-load-more" onClick={loadMore}>Load More ({count}/{totalCount})</a>
 
 module.exports = LoadMore;

packages/base-styles/lib/stylesheets/_colors.scss

@@ -3,6 +3,7 @@ $blue: #0275d8;
 $white: #fff;
 $medium-grey: #bbb;
 $dark-grey: #666;
+$black: #333;
 
 $light-border: $light-grey;
 

packages/base-styles/lib/stylesheets/_common.scss

@@ -0,0 +1,3 @@
+.footer{
+  text-align: center;
+}

packages/base-styles/lib/stylesheets/_posts.scss

@@ -41,11 +41,12 @@
 }
 
 .post-title{
-  font-size: 1.5rem;
+  font-size: 1.35rem;
   margin-bottom: 5px;
   display: flex;
   align-items: center;
   .post-title-link{
+    color: $black;
     &, &:active, &:hover{
       text-decoration: none;
     }
@@ -113,4 +114,19 @@
   .user-avatar{
     margin-right: $hmargin;
   }
+}
+
+.post-load-more{
+  display: block;
+  text-align: center;
+  border: 1px solid $light-border;
+  border-radius: 3px;
+  font-size: 1.25rem;
+  padding: 10px 20px;
+  &:hover{
+    background: $blue;
+    color: $white;
+    border-color: $blue;
+    text-decoration: none;
+  }
 }

packages/base-styles/lib/stylesheets/main.scss

@@ -10,6 +10,7 @@
 
 body{
   background: #eee;
+  color: $black;
 }
 
 .wrapper{