Updated some styling

src/app/app.component.html

@@ -2,8 +2,9 @@
 <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
     <div class="container">
         <a class="navbar-brand roboto" [routerLink]="['/']">
-            fh
-            <span class="rainbow">&</span> sons
+            <span class="fh-fade">fh</span>
+            <span class="rainbow"> & </span>
+            <span class="sons-fade">sons</span>
         </a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
             <span class="navbar-toggler-icon"></span>

src/assets/css/base.scss

@@ -18,6 +18,20 @@ body {
   color: transparent;
 }
 
+.fh-fade {
+  background: linear-gradient(to top, rgba(0, 0, 0, 0), black);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.sons-fade {
+  background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7), black);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
 .roboto {
   font-family: 'Roboto Condensed', sans-serif;
 }