finish up sojourner docs, scale sub jumbotron header text h2 -> h3, import mixins for body font size scaling

This commit is contained in:
Xevion
2020-08-16 16:26:07 -05:00
parent 16b85f3c9d
commit 3e276cda75
10 changed files with 218 additions and 255 deletions

View File

@@ -1 +0,0 @@
@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);.jumbotron{color:#edf0f6}.jumbotron p{font-size:1.3em}abbr{-webkit-text-decoration-color:hsla(0,0%,100%,.5)!important;text-decoration-color:hsla(0,0%,100%,.5)!important}.bg-black,.navbar{background-color:#161616;color:#edf0f6}.jumbotron h1{font-size:2.1em}.carousel-caption{bottom:-10px;width:100%;background-size:cover;background-color:rgba(0,0,0,.45);padding-top:1rem;left:0}a{text-align:center}a:hover{color:#b0b0b0}.exo-2,.jumbotron h1{font-family:Exo\ 2,sans-serif}.jumbotron p,.open-sans{font-family:Open Sans,sans-serif}.nav-link,.navbar-brand{font-size:1.2em;color:#edf0f6}body,html{background-color:#161616;color:#edf0f6;max-width:100%;overflow-x:hidden;font-size:1em}

View File

File diff suppressed because one or more lines are too long

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 59 KiB

BIN
docs/favicon.png Normal file
View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

View File

@@ -1,12 +1,4 @@
<!DOCTYPE html> <!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/history-of-robotics/favicon.ico><title>History of Robotics - Spirit & Sojourner</title><style>@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@700&display=swap');
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=icon href=/history-of-robotics/favicon.ico>
<title>History of Robotics - Spirit & Sojourner</title>
<style>@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@700&display=swap');
/* Shamelessly stolen from Tim Hazledine */ /* Shamelessly stolen from Tim Hazledine */
/* Source: https://codepen.io/tomhazledine/pen/dvKZLg */ /* Source: https://codepen.io/tomhazledine/pen/dvKZLg */
@@ -199,35 +191,4 @@
padding: 0; padding: 0;
border: 0; border: 0;
vertical-align: baseline; vertical-align: baseline;
}</style> }</style><link href=/history-of-robotics/css/app.f6b350cc.css rel=preload as=style><link href=/history-of-robotics/css/chunk-vendors.db58f2bd.css rel=preload as=style><link href=/history-of-robotics/js/app.b2265a06.js rel=preload as=script><link href=/history-of-robotics/js/chunk-vendors.497ff8e8.js rel=preload as=script><link href=/history-of-robotics/css/chunk-vendors.db58f2bd.css rel=stylesheet><link href=/history-of-robotics/css/app.f6b350cc.css rel=stylesheet></head><body><noscript><strong>We're sorry but history-of-robotics doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app><div id=loader><div class=logo><div class="stars stars-1"></div><div class="stars stars-2"></div><div class="stars stars-3"></div><div class=swooshes><span class="swoosh swoosh-1"></span> <span class="swoosh swoosh-2"></span> <span class="swoosh swoosh-3"></span> <span class="swoosh swoosh-4"></span></div><h1 class=text>nasa</h1><div class=orbit-outer><div class=orbit-wrapper><div class=orbit></div></div></div></div></div></div><script src=/history-of-robotics/js/chunk-vendors.497ff8e8.js></script><script src=/history-of-robotics/js/app.b2265a06.js></script></body></html>
<link href=/history-of-robotics/css/app.46a3a532.css rel=preload as=style>
<link href=/history-of-robotics/css/chunk-vendors.db58f2bd.css rel=preload as=style>
<link href=/history-of-robotics/js/app.87118cc0.js rel=preload as=script>
<link href=/history-of-robotics/js/chunk-vendors.497ff8e8.js rel=preload as=script>
<link href=/history-of-robotics/css/chunk-vendors.db58f2bd.css rel=stylesheet>
<link href=/history-of-robotics/css/app.46a3a532.css rel=stylesheet>
</head>
<body>
<noscript><strong>We're sorry but history-of-robotics doesn't work properly without JavaScript enabled. Please
enable it to continue.</strong></noscript>
<div id=app>
<div id=loader>
<div class=logo>
<div class="stars stars-1"></div>
<div class="stars stars-2"></div>
<div class="stars stars-3"></div>
<div class=swooshes><span class="swoosh swoosh-1"></span> <span class="swoosh swoosh-2"></span>
<span class="swoosh swoosh-3"></span> <span class="swoosh swoosh-4"></span></div>
<h1 class=text>nasa</h1>
<div class=orbit-outer>
<div class=orbit-wrapper>
<div class=orbit></div>
</div>
</div>
</div>
</div>
</div>
<script src=/history-of-robotics/js/chunk-vendors.497ff8e8.js></script>
<script src=/history-of-robotics/js/app.87118cc0.js></script>
</body>
</html>

View File

File diff suppressed because one or more lines are too long

View File

File diff suppressed because one or more lines are too long

2
docs/js/app.b2265a06.js Normal file
View File

File diff suppressed because one or more lines are too long

View File

File diff suppressed because one or more lines are too long

View File

