styled load more button, close #1, update test

package.json

@@ -5,7 +5,7 @@
     "themeColor": "#2a2a2a"
   },
   "description": "In order to successfully develop and apply innovative technology you need to be able to look beyond the horizon, anticipating trends and recognizing the next standards.",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "main": "index.js",
   "repository": "git@github.com:bitrockteam/bitrock-website.git",
   "author": "Salvatore Laisa <moebiusmania@gmail.com>",

src/components/pages/home.js

@@ -99,12 +99,16 @@ export default class HomePage extends HTMLElement {
 
       <main class$="wrapper ${optimistic}">
         ${this.posts.map(e => posts(e))}
-        
-        ${this.more ? 
-          html`<button on-click=${this._loadMore.bind(this)}>
-            Load more
-          </button>` : ''}
       </main>
+
+      ${this.more ?
+        html`
+          <div class="load-more">
+            <button on-click=${this._loadMore.bind(this)}>
+              Load more
+            </button>
+          </div>
+          ` : ''}
     `;
 
     render(markup, this);

src/styles/mobile.scss

@@ -217,6 +217,30 @@ main{
   }
 }
 
+.load-more {
+  button {
+    display: block;
+    font-size: 16px;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    color: #ffffff; /* $white */
+    background: #e74e0f; /* $basic01 */
+    padding: 12px 40px;
+    border-radius: 24px;
+    cursor: pointer;
+    transition: all 250ms ease;
+    text-decoration: none;
+    margin: 0 auto;
+    text-align: center;
+    outline: none;
+    margin-bottom: 40px;
+
+    &:hover {
+      background: #eb6608; 
+    }
+  }
+}
+
 .content{
   &.loading {
     @extend %optimistic;

test/consts.js

@@ -7,14 +7,14 @@ test('API base url', t => {
 
 test('PATHS properties & methods', t => {
   const id = 42;
-  const posts = 'posts?per_page=30&_embed=';
+  const posts = 'posts?per_page=12&_embed=';
   const post = `posts/${id}?_embed=`;
   const page = `pages/${id}?_embed=`;
 
   t.is(PATHS.tags, 'tags');
   t.is(PATHS.menu, 'menus/nav');
   t.is(PATHS.pages, 'pages');
-  t.true(PATHS.posts.indexOf(posts) > -1);
+  t.true(PATHS.posts().indexOf(posts) > -1);
   t.true(PATHS.post(id).indexOf(post) > -1);
   t.true(PATHS.page(id).indexOf(page) > -1);
 });