Workaround for flex layout to behave
This commit is contained in:
ポール ウェッブ
parent
bd075f5818
commit
d79764d083
2 changed files with 98 additions and 92 deletions
|
|
@ -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 {
|
||||||
flex: 1;
|
display: flex;
|
||||||
padding-top: 4rem !important; // override Vue
|
flex-direction: column;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding-top: 4rem;
|
||||||
|
|
||||||
|
> div:first-of-type {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.inner-wrap {
|
.inner-wrap {
|
||||||
|
|
|
||||||
|
|
@ -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,93 +12,95 @@
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<template v-if="$page.frontmatter.home">
|
<template v-if="$page.frontmatter.home">
|
||||||
<section class="home hero">
|
<div>
|
||||||
<div>
|
<section class="home hero">
|
||||||
<h2>
|
<div>
|
||||||
LBRY is a free, open, and community-run digital marketplace.<br/>
|
<h2>
|
||||||
Build the future of content freedom.
|
LBRY is a free, open, and community-run digital marketplace.<br/>
|
||||||
</h2>
|
Build the future of content freedom.
|
||||||
</div>
|
</h2>
|
||||||
</section>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section class="home alert">
|
<section class="home alert">
|
||||||
<div class="inner-wrap">
|
<div class="inner-wrap">
|
||||||
<strong>This website is in beta.</strong> We are actively developing this website to showcase and teach about the LBRY protocol. All things may not work as expected!<br/>This website is open source and you can <a href="https://github.com/lbryio/lbry.tech" target="_blank">contribute to it on Github</a>.
|
<strong>This website is in beta.</strong> We are actively developing this website to showcase and teach about the LBRY protocol. All things may not work as expected!<br/>This website is open source and you can <a href="https://github.com/lbryio/lbry.tech" target="_blank">contribute to it on Github</a>.
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="home features">
|
<section class="home features">
|
||||||
<ul class="home__features">
|
<ul class="home__features">
|
||||||
<li class="home__feature">
|
<li class="home__feature">
|
||||||
<p class="home__feature__title"><strong>New to LBRY?</strong></p>
|
<p class="home__feature__title"><strong>New to LBRY?</strong></p>
|
||||||
<p class="home__feature__description">Learn how LBRY works in 3 easy steps</p>
|
<p class="home__feature__description">Learn how LBRY works in 3 easy steps</p>
|
||||||
<a class="home__feature__cta" href="">Check it out</a>
|
<a class="home__feature__cta" href="">Check it out</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="home__feature">
|
<li class="home__feature">
|
||||||
<p class="home__feature__title"><strong>Want to contribute?</strong></p>
|
<p class="home__feature__title"><strong>Want to contribute?</strong></p>
|
||||||
<p class="home__feature__description">Start exploring our API and help make LBRY better</p>
|
<p class="home__feature__description">Start exploring our API and help make LBRY better</p>
|
||||||
<a class="home__feature__cta" href="">Jump in</a>
|
<a class="home__feature__cta" href="">Jump in</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="home intro">
|
|
||||||
<div class="inner-wrap">
|
|
||||||
<h3>Intro/Overview</h3>
|
|
||||||
<p>What if anyone in the world could publish a piece of digital content, anyone else in the world could access it, for free or for payment, and that entire system worked end-to-end without any centralized authority or point of control?</p>
|
|
||||||
|
|
||||||
<p>That's the idea behind LBRY. To create a market for accessing and publishing information that is global, decentralized, robust, optimal and complete.</p>
|
|
||||||
|
|
||||||
<a class="cta" href="">Learn more</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="home docs">
|
|
||||||
<div class="inner-wrap">
|
|
||||||
<h3>Documentation</h3>
|
|
||||||
<p>LBRY has enough moving parts to warrant comprehensive documentation. Whether you are interested in learning the technical details of our technology stack or you want to integrate LBRY into your life, you will find everything you need in our docs.</p>
|
|
||||||
|
|
||||||
<a class="cta" href="">Go deeper</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="home contribute">
|
|
||||||
<div class="inner-wrap">
|
|
||||||
<h3>Contribute</h3>
|
|
||||||
<p>Interested in progressing content freedom? Awesome! No matter your experience or skill level, <strong>you</strong> can make a difference.</p>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li><a href="">Raising Issues</a></li>
|
|
||||||
<li><a href="">Coding</a></li>
|
|
||||||
<li><a href="">Creative</a></li>
|
|
||||||
<li><a href="">Translating</a></li>
|
|
||||||
<li><a href="">Testing</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="home develop">
|
<section class="home intro">
|
||||||
<div class="inner-wrap">
|
<div class="inner-wrap">
|
||||||
<h3>Development</h3>
|
<h3>Intro/Overview</h3>
|
||||||
<p>Like a bit of documentation but would prefer to jump in and make your mark on the blockchain? Perhaps add cats to it?</p>
|
<p>What if anyone in the world could publish a piece of digital content, anyone else in the world could access it, for free or for payment, and that entire system worked end-to-end without any centralized authority or point of control?</p>
|
||||||
|
|
||||||
<a class="cta" href="">Learn the LBRY API</a>
|
<p>That's the idea behind LBRY. To create a market for accessing and publishing information that is global, decentralized, robust, optimal and complete.</p>
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="home community">
|
<a class="cta" href="">Learn more</a>
|
||||||
<div class="inner-wrap">
|
</div>
|
||||||
<h3>Community</h3>
|
</section>
|
||||||
<p>Hang out with us! We have a vibrant community of lbryians and would be <em>delighted</em> if you joined us.</p>
|
|
||||||
|
|
||||||
<ul>
|
<section class="home docs">
|
||||||
<li><a href="//discord.gg/YjYbwhS">Discord</a></li>
|
<div class="inner-wrap">
|
||||||
<li><a href="//www.reddit.com/r/lbry">Reddit</a></li>
|
<h3>Documentation</h3>
|
||||||
<li><a href="//chat.lbry.io">Slack</a></li>
|
<p>LBRY has enough moving parts to warrant comprehensive documentation. Whether you are interested in learning the technical details of our technology stack or you want to integrate LBRY into your life, you will find everything you need in our docs.</p>
|
||||||
</ul>
|
|
||||||
</div>
|
<a class="cta" href="">Go deeper</a>
|
||||||
</section>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="home contribute">
|
||||||
|
<div class="inner-wrap">
|
||||||
|
<h3>Contribute</h3>
|
||||||
|
<p>Interested in progressing content freedom? Awesome! No matter your experience or skill level, <strong>you</strong> can make a difference.</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Raising Issues</a></li>
|
||||||
|
<li><a href="">Coding</a></li>
|
||||||
|
<li><a href="">Creative</a></li>
|
||||||
|
<li><a href="">Translating</a></li>
|
||||||
|
<li><a href="">Testing</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="home develop">
|
||||||
|
<div class="inner-wrap">
|
||||||
|
<h3>Development</h3>
|
||||||
|
<p>Like a bit of documentation but would prefer to jump in and make your mark on the blockchain? Perhaps add cats to it?</p>
|
||||||
|
|
||||||
|
<a class="cta" href="">Learn the LBRY API</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="home community">
|
||||||
|
<div class="inner-wrap">
|
||||||
|
<h3>Community</h3>
|
||||||
|
<p>Hang out with us! We have a vibrant community of lbryians and would be <em>delighted</em> if you joined us.</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><a href="//discord.gg/YjYbwhS">Discord</a></li>
|
||||||
|
<li><a href="//www.reddit.com/r/lbry">Reddit</a></li>
|
||||||
|
<li><a href="//chat.lbry.io">Slack</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
<section class="ancillary">
|
<div>
|
||||||
<div class="inner-wrap">
|
<section class="ancillary">
|
||||||
{{ $page.title }}
|
<div class="inner-wrap">
|
||||||
<Content custom></Content>
|
{{ $page.title }}
|
||||||
</div>
|
<Content custom></Content>
|
||||||
</section>
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue