Projects/nettsiden-old
Projects
/
nettsiden-old
Archived
8
0
Fork 0
This repository has been archived on 2024-07-04. You can view files and clone it, but cannot push or open issues or pull requests.
nettsiden-old/www/css/gallery.css

124 lines
2.6 KiB
CSS

body, main {
width: 100%;
margin: 0;
}
main {
background-color: #ddd;
}
.gallery-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
width: 95%;
margin: 15px auto;
}
figure {
overflow: hidden;
}
.card-image {
margin: auto 0;
object-fit: scale-down;
object-position: 0 50%;
object-position: center;
object-fit: cover;
max-height: 45vh;
}
/* #region modal */
.modal-target:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 5vh;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
object-fit: scale-down;
overflow: visible;
/* yolo, it all goes down from here */
min-width: 60vw;
max-width: 90vw !important;
min-height: 60vh;
max-height: 80vh !important;
width: auto;
height: auto;
opacity: 1 !important;
}
/* Caption of Modal Image */
.modal-caption {
margin: auto;
display: block;
width: 80%;
max-width: 90vw;
text-align: center;
color: white;
font-weight: 700;
font-size: 1em;
margin-top: 32px;
}
.modal-content, .modal-caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-atransform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
.modal-close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 72px;
font-weight: bold;
transition: 0.3s;
}
.modal-close:hover, .modal-close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* #endregion modal */
/* #region screen-size media-rules */
@media only screen and (min-width:320px) {
.gallery-container {grid-template-columns: 1fr !important; }
}
@media only screen and (min-width: 641px) {
.gallery-container { grid-template-columns: repeat(2, 1fr) !important;}
}
@media only screen and (min-width: 961px) {
.gallery-container { grid-template-columns: repeat(3, 1fr) !important;}
}
@media only screen and (min-width: 1281px) {
.gallery-container { grid-template-columns: repeat(4, 1fr) !important;}
}
/* #endregion */