feat(cheatsheet): set up images + adjustments

components/BaseCheatsheet.vue

@@ -3,23 +3,30 @@
      ************************************************************************* -->
 
 <template lang="pug">
-a(
-  :href="link"
-  class="c-base-cheatsheet"
-  targer="_blank"
-)
-  img(
-    :src="'/images/components/BaseCheatsheet/' + thumbnail"
-    class="c-base-cheatsheet__thumbnail"
+.c-base-cheatsheet
+  a(
+    :href="link"
+    class="c-base-cheatsheet__link"
+    target="_blank"
   )
+    img(
+      :src="'/images/components/BaseCheatsheet/' + thumbnail"
+      class="c-base-cheatsheet__thumbnail"
+    )
+
   .c-base-cheatsheet__content
-    span.c-base-cheatsheet__name The {{ name }} Cheatsheet
+    a(
+      :href="link"
+      class="c-base-cheatsheet__name"
+      target="_blank"
+    ) The {{ name }} Cheatsheet
 
     .c-base-cheatsheet__share
-      span(
+      base-share(
         v-for="network in networks"
-        :src="'/images/components/BaseCheatsheet/' + network"
-        class="c-base-cheatsheet__icon"
+        :key="network"
+        :network="network"
+        class="c-base-cheatsheet__network"
       )
 </template>
 
@@ -28,7 +35,14 @@ a(
      ************************************************************************* -->
 
 <script>
+// PROJECT
+import BaseShare from "@/components/BaseShare";
+
 export default {
+  components: {
+    BaseShare
+  },
+
   props: {
     link: {
       type: String,
@@ -47,7 +61,7 @@ export default {
   data() {
     return {
       // --> COMPONENTS <--
-      networks: ["twitter", "slack", "messenger", "telegram", "linkedin"]
+      networks: ["slack", "messenger", "telegram", "twitter", "linkedin"]
     };
   }
 };
@@ -64,15 +78,15 @@ $c: ".c-base-cheatsheet";
   display: block;
   padding: 10px;
   border: 1px solid #313d4f;
-  border-radius: 4px;
+  border-radius: 6px;
   background: #273142;
-  cursor: pointer;
 
-  #{$c}__thumbnail {
-    margin-bottom: 5px;
-    width: 100%;
-    height: 160px;
-    border-radius: 4px;
+  #{$c}__link {
+    #{$c}__thumbnail {
+      width: 100%;
+      height: 160px;
+      border-radius: 4px;
+    }
   }
 
   #{$c}__content {
@@ -84,6 +98,19 @@ $c: ".c-base-cheatsheet";
       color: #ffffff;
       font-size: 18px;
     }
+
+    #{$c}__share {
+      margin-top: 12px;
+      display: flex;
+
+      #{$c}__network {
+        margin-right: 6px;
+
+        &:last-of-type {
+          margin-right: 0;
+        }
+      }
+    }
   }
 }
 </style>

components/BaseShare.vue

@@ -0,0 +1,47 @@
+<!-- *************************************************************************
+     TEMPLATE
+     ************************************************************************* -->
+
+<template lang="pug">
+img(
+  @click="onClick"
+  :src="'/images/components/BaseShare/' + network + '.svg'"
+  class="c-base-share"
+)
+</template>
+
+<!-- *************************************************************************
+     SCRIPT
+     ************************************************************************* -->
+
+<script>
+export default {
+  props: {
+    network: {
+      type: String,
+      required: true
+    }
+  },
+
+  methods: {
+    onClick() {
+      this.$emit("click", this.network);
+    }
+  }
+};
+</script>
+
+<!-- *************************************************************************
+     STYLE
+     ************************************************************************* -->
+
+<style lang="scss">
+$c: ".c-base-share";
+
+#{$c} {
+  display: block;
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+}
+</style>

components/TheCopyright.vue

@@ -43,8 +43,6 @@ $c: ".c-the-copyright";
   border-left: 1px solid #313d4f;
   border-top-left-radius: 4px;
   background-color: #171e29;
