diff --git a/content/.vuepress/components/Ecosystem.vue b/content/.vuepress/components/Ecosystem.vue index c5c6dfe..26e62ea 100644 --- a/content/.vuepress/components/Ecosystem.vue +++ b/content/.vuepress/components/Ecosystem.vue @@ -4,10 +4,18 @@ @@ -36,7 +44,7 @@

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.

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 @@

@@ -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; }