V3 of overview
This commit is contained in:
ポール ウェッブ
parent
8d2172f013
commit
2524a7f805
4 changed files with 291 additions and 288 deletions
|
|
@ -1,82 +1,104 @@
|
|||
<template>
|
||||
|
||||
<section class="overview__ecosystem">
|
||||
<div class="overview__ecosystem__module lbrycard" v-on:click="open('lbrycard')">
|
||||
<h2 class="__title">lbrycard</h2>
|
||||
|
||||
<div class="overview__ecosystem__module__details">
|
||||
<p>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.</p>
|
||||
|
||||
<p>Vel nisi hendrerit id tristique congue tortor nisl luctus, vulputate sem ridiculus inceptos et at torquent feugiat, mus cursus lobortis aenean senectus posuere odio. Imperdiet nascetur dapibus eget convallis ante donec iaculis dictumst mi est, venenatis quisque integer etiam justo id aliquet non diam semper erat, blandit quis lectus ac aptent magna cubilia augue laoreet. Mollis luctus pharetra nisl auctor potenti magna penatibus cras, justo lobortis iaculis porta a vel habitasse vulputate, taciti sociis arcu facilisis duis orci aliquam.</p>
|
||||
<section class="ecosystem">
|
||||
<aside class="ecosystem__submodules">
|
||||
<div class="ecosystem__submodule chainquery">
|
||||
<h3 class="__title">chainquery</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overview__ecosystem__module lbry" v-on:click="open('lbry')">
|
||||
<h2 class="__title">lbry</h2>
|
||||
|
||||
<div class="overview__ecosystem__module__details">
|
||||
<ul>
|
||||
<li>
|
||||
<strong class="__title">lbryschema</strong>
|
||||
|
||||
<p>Vel nisi hendrerit id tristique congue tortor nisl luctus, vulputate sem ridiculus inceptos et at torquent feugiat, mus cursus lobortis aenean senectus posuere odio. Imperdiet nascetur dapibus eget convallis ante donec iaculis dictumst mi est, venenatis quisque integer etiam justo id aliquet non diam semper erat, blandit quis lectus ac aptent magna cubilia augue laoreet. Mollis luctus pharetra nisl auctor potenti magna penatibus cras, justo lobortis iaculis porta a vel habitasse vulputate, taciti sociis arcu facilisis duis orci aliquam.</p>
|
||||
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
||||
<li>Himenaeos purus facilisi litora suspendisse molestie, cubilia maecenas faucibus vivamus.</li>
|
||||
<li>Nisi sociosqu interdum augue condimentum vivamus, ac leo feugiat.</li>
|
||||
<li>Justo eu neque aenean nec sagittis, cubilia magnis arcu.</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<strong class="__title">lbryumx</strong>
|
||||
|
||||
<p>Vel nisi hendrerit id tristique congue tortor nisl luctus, vulputate sem ridiculus inceptos et at torquent feugiat, mus cursus lobortis aenean senectus posuere odio. Imperdiet nascetur dapibus eget convallis ante donec iaculis dictumst mi est, venenatis quisque integer etiam justo id aliquet non diam semper erat, blandit quis lectus ac aptent magna cubilia augue laoreet. Mollis luctus pharetra nisl auctor potenti magna penatibus cras, justo lobortis iaculis porta a vel habitasse vulputate, taciti sociis arcu facilisis duis orci aliquam.</p>
|
||||
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
||||
<li>Himenaeos purus facilisi litora suspendisse molestie, cubilia maecenas faucibus vivamus.</li>
|
||||
<li>Nisi sociosqu interdum augue condimentum vivamus, ac leo feugiat.</li>
|
||||
<li>Justo eu neque aenean nec sagittis, cubilia magnis arcu.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="ecosystem__submodule wallet">
|
||||
<h3 class="__title">wallet server</h3>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="overview__ecosystem__module applications" v-on:click="open('applications')">
|
||||
<h2 class="__title">Applications</h2>
|
||||
<section class="ecosystem__modules">
|
||||
<div class="ecosystem__module lbrycard" v-on:click="open('lbrycard')">
|
||||
<h2 class="__title">lbrycard</h2>
|
||||
|
||||
<div class="overview__ecosystem__module__details">
|
||||
<ul>
|
||||
<li>
|
||||
<strong class="__title">Desktop</strong>
|
||||
<p>Vel nisi hendrerit id tristique congue tortor nisl luctus, vulputate sem ridiculus inceptos et at torquent feugiat, mus cursus lobortis aenean senectus posuere odio. Imperdiet nascetur dapibus eget convallis ante donec iaculis dictumst mi est, venenatis quisque integer etiam justo id aliquet non diam semper erat, blandit quis lectus ac aptent magna cubilia augue laoreet. Mollis luctus pharetra nisl auctor potenti magna penatibus cras, justo lobortis iaculis porta a vel habitasse vulputate, taciti sociis arcu facilisis duis orci aliquam.</p>
|
||||
</li>
|
||||
<div class="ecosystem__module__details">
|
||||
<p>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.</p>
|
||||
|
||||
<li>
|
||||
<strong class="__title">Mobile</strong>
|
||||
<p>Vel nisi hendrerit id tristique congue tortor nisl luctus, vulputate sem ridiculus inceptos et at torquent feugiat, mus cursus lobortis aenean senectus posuere odio. Imperdiet nascetur dapibus eget convallis ante donec iaculis dictumst mi est, venenatis quisque integer etiam justo id aliquet non diam semper erat, blandit quis lectus ac aptent magna cubilia augue laoreet. Mollis luctus pharetra nisl auctor potenti magna penatibus cras, justo lobortis iaculis porta a vel habitasse vulputate, taciti sociis arcu facilisis duis orci aliquam.</p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<strong class="__title">spee.ch</strong>
|
||||
<p>Vel nisi hendrerit id tristique congue tortor nisl luctus, vulputate sem ridiculus inceptos et at torquent feugiat, mus cursus lobortis aenean senectus posuere odio. Imperdiet nascetur dapibus eget convallis ante donec iaculis dictumst mi est, venenatis quisque integer etiam justo id aliquet non diam semper erat, blandit quis lectus ac aptent magna cubilia augue laoreet. Mollis luctus pharetra nisl auctor potenti magna penatibus cras, justo lobortis iaculis porta a vel habitasse vulputate, taciti sociis arcu facilisis duis orci aliquam.</p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<strong class="__title">Lighthouse</strong>
|
||||
<p>Vel nisi hendrerit id tristique congue tortor nisl luctus, vulputate sem ridiculus inceptos et at torquent feugiat, mus cursus lobortis aenean senectus posuere odio. Imperdiet nascetur dapibus eget convallis ante donec iaculis dictumst mi est, venenatis quisque integer etiam justo id aliquet non diam semper erat, blandit quis lectus ac aptent magna cubilia augue laoreet. Mollis luctus pharetra nisl auctor potenti magna penatibus cras, justo lobortis iaculis porta a vel habitasse vulputate, taciti sociis arcu facilisis duis orci aliquam.</p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<strong class="__title">chainquery</strong>
|
||||
<p>Vel nisi hendrerit id tristique congue tortor nisl luctus, vulputate sem ridiculus inceptos et at torquent feugiat, mus cursus lobortis aenean senectus posuere odio. Imperdiet nascetur dapibus eget convallis ante donec iaculis dictumst mi est, venenatis quisque integer etiam justo id aliquet non diam semper erat, blandit quis lectus ac aptent magna cubilia augue laoreet. Mollis luctus pharetra nisl auctor potenti magna penatibus cras, justo lobortis iaculis porta a vel habitasse vulputate, taciti sociis arcu facilisis duis orci aliquam.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Vel nisi hendrerit id tristique congue tortor nisl luctus, vulputate sem ridiculus inceptos et at torquent feugiat, mus cursus lobortis aenean senectus posuere odio. Imperdiet nascetur dapibus eget convallis ante donec iaculis dictumst mi est, venenatis quisque integer etiam justo id aliquet non diam semper erat, blandit quis lectus ac aptent magna cubilia augue laoreet. Mollis luctus pharetra nisl auctor potenti magna penatibus cras, justo lobortis iaculis porta a vel habitasse vulputate, taciti sociis arcu facilisis duis orci aliquam.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ecosystem__module lbry" v-on:click="open('lbry')">
|
||||
<h2 class="__title">lbry</h2>
|
||||
|
||||
<div class="ecosystem__module__details">
|
||||
<ul>
|
||||
<li>
|
||||
<strong class="__title">lbryschema</strong>
|
||||
|
||||
<p>Vel nisi hendrerit id tristique congue tortor nisl luctus, vulputate sem ridiculus inceptos et at torquent feugiat, mus cursus lobortis aenean senectus posuere odio. Imperdiet nascetur dapibus eget convallis ante donec iaculis dictumst mi est, venenatis quisque integer etiam justo id aliquet non diam semper erat, blandit quis lectus ac aptent magna cubilia augue laoreet. Mollis luctus pharetra nisl auctor potenti magna penatibus cras, justo lobortis iaculis porta a vel habitasse vulputate, taciti sociis arcu facilisis duis orci aliquam.</p>
|
||||
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
||||
<li>Himenaeos purus facilisi litora suspendisse molestie, cubilia maecenas faucibus vivamus.</li>
|
||||
<li>Nisi sociosqu interdum augue condimentum vivamus, ac leo feugiat.</li>
|
||||
<li>Justo eu neque aenean nec sagittis, cubilia magnis arcu.</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<strong class="__title">lbryumx</strong>
|
||||
|
||||
<p>Vel nisi hendrerit id tristique congue tortor nisl luctus, vulputate sem ridiculus inceptos et at torquent feugiat, mus cursus lobortis aenean senectus posuere odio. Imperdiet nascetur dapibus eget convallis ante donec iaculis dictumst mi est, venenatis quisque integer etiam justo id aliquet non diam semper erat, blandit quis lectus ac aptent magna cubilia augue laoreet. Mollis luctus pharetra nisl auctor potenti magna penatibus cras, justo lobortis iaculis porta a vel habitasse vulputate, taciti sociis arcu facilisis duis orci aliquam.</p>
|
||||
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
||||
<li>Himenaeos purus facilisi litora suspendisse molestie, cubilia maecenas faucibus vivamus.</li>
|
||||
<li>Nisi sociosqu interdum augue condimentum vivamus, ac leo feugiat.</li>
|
||||
<li>Justo eu neque aenean nec sagittis, cubilia magnis arcu.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ecosystem__module applications" v-on:click="open('applications')">
|
||||
<h2 class="__title">Applications</h2>
|
||||
|
||||
<div class="ecosystem__module__details">
|
||||
<ul>
|
||||
<li>
|
||||
<strong class="__title">Desktop</strong>
|
||||
<p>Vel nisi hendrerit id tristique congue tortor nisl luctus, vulputate sem ridiculus inceptos et at torquent feugiat, mus cursus lobortis aenean senectus posuere odio. Imperdiet nascetur dapibus eget convallis ante donec iaculis dictumst mi est, venenatis quisque integer etiam justo id aliquet non diam semper erat, blandit quis lectus ac aptent magna cubilia augue laoreet. Mollis luctus pharetra nisl auctor potenti magna penatibus cras, justo lobortis iaculis porta a vel habitasse vulputate, taciti sociis arcu facilisis duis orci aliquam.</p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<strong class="__title">Mobile</strong>
|
||||
<p>Vel nisi hendrerit id tristique congue tortor nisl luctus, vulputate sem ridiculus inceptos et at torquent feugiat, mus cursus lobortis aenean senectus posuere odio. Imperdiet nascetur dapibus eget convallis ante donec iaculis dictumst mi est, venenatis quisque integer etiam justo id aliquet non diam semper erat, blandit quis lectus ac aptent magna cubilia augue laoreet. Mollis luctus pharetra nisl auctor potenti magna penatibus cras, justo lobortis iaculis porta a vel habitasse vulputate, taciti sociis arcu facilisis duis orci aliquam.</p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<strong class="__title">spee.ch</strong>
|
||||
<p>Vel nisi hendrerit id tristique congue tortor nisl luctus, vulputate sem ridiculus inceptos et at torquent feugiat, mus cursus lobortis aenean senectus posuere odio. Imperdiet nascetur dapibus eget convallis ante donec iaculis dictumst mi est, venenatis quisque integer etiam justo id aliquet non diam semper erat, blandit quis lectus ac aptent magna cubilia augue laoreet. Mollis luctus pharetra nisl auctor potenti magna penatibus cras, justo lobortis iaculis porta a vel habitasse vulputate, taciti sociis arcu facilisis duis orci aliquam.</p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<strong class="__title">Lighthouse</strong>
|
||||
<p>Vel nisi hendrerit id tristique congue tortor nisl luctus, vulputate sem ridiculus inceptos et at torquent feugiat, mus cursus lobortis aenean senectus posuere odio. Imperdiet nascetur dapibus eget convallis ante donec iaculis dictumst mi est, venenatis quisque integer etiam justo id aliquet non diam semper erat, blandit quis lectus ac aptent magna cubilia augue laoreet. Mollis luctus pharetra nisl auctor potenti magna penatibus cras, justo lobortis iaculis porta a vel habitasse vulputate, taciti sociis arcu facilisis duis orci aliquam.</p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<strong class="__title">chainquery</strong>
|
||||
<p>Vel nisi hendrerit id tristique congue tortor nisl luctus, vulputate sem ridiculus inceptos et at torquent feugiat, mus cursus lobortis aenean senectus posuere odio. Imperdiet nascetur dapibus eget convallis ante donec iaculis dictumst mi est, venenatis quisque integer etiam justo id aliquet non diam semper erat, blandit quis lectus ac aptent magna cubilia augue laoreet. Mollis luctus pharetra nisl auctor potenti magna penatibus cras, justo lobortis iaculis porta a vel habitasse vulputate, taciti sociis arcu facilisis duis orci aliquam.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside class="ecosystem__submodules">
|
||||
<div class="ecosystem__submodule lighthouse">
|
||||
<h3 class="__title">lighthouse</h3>
|
||||
</div>
|
||||
|
||||
<div class="ecosystem__submodule reflector">
|
||||
<h3 class="__title">reflector</h3>
|
||||
</div>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
</template>
|
||||
|
|
@ -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 @@
|
|||
<style lang="scss">
|
||||
@import "../scss/init/colors";
|
||||
@import "../scss/init/mixins";
|
||||
@import "../scss/pages/overview";
|
||||
|
||||
.ecosystem {
|
||||
margin-bottom: 2rem; padding-top: 1rem;
|
||||
|
||||
display: grid;
|
||||
font-size: 1rem;
|
||||
grid-gap: 1rem;
|
||||
grid-template-columns: 144px auto 144px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ecosystem__modules {
|
||||
}
|
||||
|
||||
.ecosystem__module {
|
||||
padding: 1.9rem 2rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
> * {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&::before {
|
||||
width: 100%; height: 100%;
|
||||
top: 0; left: 0;
|
||||
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&:not(.active) {
|
||||
@include center;
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.ecosystem__module__details {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
h2 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&.lbrycard {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
&:not(.active) {
|
||||
&::before {
|
||||
background-color: $red;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
&::before {
|
||||
border: 2px solid $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.lbry {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
&:not(.active) {
|
||||
&::before {
|
||||
background-color: $blue;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
&::after {
|
||||
bottom: -1rem; left: 0;
|
||||
|
||||
content: "◼︎◼︎";
|
||||
font-size: 0.5rem;
|
||||
letter-spacing: 0.1rem;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
&::before {
|
||||
border: 2px solid $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.applications {
|
||||
&:not(.active) {
|
||||
&::before {
|
||||
background-color: $green;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
&::after {
|
||||
bottom: -1rem; left: 0;
|
||||
|
||||
content: "◼︎◼︎◼︎◼︎◼︎";
|
||||
font-size: 0.5rem;
|
||||
letter-spacing: 0.1rem;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
&::before {
|
||||
border: 2px solid $green;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ecosystem__module__piece {
|
||||
background-color: $white;
|
||||
left: 10%;
|
||||
line-height: 2;
|
||||
position: relative;
|
||||
width: 80%;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ecosystem__submodules {
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
|
||||
.ecosystem__submodule {
|
||||
@include center;
|
||||
width: 144px; height: 144px;
|
||||
|
||||
border: 2px dashed;
|
||||
border-radius: 50%;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
&:not(.active) {
|
||||
border-color: rgba($gray, 0.3);
|
||||
color: rgba($gray, 0.3);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
h3:not(.__title) {
|
||||
@media (min-width: 901px) {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ That's a fancy sentence, so here's a plainer one: we just thought it'd be really
|
|||
|
||||
## LBRY Basics
|
||||
|
||||
<Ecosystem></Ecosystem>
|
||||
<Ecosystem/>
|
||||
|
||||
## What's Next?
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue