Style homepage

Author: ronellecaguioa

app/components/Home.tsx

@@ -10,7 +10,7 @@ const Home = () => (
     </div>
     <h1 id="welcome">Welcome to Chronos</h1>
     <p>A very short short description about Chronos...</p>
-    <Link className="get-started-btn" to="/applications">
+    <Link className="link" to="/applications">
       Get Started
     </Link>
   </div>

app/stylesheets/Home.scss

@@ -33,24 +33,26 @@
   p {
     margin: 15px 0;
   }
-}
 
-.get-started-btn {
-  width: 175px;
-  font-size: 145%;
-  padding: 10px;
-  letter-spacing: 0.5px;
-  text-decoration: none;
-  border: thin solid #242631;
-  border-radius: 10px;
-  background-color: #242631;
-  color: #fff;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: 0.2s;
-}
-
-.get-started-btn:hover {
-  background-color: #494fee;
+  // Get Started Button
+  .link {
+    width: 175px;
+    font-size: 145%;
+    padding: 10px 15px;
+    letter-spacing: 0.5px;
+    text-decoration: none;
+    border: thin solid $sidebarblue;
+    border-radius: 30px;
+    background-color: $sidebarblue;
+    color: #fff;
+    @include centerWithFlex();
+    transition: 0.1s;
+    animation: glow linear 2s infinite;
+
+    &:hover {
+      background-color: $brandgold;
+      color: #333;
+      animation: none;
+    }
+  }
 }

app/stylesheets/constants.scss

@@ -2,6 +2,7 @@ $brandgold: #fce356;
 $sidebarblue: #24262f;
 $headergray: #e8e8e8;
 $lightgray: #c3c3c3;
+$boxshadow: 2px 2px 6px rgb(187, 187, 187);
 
 @mixin centerWithFlex($justify: center, $direction: row) {
   display: flex;
@@ -47,3 +48,15 @@ $lightgray: #c3c3c3;
     transform: rotateZ(360deg);
   }
 }
+
+@keyframes glow {
+  0% {
+    background-color: $sidebarblue;
+  }
+  66% {
+    background-color: lighten($sidebarblue, 35%);
+  }
+  100% {
+    background-color: $sidebarblue;
+  }
+}