Styling navbar

src/scss/_fonts.scss

@@ -0,0 +1,8 @@
+@font-face {
+  font-family: 'bebas';
+  src: url('../../src/fonts/bebas/bebas.eot'); /* IE9 Compat Modes */
+  src: url('../../src/fonts/bebas/bebas.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('../../src/fonts/bebas/bebas.woff') format('woff'), /* Pretty Modern Browsers */
+       url('../../src/fonts/bebas/bebas.ttf')  format('truetype'), /* Safari, Android, iOS */
+       url('../../src/fonts/bebas/bebas.svg#svgFontName') format('svg'); /* Legacy iOS */
+}

src/scss/_menu.scss

@@ -1,13 +1,23 @@
-#navbarSupportedContent {
+#menu-title {
+  font-family:  bebas;
+  color:        $hd-color;
+  font-size:    17px;
+}
+
+
+#navbar-router {
+  color: $twitter-color;
+
   ldp-route {
-    color:        white;
     cursor:       pointer;
   }
   ldp-route:hover {
     text-decoration:  underline;
   }
   ldp-route[active] {
-    font-weight:  bold;
+    font-weight:    bold;
+    border-bottom:  2px solid $hd-color;
+    color:          $hd-color;
   }
 }
 

src/scss/_styles.scss

@@ -1,6 +1,4 @@
 * {
-  margin: 0;
-  padding: 0;
   box-sizing: border-box;
 }
 
@@ -8,13 +6,13 @@ html, body, #mainContainer {
   height: 100%;
 }
 
+#mainContainer {
+  margin-top:   $menu-height;
+}
+
 .page-title {
   font-size: 2.5rem;
   margin-bottom: 20px;
   font-family: 'Righteous', cursive;
   text-decoration-line: underline;
 }
-
-#ldp-root {
-  padding-right: 0;
-}

src/scss/_variables.scss

@@ -0,0 +1,4 @@
+$hd-color: rgb(253, 200, 21);
+$twitter-color: #1DA1F2;
+
+$menu-height : 100px;

src/scss/main.scss

@@ -1,3 +1,5 @@
+@import "variables";
+@import "fonts";
 @import "styles";
 @import "home";
 @import "menu";