Aroy/Rinkusu
1
1
Fork 0
mirror of https://github.com/Aroy-Art/Rinkusu.git synced 2024-10-18 20:09:35 +00:00
Code Issues 5 Projects Releases Packages Wiki Activity

Added masonry styling for porfolio

Browse source
This commit is contained in:
Aroy-Art 2021-07-27 19:02:58 +02:00
parent 91b7a64e17
commit 24c2a74f3f
1 changed files with 47 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
assets/css/style.css
View file

@ -961,6 +961,53 @@ a:hover {
margin-right: -8px;
}
.wrapper {
max-width: 1280px;
margin-right: auto;
margin-left: auto;
padding: 1.5em;
}
.masonry-wrapper {
padding: 1.5em;
max-width: auto;
margin-right: auto;
margin-left: auto;
}
.masonry {
display: grid;
grid-template-columns: repeat(1, minmax(100px,1fr));
grid-gap: 10px;
grid-auto-rows: 0;
}
@media only screen and (max-width: 1023px) and (min-width: 768px) {
.masonry {
grid-template-columns: repeat(2, minmax(100px,1fr));
}
}
@media only screen and (min-width: 1024px) {
.masonry {
grid-template-columns: repeat(4, minmax(100px,1fr));
}
}
.masonry-item, .masonry-content {
border-radius: 4px;
overflow: hidden;
width: 100%;
height: auto;
}
.masonry-item {
filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, .6));
transition: filter .25s ease-in-out;
}
.masonry-item:hover {
filter: drop-shadow(0px 5px 5px rgba(0, 56, 56, 0.774));
}
/*==================================================================
Social sharing buttons from Sharingbuttons.io
==================================================================*/