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

Added hover states to ancillary modules

Browse source
This commit is contained in:
ポール ウェッブ 2018-06-13 15:47:02 -05:00
parent 8c3deaf09f
commit a2f9a2749d
1 changed files with 54 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
content/.vuepress/components/Ecosystem.vue
View file

@ -4,10 +4,18 @@
<aside class="ecosystem__submodules"> <aside class="ecosystem__submodules">
<div class="ecosystem__submodule chainquery"> <div class="ecosystem__submodule chainquery">
<h3 class="__title">chainquery</h3> <h3 class="__title">chainquery</h3>
<div class="ecosystem__submodule__description">
<strong>chainquery</strong> parses and syncs LBRY blockchain data into structured SQL<br/>
<strong><a href="https://github.com/lbryio/chainquery">→ Source code</a></strong>
</div>
</div> </div>
<div class="ecosystem__submodule wallet"> <div class="ecosystem__submodule wallet">
<h3 class="__title">wallet server</h3> <h3 class="__title">wallet server</h3>
<div class="ecosystem__submodule__description">
<strong>lbry-app</strong> is a browser and wallet for LBRY<br/>
<strong><a href="https://github.com/lbryio/lbry-app">→ Source code</a></strong>
</div>
</div> </div>
</aside> </aside>
@ -36,7 +44,7 @@
</p> </p>
<p> <p>
The most salient feature of the LBRY blockchain is the association of a normalized character string with up to 8KB of metadata. The most salient feature of the LBRY blockchain is the association of a normalized character string with up to 8KB of metadata.
This string of characters forms a LBRY URL, e.g. This string of characters forms a LBRY URL, e.g.
</p> </p>
<p> <p>
The LBRY blockchain contains two parallel [[Merkle Tree]]s, one for transactions (ala Bitcoin) and one for storing LBRY URLs and metadata. The LBRY blockchain contains two parallel [[Merkle Tree]]s, one for transactions (ala Bitcoin) and one for storing LBRY URLs and metadata.
@ -156,10 +164,18 @@
<aside class="ecosystem__submodules"> <aside class="ecosystem__submodules">
<div class="ecosystem__submodule lighthouse"> <div class="ecosystem__submodule lighthouse">
<h3 class="__title">lighthouse</h3> <h3 class="__title">lighthouse</h3>
<div class="ecosystem__submodule__description">
<strong>lighthouse</strong> is a lightning fast search for the LBRY blockchain<br/>
<strong><a href="https://github.com/lbryio/lighthouse">→ Source code</a></strong>
</div>
</div> </div>
<div class="ecosystem__submodule reflector"> <div class="ecosystem__submodule reflector">
<h3 class="__title">reflector</h3> <h3 class="__title">reflector</h3>
<div class="ecosystem__submodule__description">
<strong>reflector</strong> accepts LBRY content for re/hosting<br/>
<strong><a href="https://github.com/lbryio/reflector.go">→ Source code</a></strong>
</div>
</div> </div>
</aside> </aside>
</section> </section>
@ -299,6 +315,10 @@
} }
} }
h3 {
position: relative;
}
&::before { &::before {
width: 100%; height: 100%; width: 100%; height: 100%;
top: 0; left: 0; top: 0; left: 0;
@ -475,6 +495,8 @@
border: 2px dashed; border: 2px dashed;
border-radius: 50%; border-radius: 50%;
cursor: default; cursor: default;
position: relative;
z-index: 2;
&:not(:last-of-type) { &:not(:last-of-type) {
margin-bottom: 1rem; margin-bottom: 1rem;
@ -484,6 +506,37 @@
border-color: rgba($gray, 0.3); border-color: rgba($gray, 0.3);
color: rgba($gray, 0.3); color: rgba($gray, 0.3);
} }
&:not(:hover) {
.ecosystem__submodule__description {
opacity: 0;
visibility: hidden;
}
}
&.chainquery,
&.wallet {
.ecosystem__submodule__description {
left: -2px;
}
}
&.lighthouse,
&.reflector {
.ecosystem__submodule__description {
right: -2px;
}
}
}
.ecosystem__submodule__description {
background-color: $white;
border: 2px solid rgba($gray, 0.3);
color: $black;
padding: 1rem;
position: absolute;
transition: all 0.2s;
width: 350px;
} }