mirror of
https://github.com/Xevion/history-of-robotics.git
synced 2026-01-31 00:24:29 -06:00
finish up sojourner docs, scale sub jumbotron header text h2 -> h3, import mixins for body font size scaling
This commit is contained in:
Xevion
@@ -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}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
+183
-222
@@ -1,233 +1,194 @@
|
||||
<!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');
|
||||
<!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');
|
||||
|
||||
/* Shamelessly stolen from Tim Hazledine */
|
||||
/* Source: https://codepen.io/tomhazledine/pen/dvKZLg */
|
||||
/* Shamelessly stolen from Tim Hazledine */
|
||||
/* Source: https://codepen.io/tomhazledine/pen/dvKZLg */
|
||||
|
||||
.logo {
|
||||
position: fixed;
|
||||
width: 10em;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.swoosh {
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.swoosh-1 {
|
||||
top: 3.5em;
|
||||
width: 5em;
|
||||
height: 3em;
|
||||
border-top: 0.5em solid #ee2c3e;
|
||||
border-top-left-radius: 10em 2em;
|
||||
z-index: 3;
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
||||
.swoosh-2 {
|
||||
top: -.3em;
|
||||
left: 4em;
|
||||
width: 6em;
|
||||
height: 3em;
|
||||
border-bottom: 0.5em solid #ee2c3e;
|
||||
border-bottom-right-radius: 10em 4em;
|
||||
z-index: 1;
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
||||
.swoosh-3 {
|
||||
top: .8em;
|
||||
left: 5em;
|
||||
width: 5em;
|
||||
height: 2em;
|
||||
transform: rotate(-30deg);
|
||||
border-bottom: 0.2em solid #ee2c3e;
|
||||
border-bottom-right-radius: 10em 2em;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.swoosh-4 {
|
||||
top: 4.7em;
|
||||
left: 2em;
|
||||
width: 6em;
|
||||
height: 4em;
|
||||
border-top: 0.2em solid #ee2c3e;
|
||||
border-top-left-radius: 10em 3em;
|
||||
z-index: 5;
|
||||
transform: rotate(-30deg);
|
||||
}
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
top: 35px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 20em;
|
||||
text-align: center;
|
||||
display: block;
|
||||
color: #ffffff;
|
||||
line-height: .8;
|
||||
font-size: 47px;
|
||||
}
|
||||
|
||||
.orbit-outer {
|
||||
position: relative;
|
||||
width: 8em;
|
||||
height: 8em;
|
||||
margin-left: 0;
|
||||
perspective: 10em;
|
||||
transform: rotate(45deg);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.orbit-wrapper {
|
||||
font-size: 2em;
|
||||
margin: 0 auto;
|
||||
transform: rotateX(-60deg) translateZ(0);
|
||||
transform-style: preserve-3d;
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
.orbit {
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
border-radius: 50%;
|
||||
border: .1rem solid white;
|
||||
border-left-width: 0;
|
||||
position: relative;
|
||||
animation: spin 2s infinite linear;
|
||||
}
|
||||
|
||||
.orbit:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -.05rem;
|
||||
border-radius: 2em 0 0 0;
|
||||
border-left: .4rem solid white;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
transform: rotate(15deg);
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
|
||||
.orbit:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 2.3em;
|
||||
left: 0;
|
||||
background: white;
|
||||
transform: rotate(15deg);
|
||||
width: .5rem;
|
||||
height: .8rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
.logo {
|
||||
position: fixed;
|
||||
width: 10em;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-360deg);
|
||||
|
||||
.swoosh {
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.stars {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 9em;
|
||||
font-size: .2em;
|
||||
width: .5em;
|
||||
height: .5em;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
box-shadow: white 2em 0 0 -.1em, white 1em 1em 0 -.1em, white 1.4em -1em 0 -.2em, white -1em -.3em 0 -.1em, white -.1em 1.2em 0 -.2em, white -2em 1.5em 0 -.2em, white .5em 1.8em 0 -.1em, white 1em 2em 0 -.2em, white 2em 2.5em 0 -.2em, white 2.3em 2.1em 0 -.2em;
|
||||
}
|
||||
.swoosh-1 {
|
||||
top: 3.5em;
|
||||
width: 5em;
|
||||
height: 3em;
|
||||
border-top: 0.5em solid #ee2c3e;
|
||||
border-top-left-radius: 10em 2em;
|
||||
z-index: 3;
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
||||
.stars.stars-2 {
|
||||
top: 11em;
|
||||
left: 12em;
|
||||
transform: rotate(-40deg);
|
||||
}
|
||||
.swoosh-2 {
|
||||
top: -.3em;
|
||||
left: 4em;
|
||||
width: 6em;
|
||||
height: 3em;
|
||||
border-bottom: 0.5em solid #ee2c3e;
|
||||
border-bottom-right-radius: 10em 4em;
|
||||
z-index: 1;
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
||||
.stars.stars-3 {
|
||||
top: 9em;
|
||||
left: 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.swoosh-3 {
|
||||
top: .8em;
|
||||
left: 5em;
|
||||
width: 5em;
|
||||
height: 2em;
|
||||
transform: rotate(-30deg);
|
||||
border-bottom: 0.2em solid #ee2c3e;
|
||||
border-bottom-right-radius: 10em 2em;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
#loader {
|
||||
z-index: 100;
|
||||
background: #1a1a1a;
|
||||
padding: 0;
|
||||
font-family: 'Exo 2', sans-serif;
|
||||
text-transform: uppercase;
|
||||
overflow: hidden;
|
||||
min-height: calc(100vh - 60px);
|
||||
}
|
||||
.swoosh-4 {
|
||||
top: 4.7em;
|
||||
left: 2em;
|
||||
width: 6em;
|
||||
height: 4em;
|
||||
border-top: 0.2em solid #ee2c3e;
|
||||
border-top-left-radius: 10em 3em;
|
||||
z-index: 5;
|
||||
transform: rotate(-30deg);
|
||||
}
|
||||
|
||||
body, html {
|
||||
font-size: 15px;
|
||||
background: #edf0f6;
|
||||
margin: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
.text {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
top: 35px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 20em;
|
||||
text-align: center;
|
||||
display: block;
|
||||
color: #ffffff;
|
||||
line-height: .8;
|
||||
font-size: 47px;
|
||||
}
|
||||
|
||||
#app, #loader {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.orbit-outer {
|
||||
position: relative;
|
||||
width: 8em;
|
||||
height: 8em;
|
||||
margin-left: 0;
|
||||
perspective: 10em;
|
||||
transform: rotate(45deg);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
vertical-align: baseline;
|
||||
}</style>
|
||||
<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>
|
||||
.orbit-wrapper {
|
||||
font-size: 2em;
|
||||
margin: 0 auto;
|
||||
transform: rotateX(-60deg) translateZ(0);
|
||||
transform-style: preserve-3d;
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
.orbit {
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
border-radius: 50%;
|
||||
border: .1rem solid white;
|
||||
border-left-width: 0;
|
||||
position: relative;
|
||||
animation: spin 2s infinite linear;
|
||||
}
|
||||
|
||||
.orbit:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -.05rem;
|
||||
border-radius: 2em 0 0 0;
|
||||
border-left: .4rem solid white;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
transform: rotate(15deg);
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
|
||||
.orbit:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 2.3em;
|
||||
left: 0;
|
||||
background: white;
|
||||
transform: rotate(15deg);
|
||||
width: .5rem;
|
||||
height: .8rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.stars {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 9em;
|
||||
font-size: .2em;
|
||||
width: .5em;
|
||||
height: .5em;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
box-shadow: white 2em 0 0 -.1em, white 1em 1em 0 -.1em, white 1.4em -1em 0 -.2em, white -1em -.3em 0 -.1em, white -.1em 1.2em 0 -.2em, white -2em 1.5em 0 -.2em, white .5em 1.8em 0 -.1em, white 1em 2em 0 -.2em, white 2em 2.5em 0 -.2em, white 2.3em 2.1em 0 -.2em;
|
||||
}
|
||||
|
||||
.stars.stars-2 {
|
||||
top: 11em;
|
||||
left: 12em;
|
||||
transform: rotate(-40deg);
|
||||
}
|
||||
|
||||
.stars.stars-3 {
|
||||
top: 9em;
|
||||
left: 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
#loader {
|
||||
z-index: 100;
|
||||
background: #1a1a1a;
|
||||
padding: 0;
|
||||
font-family: 'Exo 2', sans-serif;
|
||||
text-transform: uppercase;
|
||||
overflow: hidden;
|
||||
min-height: calc(100vh - 60px);
|
||||
}
|
||||
|
||||
body, html {
|
||||
font-size: 15px;
|
||||
background: #edf0f6;
|
||||
margin: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#app, #loader {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
vertical-align: baseline;
|
||||
}</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>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user