Link to article: Sciptember 2022 Art Highlights.
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300');
/* isolates wideness to this class */
.widebox {
width: 99.3vw;
max-width: 100vw !important;
position: relative;
left: calc(-49.65vw + 50%);
}
/* centers page title */
#page-title {
text-align: center;
}
/* destroys the second brazil in the page */
#page-content p br:nth-child(2) {
display: none;
}
/* contains multitudes..... and images */
.imagecollection {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
padding: 0;
}
/* makes ur image boxes square */
.imagecollection .imagebox {
background: transparent;
position: relative;
box-sizing: border-box;
width: 14.1vw;
height: 14.1vw;
margin: 0;
}
/* adds that hover gradient to each image box */
.imagecollection .imagebox:before{
content: "";
position: absolute;
background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 35%);
height: 100%;
width: 100%;
z-index: 1;
opacity: 0;
transition: 0.3s;
pointer-events: none;
}
/* the image */
.imagecollection .imagebox img {
display: block;
margin: auto;
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
}
/* caption below every image ,,,. */
.caption {
color: white;
font-family: 'Open Sans';
bottom: 0;
padding: 0.8em;
font-size: 2em;
position: absolute;
z-index: 2;
opacity: 0;
transition: 0.5s;
pointer-events: none;
}
/* calendar date */
.date {
color: white;
font-family: 'Open Sans';
top: 0;
right: 0;
padding: 0.8em;
font-size: 2em;
position: absolute;
z-index: 2;
pointer-events: none;
text-shadow: 0.1em 0.1em 0.1em #000000;
}
/* makes the gradient and caption appear on hover */
.imagecollection .imagebox:hover:before, .imagecollection .imagebox:hover .caption {
opacity: 1;
}
/* mobile shit */
@media screen and (max-width: 1200px) {
.imagecollection .imagebox {
width: 24.82vw;
height: 24.82vw;
}
}
@media screen and (max-width: 640px) {
.imagecollection .imagebox {
width: 100vw;
height: 56.25vw;
}
}
.shakelink {
cursor:pointer;
user-select: none;
}
.shakelink:active {
/* you dont even know it but this code came from a vore scp */
animation: shake 0.1s;
display: inline-block;
user-select: none;
}
@keyframes shake {
0% { transform: translate(1px, -4px); }
25% { transform: translate(-1px, 4px); }
50% { transform: translate(1px, -4px); }
100% { transform: translate(-1px, 4px); }
}
.lockbox:active:hover:before {
content: "";
position: absolute;
background: red;
height: 100%;
width: 100%;
z-index: 1;
opacity: 0;
}wideboximagecollectionimageboxcaptiondateimageboxcaptiondateimageboxcaptiondateimageboxlockboxcaptiondateimageboxlockboxcaptiondateimageboxlockboxcaptiondateimageboxlockboxcaptiondateimageboxlockboxcaptiondateimageboxcaptiondateimageboxlockboxcaptiondateimageboxlockboxcaptiondateimageboxlockboxcaptiondateimageboxlockboxcaptiondateimageboxlockboxcaptiondateimageboxlockboxcaptiondateimageboxlockboxcaptiondateimageboxlockboxcaptiondateimageboxlockboxcaptiondateimageboxlockboxcaptiondateimageboxlockboxcaptiondateimageboxlockboxcaptiondateimageboxlockboxcaptiondateimageboxlockboxcaptiondateimageboxlockboxcaptiondateimageboxlockboxcaptiondateimageboxlockboxcaptiondateimageboxlockboxcaptiondateimageboxlockboxcaptiondateimageboxlockboxcaptiondateimageboxlockboxcaptiondate