diff --git a/.vuepress/components/Ecosystem.vue b/.vuepress/components/Ecosystem.vue index 47376aa..5fba335 100644 --- a/.vuepress/components/Ecosystem.vue +++ b/.vuepress/components/Ecosystem.vue @@ -1,82 +1,104 @@ @@ -89,8 +111,31 @@ }, methods: { open (ecosystemComponentClassName) { - document.querySelectorAll(".overview__ecosystem__module").forEach(n => n.classList.remove("active")); + document.querySelectorAll(".ecosystem__module").forEach(n => n.classList.remove("active")); + document.querySelectorAll(".ecosystem__submodule").forEach(n => n.classList.remove("active")); + document.getElementsByClassName(ecosystemComponentClassName)[0].classList.add("active"); + + switch (true) { + case (ecosystemComponentClassName === "lbrycard"): + document.getElementsByClassName("chainquery")[0].classList.add("active"); + document.getElementsByClassName("lighthouse")[0].classList.add("active"); + document.getElementsByClassName("wallet")[0].classList.add("active"); + break; + + case (ecosystemComponentClassName === "lbry"): + document.getElementsByClassName("reflector")[0].classList.add("active"); + document.getElementsByClassName("wallet")[0].classList.add("active"); + break; + + case (ecosystemComponentClassName === "applications"): + document.getElementsByClassName("chainquery")[0].classList.add("active"); + document.getElementsByClassName("lighthouse")[0].classList.add("active"); + break; + + default: + break; + } } }, name: "Something" @@ -100,5 +145,177 @@ diff --git a/.vuepress/scss/pages/_overview.scss b/.vuepress/scss/pages/_overview.scss index 7ab59ef..9222735 100644 --- a/.vuepress/scss/pages/_overview.scss +++ b/.vuepress/scss/pages/_overview.scss @@ -1,216 +1,2 @@ .overview { } - -.overview__ecosystem { - margin-bottom: 2rem; padding-top: 1rem; - font-size: 1rem; - - @media (min-width: 701px) { - justify-content: space-evenly; - } - - @media (max-width: 700px) { - justify-content: space-between; - } - - @media (min-width: 551px) { - display: flex; - } -} - - - -.overview__ecosystem__module { - > * { - z-index: 1; - } - - @media (max-width: 550px) { - &:not(:last-of-type) { - margin-bottom: 2rem; - } - } - - &.lbrycard, - &.lbry, - &.applications { - position: relative; - - &::after { - top: 0; left: 0; - - content: ""; - position: absolute; - transition: all 0.2s; - z-index: -1; - } - - &:not(.active) { - height: 144px; - - @media (min-width: 551px) { - @include center; - min-width: 144px; - } - - @media (max-width: 550px) { - align-items: center; - display: flex; - justify-content: center; - margin-right: auto; - margin-left: auto; - width: 144px; - } - - h2 { - font-size: 1rem; - } - - .overview__ecosystem__module__details { - display: none; - } - } - - &.active { - padding: 2rem; - - h2 { - font-size: 3rem; - margin-bottom: 1rem; - } - } - } - - - - &.lbrycard { - color: $white; - - &::after { - width: 100%; height: 100%; - background-color: $black; - } - } - - &.lbry { - &::after { - width: 100%; height: 100%; - background-color: $teal; - } - - &:not(.active)::after { - border-radius: 50%; - } - } - - &.applications { - &::after { - width: 100%; height: 100%; - background-color: $yellow; - } - - &:not(.active)::after { - border-top-right-radius: 20%; - border-bottom-left-radius: 20%; - } - - /* - @media (min-width: 1081px) { - grid-column: 4; - grid-row: 1/3; - } - - @media (max-width: 1080px) { - padding-top: 1rem; - padding-bottom: 2rem; - } - - @media (min-width: 501px) and (max-width: 1080px) { - grid-row: 4; - grid-column: 1/3; - } - - @media (max-width: 500px) { - grid-row: 5; - } - - > div { - width: 100%; - - > .__title { - color: $white; - display: block; - margin-bottom: 1rem; - } - } - */ - } - - - - /* - &.lighthouse { - background-color: $pink; - border-radius: 50%; - - @media (min-width: 1081px) { - grid-column: 5; - grid-row: 1; - } - - @media (max-width: 1080px) { - margin-right: auto; - margin-left: auto; - width: 144px; - } - - @media (min-width: 501px) and (max-width: 1080px) { - grid-column: 1; - grid-row: 5; - } - - @media (max-width: 500px) { - grid-row: 6; - } - } - - &.chainquery { - background-color: $orange; - border-radius: 50%; - - @media (min-width: 1081px) { - grid-column: 5; - grid-row: 2; - } - - @media (max-width: 1080px) { - margin-right: auto; - margin-left: auto; - width: 144px; - } - - @media (min-width: 501px) and (max-width: 1080px) { - grid-column: 2; - grid-row: 5; - } - - @media (max-width: 500px) { - grid-row: 7; - } - } - */ -} - - - -.overview__ecosystem__module__piece { - background-color: $white; - left: 10%; - line-height: 2; - position: relative; - width: 80%; - - &:not(:last-of-type) { - margin-bottom: 0.5rem; - } -} diff --git a/.vuepress/scss/pages/_page.scss b/.vuepress/scss/pages/_page.scss index 767cd3f..2d289f5 100644 --- a/.vuepress/scss/pages/_page.scss +++ b/.vuepress/scss/pages/_page.scss @@ -82,7 +82,7 @@ } } - h3 { + h3:not(.__title) { @media (min-width: 901px) { font-size: 1.5rem; } diff --git a/overview/index.md b/overview/index.md index 38f66d8..65291f5 100644 --- a/overview/index.md +++ b/overview/index.md @@ -26,7 +26,7 @@ That's a fancy sentence, so here's a plainer one: we just thought it'd be really ## LBRY Basics - + ## What's Next?