xevion/history-of-robotics
1
0
Fork 0
mirror of https://github.com/Xevion/history-of-robotics.git synced 2025-12-06 13:15:17 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Xevion
2020-08-16 23:10:25 -05:00
parent 9f6432453b
commit a3043ce39c
1 changed files with 60 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/App.vue
View File

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