From 0c3548f9e1fcf9b714a6f9318ca866afbd9d37d0 Mon Sep 17 00:00:00 2001
From: Moritz Ruth <moritzruthcode@gmail.com>
Date: Sat, 9 Mar 2019 21:17:45 +0100
Subject: [PATCH] beautify index page

---
 assets/global.scss        | 17 +++++++++++++++++
 components/CtexxxLogo.vue | 18 ++++++------------
 components/SocialIcon.vue |  5 -----
 nuxt.config.js            |  5 +++--
 pages/index.vue           | 27 +++++++++++++++++++++++++++
 5 files changed, 53 insertions(+), 19 deletions(-)

diff --git a/assets/global.scss b/assets/global.scss
index db24f1e..a658398 100644
--- a/assets/global.scss
+++ b/assets/global.scss
@@ -1,4 +1,5 @@
 @import "./colors";
+@import url('https://fonts.googleapis.com/css?family=Raleway');
 
 html, body, #__nuxt, #__layout {
   width: 100%;
@@ -25,3 +26,19 @@ a {
   color: $c-link;
   text-decoration: none;
 }
+
+.button {
+  border: 2px solid white;
+  width: fit-content;
+  padding: 10px;
+
+  color: white;
+
+  transition: 400ms;
+
+  &:hover {
+    background-color: white;
+    color: $c-background;
+    font-weight: 400;
+  }
+}
diff --git a/components/CtexxxLogo.vue b/components/CtexxxLogo.vue
index bba504f..40705fd 100644
--- a/components/CtexxxLogo.vue
+++ b/components/CtexxxLogo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="full-width">
+  <div>
     <transition name="slide-vertical" mode="out-in">
       <div class="logo" :key="debouncedLogoText">
         <span class="text">{{ debouncedLogoText }}</span>
@@ -14,7 +14,7 @@
 
   const debounceLogoText = _debounce((self, newValue) => {
     self.debouncedLogoText = newValue;
-  }, 200);
+  }, 100);
 
   export default {
     name: "CtexxxLogo",
@@ -39,27 +39,21 @@
 
 <style scoped lang="scss">
   @import "~@/assets/_responsive";
+  @import url('https://fonts.googleapis.com/css?family=Montserrat+Alternates');
 
   .slide-vertical-enter-active {
-    transition: all 0.5s ease-out;
+    transition: all 0.3s ease-out;
   }
 
   .slide-vertical-leave-active {
-    transition: all 0.5s ease-in;
+    transition: all 0.3s ease-in;
   }
 
   .slide-vertical-enter-to {
-    transform: translateY(0);
     opacity: 1;
   }
 
-  .slide-vertical-enter {
-    transform: translateY(-100px);
-    opacity: 0;
-  }
-
-  .slide-vertical-leave-to {
-    transform: translateY(100px);
+  .slide-vertical-enter, .slide-vertical-leave-to {
     opacity: 0;
   }
 
diff --git a/components/SocialIcon.vue b/components/SocialIcon.vue
index 9655eae..8038075 100644
--- a/components/SocialIcon.vue
+++ b/components/SocialIcon.vue
@@ -53,7 +53,6 @@
       width: 100%;
 
       transition: 0.5s ease-out;
-      transform: scale(1);
 
       .icon {
         height: 100%;
@@ -85,10 +84,6 @@
     }
 
     &:hover {
-      .box {
-        transform: scale(1.1);
-      }
-
       .title {
         opacity: 1;
       }
diff --git a/nuxt.config.js b/nuxt.config.js
index 8039d93..1d97454 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -13,7 +13,6 @@ module.exports = {
     ],
     link: [
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
-      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Montserrat+Alternates|Raleway'}
     ]
   },
 
@@ -22,7 +21,9 @@ module.exports = {
     author: "Moritz Ruth",
     mobileAppIOS: false,
     nativeUI: true,
-    "short_name": "ctexxx"
+    "short_name": "ctexxx",
+    "background_color": "#212121",
+    "theme_color": "#212121"
   },
 
   /*
diff --git a/pages/index.vue b/pages/index.vue
index 8b0675d..7756304 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -8,6 +8,9 @@
         @mouseover.native="logoText = account.username" @mouseleave.native="logoText = null"
       />
     </div>
+    <div class="link-section">
+      <nuxt-link class="button" to="/projects">My Projects</nuxt-link>
+    </div>
   </div>
 </template>
 
@@ -58,5 +61,29 @@
     flex-direction: column;
     justify-content: center;
     align-content: center;
+
+    .link-section {
+      position: absolute;
+      bottom: 30px;
+      left: 0;
+      right: 0;
+
+      display: flex;
+      align-content: center;
+      justify-content: center;
+      align-items: center;
+      flex-wrap: wrap;
+
+      .button {
+        margin: 10px;
+
+        &::before {
+          content: "→";
+          transform: translateY(-4px) scale(1.7);
+          display: inline-block;
+          margin-right: 5px;
+        }
+      }
+    }
   }
 </style>