From a3043ce39c3dfa697b452dd7fbe376e45ecc3744 Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Sun, 16 Aug 2020 23:10:25 -0500
Subject: [PATCH] fix mobile scaling, create top column of jumbotron images for
 media viewports, better mobile scaling, make viewport marker into badge and
 adjust colors, set content top margin to full

---
 src/App.vue | 102 ++++++++++++++++++++++++++++++----------------------
 1 file changed, 60 insertions(+), 42 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 696436f..c0bc784 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,25 +7,24 @@
                 </h3>
             </b-navbar-brand>
             <b-navbar-nav v-b-scrollspy:content>
-                <b-nav-item href="#sojourner" link-classes="open-sans text-white" @click="scrollIntoView">
-                    Sojourner
-                </b-nav-item>
-                <b-nav-item href="#spirit" link-classes="open-sans text-white" @click="scrollIntoView">
-                    Spirit
-                </b-nav-item>
-                <b-nav-item class="float-right" link-classes="open-sans text-white font-weight-bold" v-if="showBreakpoint">
-                    <span id="marker-xs" class="d-sm-none">XS</span>
-                    <span id="marker-sm" class="d-none d-sm-inline d-md-none">SM</span>
-                    <span id="marker-md" class="d-none d-md-inline d-lg-none">MD</span>
-                    <span id="marker-lg" class="d-none d-lg-inline d-xl-none">LG</span>
-                    <span id="marker-xl" class="d-none d-xl-inline">XL</span>
+                <b-nav-item link-classes="open-sans text-white font-weight-bold p-0" class="d-flex" v-if="showBreakpoint">
+                    <b-badge variant="dark">
+                        <span id="marker-xs" class="d-sm-none">XS</span>
+                        <span id="marker-sm" class="d-none d-sm-block d-md-none">SM</span>
+                        <span id="marker-md" class="d-none d-md-block d-lg-none">MD</span>
+                        <span id="marker-lg" class="d-none d-lg-block d-xl-none">LG</span>
+                        <span id="marker-xl" class="d-none d-xl-block">XL</span>
+                    </b-badge>
                 </b-nav-item>
             </b-navbar-nav>
         </b-navbar>
         <div id="content" ref="content">
-            <b-jumbotron fluid container-fluid="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="between">
-                    <b-col cols="12" lg="8" align-self="center">
+            <b-jumbotron fluid container-fluid="fluid" class="text-dark py-3 px-md-5 px-sm-3">
+                <b-row class="px-sm-3 px-md-3 w-100 justify-content-center justify-content-lg-between">
+                    <b-col class="d-block d-lg-none py-2 pb-3 py-lg-0" cols="0" sm="7" lg="0" align-self="center">
+                        <b-img fluid-grow src="./assets/sojourner.jpg"></b-img>
+                    </b-col>
+                    <b-col cols="12" lg="8" xl="7" align-self="center">
                         <h1 id="sojourner">
                             Sojourner
                         </h1>
@@ -43,31 +42,31 @@
                             blueprint for 3 more rovers.
                         </p>
                     </b-col>
-                    <b-col cols="8" lg="4" xl="3" align-self="center" class="w-100 h-100">
+                    <b-col class="d-none d-lg-block" cols="0" lg="4" xl="3" align-self="center">
                         <b-img fluid-grow src="./assets/sojourner.jpg"></b-img>
                     </b-col>
                 </b-row>
             </b-jumbotron>
-            <b-jumbotron fluid container-fluid="fluid px-0" class="bg-black py-md-5 py-0 px-3 px-md-1 px-lg-2">
-                <b-row class="px-sm-3 px-md-3 w-100" align-h="around">
-                    <b-col cols="8" lg="6" align-self="top">
+            <b-jumbotron fluid container-fluid="fluid px-0" class="bg-black py-md-5 py-0 px-2 px-md-2 px-lg-3">
+                <b-row class="px-3 pl-4 px-md-4 w-100 justify-content-center justify-content-lg-around">
+                    <b-col cols="12" lg="6" align-self="top">
                         <h3>Communications</h3>
-                        <p class="ml-4">
+                        <p class="ml-4 ml-sm-3">
                             Sojourner is unique among the 4 rovers to successfully deploy on Mars in that it required
                             it's lander to stay in communication with Earth. The rover was not equipped with a high gain
                             antenna, which is required in order to communicate with Earth over large distances.
                         </p>
-                        <p class="ml-4">
+                        <p class="ml-4 ml-sm-3">
                             This limitation forced the rover to stay within a certain range of the lander, and
                             throughout it's lifetime on Mars, it never traveled more than a few dozen feet from the
                             lander.
                         </p>
                         <h3>Tools</h3>
-                        <p class="ml-4 mb-1">
+                        <p class="ml-4 ml-sm-3">
                             Sojourner was designed to study the surface of Mars by collecting and analyzing rock
                             samples, taking pictures and more using the following tools:
                         </p>
-                        <ul>
+                        <ul class="ml-3 ml-lg-4">
                             <li class="py-1 pt-2">
                                 An <abbr title="Alpha Proton X-ray Spectrometer"><em>APXS</em></abbr> for determining
                                 elemental composition of soil, rocks and other materials on the surface of Mars.
@@ -83,23 +82,23 @@
                             </li>
                         </ul>
                     </b-col>
-                    <b-col md="6" lg="5" align-h="top" class="w-100 h-100">
+                    <b-col cols="12" lg="5" align-h="top" class="w-100 h-100">
                         <h3>Autonomy</h3>
-                        <p class="ml-3 ml-lg-4">
+                        <p class="ml-4 ml-sm-3">
                             Sojourner was an important step in Robotics due to the nature of the mission.
                             With such a long distance between Mars and Earth, radio communications took around 14
                             minutes to receive, and then another 14 minutes to send back.
                         </p>
-                        <p class="ml-3 ml-lg-4">
+                        <p class="ml-4 ml-sm-3">
                             As such, human telegraphed movements too slow for the mission, and while complete autopilot
                             is impossible for such a complex mission, the rovers, landers, and spacecraft made by NASA
                             had to be programmer with autopilot.
                         </p>
-                        <p class="ml-3 ml-lg-4">
+                        <p class="ml-4 ml-sm-3">
                             To solve this problem, Sojourner, along with every rover to land on Mars, is equipped with
                             software dedicated to autonomously moving the rover across the martian surface.
                         </p>
-                        <p class="ml-3 ml-lg-4">
+                        <p class="ml-4 ml-sm-3">
                             While Sojourner was comparatively basic in it's software's autonomy, the software was
                             helpful to operators in visualizing and telegraphing instructions across the rocky terrain
                             of Ares Vallis.
@@ -108,11 +107,11 @@
                 </b-row>
             </b-jumbotron>
             <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="w-100" align-h="around">
-                    <b-col cols="8" lg="4" align-self="center">
+                <b-row class="w-100 px-3 px-sm-0" align-h="around">
+                    <b-col cols="10" lg="4" align-self="center">
                         <b-img fluid-grow class="shadow-lg" src="./assets/spirit.jpg"></b-img>
                     </b-col>
-                    <b-col class="ml-n5 pl-lg-5" cols="12" lg="7" align-self="center">
+                    <b-col class="ml-n5 pl-lg-5 pt-3 pt-lg-0" cols="12" lg="7" align-self="center">
                         <h1 id="spirit">
                             Spirit
                         </h1>
@@ -204,11 +203,11 @@
 @import "./scss/_variables.scss";
 
 $grid-breakpoints: (
-  xs: 0,
-  sm: 456px,
-  md: 789px,
-  lg: 900px,
-  xl: 1450px
+    xs: 0,
+    sm: 456px,
+    md: 689px,
+    lg: 900px,
+    xl: 1450px
 );
 
 @import '~bootstrap/scss/bootstrap';
@@ -261,10 +260,15 @@ abbr {
     color: $white;
 }
 
+.badge-dark {
+    background-color: lighten($primary, 9%);
+}
+
 .navbar {
     @extend .bg-black;
+
     + #content {
-        margin-top: 2.5em;
+        margin-top: 3.225em;
     }
 }
 
@@ -293,11 +297,25 @@ a {
     }
 }
 
-#marker-xs { color: red; }
-#marker-sm { color: purple; }
-#marker-md { color: blue; }
-#marker-lg { color: teal; }
-#marker-xl { color: lightgreen; }
+#marker-xs {
+    color: #ff0000;
+}
+
+#marker-sm {
+    color: #f37506;
+}
+
+#marker-md {
+    color: #0090ff;
+}
+
+#marker-lg {
+    color: #05ff80;
+}
+
+#marker-xl {
+    color: #82f500;
+}
 
 .exo-2 {
     font-family: 'Exo 2', sans-serif;