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

add proper carousel caption background, extend text shadow, font and navbar customization, darken black

Browse Source
This commit is contained in:
Xevion
2020-08-13 07:03:26 -05:00
parent 3791d26beb
commit 61b1b80f2f
2 changed files with 47 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/App.vue
View File

@@ -1,31 +1,34 @@
<template>
<div id="app">
<b-nav card-header slot="header" v-b-scrollspy:nav-scroller>
<b-nav-item href="#sojourner-intro" class="font-weight-bolder" @click="scrollIntoView">Sojourner & Spirit
<b-navbar-brand class="px-2 pl-3 exo-2 font-weight-normal" style="font-size: 1.5em;">
Sojourner & Spirit
</b-navbar-brand>
<b-nav-item href="#sojourner-intro" link-classes="open-sans" @click="scrollIntoView">Sojourner
</b-nav-item>
<!-- <b-nav-item href="#mdo" @click="scrollIntoView">@mdo</b-nav-item>-->
<!-- <b-nav-item href="#pi0" @click="scrollIntoView">@pi0</b-nav-item>-->
</b-nav>
<b-jumbotron fluid="true" class="text-dark py-5 px-5" container-fluid="true">
<b-row class="px-3 w-100" align-h="around">
<b-col md="6" xl="5">
<h1 id="sojourner-intro" class="ml-n4">
<b-col md="6" xl="5" align-self="center">
<h2 id="sojourner-intro" class="ml-n4 exo-2">
Sojourner
</h1>
<h3>
Sojourner is a robotic Mars rover that landed on July 4, 1997 in the Ares Vallis region.
</h2>
<p class="open-sans" style="font-size: 1.3em;">
Launched into space on <em>December 4th, 1996</em>, Sojourner is the first wheeled vehicle to
rove upon another planet - Mars.
<br>
The rover was the first wheeled vehicle to rove another planet, and was part of the Mars
Pathfinder mission.
</h3>
It landed on <em>July 4th, 1997</em> in the <em>Ares Vallis</em>
region.
</p>
</b-col>
<b-col md="6" xl="3">
<b-carousel
:interval="5000"
indicators
:interval="4000"
img-height="400"
img-width="400"
style="text-shadow: 4px 2px 2px #333333;"
style="text-shadow: 6px 5px 2px black;"
>
<b-carousel-slide
caption="Mars Pathfinder"
@@ -42,8 +45,38 @@
</template>
<style lang="scss">
@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');
@import "./scss/_variables.scss";
.carousel-caption {
bottom: -10px;
}
.carousel-caption {
width: 100%;
background-size: cover;
background-color: rgba(0, 0, 0, .45);
padding-top: 1rem;
left: 0;
}
a {
text-align: center;
&:hover {
color: #b0b0b0;
}
}
.exo-2 {
font-family: 'Exo 2', sans-serif;
}
.open-sans {
font-family: 'Open Sans', sans-serif;
}
.nav-link {
font-size: 1.2em;
color: white;
@@ -54,6 +87,7 @@
color: $white;
max-width: 100%;
overflow-x: hidden;
font-size: 1em;
}
</style>

2
src/scss/_variables.scss
View File

@@ -1,2 +1,2 @@
$primary: #1a1a1a;
$primary: #161616;
$white: #edf0f6;