From 61b1b80f2f3f1312eabbbc3a6ddd460846bfeb0e Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Thu, 13 Aug 2020 07:03:26 -0500
Subject: [PATCH] add proper carousel caption background, extend text shadow,
 font and navbar customization, darken black

---
 src/App.vue              | 58 +++++++++++++++++++++++++++++++---------
 src/scss/_variables.scss |  2 +-
 2 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index eaa1f0d..cb692cf 100644
--- a/src/App.vue
+++ b/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">
-                    <h1 id="sojourner-intro" class="ml-n4">
+                <b-col md="6" xl="5" align-self="center">
+                    <h2 id="sojourner-intro" class="ml-n4 exo-2">
                         Sojourner
-                    </h1>
-                    <h3>
-                        Sojourner is a robotic Mars rover that landed on July 4, 1997 in the Ares Vallis region.
+                    </h2>
+                    <p class="open-sans" style="font-size: 1.3em;">
+                        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
-                        Pathfinder mission.
-                    </h3>
+                        It landed on <em>July 4th, 1997</em> in the <em>Ares Vallis</em>
+                        region.
+                    </p>
                 </b-col>
                 <b-col md="6" xl="3">
                     <b-carousel
-                            :interval="5000"
-                            indicators
+                            :interval="4000"
                             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>
 
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 6a7a304..760d0db 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -1,2 +1,2 @@
-$primary: #1a1a1a;
+$primary: #161616;
 $white: #edf0f6;