LBRYCommunity/lbry.tech
1
0
Fork 0
Code Issues 13 Pull requests 8 Projects Releases Packages Wiki Activity

Overview is now responsive

Browse source
This commit is contained in:
ポール ウェッブ 2018-05-25 16:55:03 -05:00
parent 5821d0f373
commit d8e316d9fd
2 changed files with 146 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
.vuepress/components/Ecosystem.vue
View file

@ -18,19 +18,21 @@
</div>
<ul class="overview__ecosystem__module applications">
<strong class="__title">Applications</strong>
<div>
<strong class="__title">Applications</strong>
<li class="overview__ecosystem__module__piece applications__desktop">
<strong class="__title">Desktop</strong>
</li>
<li class="overview__ecosystem__module__piece applications__desktop">
<strong class="__title">Desktop</strong>
</li>
<li class="overview__ecosystem__module__piece applications__mobile">
<strong class="__title">Mobile</strong>
</li>
<li class="overview__ecosystem__module__piece applications__mobile">
<strong class="__title">Mobile</strong>
</li>
<li class="overview__ecosystem__module__piece applications__speech">
<strong class="__title">spee.ch</strong>
</li>
<li class="overview__ecosystem__module__piece applications__speech">
<strong class="__title">spee.ch</strong>
</li>
</div>
</ul>
<div class="overview__ecosystem__module lighthouse">

178
.vuepress/scss/pages/_overview.scss
View file

@ -2,12 +2,15 @@
}
.overview__ecosystem {
margin-bottom: 2rem; padding-top: 1rem;
display: grid;
grid-gap: 2rem;
grid-template-areas: "lbrycard lbryschema lbryumx lbry applications lighthouse chainquery";
grid-template-columns: auto 5% 180px auto auto 180px 180px;
font-size: 1rem;
margin-bottom: 2rem;
@media (min-width: 1081px) {
grid-template-columns: auto 5% 144px auto 144px;
}
}
@ -33,85 +36,130 @@
&.lbrycard {
background-color: $black;
@media (min-width: 1081px) {
grid-row: 1/3;
}
@media (max-width: 1080px) {
grid-row: 1;
}
@media (min-width: 501px) {
grid-column: 1;
}
}
&.lbryschema {
background-color: $red;
position: relative;
.__title {
transform: rotate(-90deg);
transform-origin: 50% 50%;
@media (min-width: 1081px) {
grid-row: 1/3;
.__title {
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
}
// top: 150px;
/*
&::before, &::after {
width: 0; height: 0;
content : "";
left: 0;
position: absolute;
@media (min-width: 501px) and (max-width: 1080px) {
grid-row: 1;
}
&::before {
border-bottom: 150px solid $red;
border-left: 200px solid transparent;
top: -150px;
@media (min-width: 501px) {
grid-column: 2;
}
&::after {
border-top: 150px solid $red;
border-right: 200px solid transparent;
bottom: -150px;
@media (max-width: 500px) {
grid-row: 2;
}
*/
}
&.lbryumx,
&.lbry {
}
&.lbryumx {
background-color: $blue;
border-radius: 50%;
@media (min-width: 1081px) {
grid-column: 3;
grid-row: 1;
}
@media (max-width: 1080px) {
grid-row: 3;
margin-right: auto;
margin-left: auto;
width: 144px;
}
@media (min-width: 501px) and (max-width: 1080px) {
grid-column: 2;
}
@media (max-width: 500px) {
grid-row: 4;
}
}
&.lbry {
background-color: $green;
@media (min-width: 1081px) {
grid-column: 3;
grid-row: 2;
}
@media (max-width: 1080px) {
grid-row: 3;
}
@media (min-width: 501px) and (max-width: 1080px) {
grid-column: 1;
}
@media (max-width: 500px) {
grid-row: 3;
}
}
&.applications {
@include center;
background-color: $violet;
list-style-type: none;
padding-bottom: 1rem;
text-align: center;
> .__title {
margin-bottom: 1rem; padding-top: 1rem;
color: $white;
display: block;
@media (min-width: 1081px) {
grid-column: 4;
grid-row: 1/3;
}
}
&.applications__desktop,
&.applications__mobile,
&.applications__speech {
}
@media (max-width: 1080px) {
padding-top: 1rem;
padding-bottom: 2rem;
}
&.applications__desktop {
}
@media (min-width: 501px) and (max-width: 1080px) {
grid-row: 4;
grid-column: 1/3;
}
&.applications__mobile {
}
@media (max-width: 500px) {
grid-row: 5;
}
&.applications__speech {
> div {
width: 100%;
> .__title {
color: $white;
display: block;
margin-bottom: 1rem;
}
}
}
@ -119,14 +167,56 @@
&.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%;