feat(app): adjustments

components/BaseCheatsheet.vue

@@ -3,13 +3,24 @@
      ************************************************************************* -->
 
 <template lang="pug">
-.c-base-cheatsheet
+a(
+  :href="link"
+  class="c-base-cheatsheet"
+  targer="_blank"
+)
   img(
-    :src="thumbnail"
+    :src="'/images/components/BaseCheatsheet/' + thumbnail"
     class="c-base-cheatsheet__thumbnail"
   )
   .c-base-cheatsheet__content
     span.c-base-cheatsheet__name The {{ name }} Cheatsheet
+
+    .c-base-cheatsheet__share
+      span(
+        v-for="network in networks"
+        :src="'/images/components/BaseCheatsheet/' + network"
+        class="c-base-cheatsheet__icon"
+      )
 </template>
 
 <!-- *************************************************************************
@@ -19,6 +30,10 @@
 <script>
 export default {
   props: {
+    link: {
+      type: String,
+      required: true
+    },
     name: {
       type: String,
       required: true
@@ -27,6 +42,13 @@ export default {
       type: String,
       required: true
     }
+  },
+
+  data() {
+    return {
+      // --> COMPONENTS <--
+      networks: ["twitter", "slack", "messenger", "telegram", "linkedin"]
+    };
   }
 };
 </script>
@@ -39,10 +61,12 @@ export default {
 $c: ".c-base-cheatsheet";
 
 #{$c} {
+  display: block;
   padding: 10px;
   border: 1px solid #313d4f;
   border-radius: 4px;
   background: #273142;
+  cursor: pointer;
 
   #{$c}__thumbnail {
     margin-bottom: 5px;

components/BaseDivider.vue

@@ -38,6 +38,7 @@ $c: ".c-base-divider";
   #{$c}__category {
     margin-right: 40px;
     color: #ffffff;
+    text-align-last: left;
     text-transform: uppercase;
     font-weight: bold;
     font-size: 18px;

layouts/default.vue

@@ -4,10 +4,10 @@
 
 <template lang="pug">
 .l-default
+  .l-default__inner
     the-github(
       class="l-default__github"
     )
-
     nuxt
 
     the-copyright(
@@ -94,11 +94,18 @@ html {
 }
 
 #{$c} {
+  margin: 0 20px;
+
+  #{$c}__inner {
+    margin: 0 auto;
+    max-width: 1140px;
+
     #{$c}__copyright {
       position: fixed;
       right: 0;
       bottom: 0;
     }
   }
+}
 </style>
 

pages/index.vue

@@ -47,6 +47,7 @@ export default {
 
   data() {
     return {
+      // --> COMPONENTS <--
       categories: [
         {
           name: "Languages",
@@ -159,7 +160,7 @@ $c: ".c-index";
 
   #{$c}__description {
     margin: 0;
-    margin: 40px 0;
+    margin: 30px 0 40px;
     font-size: 24px;
     line-height: 36px;
   }