-  text-decoration: none;
-  cursor: pointer;
 
   #{$c}__name {
     margin-right: 6px;

components/TheGithub.vue

@@ -4,7 +4,7 @@
 
 <template lang="pug">
   <a href="https://github.com/LeCoupa/awesome-cheatsheets" class="github-corner" aria-label="View source on Github">
-    <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#151513; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
+    <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#1b2431; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
       <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
       <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
       <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>

layouts/default.vue

@@ -58,6 +58,11 @@ html {
   -ms-text-size-adjust: 100%;
 }
 
+a {
+  text-decoration: none;
+  cursor: pointer;
+}
+
 @font-face {
   font-family: "Heebo Thin";
   src: url("/fonts/heebo/Heebo-Thin.otf");

pages/index.vue

@@ -26,6 +26,7 @@
       base-cheatsheet(
         v-for="cheatsheet in category.cheatsheets"
         :key="cheatsheet.name"
+        :link="cheatsheet.link"
         :name="cheatsheet.name"
         :thumbnail="cheatsheet.thumbnail"
       )
@@ -36,6 +37,7 @@
      ************************************************************************* -->
 
 <script>
+// PROJECT
 import BaseCheatsheet from "@/components/BaseCheatsheet";
 import BaseDivider from "@/components/BaseDivider";
 
@@ -54,15 +56,33 @@ export default {
           cheatsheets: [
             {
               name: "Bash",
-              thumbnail: "bash.jpg"
+              thumbnail: "bash.jpg",
+              link:
+                "https://github.com/LeCoupa/awesome-cheatsheets/blob/master/languages/bash.sh"
+            },
+            {
+              name: "C",
+              thumbnail: "c.jpg",
+              link:
+                "https://github.com/LeCoupa/awesome-cheatsheets/blob/master/languages/C.txt"
+            },
+            {
+              name: "C#",
+              thumbnail: "c-sharp.jpg",
+              link:
+                "https://github.com/LeCoupa/awesome-cheatsheets/blob/master/languages/C%23.txt"
             },
             {
               name: "JavaScript",
-              thumbnail: "javascript.jpg"
+              thumbnail: "javascript.jpg",
+              link:
+                "https://github.com/LeCoupa/awesome-cheatsheets/blob/master/languages/javascript.js"
             },
             {
               name: "PHP",
-              thumbnail: "php.jpg"
+              thumbnail: "php.jpg",
+              link:
+                "https://github.com/LeCoupa/awesome-cheatsheets/blob/master/languages/php.php"
             }
           ]
         },
@@ -71,19 +91,33 @@ export default {
           cheatsheets: [
             {
               name: "Django",
-              thumbnail: "django.jpg"
+              thumbnail: "django.jpg",
+              link:
+                "https://github.com/LeCoupa/awesome-cheatsheets/blob/master/backend/django.py"
             },
             {
               name: "Feathers.js",
-              thumbnail: "feathers.jpg"
+              thumbnail: "feathers.jpg",
+              link:
+                "https://github.com/LeCoupa/awesome-cheatsheets/blob/master/backend/feathers.js"
             },
             {
               name: "Moleculer",
-              thumbnail: "moleculer.jpg"
+              thumbnail: "moleculer.jpg",
+              link:
+                "https://github.com/LeCoupa/awesome-cheatsheets/blob/master/backend/moleculer.js"
             },
             {
               name: "Node.js",
-              thumbnail: "node.jpg"
+              thumbnail: "node.jpg",
+              link:
+                "https://github.com/LeCoupa/awesome-cheatsheets/blob/master/backend/node.js"
+            },
+            {
+              name: "Sails.js",
+              thumbnail: "sails.jpg",
+              link:
+                "https://github.com/LeCoupa/awesome-cheatsheets/blob/master/backend/sails.js"
             }
           ]
         },
@@ -92,19 +126,39 @@ export default {
           cheatsheets: [
             {
               name: "Angular.js",
-              thumbnail: "angularjs.jpg"
+              thumbnail: "angularjs.jpg",
+              link:
+                "https://github.com/LeCoupa/awesome-cheatsheets/blob/master/frontend/angularjs.js"
+            },
+            {
+              name: "Angular 2+",
+              thumbnail: "angular.jpg",
+              link:
+                "https://github.com/LeCoupa/awesome-cheatsheets/blob/master/frontend/angular.js"
+            },
+            {
+              name: "Ember.js",
+              thumbnail: "ember.jpg",
+              link:
+                "https://github.com/LeCoupa/awesome-cheatsheets/blob/master/frontend/ember.js"
             },
             {
               name: "HTML5",
-              thumbnail: "html5.jpg"
+              thumbnail: "html5.jpg",
+              link:
+                "https://github.com/LeCoupa/awesome-cheatsheets/blob/master/frontend/html5.html"
             },
             {
               name: "React.js",
-              thumbnail: "react.jpg"
+              thumbnail: "react.jpg",
+              link:
+                "https://github.com/LeCoupa/awesome-cheatsheets/blob/master/frontend/react.js"
             },
             {
               name: "Vue.js",
-              thumbnail: "vue.jpg"
+              thumbnail: "vue.jpg",
+              link:
+                "https://github.com/LeCoupa/awesome-cheatsheets/blob/master/frontend/vue.js"
             }
           ]
         },
@@ -113,7 +167,9 @@ export default {
           cheatsheets: [
             {
               name: "Redis",
-              thumbnail: "redis.jpg"
+              thumbnail: "redis.jpg",
+              link:
+                "https://github.com/LeCoupa/awesome-cheatsheets/blob/master/databases/redis.sh"
             }
           ]
         },
@@ -122,19 +178,27 @@ export default {
           cheatsheets: [
             {
               name: "Docker",
-              thumbnail: "docker.jpg"
+              thumbnail: "docker.jpg",
+              link:
+                "https://github.com/LeCoupa/awesome-cheatsheets/blob/master/tools/docker.sh"
             },
             {
               name: "Kubernetes",
-              thumbnail: "kubernetes.jpg"
+              thumbnail: "kubernetes.jpg",
+              link:
+                "https://github.com/LeCoupa/awesome-cheatsheets/blob/master/tools/kubernetes.sh"
             },
             {
               name: "VIM",
-              thumbnail: "vim.jpg"
+              thumbnail: "vim.jpg",
+              link:
+                "https://github.com/LeCoupa/awesome-cheatsheets/blob/master/tools/vim.txt"
             },
             {
               name: "Xcode",
-              thumbnail: "xcode.jpg"
+              thumbnail: "xcode.jpg",
+              link:
+                "https://github.com/LeCoupa/awesome-cheatsheets/blob/master/tools/xcode.txt"
             }
           ]
         }
@@ -161,8 +225,8 @@ $c: ".c-index";
   #{$c}__description {
     margin: 0;
     margin: 30px 0 40px;
-    font-size: 24px;
-    line-height: 36px;
+    font-size: 22px;
+    line-height: 32px;
   }
 
   #{$c}__category {

