75 lines
1.7 KiB
CSS
75 lines
1.7 KiB
CSS
/*
|
|
* >>>> Masonry Styles <<<<
|
|
*
|
|
* This stylesheet creates a pinterest-like layout, intended for images. This
|
|
* is currently used for the cat-pictures page.
|
|
*
|
|
* The parent div with the masonry must have the class ".masonry".
|
|
*/
|
|
.masonry {
|
|
column-gap: 10px;
|
|
margin: 10px;
|
|
}
|
|
@media (min-width: 1100px) {
|
|
.masonry {
|
|
column-count: 4;
|
|
}
|
|
}
|
|
@media (max-width: 1099px) and (min-width: 800px) {
|
|
.masonry {
|
|
column-count: 3;
|
|
}
|
|
}
|
|
@media (max-width: 799px) and (min-width: 400px) {
|
|
.masonry {
|
|
column-count: 2;
|
|
}
|
|
}
|
|
@media (max-width: 399px) {
|
|
.masonry {
|
|
column-count: 1;
|
|
}
|
|
}
|
|
.masonry .masonry-grid {
|
|
display: grid;
|
|
grid-template-rows: 1fr auto;
|
|
margin-bottom: 10px;
|
|
break-inside: avoid;
|
|
}
|
|
.masonry .masonry-image {
|
|
display: block;
|
|
max-width: 100%;
|
|
border-radius: 30px;
|
|
grid-row: 1 / -1;
|
|
grid-column: 1;
|
|
animation: float-rev 1s ease-in-out;
|
|
}
|
|
@media (min-width: 800px) {
|
|
/* Doesn't do hover effect if there are fewer than 3 columns */
|
|
.masonry .masonry-image:hover {
|
|
box-shadow: 0px 10px 60px -10px;
|
|
transform: translatey(-10px);
|
|
cursor: pointer;
|
|
animation: float 1s ease-in-out;
|
|
}
|
|
}
|
|
@keyframes float {
|
|
0% {
|
|
box-shadow: 0px 10px 60px -10px rgba(0,0,0,0);
|
|
transform: translatey(0px);
|
|
}
|
|
100% {
|
|
box-shadow: 0px 10px 60px -10px rgba(0,0,0,1);
|
|
transform: translatey(-10px);
|
|
}
|
|
}
|
|
@keyframes float-rev {
|
|
0% {
|
|
box-shadow: 0px 10px 60px -10px rgba(0,0,0,1);
|
|
transform: translatey(-10px);
|
|
}
|
|
100% {
|
|
box-shadow: 0px 10px 60px -10px rgba(0,0,0,0);
|
|
transform: translatey(0px);
|
|
}
|
|
}
|