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

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

@ -4,10 +4,18 @@
<aside class="ecosystem__submodules">
<div class="ecosystem__submodule chainquery">
<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 class="ecosystem__submodule wallet">
<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>
</aside>
@ -156,10 +164,18 @@
<aside class="ecosystem__submodules">
<div class="ecosystem__submodule lighthouse">
<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 class="ecosystem__submodule reflector">
<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>
</aside>
</section>
@ -299,6 +315,10 @@
}
}
h3 {
position: relative;
}
&::before {
width: 100%; height: 100%;
top: 0; left: 0;
@ -475,6 +495,8 @@
border: 2px dashed;
border-radius: 50%;
cursor: default;
position: relative;
z-index: 2;
&:not(:last-of-type) {
margin-bottom: 1rem;
@ -484,6 +506,37 @@
border-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;
}