add proper carousel caption background, extend text shadow, font and navbar customization, darken black

src/App.vue

@@ -1,31 +1,34 @@
 <template>
     <div id="app">
         <b-nav card-header slot="header" v-b-scrollspy:nav-scroller>
-            <b-nav-item href="#sojourner-intro" class="font-weight-bolder" @click="scrollIntoView">Sojourner & Spirit
+            <b-navbar-brand class="px-2 pl-3 exo-2 font-weight-normal" style="font-size: 1.5em;">
+                Sojourner & Spirit
+            </b-navbar-brand>
+            <b-nav-item href="#sojourner-intro" link-classes="open-sans" @click="scrollIntoView">Sojourner
             </b-nav-item>
             <!--            <b-nav-item href="#mdo" @click="scrollIntoView">@mdo</b-nav-item>-->
             <!--            <b-nav-item href="#pi0" @click="scrollIntoView">@pi0</b-nav-item>-->
         </b-nav>
         <b-jumbotron fluid="true" class="text-dark py-5 px-5" container-fluid="true">
             <b-row class="px-3 w-100" align-h="around">
-                <b-col md="6" xl="5">
+                <b-col md="6" xl="5" align-self="center">
-                    <h1 id="sojourner-intro" class="ml-n4">
+                    <h2 id="sojourner-intro" class="ml-n4 exo-2">
                         Sojourner
-                    </h1>
+                    </h2>
-                    <h3>
+                    <p class="open-sans" style="font-size: 1.3em;">
-                        Sojourner is a robotic Mars rover that landed on July 4, 1997 in the Ares Vallis region.
+                        Launched into space on <em>December 4th, 1996</em>, Sojourner is the first wheeled vehicle to
+                        rove upon another planet - Mars.
                         <br>
-                        The rover was the first wheeled vehicle to rove another planet, and was part of the Mars
+                        It landed on <em>July 4th, 1997</em> in the <em>Ares Vallis</em>
-                        Pathfinder mission.
+                        region.
-                    </h3>
+                    </p>
                 </b-col>
                 <b-col md="6" xl="3">
                     <b-carousel
-                            :interval="5000"
+                            :interval="4000"
-                            indicators
                             img-height="400"
                             img-width="400"
-                            style="text-shadow: 4px 2px 2px #333333;"
+                            style="text-shadow: 6px 5px 2px black;"
                     >
                         <b-carousel-slide
                                 caption="Mars Pathfinder"
@@ -42,8 +45,38 @@
 </template>
 
 <style lang="scss">
+    @import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@500&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap');
     @import "./scss/_variables.scss";
 
+    .carousel-caption {
+        bottom: -10px;
+    }
+
+    .carousel-caption {
+        width: 100%;
+        background-size: cover;
+        background-color: rgba(0, 0, 0, .45);
+        padding-top: 1rem;
+        left: 0;
+    }
+
+    a {
+        text-align: center;
+
+        &:hover {
+            color: #b0b0b0;
+        }
+    }
+
+    .exo-2 {
+        font-family: 'Exo 2', sans-serif;
+    }
+
+    .open-sans {
+        font-family: 'Open Sans', sans-serif;
+    }
+
     .nav-link {
         font-size: 1.2em;
         color: white;
@@ -54,6 +87,7 @@
         color: $white;
         max-width: 100%;
         overflow-x: hidden;
+        font-size: 1em;
     }
 </style>
 

src/scss/_variables.scss

@@ -1,2 +1,2 @@
-$primary: #1a1a1a;
+$primary: #161616;
 $white: #edf0f6;