mirror of
https://github.com/Xevion/history-of-robotics.git
synced 2025-12-06 01:15:12 -06:00
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
This commit is contained in:
Xevion
102
src/App.vue
102
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;
|
||||
|
||||
Reference in New Issue
Block a user