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

fix sojourner row left padding active on XL viewport only, fix navbar breaking past 100vh, add colors to debug breakpoint marker

Browse Source
This commit is contained in:
Xevion
2020-08-16 20:39:46 -05:00
parent 88ff40af61
commit cdecabf34f
1 changed files with 19 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/App.vue
View File

@@ -1,8 +1,10 @@
<template>
<div id="app">
<b-navbar sticky fixed=true>
<b-navbar-brand class="px-2 pl-3 exo-2 font-weight-normal text-white" style="font-size: 1.5em;">
Sojourner & Spirit
<b-navbar class="header py-0" fixed="top">
<b-navbar-brand class="px-2 pl-3 exo-2 font-weight-normal text-white">
<h3>
Sojourner & Spirit
</h3>
</b-navbar-brand>
<b-navbar-nav v-b-scrollspy:content>
<b-nav-item href="#sojourner" link-classes="open-sans text-white" @click="scrollIntoView">
@@ -12,11 +14,11 @@
Spirit
</b-nav-item>
<b-nav-item class="float-right" link-classes="open-sans text-white font-weight-bold" v-if="showBreakpoint">
<span class="d-sm-none" style="text-decoration: line-through;">SM</span>
<span class="d-none d-sm-inline d-md-none">SM</span>
<span class="d-none d-md-inline d-lg-none">MD</span>
<span class="d-none d-lg-inline d-xl-none">LG</span>
<span class="d-none d-xl-inline">XL</span>
<span id="marker-xs" class="d-sm-none">SM</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>
</b-navbar-nav>
</b-navbar>
@@ -46,9 +48,9 @@
</b-col>
</b-row>
</b-jumbotron>
<b-jumbotron fluid container-fluid="fluid px-0" class="bg-black my-0 py-md-5 py-0 px-3 px-md-1 px-xl-2">
<b-jumbotron fluid container-fluid="fluid px-0" class="bg-black my-0 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="7" align-self="top">
<b-col cols="8" lg="6" align-self="top">
<h3>Communications</h3>
<p class="ml-4">
Sojourner is unique among the 4 rovers to successfully deploy on Mars in that it required
@@ -110,7 +112,7 @@
<b-col cols="8" 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="top">
<b-col class="ml-n5 pl-lg-5" cols="12" lg="7" align-self="center">
<h1 id="spirit">
Spirit
</h1>
@@ -129,8 +131,6 @@
Spirit was planned with just a 90 day mission in mind, but like it's twin, Spirit outlasted
this cycle far beyond what was originally planned.
</p>
<p class="ml-4">
</p>
</b-col>
</b-row>
</b-jumbotron>
@@ -284,6 +284,12 @@ a {
}
}
#marker-xs { color: red; }
#marker-sm { color: purple; }
#marker-md { color: blue; }
#marker-lg { color: teal; }
#marker-xl { color: lightgreen; }
.exo-2 {
font-family: 'Exo 2', sans-serif;
}