adds github links and adjusts a:hover color

README.md

@@ -9,7 +9,7 @@
 $ npm install # Or yarn install
 
 # serve with hot reload at localhost:3000
-$ npm run dev
+$ npm start
 
 # build for production and launch server
 $ npm run build

src/components/Github.vue

@@ -1,37 +1,54 @@
+<!-- from http://tholman.com/github-corners/ -->
 <template>
-  <a href="https://github.com/Turfjs/turf/">
-    <svg
-      class="githubLogo"
-      width="512px"
-      height="512px"
-      viewBox="0 0 512 512">
-         <g id="g3">
-           <path
-               d="M256,0C114.615,0,0,114.615,0,256s114.615,256,256,256s256-114.615,256-256S397.385,0,256,0z M408.027,408.027   c-19.76,19.759-42.756,35.267-68.354,46.094c-6.502,2.75-13.105,5.164-19.801,7.246V423c0-20.167-6.916-35-20.75-44.5   c8.668-0.833,16.625-2,23.875-3.5s14.918-3.667,23-6.5c8.084-2.833,15.334-6.208,21.75-10.125c6.418-3.917,12.584-9,18.5-15.25   c5.918-6.25,10.875-13.333,14.875-21.25s7.168-17.417,9.5-28.5c2.334-11.083,3.5-23.292,3.5-36.625c0-25.833-8.416-47.833-25.25-66   c7.668-20,6.834-41.75-2.5-65.25l-6.25-0.75c-4.332-0.5-12.125,1.333-23.375,5.5s-23.875,11-37.875,20.5   c-19.832-5.5-40.416-8.25-61.749-8.25c-21.5,0-42,2.75-61.5,8.25c-8.833-6-17.208-10.958-25.125-14.875s-14.25-6.583-19-8   s-9.167-2.292-13.25-2.625s-6.708-0.417-7.875-0.25s-2,0.333-2.5,0.5c-9.333,23.667-10.167,45.417-2.5,65.25   c-16.833,18.167-25.25,40.167-25.25,66c0,13.333,1.167,25.542,3.5,36.625s5.5,20.583,9.5,28.5s8.958,15,14.875,21.25   s12.083,11.333,18.5,15.25s13.667,7.292,21.75,10.125s15.75,5,23,6.5s15.208,2.667,23.875,3.5c-13.667,9.333-20.5,24.167-20.5,44.5   v39.115c-7.549-2.247-14.99-4.902-22.3-7.994c-25.597-10.827-48.594-26.335-68.353-46.094   c-19.758-19.758-35.267-42.756-46.093-68.354C46.679,313.195,41,285.043,41,256s5.679-57.195,16.879-83.675   c10.827-25.597,26.335-48.594,46.093-68.353c19.758-19.759,42.756-35.267,68.353-46.093C198.805,46.679,226.957,41,256,41   s57.195,5.679,83.676,16.879c25.598,10.827,48.594,26.335,68.354,46.093c19.758,19.758,35.266,42.756,46.092,68.353   C465.32,198.805,471,226.957,471,256s-5.68,57.195-16.879,83.675C443.295,365.271,427.785,388.27,408.027,408.027z"
-               id="path5"
-           />
-       </g>
-     </svg>
-    </a>
+  <a href="https://github.com/Turfjs/turf/" class="github-corner" target="_blank" ref="noreferrer noopener">
+    <svg width="60" height="60" viewBox="0 0 250 250" aria-hidden="true">
+      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" fill="#151513"></path>
+      <path class="octo-arm"
+            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="#ffffff" style="transform-origin: 130px 106px;"></path>
+      <path class="octo-body"
+            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="#ffffff"></path>
+    </svg>
+  </a>
 </template>
 
 <style lang="scss">
-   @import "../styles/variables.scss";
-
-    .githubLogo{
-        float: right;
-        height: 25px;
-        width: 25px;
-        margin-top: -80px;
-        cursor: pointer;
-        position: fixed;
-        right: 5px;
-        path {
-            fill: transparentize($blue, 0.4);
-            transition: 0.3s;
-            &:hover {
-                fill: $green;
-            }
-        }
-    }
-</style>
+   .github-corner {
+     position: fixed;
+     top: 0;
+     right: 0;
+
+     .svg {
+       position: absolute;
+       top: 0;
+       right: 0;
+       border: 0;
+     }
+   }
+
+   .github-corner:hover .octo-arm {
+     animation: octocat-wave 560ms ease-in-out
+   }
+
+   @keyframes octocat-wave {
+     0%, 100% {
+       transform: rotate(0)
+     }
+     20%, 60% {
+       transform: rotate(-25deg)
+     }
+     40%, 80% {
+       transform: rotate(10deg)
+     }
+   }
+
+   @media (max-width: 500px) {
+     .github-corner:hover .octo-arm {
+       animation: none
+     }
+     .github-corner .octo-arm {
+       animation: octocat-wave 560ms ease-in-out
+     }
+   }
+</style>

src/components/Module.vue

@@ -51,7 +51,14 @@
       <div v-show="module.hasMap">
         <div :id="'map_' + module.name"></div>
       </div>
-      <p class="npmBadge">npm install {{module.npmName}}</p>
+      <p class="npmBadge">
+        <a
+          :href="'https://github.com/Turfjs/turf/tree/master/packages/'+ module.npmName.replace('@turf/','turf-')"
+          target="_blank" ref="noreferrer noopener"
+        >
+          npm install {{module.npmName}}
+        </a>
+      </p>
 
       <div v-if="module.parent !== null">
         <p class="hasParent">
@@ -168,11 +175,10 @@ export default {
   .npmBadge {
     background-color: transparentize($blue, 0.6);
     padding: 15px;
-    color: white;
     text-align: right;
     width: 100%;
     font-size: 0.9rem;
-    font-weight: 300;
+    font-weight: 400;
     font-family: 'Montserrat', sans-serif;
   }
   .hasParent{

src/layouts/default.vue

@@ -4,9 +4,9 @@
       <sidebar :modules="modules" v-on:changeModule="setModule"></sidebar>
     </Col>
     <Col span="18" offset="1">
-        <github></github>
         <nuxt/>
     </Col>
+    <github></github>
   </Row>
 </template>
 
@@ -112,4 +112,4 @@ export default {
       margin-top: 0px;
     }
   }
-</style>
+</style>

src/styles/variables.scss

@@ -1,6 +1,11 @@
 $green: #2ECC71;
 $blue: #0C3952;
+$lightBlue: lighten($blue, 20%);
 $grey: #ECF0F1;
 $lightGrey: #FAFAFA;
 $offset1: percentage(1 /24);
-$offset3: percentage(3 / 24);
+$offset3: percentage(3 / 24);
+
+a:hover {
+  color: $lightBlue;
+}