Add third project

assets/icons/npm.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M0 7.334v8h6.666v1.332H12v-1.332h12v-8H0zm6.666 6.664H5.334v-4H3.999v4H1.335V8.667h5.331v5.331zm4 0v1.336H8.001V8.667h5.334v5.332h-2.669v-.001zm12.001 0h-1.33v-4h-1.336v4h-1.335v-4h-1.33v4h-2.671V8.667h8.002v5.331zM10.665 10H12v2.667h-1.335V10z"/></svg>

components/GButton.vue

@@ -6,9 +6,11 @@
     justify-content: center;
     align-items: center;
 
-    padding: 10px 20px;
+    padding: 8px 15px;
     border-radius: 4px;
 
+    height: 42px;
+
     text-decoration: none;
     color: $blue;
 
@@ -24,25 +26,19 @@
     font-size: 1.2rem;
   }
 
-  .button__prefix {
+  .button__prefix > * {
     position: relative;
     top: 2px;
-
-    & > *:last-child {
     margin-right: 6px;
     width: 20px;
   }
-  }
 
-  .button__suffix {
+  .button__suffix > * {
     position: relative;
     top: 2px;
-
-    & > *:first-child {
     margin-left: 6px;
     width: 20px;
   }
-  }
 </style>
 
 <script>

components/pages/projects/GProject.vue

@@ -21,6 +21,12 @@
           <GitHubIcon/>
         </template>
       </GButton>
+      <GButton v-if="npm" class="project__button" :href="`https://www.npmjs.com/package/${npm}`">
+        NPM
+        <template v-slot:prefix>
+          <NPMIcon style="width: 30px; top: 4px"/>
+        </template>
+      </GButton>
     </div>
   </div>
 </template>
@@ -29,7 +35,7 @@
   @import "~@/assets/css/variables";
 
   .project__type {
-    margin-top: -1.2rem;
+    margin-top: -1rem;
     margin-bottom: 1rem;
     display: block;
   }
@@ -50,7 +56,6 @@
 
   .project__buttons {
     display: flex;
-    align-items: center;
   }
 
   .project__button {
@@ -68,11 +73,12 @@
 <script>
   import ArrowRightIcon from "@/assets/icons/arrow_right.svg";
   import GitHubIcon from "@/assets/icons/github.svg";
+  import NPMIcon from "@/assets/icons/npm.svg";
   import GButton from "@/components/GButton";
 
   export default {
     name: "GProject",
-    components: { GButton, ArrowRightIcon, GitHubIcon },
+    components: { GButton, ArrowRightIcon, GitHubIcon, NPMIcon },
     props: {
       title: {
         type: String,
@@ -89,6 +95,10 @@
       github: {
         type: String,
         default: null
+      },
+      npm: {
+        type: String,
+        default: null
       }
     }
   };

layouts/default.vue

@@ -9,6 +9,7 @@
 <style>
   .default-layout__content {
     margin-top: var(--navbar-height);
+    margin-bottom: 50px;
   }
 </style>
 

pages/projects.vue

@@ -22,6 +22,14 @@
       <a class="link" href="https://github.com/cryptic-game">Cryptic game</a>.
       (Just the website, not the game itself)
     </GProject>
+    <GProject
+      type="Node.js Library"
+      title="log-groups"
+      github="moritzruth/log-groups"
+      npm="log-groups"
+    >
+      A pretty console logging library for printing grouped messages with Node.js.
+    </GProject>
   </div>
 </template>