Finished design for the homepage

This commit is contained in:
ポール ウェッブ 2018-05-03 16:55:34 -05:00
parent c50fb2be90
commit 53571f747c
8 changed files with 170 additions and 72 deletions

View file

@ -0,0 +1,4 @@
<svg viewBox="0 0 245 240" xmlns="http://www.w3.org/2000/svg">
<path d="M104.4, 103.9c-5.7, 0 -10.2, 5 -10.2, 11.1c0, 6.1 4.6, 11.1 10.2, 11.1c5.7, 0 10.2, -5 10.2, -11.1c0.1, -6.1 -4.5, -11.1 -10.2, -11.1Zm36.5, 0c-5.7, 0 -10.2, 5 -10.2, 11.1c0, 6.1 4.6, 11.1 10.2, 11.1c5.7, 0 10.2, -5 10.2, -11.1c0, -6.1 -4.5, -11.1 -10.2, -11.1Z"/>
<path d="M189.5, 20l-134, 0c-11.3, 0 -20.5, 9.2 -20.5, 20.6l0, 135.2c0, 11.4 9.2, 20.6 20.5, 20.6l113.4, 0l-5.3, -18.5l12.8, 11.9l12.1, 11.2l21.5, 19l0, -179.4c0, -11.4 -9.2, -20.6 -20.5, -20.6Zm-38.6, 130.6c0, 0 -3.6, -4.3 -6.6, -8.1c13.1, -3.7 18.1, -11.9 18.1, -11.9c-4.1, 2.7 -8, 4.6 -11.5, 5.9c-5, 2.1 -9.8, 3.5 -14.5, 4.3c-9.6, 1.8 -18.4, 1.3 -25.9, -0.1c-5.7, -1.1 -10.6, -2.7 -14.7, -4.3c-2.3, -0.9 -4.8, -2 -7.3, -3.4c-0.3, -0.2 -0.6, -0.3 -0.9, -0.5c-0.2, -0.1 -0.3, -0.2 -0.4, -0.3c-1.8, -1 -2.8, -1.7 -2.8, -1.7c0, 0 4.8, 8 17.5, 11.8c-3, 3.8 -6.7, 8.3 -6.7, 8.3c-22.1, -0.7 -30.5, -15.2 -30.5, -15.2c0, -32.2 14.4, -58.3 14.4, -58.3c14.4, -10.8 28.1, -10.5 28.1, -10.5l1, 1.2c-18, 5.2 -26.3, 13.1 -26.3, 13.1c0, 0 2.2, -1.2 5.9, -2.9c10.7, -4.7 19.2, -6 22.7, -6.3c0.6, -0.1 1.1, -0.2 1.7, -0.2c6.1, -0.8 13, -1 20.2, -0.2c9.5, 1.1 19.7, 3.9 30.1, 9.6c0, 0 -7.9, -7.5 -24.9, -12.7l1.4, -1.6c0, 0 13.7, -0.3 28.1, 10.5c0, 0 14.4, 26.1 14.4, 58.3c0, 0 -8.5, 14.5 -30.6, 15.2Z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -0,0 +1,4 @@
<svg viewBox="0 0 245 240" xmlns="http://www.w3.org/2000/svg">
<circle cx="122.5" cy="120" r="87.5"/>
<path d="M180.833, 120c0, -7.061 -5.731, -12.792 -12.792, -12.792c-3.48, 0 -6.55, 1.33 -8.801, 3.581c-8.699, -6.242 -20.775, -10.336 -34.079, -10.847l5.833, -27.325l18.933, 3.991c0.205, 4.81 4.196, 8.699 9.108, 8.699c5.015, 0 9.108, -4.094 9.108, -9.108c0, -5.015 -4.093, -9.108 -9.108, -9.108c-3.582, 0 -6.652, 2.046 -8.085, 5.117l-21.184, -4.503c-0.614, -0.103 -1.228, 0 -1.74, 0.307c-0.511, 0.307 -0.818, 0.818 -1.023, 1.432l-6.447, 30.498c-13.612, 0.409 -25.79, 4.4 -34.591, 10.847c-2.252, -2.149 -5.424, -3.581 -8.801, -3.581c-7.062, 0 -12.793, 5.731 -12.793, 12.792c0, 5.219 3.071, 9.62 7.573, 11.667c-0.204, 1.228 -0.307, 2.558 -0.307, 3.889c0, 19.649 22.822, 35.511 51.068, 35.511c28.245, 0 51.067, -15.862 51.067, -35.511c0, -1.331 -0.102, -2.559 -0.307, -3.787c4.196, -2.047 7.368, -6.55 7.368, -11.769Zm-87.5, 9.108c0, -5.014 4.094, -9.108 9.109, -9.108c5.014, 0 9.108, 4.094 9.108, 9.108c0, 5.015 -4.094, 9.108 -9.108, 9.108c-5.015, 0 -9.109, -4.093 -9.109, -9.108Zm50.863, 24.05c-6.243, 6.243 -18.114, 6.652 -21.594, 6.652c-3.479, 0 -15.453, -0.512 -21.593, -6.652c-0.921, -0.921 -0.921, -2.456 0, -3.377c0.921, -0.921 2.456, -0.921 3.377, 0c3.889, 3.889 12.281, 5.321 18.319, 5.321c6.038, 0 14.327, -1.432 18.318, -5.321c0.921, -0.921 2.457, -0.921 3.378, 0c0.716, 1.023 0.716, 2.456 -0.205, 3.377Zm-1.638, -14.942c-5.014, 0 -9.108, -4.093 -9.108, -9.108c0, -5.014 4.094, -9.108 9.108, -9.108c5.015, 0 9.109, 4.094 9.109, 9.108c0, 5.015 -4.094, 9.108 -9.109, 9.108Z" fill="#fff"/>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View file

@ -0,0 +1,4 @@
<svg viewBox="0 0 245 240" xmlns="http://www.w3.org/2000/svg">
<path d="M130.394, 104.948l-23.347, 7.82l7.554, 22.552l23.347, -7.82l-7.554, -22.552Z"/>
<path d="M202.665, 95.937c-18.048, -60.159 -44.07, -74.149 -104.228, -56.102c-60.159, 18.048 -74.149, 44.07 -56.102, 104.228c18.048, 60.159 44.07, 74.149 104.228, 56.102c60.159, -18.048 74.149, -44.07 56.102, -104.228Zm-30.359, 39.033l-11.333, 3.777l3.918, 11.752c1.539, 4.757 -0.98, 9.933 -5.736, 11.472c-0.98, 0.28 -2.099, 0.56 -3.078, 0.42c-3.638, -0.14 -7.135, -2.519 -8.394, -6.156l-3.918, -11.752l-23.364, 7.835l3.918, 11.752c1.539, 4.756 -0.98, 9.933 -5.736, 11.472c-0.98, 0.279 -2.099, 0.559 -3.078, 0.419c-3.638, -0.14 -7.135, -2.518 -8.394, -6.155l-3.918, -11.752l-11.332, 3.777c-0.979, 0.28 -2.098, 0.56 -3.078, 0.42c-3.637, -0.14 -7.135, -2.518 -8.394, -6.156c-1.539, -4.757 0.979, -9.933 5.736, -11.472l11.332, -3.777l-7.554, -22.525l-11.333, 3.778c-0.979, 0.279 -2.098, 0.559 -3.078, 0.419c-3.637, -0.14 -7.135, -2.518 -8.394, -6.155c-1.539, -4.757 0.98, -9.934 5.736, -11.473l11.332, -3.777l-3.917, -11.752c-1.539, -4.757 0.98, -9.933 5.736, -11.472c4.757, -1.539 9.933, 0.979 11.472, 5.736l3.918, 11.752l23.363, -7.835l-3.917, -11.751c-1.539, -4.757 0.979, -9.934 5.736, -11.473c4.757, -1.538 9.933, 0.98 11.472, 5.736l3.918, 11.752l11.332, -3.777c4.756, -1.539 9.933, 0.979 11.472, 5.736c1.539, 4.757 -0.98, 9.933 -5.736, 11.472l-11.332, 3.777l7.554, 22.525l11.333, -3.777c4.756, -1.539 9.933, 0.979 11.472, 5.736c1.539, 4.756 -0.98, 9.933 -5.736, 11.472Z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -0,0 +1,2 @@
.ancillary {
}

View file

@ -129,10 +129,66 @@
border-bottom: 1px solid rgba($black, 0.05);
}
&.docs,
&.develop {
h3 {
// text-align: right;
&.community {
p {
margin-right: auto;
margin-left: auto;
text-align: center;
}
ul {
list-style-type: none;
padding-top: 1rem;
&::after {
@include clearfix;
}
li {
float: left;
font-size: 1.5rem;
padding-top: 5rem;
position: relative;
text-align: center;
width: calc(100% / 3);
&::before {
width: 100%; height: 100%;
top: 0; left: 0;
background-position: center 0;
background-repeat: no-repeat;
background-size: 5rem;
content: "";
position: absolute;
}
a {
display: block;
position: relative;
transition: color 0.2s;
&:not(:hover) {
color: inherit;
}
&:hover {
color: $teal;
}
}
&:nth-child(1)::before {
background-image: url("../media/svg/discord.svg");
}
&:nth-child(2)::before {
background-image: url("../media/svg/reddit.svg");
}
&:nth-child(3)::before {
background-image: url("../media/svg/slack.svg");
}
}
}
}
@ -170,6 +226,20 @@
position: absolute;
}
a {
display: block;
position: relative;
transition: color 0.2s;
&:not(:hover) {
color: inherit;
}
&:hover {
color: $teal;
}
}
&:nth-child(1)::before {
background-image: url("../media/svg/flag.svg");
}

View file

@ -0,0 +1,40 @@
.footer {
background-color: $black;
color: $white;
font-size: 1rem;
padding-top: 2rem;
padding-bottom: 2rem;
ul {
align-items: stretch;
display: flex;
flex-flow: row wrap;
list-style-type: none;
li {
padding-right: 0.5rem;
padding-left: 0.5rem;
&:first-of-type {
flex: 1;
}
&:last-of-type {
cursor: default;
opacity: 0.3;
}
}
}
a {
transition: color 0.2s;
&:not(:hover) {
color: inherit;
}
&:hover {
color: $teal;
}
}
}

View file

@ -3,7 +3,6 @@
background-color: $white;
box-shadow: 0 1px 5px rgba($black, 0.1);
// color: $white;
position: fixed;
width: 100%;
z-index: 10;

View file

@ -39,7 +39,6 @@
<template v-if="$page.frontmatter.home">
<section class="home hero">
<!--/ <h1 class="home__heading">LBRY Technology</h1> /-->
<div>
<h2>
LBRY is a free, open, and community-run digital marketplace.<br/>
@ -78,7 +77,9 @@
<section class="home docs">
<div class="inner-wrap">
<h3>Documentation</h3>
<p>Text and such</p>
<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>
@ -88,11 +89,11 @@
<p>Interested in progressing content freedom? Awesome! No matter your experience or skill level, <strong>you</strong> can make a difference.</p>
<ul>
<li>Raising Issues</li>
<li>Coding</li>
<li>Creative</li>
<li>Translating</li>
<li>Testing</li>
<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>
@ -100,29 +101,24 @@
<section class="home develop">
<div class="inner-wrap">
<h3>Development</h3>
<p>Text and such</p>
<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>Text and such</p>
<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>
<!--/ <hook></hook> /-->
<!--/
<v-container fluid>
<v-layout row wrap>
<v-flex>
<Content custom></Content>
<edit-link :path="this.$page.path"></edit-link>
</v-flex>
</v-layout>
</v-container>
/-->
</template>
<template v-else-if="$page.path == '/whitepaper.html'">
@ -130,18 +126,31 @@
</template>
<template v-else>
<v-container>
<v-layout>
<v-flex>
<Sidebar v-if="$page.headers"></Sidebar>
<Content custom></Content>
<edit-link :path="this.$page.path"></edit-link>
</v-flex>
</v-layout>
</v-container>
<section class="ancillary">
<div class="inner-wrap">
{{ $page.title }}
<Content custom></Content>
<edit-link :path="this.$page.path"></edit-link>
</div>
</section>
</template>
</v-content>
<footer class="footer">
<div class="inner-wrap">
<ul>
<li><a href=""> LBRY.io</a></li>
<li><a href="">Get</a></li>
<li><a href="">Learn</a></li>
<li><a href="">News</a></li>
<li><a href="">Chat</a></li>
<li><a href="">GitHub</a></li>
<li>MIT Licensed</li>
</ul>
</div>
</footer>
</v-app>
</template>
@ -211,8 +220,6 @@ function updateMetaTags (meta, current) {
}
</script>
<!--/ <style src="../../node_modules/vuetify/dist/vuetify.min.css"></style> /-->
<style lang="scss">
@import "../scss/type/karla";
@import "../scss/init/colors";
@ -221,39 +228,7 @@ function updateMetaTags (meta, current) {
@import "../scss/init/mixins";
@import "../scss/layout";
@import "../scss/pages/home";
@import "../scss/pages/ancillary";
@import "../scss/partials/navigation";
/*
html {
font-size: 16px;
}
pre {
text-align: left;
overflow-x: auto;
}
img {
max-width: 100%;
}
.content.custom {
display: block;
}
.toolbar__title {
a {
text-decoration: none;
&:hover {
color: black;
}
}
}
#in-development-alert {
a {
color: white;
}
}
*/
@import "../scss/partials/footer";
</style>