static/images/components/BaseShare/linkedin.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="38px" height="38px" viewBox="0 0 38 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
+    <title>LinkedIN</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Cheatsheet-Block" transform="translate(-164.000000, -227.000000)">
+            <g id="Social-Icons" transform="translate(20.000000, 227.000000)">
+                <g id="LinkedIN" transform="translate(144.000000, 0.000000)">
+                    <path d="M0,19 C0,8.50658923 8.50658923,0 19,0 C29.4934108,0 38,8.50658923 38,19 C38,29.4934108 29.4934108,38 19,38 C8.50658923,38 0,29.4934108 0,19 Z" id="back" fill="#0077B5"></path>
+                    <path d="M13.4270957,15.7366299 L13.4270957,28.6738181 L9.12128023,28.6738181 L9.12128023,15.7366299 L13.4270957,15.7366299 Z M13.7106876,11.7346357 C13.7106876,12.9768441 12.7756427,13.9708169 11.274274,13.9708169 L11.2467575,13.9708169 C9.80119562,13.9708169 8.86666667,12.9768441 8.86666667,11.7346357 C8.86666667,10.4661526 9.82965799,9.5 11.3026504,9.5 C12.7756427,9.5 13.6827412,10.4661526 13.7106876,11.7346357 Z M28.9555136,21.2560298 L28.9553416,28.6738181 L24.6496981,28.6738181 L24.6496981,21.7524151 C24.6496981,20.0139072 24.0266215,18.8275969 22.467898,18.8275969 C21.2783256,18.8275969 20.5697758,19.6273432 20.2585815,20.3997844 C20.144732,20.676613 20.1167855,21.0623184 20.1167855,21.4489684 L20.1167855,28.6741616 L15.8104541,28.6741616 C15.8104541,28.6741616 15.8672069,16.9509322 15.8104541,15.7369734 L20.1167855,15.7369734 L20.1167855,17.5694176 C20.6882687,16.6885289 21.7117964,15.4328397 23.9979011,15.4328397 C26.8313262,15.4328397 28.9555136,17.2822851 28.9555136,21.2560298 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

static/images/components/BaseShare/messenger.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="38px" height="38px" viewBox="0 0 38 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
+    <title>Messenger</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M19,11 C14.0294275,11 10,14.7309462 10,19.3333325 C10,21.955835 11.3087455,24.295055 13.3540371,25.8226111 L13.3540371,29 L16.418455,27.3181666 C17.2362813,27.5445001 18.102685,27.6666665 19,27.6666665 C23.9705725,27.6666665 28,23.9357225 28,19.3333325 C28,14.7309462 23.9705725,11 19,11 L19,11 Z M19.8944088,22.2222238 L17.6024838,19.7777788 L13.1304348,22.2222238 L18.04969,17 L20.3975163,19.444445 L24.8136663,17 L19.8944088,22.2222238 L19.8944088,22.2222238 Z" id="path-1"></path>
+    </defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Cheatsheet-Block" transform="translate(-68.000000, -227.000000)">
+            <g id="Social-Icons" transform="translate(20.000000, 227.000000)">
+                <g id="Messenger" transform="translate(48.000000, 0.000000)">
+                    <circle id="Base" fill="#007FFF" cx="19" cy="19" r="19"></circle>
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="Clip-2" fill="#FFFFFF" xlink:href="#path-1"></use>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

static/images/components/BaseShare/slack.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="38px" height="38px" viewBox="0 0 38 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
+    <title>slack</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Cheatsheet-Block" transform="translate(-212.000000, -227.000000)">
+            <g id="Social-Icons" transform="translate(20.000000, 227.000000)">
+                <g id="slack" transform="translate(192.000000, 0.000000)">
+                    <path d="M0,19 C0,8.50658923 8.37922819,0 18.7155311,0 C29.0518341,0 37.4310623,8.50658923 37.4310623,19 C37.4310623,29.4934108 29.0518341,38 18.7155311,38 C8.37922819,38 0,29.4934108 0,19 Z" id="back" fill="#FFFFFF"></path>
+                    <g id="Group" transform="translate(8.721311, 8.866667)">
+                        <path d="M12.9233905,1.25387541 C12.6204525,0.305827323 11.6189928,-0.21296612 10.6866498,0.0951868856 C9.75414353,0.40317377 9.24385485,1.42132459 9.54695616,2.36920656 L14.1371029,16.7273093 C14.4522956,17.6128962 15.3932986,18.1105923 16.2965568,17.8462951 C17.2387036,17.5705356 17.8130438,16.5532153 17.5123934,15.6124765 C17.5009557,15.5765946 12.9233905,1.25387541 12.9233905,1.25387541" id="Shape" fill="#DFA22F"></path>
+                        <path d="M5.81104865,3.60331366 C5.50794732,2.6554317 4.5064875,2.13663826 3.57414459,2.44462514 C2.64163827,2.75261202 2.13134964,3.77076284 2.43445095,4.71881093 L7.02459769,19.0769137 C7.33979038,19.9625006 8.28079336,20.4601967 9.18405157,20.1957333 C10.1261983,19.9201399 10.7005386,18.9028197 10.3998882,17.9619147 C10.3884504,17.9261989 5.81104865,3.60331366 5.81104865,3.60331366" id="Shape" fill="#3CB187"></path>
+                        <path d="M18.7011062,13.145259 C19.6336125,12.8372721 20.1437377,11.8191213 19.8407998,10.8710733 C19.5378619,9.92319128 18.536402,9.40439778 17.6040591,9.71238469 L3.48133512,14.3792 C2.61026606,14.6994798 2.12072884,15.6561661 2.38069337,16.5744787 C2.65193227,17.5323279 3.65257511,18.1162404 4.57789197,17.8105793 C4.6131857,17.7989508 18.7011062,13.145259 18.7011062,13.145259" id="Shape" fill="#CE1E5B"></path>
+                        <path d="M6.42476754,17.2005858 C7.3440387,16.896918 8.52882987,16.5055388 9.80022141,16.0855869 C9.50153184,15.1509946 9.11656863,13.9462907 8.70333779,12.6535432 L5.3277205,13.7690404 L6.42476754,17.2005858" id="Shape" fill="#392538"></path>
+                        <path d="M13.5372728,14.8509814 C14.8134029,14.4295344 15.9995012,14.0376568 16.9127267,13.7359826 C16.6140371,12.8013901 16.2289105,11.5963541 15.8156797,10.3032743 L12.4400623,11.4187716 L13.5372728,14.8509814" id="Shape" fill="#BB242A"></path>
+                        <path d="M16.3901833,5.91421202 C17.3225262,5.60622514 17.8328148,4.58807432 17.5298769,3.64002623 C17.226939,2.69214426 16.2254791,2.17335082 15.2929728,2.4813377 L1.17024886,7.148153 C0.29917979,7.46843279 -0.19035743,8.4251191 0.0697704918,9.34343169 C0.340846009,10.3012809 1.34148885,10.8851934 2.26696909,10.5795323 C2.30209944,10.5679038 16.3901833,5.91421202 16.3901833,5.91421202" id="Shape" fill="#72C5CD"></path>
+                        <path d="M4.11319108,9.96970494 C5.03246224,9.66603712 6.21758022,9.27449177 7.48913518,8.85453992 C7.07459715,7.55697486 6.68914378,6.3511082 6.39241494,5.42249617 L3.01598065,6.53815956 L4.11319108,9.96970494" id="Shape" fill="#248C73"></path>
+                        <path d="M11.2255329,7.62026667 C12.5019898,7.19865356 13.6882515,6.80677596 14.6016404,6.50493552 C14.186939,5.20720437 13.8014856,4.00100547 13.5045934,3.07222733 L10.1283225,4.18789071 L11.2255329,7.62026667" id="Shape" fill="#62803A"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

static/images/components/BaseShare/telegram.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="38px" height="38px" viewBox="0 0 38 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
+    <title>telegram</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="66.67%" y1="16.67%" x2="41.67%" y2="75%" id="linearGradient-1">
+            <stop stop-color="#37AEE2" offset="0%"></stop>
+            <stop stop-color="#1E96C8" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="61.2346759%" y1="43.69%" x2="74.7064382%" y2="80.24%" id="linearGradient-2">
+            <stop stop-color="#EFF7FC" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Cheatsheet-Block" transform="translate(-116.000000, -227.000000)">
+            <g id="Social-Icons" transform="translate(20.000000, 227.000000)">
+                <g id="telegram" transform="translate(96.000000, 0.000000)">
+                    <circle id="Oval" fill="url(#linearGradient-1)" cx="19" cy="19" r="19"></circle>
+                    <path d="M15.3333333,28.1666667 C14.6854,28.1666667 14.7955,27.9220167 14.5720333,27.3050833 L12.6666667,21.0343167 L27.3333333,12.3333333" id="Shape" fill="#C8DAEA"></path>
+                    <path d="M15.3333333,28.1666667 C15.8333333,28.1666667 16.05425,27.938 16.3333333,27.6666667 L19,25.0736667 L15.6736667,23.0678333" id="Shape" fill="#A9C9DD"></path>
+                    <path d="M15.6733333,23.0683333 L23.7333333,29.0231667 C24.6530833,29.53065 25.3169,29.2679 25.546,28.16925 L28.8268333,12.70875 C29.1627333,11.36205 28.3134833,10.75125 27.4336,11.1507167 L8.1686,18.5792167 C6.85358333,19.1066667 6.86125,19.8403167 7.9289,20.1672167 L12.8727333,21.7102667 L24.3182333,14.4894333 C24.85855,14.1617833 25.35445,14.337935 24.9474333,14.6991667" id="Shape" fill="url(#linearGradient-2)"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

