Add some style changes in nav-links and social-links (JIITODC#5)

Author: Ishan-Saini

package-lock.json

@@ -14,7 +14,8 @@
   "dependencies": {
     "compression": "^1.7.1",
     "polka": "next",
-    "sirv": "^1.0.0"
+    "sirv": "^1.0.0",
+    "svelte-awesome": "^2.3.0"
   },
   "devDependencies": {
     "npm-run-all": "^4.1.5",

package.json

@@ -1,5 +1,4 @@
 <script>
-  export let segment;
 </script>
 
 <style>
@@ -12,8 +11,9 @@
   }
 
   .jodc-mascot-img {
-    height: 100px;
+    height: 90px;
     width: auto;
+    margin-left: 40px;
   }
 
   ul {
@@ -33,19 +33,44 @@
     float: left;
   }
 
+  li:not(:last-child){
+    margin-right: 50px;
+  }
+
   a {
     text-decoration: none;
-    padding: .5em 0.5em;
+    padding: .1em 0.25em;
     display: block;
     text-transform: uppercase;
-    font-size: 2rem;
+    font-size: 1.6rem;
     transition: all .5s;
+    border-radius: 3px;
+    position: relative;
+    border-bottom: 2px solid #fff;
+  }
+
+  a::after{
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    z-index: -1;
+    height: 0;
+    opacity: 0;
+    transition: all .6s;
+    background-color: #fff;
+  }
+
+  a:hover::after{
+    height: 100%;
+    opacity: 1;
   }
 
-  a:hover {
-    background-color: white;
-    color: black;
+  a:hover{
+    color: #000;
   }
+
 </style>
 
 <nav>

src/components/Nav.svelte

@@ -1,3 +1,8 @@
+<script>
+  import Icon from 'svelte-awesome/components/Icon.svelte';
+  import {telegram, twitter, facebook, github } from 'svelte-awesome/icons';
+</script>
+
 <style>
   :global(body) {
     background-color: black;
@@ -21,15 +26,18 @@
   }
 
   #social {
-    margin-top: 20px;
+    margin-top: 150px;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     flex-grow: 0;
-    width: 100px;
+    justify-content: center;
+    width: 100%;
+    justify-content: space-around;
   }
 
+
   a {
-    font-size: 1.1rem;
+    font-size: 1.3rem;
     /* 1.1 * 16px */
     text-decoration: none;
     color: #aaa;
@@ -59,7 +67,7 @@
 </style>
 
 <svelte:head>
-  <title>JODC</title>
+  <title>JODC | JIIT Open-Source Developers Circle</title>
 </svelte:head>
 
 <figure>
@@ -85,8 +93,8 @@
 
 <!-- TODO(humancalico) add as a list? -->
 <div id="social">
-  <a href="https://github.com/jiitodc">GITHUB</a>
-  <a href="https://t.me/jiitodc">TELEGRAM</a>
-  <a href="https://twitter.com/jiitodc">TWITTER</a>
-  <a href="https://www.facebook.com/groups/jiitodc">FACEBOOK</a>
+  <a href="https://github.com/jiitodc"><Icon style="margin-right: 10px" data={github}/>GITHUB</a>
+  <a href="https://t.me/jiitodc"><Icon style="margin-right: 10px"  data={telegram}/>TELEGRAM</a>
+  <a href="https://twitter.com/jiitodc"><Icon style="margin-right: 10px" data={twitter}/>TWITTER</a>
+  <a href="https://www.facebook.com/groups/jiitodc"><Icon style="margin-right: 10px; font-size:40px;" data={facebook}/>FACEBOOK</a>
 </div>