diff --git a/.vuepress/components/Ecosystem.vue b/.vuepress/components/Ecosystem.vue index 8f2e2b6..c537220 100644 --- a/.vuepress/components/Ecosystem.vue +++ b/.vuepress/components/Ecosystem.vue @@ -12,8 +12,15 @@
-
-

lbrycard

+
+

+ lbrycard + +
+ lbry + applications +
+

Lorem ipsum dolor sit amet consectetur adipiscing elit semper luctus praesent phasellus egestas lectus, placerat feugiat arcu dis fermentum maecenas in augue mus quisque euismod justo. Posuere senectus fermentum luctus iaculis nascetur congue enim, semper gravida egestas facilisis mus sociosqu dui metus, est augue mollis phasellus quis leo. Montes hendrerit potenti cubilia feugiat dictum vitae tellus, habitant cursus dignissim et leo morbi, aliquet proin bibendum vivamus per mattis.

@@ -22,8 +29,15 @@
-
-

lbry

+
+

+ lbry + +
+ lbrycard + applications +
+

    @@ -56,8 +70,15 @@
-
-

Applications

+
+

+ Applications + +
+ lbry + lbrycard +
+

    @@ -137,8 +158,7 @@ break; } } - }, - name: "Something" + } } @@ -171,8 +191,47 @@ h2 { position: relative; - text-align: center; width: 100%; + + > div { + float: right; + font-size: 1rem; + padding-top: 1.95rem; + position: relative; + text-align: right; + + &::before { + @include font-serif; + top: 1rem; left: 0; + + content: "explore"; + font-size: 80%; + font-style: italic; + opacity: 0.3; + position: absolute; + text-align: right; + width: 100%; + } + + span { + cursor: pointer; + display: inline-block; + position: relative; + + &:not(:last-of-type) { + margin-right: 1rem; + + &::after { + top: 0; right: -0.7rem; + + color: rgba($gray, 0.3); + content: "/"; + font-style: italic; + position: absolute; + } + } + } + } } &::before { @@ -189,6 +248,11 @@ h2 { font-size: 1.5rem; + text-align: center; + + > div { + display: none; + } } .ecosystem__module__details { @@ -308,6 +372,7 @@ border: 2px dashed; border-radius: 50%; + cursor: default; &:not(:last-of-type) { margin-bottom: 1rem;