LBRYCommunity/lbry.tech
1
0
Fork 0
Code Issues 13 Pull requests 8 Projects Releases Packages Wiki Activity

Added icons to "Contribute" section of homepage

Browse source
This commit is contained in:
ポール ウェッブ 2018-05-02 10:47:17 -05:00
parent e447ebeb26
commit c50fb2be90
7 changed files with 153 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.vuepress/media/svg/anchor.svg Executable file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M45, 19a3, 3, 0, 1, 0-2.82-4H28.9a5, 5, 0, 0, 0-9.8, 0H5.82a3, 3, 0, 1, 0, 0, 2h9.1q-0.77.46-1.5, 1a18.48, 18.48, 0, 0, 0-6.55, 9, 5, 5, 0, 1, 0, 2, .35A16.4, 16.4, 0, 0, 1, 19.18, 17.24a5, 5, 0, 0, 0, 9.65, 0A16.36, 16.36, 0, 0, 1, 39.11, 27.38a5, 5, 0, 1, 0, 2-.37, 18.22, 18.22, 0, 0, 0-8-10h9.07A3, 3, 0, 0, 0, 45, 19ZM10, 32a3, 3, 0, 1, 1-3-3A3, 3, 0, 0, 1, 10, 32ZM24, 19a3, 3, 0, 1, 1, 3-3A3, 3, 0, 0, 1, 24, 19ZM44, 32a3, 3, 0, 1, 1-3-3A3, 3, 0, 0, 1, 44, 32Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 550 B

3
.vuepress/media/svg/chat.svg Executable file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M34, 14V0H0V35l11.35-9H14v5a9, 9, 0, 0, 0, 9, 9H36.65L48, 48.08V14H34ZM10.65, 24L2, 30.92V2H32V17a7, 7, 0, 0, 1-7, 7H10.65ZM46, 44l-8.65-6H23a7, 7, 0, 0, 1-7-7V26h9a9, 9, 0, 0, 0, 9-9V16H46V44Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 276 B

3
.vuepress/media/svg/flag.svg Executable file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M44, 0H4L19, 48l1.91-.6L14.52, 26.81ZM7, 2H38.83l-25, 22.7Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 142 B

15
.vuepress/media/svg/keyboard.svg Executable file
View file

@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M0, 8V31a9, 9, 0, 0, 0, 9, 9H39a9, 9, 0, 0, 0, 9-9V8H0ZM46, 31a7, 7, 0, 0, 1-7, 7H9a7, 7, 0, 0, 1-7-7V10H46V31Z"/>
<rect x="6" y="28" width="4" height="4"/>
<rect x="38" y="28" width="4" height="4"/>
<rect x="6" y="14" width="4" height="4"/>
<rect x="14" y="14" width="4" height="4"/>
<rect x="22" y="14" width="4" height="4"/>
<rect x="10" y="21" width="4" height="4"/>
<rect x="18" y="21" width="4" height="4"/>
<rect x="26" y="21" width="4" height="4"/>
<rect x="34" y="21" width="4" height="4"/>
<rect x="38" y="14" width="4" height="4"/>
<rect x="30" y="14" width="4" height="4"/>
<rect x="14" y="28" width="20" height="4"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 733 B

4
.vuepress/media/svg/monitor.svg Executable file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M43, 4H5A5, 5, 0, 0, 0, 0, 9V39a5, 5, 0, 0, 0, 5, 5H43a5, 5, 0, 0, 0, 5-5V9A5, 5, 0, 0, 0, 43, 4Zm3, 35a3, 3, 0, 0, 1-3, 3H5a3, 3, 0, 0, 1-3-3V9A3, 3, 0, 0, 1, 5, 6H43a3, 3, 0, 0, 1, 3, 3V39Z"/>
<polygon points="26.47 30.36 22.35 10.81 16.36 24 8 24 8 26 17.64 26 21.65 17.19 25.53 35.63 31.55 26 40 26 40 24 30.45 24 26.47 30.36"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 414 B

96
.vuepress/scss/pages/_home.scss
View file

@ -88,11 +88,37 @@
&.develop,
&.community {
padding-top: 3rem;
padding-bottom: 3rem;
padding-bottom: 3.5rem;
.inner-wrap {
position: relative;
}
h3 {
@extend .inner-wrap;
font-size: 3rem;
top: -0.85rem; left: -2rem;
color: rgba($black, 0.045);
font-size: 4rem;
letter-spacing: 0.1rem;
line-height: 1;
position: absolute;
text-transform: uppercase;
}
p {
font-size: 1.5rem;
line-height: 1.55;
margin-bottom: 1.5rem;
max-width: 1000px;
&:first-of-type {
padding-top: 0.5rem;
}
}
.cta {
@extend .__button-black;
top: 0.5rem;
}
}
@ -102,4 +128,68 @@
&.develop {
border-bottom: 1px solid rgba($black, 0.05);
}
&.docs,
&.develop {
h3 {
// text-align: right;
}
}
&.contribute {
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: 4rem;
position: relative;
text-align: center;
width: calc(100% / 5);
&::before {
width: 100%; height: 100%;
top: 0; left: 0;
background-position: center 0;
background-repeat: no-repeat;
background-size: 3rem;
content: "";
position: absolute;
}
&:nth-child(1)::before {
background-image: url("../media/svg/flag.svg");
}
&:nth-child(2)::before {
background-image: url("../media/svg/keyboard.svg");
}
&:nth-child(3)::before {
background-image: url("../media/svg/anchor.svg");
}
&:nth-child(4)::before {
background-image: url("../media/svg/chat.svg");
}
&:nth-child(5)::before {
background-image: url("../media/svg/monitor.svg");
}
}
}
}
}

42
.vuepress/theme/Layout.vue
View file

@ -65,28 +65,50 @@
</section>
<section class="home intro">
<h3>Intro/Overview</h3>
<p>Text and such</p>
<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">
<h3>Documentation</h3>
<p>Text and such</p>
<div class="inner-wrap">
<h3>Documentation</h3>
<p>Text and such</p>
</div>
</section>
<section class="home contribute">
<h3>Contribute</h3>
<p>Text and such</p>
<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>Raising Issues</li>
<li>Coding</li>
<li>Creative</li>
<li>Translating</li>
<li>Testing</li>
</ul>
</div>
</section>
<section class="home develop">
<h3>Development</h3>
<p>Text and such</p>
<div class="inner-wrap">
<h3>Development</h3>
<p>Text and such</p>
</div>
</section>
<section class="home community">
<h3>Community</h3>
<p>Text and such</p>
<div class="inner-wrap">
<h3>Community</h3>
<p>Text and such</p>
</div>
</section>
<!--/ <hook></hook> /-->