@@ -23,15 +23,15 @@
<p class="ml-4"> <p class="ml-4">
Launched into space on Launched into space on
<em class="text-nowrap" :title="this.moments.sojourner.launch.fromNow()"> <em class="text-nowrap" :title="this.moments.sojourner.launch.fromNow()">
{{ this.moments.sojourner.launch.format("MMMM Do, YYYY") }} {{ this.moments.sojourner.launch.format("MMMM Do, YYYY") }}</em>,
</em>,
Sojourner is the first wheeled vehicle to rove upon another planet - Mars. Sojourner is the first wheeled vehicle to rove upon another planet - Mars.
It landed on <em class="text-nowrap" :title="this.moments.sojourner.landing">July 4th, It landed on <em class="text-nowrap" :title="this.moments.sojourner.landing">July 4th,
1997</em> in the <em>Ares Vallis</em> region. 1997</em> in the <em>Ares Vallis</em> region.
</p> </p>
<p class="ml-4"> <p class="ml-4">
Despite it's original mission duration planned to be just 7 days, it stayed active for 83 Despite it's original mission duration planned to be just 7 days, it stayed active for 83
days in total. days in total. This rover paved the way for remote exploration on Mars, becoming the
blueprint for 3 more rovers.
</p> </p>
</b-col> </b-col>
<b-col md="6" xl="3" align-h="center" class="w-100 h-100"> <b-col md="6" xl="3" align-h="center" class="w-100 h-100">
@@ -42,7 +42,7 @@
<b-jumbotron fluid container-fluid class="bg-black my-0 py-md-5 py-sm-0 px-md-5 px-sm-3"> <b-jumbotron fluid container-fluid class="bg-black 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="around"> <b-row class="px-sm-3 px-md-3 w-100" align-h="around">
<b-col md="6" xl="6" align-self="top"> <b-col md="6" xl="6" align-self="top">
<h2>Communications</h2> <h3>Communications</h3>
<p class="ml-4"> <p class="ml-4">
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
@@ -53,7 +53,7 @@
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>
<h2>Tools</h2> <h3>Tools</h3>
<p class="ml-4 mb-1"> <p class="ml-4 mb-1">
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:
@@ -65,20 +65,17 @@
</li> </li>
<li> <li>
<em>Rover Control Software</em> for coordinating movement, studying terrain features, <em>Rover Control Software</em> for coordinating movement, studying terrain features,
and viewing and viewing the nearby area in 3D space.
the nearby area in 3D space.
</li> </li>
<li> <li>
<em>Three cameras</em>, one color, two monochrome. However, the operators used images <em>Three cameras</em>, one color, two monochrome. However, the operators primiarily
from the used images from the lander's IMP camera system, as it had higher quality on top of
lander's having a height advantage over the rover.
IMP camera system primarily, as it had higher quality on top of having a height
advantage over the rover.
</li> </li>
</ul> </ul>
</b-col> </b-col>
<b-col md="6" xl="5" align-h="top" class="w-100 h-100"> <b-col md="6" xl="5" align-h="top" class="w-100 h-100">
<h2>Autonomy</h2> <h3>Autonomy</h3>
<p class="ml-3 ml-xl-4"> <p class="ml-3 ml-xl-4">
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
@@ -133,7 +130,7 @@
<b-jumbotron fluid container-fluid class="bg-black my-0 py-md-5 py-sm-0 px-md-5 px-sm-3"> <b-jumbotron fluid container-fluid class="bg-black 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="around"> <b-row class="px-sm-3 px-md-3 w-100" align-h="around">
<b-col md="6" xl="5" align-self="center"> <b-col md="6" xl="5" align-self="center">
<h2>Autonomy</h2> <h3>Autonomy</h3>
<p class="ml-3 ml-xl-4"> <p class="ml-3 ml-xl-4">
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
@@ -155,7 +152,7 @@
</p> </p>
</b-col> </b-col>
<b-col md="6" xl="5" align-h="center" class="w-100 h-100"> <b-col md="6" xl="5" align-h="center" class="w-100 h-100">
<h2>Communications</h2> <h3>Communications</h3>
<p class="ml-4"> <p class="ml-4">
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
@@ -166,11 +163,10 @@
throughout throughout
it's lifetime on Mars, it never traveled more than a few dozen feet from the lander. it's lifetime on Mars, it never traveled more than a few dozen feet from the lander.
</p> </p>
<h2>Tools</h2> <h3>Tools</h3>
<p class="ml-4"> <p class="ml-4">
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, samples, taking pictures and more.
taking pictures and more.
</p> </p>
</b-col> </b-col>
</b-row> </b-row>
@@ -185,26 +181,27 @@
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&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"; @import "./scss/_variables.scss";
@import '~bootstrap/scss/bootstrap'; @import '~bootstrap/scss/bootstrap';
@import '~bootstrap/scss/_mixins';
html { html {
font-size: 1rem; font-size: 0.8rem;
} }
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
html { html {
font-size: 1.2rem; font-size: 0.9rem;
} }
} }
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
html { html {
font-size: 1.4rem; font-size: 1.1rem;
} }
} }
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
html { html {
font-size: 1.6rem; font-size: 1.2rem;
} }
} }
@@ -273,7 +270,6 @@ html, body {
color: $white; color: $white;
max-width: 100%; max-width: 100%;
overflow-x: hidden; overflow-x: hidden;
font-size: 1em;
} }
</style> </style>