refactor(design): redesign the blog

components/article-preview.vue

@@ -5,8 +5,8 @@
       :srcset="`${post.fields.heroImage.fields.file.url}?w=350&h=196&fit=fill 350w, ${post.fields.heroImage.fields.file.url}?w=1000&h=562&fit=fill 1000w, ${post.fields.heroImage.fields.file.url}?w=2000&h=1125&fit=fill 2000w`"
       sizes="(min-width: 1024px) 400px, 100vw"
     >
-    <time>{{ ( new Date(post.fields.publishDate)).toDateString() }}</time>
-    <h4><nuxt-link :to="{ name: 'blog-slug', params: { slug: post.fields.slug }}">{{ post.fields.title }}</nuxt-link></h4>
+    <time class="tiny date">{{ ( new Date(post.fields.publishDate)).toDateString() }}</time>
+    <h4><nuxt-link :to="{ name: 'blog-slug', params: { slug: post.fields.slug }}" class="title">{{ post.fields.title }}</nuxt-link></h4>
     <p>{{ post.fields.description }}</p>
 
     <div class="tags">
@@ -24,3 +24,44 @@ export default {
   components: {}
 }
 </script>
+
+<style>
+
+.thumbnail {
+  margin-bottom: 1em;
+}
+
+.date {
+}
+
+.title {
+  text-decoration: none;
+  font-size: 22px;
+  color: #373F49;
+}
+
+.tags {
+  padding : 1em 0;
+  margin-bottom: 2em;
+}
+
+.tag:link,
+.tag:visited {
+  color: #A0A0A0;
+  text-decoration: none;
+  display: inline-block;
+  padding: .33333rem .5rem;
+  line-height: 1;
+  border-radius: 2px;
+  border: 1px solid #A0A0A0;
+  margin-right: .5em;
+}
+
+.tag:active,
+.tag:hover,
+.tag:focus {
+  color: #606060;
+  border-color: #606060;
+}
+
+</style>

components/greeting.vue

@@ -0,0 +1,69 @@
+<template>
+
+  <!-- Greeting section -->
+  <section class="greeting">
+    <div class="message wrapper">
+      <p>
+        There you go! You just set up a Contentful account and a custom app. Now go ahead and <a href="https://app.contentful.com/" target="_blank">try the Web App</a> or head over to the <a href="http://contentful.com/developers/docs" target="_blank">Documentation</a> to learn more about building with Contentful. If you want to remove this message, delete line <code>3</code> in <code>layouts/default.vue</code>.
+      </p>
+      <a href="https://app.contentful.com/" target="_blank" class="cta">Try the Web App</a>
+    </div>
+  </section>
+
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style>
+
+  .greeting {
+    background: #fff;
+    border: 1px solid #489CF1;
+    margin: 2em 0;
+  }
+
+  .message {
+    overflow: hidden;
+    padding: 3em 0;
+  }
+
+  .message p {
+    margin-bottom: 2em;
+  }
+
+  code {
+    border-radius: 3px;
+    background: #E1E7EA;
+    padding: 3px 5px;
+  }
+
+  @media all and (min-width: 900px) {
+    .message p {
+      float: left;
+      max-width: 70%;
+      margin-bottom: 0;
+    }
+  }
+
+
+  .message .cta {
+    font-size: inherit;
+    background: #489CF1;
+    border: 0;
+    border-radius: 3px;
+    color: #fff;
+    padding: 1em 2em;
+    text-decoration: none;
+  }
+
+  @media all and (min-width: 900px) {
+    .message .cta {
+      float: right;
+      max-width: 20%;
+    }
+  }
+
+</style>

components/navigation.vue

@@ -1,13 +1,10 @@
 <template>
-  <nav role="navigation" class="top-bar">
-    <div class="top-bar-left">
-      <ul class="menu">
-        <li class="menu-text">Contentful Blog in 5 min</li>
-        <li v-if="!/\/.*?\/.*/.test(route.path)" v-for="route in this.$router.options.routes">
-          <nuxt-link :to=" { name: route.name }">{{ route.name.charAt(0).toUpperCase() + route.name.slice(1) }}</nuxt-link>
-        </li>
-      </ul>
-    </div>
+  <nav role="navigation" class="top-nav">
+    <ul class="menu">
+      <li v-if="!/\/.*?\/.*/.test(route.path)" v-for="route in this.$router.options.routes">
+        <nuxt-link :to=" { name: route.name }">{{ route.name.charAt(0).toUpperCase() + route.name.slice(1) }}</nuxt-link>
+      </li>
+    </ul>
   </nav>
 </template>
 
