feat(copyright): final component

components/CategoryDivider.vue

@@ -0,0 +1,21 @@
+<!-- *************************************************************************
+     TEMPLATE
+     ************************************************************************* -->
+
+<template lang="pug">
+
+</template>
+
+<!-- *************************************************************************
+     SCRIPT
+     ************************************************************************* -->
+
+<script>
+export default {};
+</script>
+
+<!-- *************************************************************************
+     STYLE
+     ************************************************************************* -->
+
+<style lang="scss"></style>

components/TheCopyright.vue

@@ -0,0 +1,52 @@
+<!-- *************************************************************************
+     TEMPLATE
+     ************************************************************************* -->
+
+<template lang="pug">
+.c-the-copyright
+  span.c-the-copyright__name By LeCoupa
+
+  span.c-the-copyright__picture
+</template>
+
+<!-- *************************************************************************
+     SCRIPT
+     ************************************************************************* -->
+
+<script>
+export default {};
+</script>
+
+<!-- *************************************************************************
+     STYLE
+     ************************************************************************* -->
+
+<style lang="scss">
+$c: ".c-the-copyright";
+
+#{$c} {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px 5px 5px 15px;
+  border-top: 1px solid #313d4f;
+  border-left: 1px solid #313d4f;
+  border-top-left-radius: 4px;
+  background-color: #171e29;
+
+  #{$c}__name {
+    margin-right: 6px;
+    color: #ffffff;
+    font-size: 14px;
+  }
+
+  #{$c}__picture {
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    border-radius: 100%;
+    background-size: cover;
+    background-image: url("/images/common/lecoupa.jpg");
+  }
+}
+</style>

layouts/default.vue

@@ -3,10 +3,16 @@
      ************************************************************************* -->
 
 <template lang="pug">
-  .c-layout-default
+  .l-default
-    github-corner
+    github-corner(
+      class="l-default__github"
+    )
 
     nuxt
+
+    the-copyright(
+      class="l-default__copyright"
+    )
 </template>
 
 <!-- *************************************************************************
@@ -16,10 +22,12 @@
 <script>
 // PROJECT
 import GithubCorner from "@/components/GithubCorner";
+import TheCopyright from "@/components/TheCopyright";
 
 export default {
   components: {
-    GithubCorner
+    GithubCorner,
+    TheCopyright
   }
 };
 </script>
@@ -29,20 +37,68 @@ export default {
      ************************************************************************* -->
 
 <style lang="scss">
+$c: ".l-default";
+
 html {
+  overflow-y: scroll;
   box-sizing: border-box;
+  padding: 60px 0 100px;
+  min-height: 100%;
   background-color: #1b2431;
   color: white;
   text-align: center;
   word-spacing: 1px;
   font-size: 16px;
-  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
+  font-family: "Heebo Regular", "Helvetica Neue", Source Sans Pro, Helvetica,
-    Roboto, "Helvetica Neue", Arial, sans-serif;
+    Arial, sans-serif;
 
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
 }
+
+@font-face {
+  font-family: "Heebo Thin";
+  src: url("/fonts/heebo/Heebo-Thin.otf");
+}
+
+@font-face {
+  font-family: "Heebo Light";
+  src: url("/fonts/heebo/Heebo-Light.otf");
+}
+
+@font-face {
+  font-family: "Heebo Regular";
+  src: url("/fonts/heebo/Heebo-Regular.otf");
+}
+
+@font-face {
+  font-family: "Heebo Medium";
+  src: url("/fonts/heebo/Heebo-Medium.otf");
+}
+
+@font-face {
+  font-family: "Heebo Bold";
+  src: url("/fonts/heebo/Heebo-Bold.otf");
+}
+
+@font-face {
+  font-family: "Heebo ExtraBold";
+  src: url("/fonts/heebo/Heebo-ExtraBold.otf");
+}
+
+@font-face {
+  font-family: "Heebo Black";
+  src: url("/fonts/heebo/Heebo-Black.otf");
+}
+
+#{$c} {
+  #{$c}__copyright {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+  }
+}
 </style>
 

pages/index.vue

@@ -4,8 +4,14 @@
 
 <template lang="pug">
 .c-index
-  h2(
+  img(
+    src="/images/common/logo.png"
+    srcset="/images/common/logo@2x.png"
+    class="c-index__logo"
+  )
+  p(
     v-html="description"
+    class="c-index__description"
   )
 </template>
 
@@ -19,7 +25,7 @@ export default {
     return {
       description: `
         Awesome cheatsheets for popular programming languages, frameworks and development tools.<br/>
-        They include everything you should know in one single file. 🤓👌
+        They include everything you should know in one single file. 👩‍💻👨‍💻
       `
     };
   }
@@ -30,4 +36,21 @@ export default {
      STYLE
      ************************************************************************* -->
 
-<style lang="scss"></style>
+<style lang="scss">
+$c: ".c-index";
+
+#{$c} {
+  #{$c}__logo {
+    width: 245px;
+    height: 165px;
+    user-select: none;
+  }
+
+  #{$c}__description {
+    margin: 0;
+    margin: 40px 0;
+    font-size: 24px;
+    line-height: 36px;
+  }
+}
+</style>