LBRYFoundation/lbry.com
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry.com.git synced 2025-08-23 17:47:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

halfway

Browse source
This commit is contained in:
Jeremy Kauffman 2020-12-15 14:27:46 -05:00
parent af518b4dd4
commit 0a983bf60b
7 changed files with 66 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
view/template/download/_downloadRow.php
View file

@ -1,5 +1,17 @@
<div style="min-height: 40px; line-height: 40px;"> <div style=" display: flex; margin-top: 2rem;">
<div style="flex: 1; text-align: center;">
<div style="line-height: 32px;">
<?php echo View::render('download/_downloadButton', ['buttonStyle' => 'primary'])?> <?php echo View::render('download/_downloadButton', ['buttonStyle' => 'primary'])?>
<a href="https://lbry.tv" class="button button--inverse">Open in Browser</a> </div>
<a href="/get?showall=1" class="button--link hide--mobile">show all platforms</a> <small style="margin-top: 2px; display: inline-block"><a href="/get?showall=1" class="button--link hide--mobile">other platforms</a></small>
</div>
<div style="flex: 1; text-align: center">
<a href="https://odysee.com">
<img style="height: 40px;" src="https://odysee.com/public/img/odysee.png" />
</a>
<br/>
<small class="meta" style=" display: inline-block; max-width: 160px">use LBRY in your browser, with odysee.com</small>
</div>
</div> </div>

2
view/template/nav/_header.php
View file

@ -251,7 +251,7 @@
<?php js_end() ?> <?php js_end() ?>
<span class="header__download"> <span class="header__download">
<a href="https://open.lbry.com" class="button button--primary">Open LBRY</a> <a href="https://open.lbry.com" class="button button--primary">Try Odysee</a>
</span> </span>
</div> </div>
</header> </header>

22
view/template/page/home.php
View file

@ -6,10 +6,11 @@
<div class="inner-wrap"> <div class="inner-wrap">
<aside class="home__cta"> <aside class="home__cta">
<div class="home__cta-copy"> <div class="home__cta-copy">
<h1>It's time to take back control from YouTube and Amazon.</h1> <h1>LBRY does to publishing,<br/>
<p><small class="meta">Top creators, self-respecting users, the privacy conscious, computer geeks, freedom lovers, loveable kooks, and readers of small gray text everywhere choose LBRY, because it's open, fair, and free.</small></p> what Bitcoin did to money.</h1>
</div> <p><span class="meta">Join top creators and more than 10,000,000 people on LBRY, an open, free, and fair network for digital content.</span></p>
<?php echo View::render('download/_downloadRow') ?> <?php echo View::render('download/_downloadRow') ?>
</div>
</aside> </aside>
<figure class="home__preview"> <figure class="home__preview">
@ -29,21 +30,16 @@
</section> </section>
<section class="home__callout"> <section class="home__callout">
<p>LBRY is a secure, open, and community-run digital marketplace.</p> <h2>Enjoy the latest content from your favorite creators - as a user, not a product.</h2>
<p>Enjoy the latest content from your favorite creators - as a user, not a product.</p> <p>This video shows footage from <a href="https://odysee.com">odysee.com</a>, the most popular LBRY app. This same content can be accessed by <a href="/get">LBRY Desktop</a> and other clients as part of the web 3.0 LBRY network.</p>
</section> <div class="inner-wrap" style="margin-top: 1rem">
<iframe id="lbry-iframe" width="560" height="315" src="https://odysee.com/$/embed/odysee/7a416c44a6888d94fe045241bbac055c726332aa?r=9wKhJPioiNxTBjT6Zoqaf7LNDJcauUjg" allowfullscreen></iframe>
<section class="home__hype">
<div class="inner-wrap">
<p>See previews of the LBRY app and the great content available now on LBRY.</p>
<br>
<iframe width="560" height="315" src="https://lbry.tv/$/embed/meetlbrytv/c6c0a5caa6cc391696e1270e33cd9d24ee7c2d52" allowfullscreen></iframe>
</div> </div>
</section> </section>
<section class="home__cta"> <section class="home__cta">
<div class="inner-wrap"> <div class="inner-wrap">
<aside class="home__cta"><h2>Now Available for Desktop, Mobile, and Web Browsers.</h2></aside> <aside class="home__cta"><h2>Use Desktop and Mobile apps for control. Use web for ease.</h2></aside>
<?php echo View::render('download/_downloadRow') ?> <?php echo View::render('download/_downloadRow') ?>
</div> </div>
</section> </section>

13
web/components/sass/badge/_index.scss
View file

@ -22,11 +22,6 @@
.badge--free { .badge--free {
background-color: var(--lbry-blue-2); background-color: var(--lbry-blue-2);
[data-mode="dark"] & {
background-color: var(--lbry-blue-3);
color: var(--lbry-black);
}
} }
.badge--large { .badge--large {
@ -34,14 +29,6 @@
line-height: 1; line-height: 1;
} }
.badge--nsfw {
background-color: var(--lbry-grape-2);
[data-mode="dark"] & {
background-color: var(--lbry-grape-3);
color: var(--lbry-black);
}
}
.badge--primary { .badge--primary {
background-color: var(--lbry-teal-5); background-color: var(--lbry-teal-5);

9
web/components/sass/button/_index.scss
View file

@ -2,6 +2,7 @@
fill: currentColor; fill: currentColor;
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
display: inline-block;
} }
.button--alt { .button--alt {
@ -62,16 +63,8 @@
color: inherit; color: inherit;
transition: background-color 0.2s; transition: background-color 0.2s;
[data-mode="dark"] & {
border-color: rgba($lbry-white, 0.1);
}
&:hover { &:hover {
background-color: var(--lbry-gray-1); background-color: var(--lbry-gray-1);
[data-mode="dark"] & {
background-color: rgba($lbry-white, 0.1);
}
} }
} }

4
web/scss/_layout.scss
View file

@ -127,10 +127,10 @@ section {
small { small {
font-size: 0.8rem; font-size: 0.8rem;
}
&.meta { .meta {
color: var(--lbry-gray-5); color: var(--lbry-gray-5);
}
} }
strong { strong {

49
web/scss/pages/_home.scss
View file

@ -11,38 +11,62 @@
background-image: linear-gradient(to right, $lbry-teal-2, $lbry-cyan-3 100%); background-image: linear-gradient(to right, $lbry-teal-2, $lbry-cyan-3 100%);
background-size: cover; background-size: cover;
color: var(--lbry-white); color: var(--lbry-white);
font-weight: 300;
padding: 2rem; padding: 2rem;
text-align: center; text-align: center;
p { font-size: 1.2rem;
line-height: 1.55;
h2 {
margin-bottom: 1rem;
} }
@media (min-width: 1251px) { h2, p {
font-size: 2rem; max-width: 1000px;
margin-left: auto;
margin-right: auto;
} }
@media (min-width: 1001px) and (max-width: 1250px) { iframe {
font-size: 1.5rem; max-width: 560px;
margin-left: auto;
margin-right: auto;
} }
@media (max-width: 1000px) { a {
font-size: 1.25rem; text-decoration: underline;
}
}
.button--odysee {
padding: var(--spacing-xs) var(--spacing-s); // sass-lint:disable-line shorthand-values
background-color: rgb(229, 0, 84);
color: white;
border: 1px solid var(--lbry-gray-1);
border-radius: 1rem;
color: inherit;
transition: background-color 0.2s;
&:hover {
background-color: var(--lbry-gray-1);
} }
} }
.home__cta { .home__cta {
margin-bottom: 1rem;
text-align: center; text-align: center;
align-self: center; align-self: center;
h1 { h1 {
font-size: 2.5rem; font-size: 2.5rem;
font-weight: 200; font-weight: 200;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
p {
margin-bottom: 1rem;
}
div { div {
font-size: 1rem; font-size: 1rem;
@ -53,10 +77,7 @@
} }
.home__cta-copy { .home__cta-copy {
max-width: 700px; max-width: 500px;
p {
margin-bottom: 1rem;
}
} }
.home__hero { .home__hero {