Finished design for the homepage
This commit is contained in:
ポール ウェッブ
parent
c50fb2be90
commit
53571f747c
8 changed files with 170 additions and 72 deletions
4
.vuepress/media/svg/discord.svg
Normal file
4
.vuepress/media/svg/discord.svg
Normal 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 |
4
.vuepress/media/svg/reddit.svg
Normal file
4
.vuepress/media/svg/reddit.svg
Normal 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 |
4
.vuepress/media/svg/slack.svg
Normal file
4
.vuepress/media/svg/slack.svg
Normal 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 |
2
.vuepress/scss/pages/_ancillary.scss
Normal file
2
.vuepress/scss/pages/_ancillary.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
.ancillary {
|
||||
}
|
||||
|
|
@ -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");
|
||||
}
|
||||
|
|
|
|||
40
.vuepress/scss/partials/_footer.scss
Normal file
40
.vuepress/scss/partials/_footer.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue