Basic structure for lbry overview
This commit is contained in:
ポール ウェッブ
parent
aafc8dd9b5
commit
5821d0f373
4 changed files with 198 additions and 7 deletions
53
.vuepress/components/Ecosystem.vue
Normal file
53
.vuepress/components/Ecosystem.vue
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
|
||||
<section class="overview__ecosystem">
|
||||
<div class="overview__ecosystem__module lbrycard">
|
||||
<strong class="__title">lbrycard</strong>
|
||||
</div>
|
||||
|
||||
<div class="overview__ecosystem__module lbryschema">
|
||||
<strong class="__title">lbryschema</strong>
|
||||
</div>
|
||||
|
||||
<div class="overview__ecosystem__module lbryumx">
|
||||
<strong class="__title">lbryumx</strong>
|
||||
</div>
|
||||
|
||||
<div class="overview__ecosystem__module lbry">
|
||||
<strong class="__title">lbry</strong>
|
||||
</div>
|
||||
|
||||
<ul class="overview__ecosystem__module applications">
|
||||
<strong class="__title">Applications</strong>
|
||||
|
||||
<li class="overview__ecosystem__module__piece applications__desktop">
|
||||
<strong class="__title">Desktop</strong>
|
||||
</li>
|
||||
|
||||
<li class="overview__ecosystem__module__piece applications__mobile">
|
||||
<strong class="__title">Mobile</strong>
|
||||
</li>
|
||||
|
||||
<li class="overview__ecosystem__module__piece applications__speech">
|
||||
<strong class="__title">spee.ch</strong>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="overview__ecosystem__module lighthouse">
|
||||
<strong class="__title">Lighthouse</strong>
|
||||
</div>
|
||||
|
||||
<div class="overview__ecosystem__module chainquery">
|
||||
<strong class="__title">chainquery</strong>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
@import "../scss/init/colors";
|
||||
@import "../scss/init/mixins";
|
||||
@import "../scss/pages/overview";
|
||||
</style>
|
||||
140
.vuepress/scss/pages/_overview.scss
Normal file
140
.vuepress/scss/pages/_overview.scss
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
.overview {
|
||||
}
|
||||
|
||||
.overview__ecosystem {
|
||||
display: grid;
|
||||
grid-gap: 2rem;
|
||||
grid-template-areas: "lbrycard lbryschema lbryumx lbry applications lighthouse chainquery";
|
||||
grid-template-columns: auto 5% 180px auto auto 180px 180px;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.overview__ecosystem__module {
|
||||
min-height: 144px;
|
||||
|
||||
&.lbrycard,
|
||||
&.lbryschema,
|
||||
&.lbryumx,
|
||||
&.lbry,
|
||||
&.lighthouse,
|
||||
&.chainquery {
|
||||
@include center;
|
||||
|
||||
.__title {
|
||||
color: $white;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&.lbrycard {
|
||||
background-color: $black;
|
||||
}
|
||||
|
||||
&.lbryschema {
|
||||
background-color: $red;
|
||||
position: relative;
|
||||
|
||||
.__title {
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
|
||||
// top: 150px;
|
||||
|
||||
/*
|
||||
&::before, &::after {
|
||||
width: 0; height: 0;
|
||||
|
||||
content : "";
|
||||
left: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-bottom: 150px solid $red;
|
||||
border-left: 200px solid transparent;
|
||||
top: -150px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-top: 150px solid $red;
|
||||
border-right: 200px solid transparent;
|
||||
bottom: -150px;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
|
||||
&.lbryumx,
|
||||
&.lbry {
|
||||
}
|
||||
|
||||
&.lbryumx {
|
||||
background-color: $blue;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.lbry {
|
||||
background-color: $green;
|
||||
}
|
||||
|
||||
|
||||
|
||||
&.applications {
|
||||
background-color: $violet;
|
||||
list-style-type: none;
|
||||
padding-bottom: 1rem;
|
||||
text-align: center;
|
||||
|
||||
> .__title {
|
||||
margin-bottom: 1rem; padding-top: 1rem;
|
||||
|
||||
color: $white;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.applications__desktop,
|
||||
&.applications__mobile,
|
||||
&.applications__speech {
|
||||
}
|
||||
|
||||
&.applications__desktop {
|
||||
}
|
||||
|
||||
&.applications__mobile {
|
||||
}
|
||||
|
||||
&.applications__speech {
|
||||
}
|
||||
|
||||
|
||||
|
||||
&.lighthouse {
|
||||
background-color: $pink;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.chainquery {
|
||||
background-color: $orange;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.overview__ecosystem__module__piece {
|
||||
background-color: $white;
|
||||
left: 10%;
|
||||
line-height: 2;
|
||||
position: relative;
|
||||
width: 80%;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -113,7 +113,7 @@
|
|||
font-size: 1rem;
|
||||
}
|
||||
|
||||
p, ol, ul, table {
|
||||
p, ol, ul:not(.overview__ecosystem__module), table {
|
||||
code {
|
||||
background-color: $black;
|
||||
border-radius: 3px;
|
||||
|
|
@ -130,7 +130,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
p, ol, ul {
|
||||
p, ol, ul:not(.overview__ecosystem__module) {
|
||||
position: relative;
|
||||
|
||||
@media (min-width: 901px) {
|
||||
|
|
@ -144,7 +144,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
ol, ul:not(.overview__ecosystem__module) {
|
||||
padding-top: 0.5rem;
|
||||
|
||||
li {
|
||||
|
|
@ -163,7 +163,7 @@
|
|||
padding-left: 1.6rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
ul:not(.overview__ecosystem__module) {
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -26,9 +26,7 @@ That's a fancy sentence, so here's a plainer one: we just thought it'd be really
|
|||
|
||||
## LBRY Basics
|
||||
|
||||
<figure>
|
||||
<img src="https://cdn.rawgit.com/lbryio/lbry.tech/b7dd5fe2/.vuepress/media/images/lbry-overview.png" alt="LBRY Overview"/>
|
||||
</figure>
|
||||
<Ecosystem></Ecosystem>
|
||||
|
||||
## What's Next?
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue