Workaround for flex layout to behave

This commit is contained in:
ポール ウェッブ 2018-05-08 14:07:47 -05:00
parent bd075f5818
commit d79764d083
2 changed files with 98 additions and 92 deletions

View file

@ -8,11 +8,9 @@ html {
} }
body { body {
min-width: 320px; min-height: 100vh; min-width: 320px;
color: $black; color: $black;
display: flex;
flex-direction: column;
@include font-sans; @include font-sans;
font-size: 12px; font-size: 12px;
overflow-x: hidden; overflow-x: hidden;
@ -21,8 +19,14 @@ body {
} }
main { main {
display: flex;
flex-direction: column;
min-height: 100vh;
padding-top: 4rem;
> div:first-of-type {
flex: 1; flex: 1;
padding-top: 4rem !important; // override Vue }
} }
.inner-wrap { .inner-wrap {

View file

@ -1,7 +1,5 @@
<template> <template>
<main> <main>
<nav class="navigation"> <nav class="navigation">
<div class="inner-wrap"> <div class="inner-wrap">
<router-link class="navigation__item" to="/" title="Go back home">LBRY</router-link> <router-link class="navigation__item" to="/" title="Go back home">LBRY</router-link>
@ -14,6 +12,7 @@
</nav> </nav>
<template v-if="$page.frontmatter.home"> <template v-if="$page.frontmatter.home">
<div>
<section class="home hero"> <section class="home hero">
<div> <div>
<h2> <h2>
@ -101,6 +100,7 @@
</ul> </ul>
</div> </div>
</section> </section>
</div>
</template> </template>
<template v-else-if="$page.path == '/whitepaper.html'"> <template v-else-if="$page.path == '/whitepaper.html'">
@ -108,12 +108,14 @@
</template> </template>
<template v-else> <template v-else>
<div>
<section class="ancillary"> <section class="ancillary">
<div class="inner-wrap"> <div class="inner-wrap">
{{ $page.title }} {{ $page.title }}
<Content custom></Content> <Content custom></Content>
</div> </div>
</section> </section>
</div>
</template> </template>
<footer class="footer"> <footer class="footer">