Improved album spacing and sizing.
This commit is contained in:
parent
8902654c4e
commit
5906ed5948
|
@ -151,7 +151,7 @@ export default {
|
||||||
|
|
||||||
.item-link {
|
.item-link {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0 0 1rem 0;
|
margin: 0 0 .5rem 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
&:hover .item-comment {
|
&:hover .item-comment {
|
||||||
|
@ -182,10 +182,14 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(max-width: $breakpoint-giga) {
|
@media(max-width: $breakpoint-giga) {
|
||||||
.album-items.portrait {
|
.album-items {
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(22.5rem, 1fr));
|
||||||
|
|
||||||
|
.portrait {
|
||||||
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media(max-width: $breakpoint-mega) {
|
@media(max-width: $breakpoint-mega) {
|
||||||
.album-items.portrait {
|
.album-items.portrait {
|
||||||
|
@ -196,18 +200,24 @@ export default {
|
||||||
@media(max-width: $breakpoint-kilo) {
|
@media(max-width: $breakpoint-kilo) {
|
||||||
.album-items {
|
.album-items {
|
||||||
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
|
||||||
|
grid-gap: 0 .5rem;
|
||||||
|
padding: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-link {
|
||||||
|
margin: 0 0 .25rem 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(max-width: $breakpoint) {
|
@media(max-width: $breakpoint) {
|
||||||
.album-items {
|
.album-items {
|
||||||
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(max-width: $breakpoint-micro) {
|
@media(max-width: $breakpoint-micro) {
|
||||||
.album-items {
|
.album-items {
|
||||||
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue