basic navbar with scrollspy, fix bootstrap-vue asset loading, change to dark background, title fix

public/index.html

@@ -5,7 +5,7 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width,initial-scale=1.0">
         <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-        <title><%= htmlWebpackPlugin.options.title %></title>
+        <title>History of Robotics - Spirit & Sojourner</title>
         <style>
             @import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@700&display=swap');
 
@@ -173,9 +173,9 @@
 
             #loader {
                 z-index: 100;
-                background: #205fac;
+                background: #1a1a1a;
                 padding: 0;
-                font-family: 'Exo 2';
+                font-family: 'Exo 2', sans-serif;
                 text-transform: uppercase;
                 overflow: hidden;
                 min-height: calc(100vh - 60px);

src/App.vue

@@ -1,22 +1,75 @@
 <template>
     <div id="app">
-        <b-container :fluid=true>
-            <b-row>
-                <b-col>
-                    Text
+        <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-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">
+                    <h1 id="sojourner-intro" class="ml-n4">
+                        Sojourner
+                    </h1>
+                    <h3>
+                        Sojourner is a robotic Mars rover that landed on July 4, 1997 in the Ares Vallis region.
+                        <br>
+                        The rover was the first wheeled vehicle to rove another planet, and was part of the Mars
+                        Pathfinder mission.
+                    </h3>
+                </b-col>
+                <b-col md="6" xl="3">
+                    <b-carousel
+                            :interval="5000"
+                            indicators
+                            img-height="400"
+                            img-width="400"
+                            style="text-shadow: 4px 2px 2px #333333;"
+                    >
+                        <b-carousel-slide
+                                caption="Mars Pathfinder"
+                                img-src="./assets/pathfinder_logo.jpg"></b-carousel-slide>
+                        <b-carousel-slide
+                                caption="Sojourner"
+                                img-src="./assets/sojourner.jpg"></b-carousel-slide>
+                    </b-carousel>
+                    <b-img fluid-grow src=""></b-img>
                 </b-col>
             </b-row>
-        </b-container>
+        </b-jumbotron>
     </div>
 </template>
 
 <style lang="scss">
     @import "./scss/_variables.scss";
+
+    .nav-link {
+        font-size: 1.2em;
+        color: white;
+    }
+
+    html, body {
+        background-color: $primary;
+        color: $white;
+        max-width: 100%;
+        overflow-x: hidden;
+    }
 </style>
 
 <script>
     export default {
         name: 'App',
-        components: {}
+        components: {},
+        methods: {
+            scrollIntoView(evt) {
+                evt.preventDefault()
+                const href = evt.target.getAttribute('href')
+                const el = href ? document.querySelector(href) : null
+                if (el) {
+                    this.$refs.content.scrollTop = el.offsetTop
+                }
+            }
+        }
     }
 </script>

src/scss/_variables.scss

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

vue.config.js

@@ -0,0 +1,24 @@
+module.exports = {
+    chainWebpack: config => {
+        config.module
+            .rule('vue')
+            .use('vue-loader')
+            .loader('vue-loader')
+            .tap(options => {
+                options.transformAssetUrls = {
+                    img: 'src',
+                    image: 'xlink:href',
+                    'b-avatar': 'src',
+                    'b-img': 'src',
+                    'b-img-lazy': ['src', 'blank-src'],
+                    'b-card': 'img-src',
+                    'b-card-img': 'src',
+                    'b-card-img-lazy': ['src', 'blank-src'],
+                    'b-carousel-slide': 'img-src',
+                    'b-embed': 'src'
+                }
+
+                return options
+            })
+    }
+}