mirror of https://github.com/Rav4s/portfolio
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
195 lines
3.2 KiB
195 lines
3.2 KiB
.gallery {
|
|
display: grid;
|
|
grid-template-columns: repeat(10, 1fr);
|
|
grid-template-rows: repeat(8, 5vw);
|
|
grid-gap: 0px;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.gallery-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
margin: 0;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.gallery-item {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.gallery-item-1 {
|
|
grid-column-start: 1;
|
|
grid-column-end: 3;
|
|
grid-row-start: 1;
|
|
grid-row-end: 4;
|
|
margin: 5px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.gallery-item-2 {
|
|
grid-column-start: 3;
|
|
grid-column-end: 7;
|
|
grid-row-start: 1;
|
|
grid-row-end: 7;
|
|
margin: 5px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.gallery-item-3 {
|
|
grid-column-start: 7;
|
|
grid-column-end: 12;
|
|
grid-row-start: 1;
|
|
grid-row-end: 5;
|
|
margin: 5px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.gallery-item-4 {
|
|
grid-column-start: 1;
|
|
grid-column-end: 3;
|
|
grid-row-start: 4;
|
|
grid-row-end: 8;
|
|
margin: 5px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.gallery-item-5 {
|
|
grid-column-start: 7;
|
|
grid-column-end: 9;
|
|
grid-row-start: 5;
|
|
grid-row-end: 10;
|
|
margin: 5px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.gallery-item-6 {
|
|
grid-column-start: 9;
|
|
grid-column-end: 12;
|
|
grid-row-start: 5;
|
|
grid-row-end: 10;
|
|
margin: 5px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.gallery-item-7 {
|
|
grid-column-start: 3;
|
|
grid-column-end: 7;
|
|
grid-row-start: 7;
|
|
grid-row-end: 10;
|
|
margin: 5px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.gallery-item-8 {
|
|
grid-column-start: 7;
|
|
grid-column-end: 12;
|
|
grid-row-start: 10;
|
|
grid-row-end: 14;
|
|
margin: 5px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.gallery-item-9 {
|
|
grid-column-start: 4;
|
|
grid-column-end: 7;
|
|
grid-row-start: 10;
|
|
grid-row-end: 12;
|
|
margin: 5px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.gallery-item-10 {
|
|
grid-column-start: 1;
|
|
grid-column-end: 4;
|
|
grid-row-start: 10;
|
|
grid-row-end: 12;
|
|
margin: 5px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.gallery-item-11 {
|
|
grid-column-start: 1;
|
|
grid-column-end: 3;
|
|
grid-row-start: 8;
|
|
grid-row-end: 10;
|
|
margin: 5px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.gallery-item-12 {
|
|
grid-column-start: 7;
|
|
grid-column-end: 11;
|
|
grid-row-start: 14;
|
|
grid-row-end: 16;
|
|
margin: 5px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.gallery-item-13 {
|
|
grid-column-start: 1;
|
|
grid-column-end: 4;
|
|
grid-row-start: 14;
|
|
grid-row-end: 17;
|
|
margin: 5px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.gallery-item-14 {
|
|
grid-column-start: 4;
|
|
grid-column-end: 7;
|
|
grid-row-start: 14;
|
|
grid-row-end: 16;
|
|
margin: 5px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.gallery-item-15 {
|
|
grid-column-start: 4;
|
|
grid-column-end: 7;
|
|
grid-row-start: 16;
|
|
grid-row-end: 18;
|
|
margin: 5px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.gallery-item-16 {
|
|
grid-column-start: 1;
|
|
grid-column-end: 7;
|
|
grid-row-start: 12;
|
|
grid-row-end: 14;
|
|
margin: 5px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.gallery-item-17 {
|
|
grid-column-start: 7;
|
|
grid-column-end: 12;
|
|
grid-row-start: 16;
|
|
grid-row-end: 18;
|
|
margin: 5px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.gallery-item-18 {
|
|
grid-column-start: 1;
|
|
grid-column-end: 4;
|
|
grid-row-start: 17;
|
|
grid-row-end: 18;
|
|
margin: 5px;
|
|
padding: 5px;
|
|
}
|
|
|
|
@media only screen and (max-width: 850px) {
|
|
/*.gallery {
|
|
grid-template-columns: repeat(8, 1fr);
|
|
grid-template-rows: repeat(20, 10vw);
|
|
}*/
|
|
.gallery-item {
|
|
margin: 0.25em;
|
|
padding: 0em;
|
|
}
|
|
}
|