@@ -16,3 +13,37 @@ export default {
   components: {}
 }
 </script>
+
+<style>
+
+  .person-name:link,
+  .person-name:visited {
+    width: 50%;
+    display: inline-block;
+    font-size: 2em;
+    text-decoration: none;
+    color: #373F49;
+  }
+
+  .top-nav {
+    width: 50%;
+    display: inline-block;
+    text-align: right;
+  }
+
+  .menu {
+    display: inline-block;
+  }
+
+  .menu li {
+    display: inline-block;
+    margin-left: 1em;
+  }
+
+  .menu a:link,
+  .menu a:visited {
+    color: #373F49;
+    text-decoration: none;
+  }
+
+</style>

layouts/default.vue

@@ -1,11 +1,111 @@
 <template>
   <div class="container">
+    <Greeting></Greeting>
     <main role="main">
       <nuxt/>
     </main>
   </div>
 </template>
 
+<script>
+  import Greeting from '~components/greeting.vue'
+
+  export default {
+    components: {
+      Greeting
+    }
+  }
+</script>
+
 <style>
+  @font-face {
+    font-family: "Avenir";
+    font-weight: 400;
+    font-style: normal;
+    src: url("/avenir-400.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  body {
+    background: #E1E7EA;
+    max-width: 1280px;
+    margin: 0 auto;
+    font-family: "Avenir", Tahoma, Arial, Helvetica, sans-serif;
+    font-size: 16px;
+    line-height: 1.65;
+    color: #373F49;
+  }
+
+  .wrapper {
+    padding: 2em 0;
+    max-width: 80%;
+    margin: 0 auto;
+  }
+
+  .header {
+    background: #F7F9FA;
+  }
+
+  .page-bar {
+    max-width: 100%;
+    padding: 2em 10%;
+  }
+
+  .blog.header h2,
+  .tag-page.header h2 {
+    text-align: center;
+    padding: 2.5em 0;
+    color: #A0A0A0;
+  }
+
+  img {
+    display: block;
+    width: 100%;
+  }
+
+  h1,
+  h2,
+  h3 {
+    font-size: 2em;
+  }
+
+  /* Copy section */
+  .body-container {
+    background: #ffffff;
+  }
+
+  .items-list {
+    overflow: hidden;
+  }
+
+  .item {
+    padding: 1em 3em 1em 0;
+  }
+
+  @media all and (min-width: 600px) {
+    .item {
+      float: left;
+      width: 50%;
+    }
+  }
+
+  @media all and (min-width: 900px) {
+    .item {
+      width: 33.333%;
+    }
+  }
+
+  /* Shared */
+
+  .tiny {
+    text-transform: uppercase;
+    font-size: 10px;
+    letter-spacing: 1px;
+    color: #A0A0A0;
+  }
+
+  *[class*="-bar"] {
+    border-bottom: 1px solid #EBEBEB;
+  }
 
 </style>

nuxt.config.js

@@ -7,15 +7,15 @@ const config = {
   ** Headers of the page
   */
   head: {
-    title: 'starter',
+    title: 'Custom app with Contentful',
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: 'Create a Contentful blog in 5 minutes' }
+      { hid: 'description', name: 'description', content: 'Custom app in under 5 minutes' }
     ],
     link: [
-      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
-      { rel: 'stylesheet', href: 'https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css' }
+      { rel: 'icon', type: 'image/x-icon', href: '/favicon.png' },
+      { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/minireset.css/0.0.2/minireset.min.css' }
     ]
   },
   /*
@@ -38,7 +38,13 @@ const config = {
           exclude: /(node_modules)/
         })
       }
-    }
+    },
+
+    postcss: [
+      require('autoprefixer')({
+        browsers: ['> 5%']
+      })
+    ]
   },
 
   /*

package.json

@@ -23,6 +23,7 @@
   "devDependencies": {
     "babel-eslint": "^7.1.1",
     "contentful-import": "^4.4.3",
+    "cz-conventional-changelog": "^2.0.0",
     "eslint": "^3.15.0",
     "eslint-config-standard": "^6.2.1",
     "eslint-loader": "^1.6.1",
@@ -32,5 +33,10 @@
     "gh-pages": "^1.0.0",
     "git-clone": "^0.1.0",
     "now": "^5.3.0"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
   }
 }