Merge pull request #9 from Yaty/dev

v1.0.2

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "A Vue.js project",
   "author": "Hugo Da Roit <[email protected]>",
-  "private": true,
+  "private": false,
   "scripts": {
     "dev": "node build/dev-server.js",
     "start": "node build/dev-server.js",
@@ -19,7 +19,7 @@
     "vue": "^2.3.3",
     "vue-i18n": "^7.2.0",
     "vue-lazyload": "^1.1.3",
-    "vue-scrollto": "^2.7.7"
+    "vue-scrollto": "^2.7.8"
   },
   "devDependencies": {
     "@kazupon/vue-i18n-loader": "^0.2.1",

src/components/Opensource.vue

@@ -1,26 +1,19 @@
 <template>
   <container id="opensource">
     <h2 class="title">{{ $t('opensource') }}</h2>
-    <div class="columns is-centered">
-      <div class="column is-narrow">
-        <a class="image is-128x128" aria-label="Buefy" rel="noopener" href="https://github.com/rafaelpimpa/buefy" target="_blank">
-          <img aria-label="Buefy" v-lazy="buefy"/>
-        </a>
-      </div>
+    <div class="columns is-centered is-8 is-variable">
+      <image-column label="Buefy" link="https://github.com/rafaelpimpa/buefy" img="/static/img/buefy.png"></image-column>
+      <image-column label="Vue" link="https://github.com/vuejs/vue" img="/static/img/vue.svg"></image-column>
     </div>
   </container>
 </template>
 
 <script>
   import Container from './layout/Container.vue'
+  import ImageColumn from './layout/ImageColumn.vue'
 
   export default {
     name: 'opensource',
-    components: { Container },
-    data () {
-      return {
-        buefy: '/static/img/buefy.png'
-      }
-    }
+    components: { Container, ImageColumn }
   }
 </script>

src/components/layout/ImageColumn.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="column is-narrow">
+    <a :aria-label="label" rel="noopener" :href="link" target="_blank">
+      <img :aria-label="label" v-lazy="img"/>
+    </a>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'imagecolumn',
+    props: ['img', 'label', 'link']
+  }
+</script>
+
+<style scoped>
+  a {
+    display: block;
+    width: 128px;
+    height: 128px;
+  }
+
+  img {
+    -webkit-transform: translate(0%, 50%);
+    -moz-transform: translate(0%, 50%);
+    -ms-transform: translate(0%, 50%);
+    -o-transform: translate(0%, 50%);
+    transform: translate(0%, 50%);
+  }
+</style>