static/images/components/BaseShare/twitter.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="38px" height="38px" viewBox="0 0 38 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
+    <title>Twitter</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Cheatsheet-Block" transform="translate(-20.000000, -227.000000)">
+            <g id="Social-Icons" transform="translate(20.000000, 227.000000)">
+                <g id="Twitter">
+                    <path d="M0,19 C0,8.50658923 8.50658923,0 19,0 C29.4934108,0 38,8.50658923 38,19 C38,29.4934108 29.4934108,38 19,38 C8.50658923,38 0,29.4934108 0,19 Z" id="back" fill="#55ACEE"></path>
+                    <path d="M18.4309521,15.443438 L18.4708224,16.1008809 L17.806317,16.0203777 C15.3875175,15.711782 13.2743905,14.6652403 11.480226,12.9075869 L10.6030789,12.0354689 L10.3771471,12.6794945 C9.89870322,14.1151351 10.2043757,15.6312788 11.2011337,16.6509861 C11.732738,17.2145086 11.6131271,17.2950118 10.6961097,16.9595817 C10.3771471,16.8522441 10.0980548,16.7717409 10.0714746,16.8119925 C9.97844386,16.9059129 10.2974064,18.1268783 10.5499185,18.6098975 C10.8954613,19.2807576 11.5998369,19.9382004 12.3706632,20.3272993 L13.0218784,20.6358949 L12.2510522,20.6493121 C11.5068062,20.6493121 11.480226,20.6627293 11.5599666,20.9444905 C11.8257688,21.8166086 12.8756872,22.7423955 14.0452167,23.1449116 L14.8692033,23.4266728 L14.1515375,23.8560232 C13.088329,24.4732145 11.8390589,24.8220617 10.5897888,24.8488961 C9.99173397,24.8623133 9.5,24.9159821 9.5,24.9562337 C9.5,25.0904057 11.1213931,25.841769 12.0649907,26.1369474 C14.8957835,27.0090655 18.2581807,26.6333839 20.7833011,25.1440746 C22.5774655,24.0841156 24.37163,21.977615 25.2089068,19.9382004 C25.6607704,18.8514071 26.1126341,16.8656613 26.1126341,15.91304 C26.1126341,15.2958488 26.1525044,15.2153456 26.8967504,14.4773995 C27.3353239,14.0480491 27.7473173,13.578447 27.8270579,13.444275 C27.959959,13.1893482 27.9466689,13.1893482 27.2688734,13.4174406 C26.1392143,13.8199566 25.979733,13.7662878 26.5379175,13.1625138 C26.9499108,12.7331633 27.4416448,11.9549657 27.4416448,11.7268732 C27.4416448,11.6866216 27.2422932,11.7537076 27.0163614,11.8744624 C26.7771394,12.0086345 26.2455351,12.2098925 25.8468319,12.3306473 L25.1291661,12.5587397 L24.4779509,12.1159721 C24.119118,11.8744624 23.6140939,11.6061184 23.3482918,11.5256152 C22.6704963,11.3377744 21.6338679,11.3646088 21.022523,11.579284 C19.3612596,12.1830581 18.3113411,13.7394534 18.4309521,15.443438 Z" id="Shape" fill="#FFFFFF"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>