attempts at fixing navbar, styling/responsiveness adjustments, add Spirit Jumbotron/info

src/App.vue

@@ -1,46 +1,49 @@
 <template>
     <div id="app">
-        <b-nav card-header slot="header" v-b-scrollspy:nav-scroller>
+        <b-navbar>
-            <b-navbar-brand class="px-2 pl-3 exo-2 font-weight-normal" style="font-size: 1.5em;">
+            <b-navbar-nav v-b-scrollspy:content>
+                <b-navbar-brand class="px-2 pl-3 exo-2 font-weight-normal text-white" 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 href="#sojourner" link-classes="open-sans text-white"
+                            @click="scrollIntoView">
+                    Sojourner
                 </b-nav-item>
-            <!--            <b-nav-item href="#mdo" @click="scrollIntoView">@mdo</b-nav-item>-->
+                <b-nav-item href="#spirit" link-classes="open-sans text-white" @click="scrollIntoView">
-            <!--            <b-nav-item href="#pi0" @click="scrollIntoView">@pi0</b-nav-item>-->
+                    Spirit
-        </b-nav>
+                </b-nav-item>
-        <b-jumbotron fluid container-fluid class="text-dark py-md-5 py-sm-0 px-md-5 px-sm-3">
+            </b-navbar-nav>
+        </b-navbar>
+        <div id="content" ref="content">
+            <b-jumbotron fluid container-fluid class="text-dark my-0 py-md-5 py-sm-0 px-md-5 px-sm-3">
                 <b-row class="px-sm-3 px-md-3 w-100" align-h="around">
                     <b-col md="6" xl="5" align-self="center">
-                    <h1 id="sojourner-intro">
+                        <h1 id="sojourner">
                             Sojourner
                         </h1>
                         <p class="ml-4">
                             Launched into space on
-                        <em v-b-popover.hover.top="this.moments.sojourner.launch">
+                            <em class="text-nowrap" :title="this.moments.sojourner.launch.fromNow()">
-                            December 4th, 1996</em>, Sojourner is the first wheeled vehicle to rove upon another planet
+                                {{ this.moments.sojourner.launch.format("MMMM Do, YYYY") }}
-                        - Mars.
+                            </em>,
-                        <br>
+                            Sojourner is the first wheeled vehicle to rove upon another planet - Mars.
-
+                            It landed on <em class="text-nowrap" :title="this.moments.sojourner.landing">July 4th,
-                        It landed on <em v-b-popover.hover.top="this.moments.sojourner.landing">July 4th, 1997</em> in
+                            1997</em> in the <em>Ares Vallis</em> region.
-                        the <em>Ares Vallis</em>
-                        region.
-                        <br>
                         </p>
                         <p class="ml-4">
-                        Despite it's original mission duration planned to be just 7 days, it stayed active for 83 days
+                            Despite it's original mission duration planned to be just 7 days, it stayed active for 83
-                        in total.
+                            days in total.
                         </p>
                         <p class="ml-4">
-                        The lander that Sojourner landed on, <em>Pathfinder</em>, used Airbags, paving the way for the
+                            The lander that Sojourner landed on, <em>Pathfinder</em>, used Airbags, paving the way for
-                        technologies use in future missions, such as Curiosity and Spirit.
+                            the technologies use in future missions, such as Curiosity and Spirit.
                         </p>
                     </b-col>
-                <b-col md="6" xl="3" align-h="center">
+                    <b-col md="6" xl="3" align-h="center" class="w-100 h-100">
                         <b-carousel
                                 :interval="4000"
-                            img-height="400"
                                 img-width="400"
+                                img-height="400"
                                 style="text-shadow: 6px 5px 8px black;"
                         >
                             <b-carousel-slide
@@ -54,7 +57,47 @@
                     </b-col>
                 </b-row>
             </b-jumbotron>
+            <b-jumbotron fluid container-fluid class="bg-black my-0 py-md-5 py-sm-0 px-md-5 px-sm-3">
+                <b-row class="px-sm-3 px-md-3 w-100" align-h="around">
+                    <b-col md="6" xl="3" align-h="center">
+                        <b-carousel
+                                :interval="4000"
+                                img-height="400"
+                                img-width="400"
+                                style="text-shadow: 6px 5px 8px black;"
+                        >
+                            <b-carousel-slide
+                                    caption="Spirit Rover"
+                                    img-src="./assets/spirit.jpg"></b-carousel-slide>
+                        </b-carousel>
+                        <b-img fluid-grow src=""></b-img>
+                    </b-col>
+                    <b-col class="ml-n5" md="6" xl="5" align-self="center">
+                        <h1 id="spirit">
+                            Spirit
+                        </h1>
+                        <p class="ml-4">
+                            The geology-centric rover was launched into space <abbr
+                                title="Spirit and Opportunity were launched separately, 3 days apart.">with it's
+                            twin</abbr>, Opportunity, on
+                            <em class="text-nowrap" :title="this.moments.spirit.launch.fromNow()">
+                                {{ this.moments.spirit.launch.format("MMMM Do, YYYY") }}</em>, and on
+                            <em :title="this.moments.sojourner.landing.fromNow()">
+                                {{ this.moments.spirit.landing.format("MMMM Do, YYYY") }}
+                            </em>, it became the 2nd rover to arrive on the red planet.
+                        </p>
+                        <p class="ml-4">
+                            Spirit was planned with just a 90 day mission in mind, but like it's twin, Spirit outlasted
+                            this cycle far beyond what was originally planned.
+                        </p>
+                        <p class="ml-4">
+                        </p>
+                    </b-col>
+                </b-row>
+            </b-jumbotron>
         </div>
+    </div>
+
 </template>
 
 <style lang="scss">
@@ -62,10 +105,28 @@
     @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";
 
-    .jumbotron p {
+
+    .jumbotron {
+        color: $white;
+
+        p {
             @extend .open-sans;
             font-size: 1.3em;
         }
+    }
+
+    abbr {
+        text-decoration-color: rgba(255, 255, 255, 0.5) !important;
+    }
+
+    .bg-black {
+        background-color: $primary;
+        color: $white;
+    }
+
+    .nav {
+        @extend .bg-black;
+    }
 
     .jumbotron h1 {
         @extend .exo-2;
@@ -100,9 +161,9 @@
         font-family: 'Open Sans', sans-serif;
     }
 
-    .nav-link {
+    .navbar-brand, .nav-link {
         font-size: 1.2em;
-        color: white;
+        color: $white;
     }
 
     html, body {
@@ -128,20 +189,20 @@
                 if (el) {
                     this.$refs.content.scrollTop = el.offsetTop
                 }
-            }
+            },
         },
         data() {
             return {
                 moment: moment,
                 dates: {
                     sojourner: {
-                        launch: [1996, 11, 3, 5, 57],
+                        launch: [1996, 11, 4, 5, 57],
-                        landing: [1997, 6, 3],
+                        landing: [1997, 6, 4],
                         lastContact: [],
                     },
                     spirit: {
-                        launch: [],
+                        launch: [2003, 5, 11, 16, 57],
-                        landing: [],
+                        landing: [2004, 0, 4, 3, 34],
                         lastContact: []
                     }
                 },
@@ -149,6 +210,7 @@
         },
         computed: {
             moments: function () {
+                moment.defaultFormat = "MMMM Do, YYYY";
                 let obj = {}
                 // Build moment.utc fromNow 2d object dict
                 for (let k in this.dates) {
@@ -156,7 +218,7 @@
                         obj[k] = {}
 
                     for (let j in this.dates[k]) {
-                        obj[k][j] = moment.utc(this.dates[k][j]).fromNow()
+                        obj[k][j] = moment.utc(this.dates[k][j])
                     }
                 }
                 return obj;