This commit is contained in:
Jeremy Kauffman 2017-04-26 12:24:05 -04:00
parent 5bd96c7933
commit d7b40bc8f8
6 changed files with 50 additions and 32 deletions

View file

@ -2,33 +2,28 @@
<?php Response::setMetaTitle(__('title.home')) ?> <?php Response::setMetaTitle(__('title.home')) ?>
<?php Response::setMetaDescription(__('description.home')) ?> <?php Response::setMetaDescription(__('description.home')) ?>
<?php echo View::render('nav/_header', ['isDark' => false, 'isBordered' => false]) ?> <?php echo View::render('nav/_header', ['isDark' => false, 'isBordered' => false]) ?>
<main class="column-fluid"> <main class="column-fluid column-fluid--home">
<div class="span12"> <div class="span6">
<div class="cover cover-light cover-center" style="background-color: white"> <div class="cover cover-light cover-center content content-light">
<div class="content content-wide content-light" style="max-width: 800px"> <div class="spacer1" style="max-width: 800px">
<div class="spacer2"> <h1 class="cover-title cover-title-flat text-center">Content Freedom</h1>
<h1 class="cover-title cover-title-flat text-center">Content Freedom.</h1> <h2 class="cover-subtitle cover-title-flat">LBRY is a free, open, and community-run digital marketplace.</h2>
<h2 class="cover-subtitle cover-title-flat">Watch, read or play what you choose. Earn full value for what you create.</h2>
<h3 class="cover-subtitle cover-title-flat">You own your data. You control the network. Indeed, you <em>are</em> the network.</h3> <h3 class="cover-subtitle cover-title-flat">You own your data. You control the network. Indeed, you <em>are</em> the network.</h3>
<h3 class="cover-subtitle cover-title-flat">Hollywood films, college lessons, amazing streamers and more are on the first media platform ruled by <em>you</em>.</h3> <h3 class="cover-subtitle cover-title-flat">Hollywood films, college lessons, amazing streamers and more are on the first media network ruled by <em>you</em>.</h3>
</div> </div>
<div class="control-group spacer2 text-center"> <div class="spacer2 text-center">
<div class="control-item">
<a href="/get" class="btn-primary btn-large">Early Access</a> <a href="/get" class="btn-primary btn-large">Early Access</a>
</div>
<div class="control-item">
<a href="/learn" class="btn-link btn-large">{{global.learn}}</a> <a href="/learn" class="btn-link btn-large">{{global.learn}}</a>
</div> </div>
<div class="cover-special-message spacer1 text-center">
<p>Want a super early version and willing to suffer?<br/>
<a href="https://slack.lbry.io" class="link-primary">Join our Slack</a>.</p>
</div> </div>
</div> </div>
<div class="cover-special-message text-center">
<p>GitHub user? <a href="/quickstart" class="link-primary">Try our API immediately.</a></p>
<p>Early access begins April 2017.</p>
</div>
<div class="video" style="margin: 48px 0">
<iframe width="560" height="315" src="https://www.youtube.com/embed/DjouYBEkQPY" frameborder="0" allowfullscreen></iframe>
</div>
</div> </div>
<div class="span6" style="max-height: calc(100vh - 78px)">
<div class="cover cover-center">
<img style="box-shadow: 0 0 10px rgba(0,0,0,0.8); max-height: calc(100vh - 126px)" src="/img/lbry-ui.png" />
</div> </div>
</div> </div>
</main> </main>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 190 KiB

After

Width:  |  Height:  |  Size: 442 KiB

View file

@ -31,6 +31,20 @@ body
background-attachment: fixed; background-attachment: fixed;
@include background-size(cover); @include background-size(cover);
} }
.bg-image-tile
{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
height: 100vh;
width: 100vw;
z-index: -1;
background: #fff;
background-repeat: repeat;
background-position: top left;
}
iframe, img { max-width: 100%; } iframe, img { max-width: 100%; }
iframe { margin: 0 auto; display: block; } iframe { margin: 0 auto; display: block; }

View file

@ -12,10 +12,6 @@
{ {
max-width: none; max-width: none;
} }
&.content-wide
{
max-width: 1400px;
}
&.content-tile &.content-tile
{ {
max-width: $max-text-width; max-width: $max-text-width;

View file

@ -20,21 +20,25 @@
font-size: 1.2em; font-size: 1.2em;
background-position: center; background-position: center;
} }
@media (max-width: $mobile-width-threshold) { @media (max-width: 1199px) {
.cover { padding: $spacing-vertical $spacing-vertical * 2 / 3; } .cover { padding: $spacing-vertical $spacing-vertical * 2 / 3; }
.cover-title { font-size: 2.8em; margin-bottom: $spacing-vertical; } .cover-title { font-size: 2.6em; margin-bottom: $spacing-vertical; }
.cover-subtitle { font-size: 1.2em; } .cover-subtitle { font-size: 1.2em; }
} }
@media (min-width: $mobile-width-threshold) { @media (min-width: 1200px) and (max-width: 1599px) {
.cover-title { font-size: 3.2em; &.cover-title-tile { font-size: 2.4em; max-width: 660px; margin-left: auto; margin-right: auto; } }
.cover-subtitle { font-size: 1.4em; }
}
@media (min-width: 1600px) {
.cover-title { font-size: 4.0em; &.cover-title-tile { font-size: 2.8em; max-width: 660px; margin-left: auto; margin-right: auto; } } .cover-title { font-size: 4.0em; &.cover-title-tile { font-size: 2.8em; max-width: 660px; margin-left: auto; margin-right: auto; } }
.cover-subtitle { font-size: 1.4em; } .cover-subtitle { font-size: 1.4em; }
} }
@media (max-width: $max-content-width) and (min-width: $mobile-width-threshold) { @media (max-width: $max-content-width) and (min-width: $mobile-width-threshold) {
.cover { padding: $spacing-vertical * 1.5 $spacing-vertical * 2; } .cover { padding: $spacing-vertical $spacing-vertical * 1.5; }
.cover-column { padding-left: $spacing-vertical * 0.5; padding-right: $spacing-vertical * 0.5; } .cover-column { padding-left: $spacing-vertical * 0.5; padding-right: $spacing-vertical * 0.5; }
} }
@media (min-width: $max-content-width) { @media (min-width: $max-content-width) {
.cover { padding: $spacing-vertical * 1.5 $spacing-vertical * 3; } .cover { padding: $spacing-vertical $spacing-vertical * 2; }
.cover-column { padding-left: $spacing-vertical * 1.5; padding-right: $spacing-vertical * 1.5; } .cover-column { padding-left: $spacing-vertical * 1.5; padding-right: $spacing-vertical * 1.5; }
} }

View file

@ -103,3 +103,12 @@ $gutter_fluid: 4;
} }
} }
} }
@media(max-width: 1199px) {
.column-fluid--home [class*="span"] {
float: none !important;
width: 100% !important;
margin-left: 0 !important;
display: block !important;
}
}