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

Responsiveness for feature links

Browse source
This commit is contained in:
ポール ウェッブ 2018-10-10 17:14:20 -05:00
parent 43ac83fba8
commit 33b418a600
1 changed files with 30 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
app/sass/partials/_feature-links.scss
View file

@ -1,18 +1,18 @@
$width-feature-link: 320px; $width-feature-link: 320px;
.feature-links { .feature-links {
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
list-style-type: none; list-style-type: none;
margin-bottom: 2rem; margin-bottom: 2rem;
padding-top: 0.5rem; padding-top: 0.5rem;
@media (min-width: 1061px) {
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
} }
.feature-link { .feature-link {
width: $width-feature-link;
min-height: 135px;
background-color: $white; background-color: $white;
border: 1px solid rgba($black, 0.1); border: 1px solid rgba($black, 0.1);
border-radius: 3px; border-radius: 3px;
@ -22,6 +22,30 @@ $width-feature-link: 320px;
transition: box-shadow 0.2s; transition: box-shadow 0.2s;
vertical-align: top; vertical-align: top;
@media (min-width: 1061px) {
width: $width-feature-link; min-height: 135px;
}
@media (max-width: 1060px) {
min-height: 150px;
&:not(:last-of-type) {
margin-bottom: 1rem;
}
}
@media (min-width: 681px) and (max-width: 1060px) {
width: calc(50% - 1rem);
&:nth-of-type(odd) {
margin-right: 1rem;
}
}
@media (max-width: 680px) {
width: 100%;
}
&:not(:hover) { &:not(:hover) {
.feature-link__background { .feature-link__background {
filter: brightness(0.5); filter: brightness(0.5);