🎂 SCP-173 Redesign Collab: Birthday Gallery 🎂

Link to article: 🎂 SCP-173 Redesign Collab: Birthday Gallery 🎂.

/* 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;
}

(none)

:scp-wiki:theme:basalt [info]

```
widebox
```
```
imagecollection
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```
```
imagebox
```
```
caption
```

[[include :scp-wiki:theme:basalt darkmode=a]]

[[module css]]
/* 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;
}
[[/module]]

[[=]]
[[module Rate]]
[[/=]]
------
[[=]]

@@
@@
@@
@@

+ __Please visit [[[peanut-gallery|hub page]]] for further galleries.__


@@
@@
@@
@@

----

@@
@@
@@
@@

+ CONGRATULATIONS TO [https://twitter.com/Amamidori1522 @AMAMIDORI1522] FOR THEIR WINNING ENTRY TO THE [https://twitter.com/scpwiki/status/1539594065070936064?s=20&t=v6Umpbepb92yheXkDvUSng SCP-173 BIRTHDAY ART CONTEST]!

@@
@@
@@
@@

+ SEE OTHER MATERIALS RELATED TO SCP-173'S 15 YEAR ANNIVERSARY [https://scp-wiki.wikidot.com/173-anniversary-hub HERE]!

@@
@@
@@
@@

[[/=]]

[[div class="widebox"]]

------

[[html]]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300');

/* 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,1) 0%, rgba(0,0,0,0) 35%);
  height: 100%;
  width: 100%;
  z-index: 1;
  opacity: 0.75;
  transition: 0.5s;
  pointer-events: none;
}

.imagecollection .imagebox:hover:before {
  opacity: 1;
}

/* the image */
.imagecollection .imagebox img {
  display: block;
  margin: auto;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

/* caption below every image ,,,. */
.caption {
  padding: 0.8em;
  bottom: 0;
  position: absolute;
  z-index: 2;
}
.caption a {
  color: white;
  font-family: 'Open Sans';
  font-size: 1.5em;
  text-decoration: none;
}

.caption a:hover {
  color: white;
  text-decoration: underline;
}

/* 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;
  }
}
</style>
<div class="imagecollection">

<div class="imagebox">
   <a href="https://pbs.twimg.com/media/FWTPkU8UEAA6vpY?format=jpg&name=4096x4096" target="_blank">
   <img src="https://pbs.twimg.com/media/FWTPkU8UEAA6vpY?format=jpg&name=4096x4096" >
   </a>
   <span class="caption"><a href="https://twitter.com/CuKnite" target="_blank">@CuKnite</a></span>

<div class="imagebox">
   <a href="https://pbs.twimg.com/media/FWAAuK7acAAUa3F?format=jpg&name=large" target="_blank">
   <img src="https://pbs.twimg.com/media/FWAAuK7acAAUa3F?format=jpg&name=large" >
   </a>
   <span class="caption"><a href="https://twitter.com/ThePlanetArtist" target="_blank">@ThePlanetArtist</a></span>
</div>
</div>

<div class="imagebox">
   <a href="https://pbs.twimg.com/media/FWW4toiXgAAyNQB?format=jpg&name=large" target="_blank">
   <img src="https://pbs.twimg.com/media/FWW4toiXgAAyNQB?format=jpg&name=large" >
   </a>
   <span class="caption"><a href="https://twitter.com/DarkVazher" target="_blank">@DarkVazher</a></span>
</div>

<div class="imagebox">
   <a href="https://pbs.twimg.com/media/FV6VBRmXoAM05n_?format=jpg&name=large" target="_blank">
   <img src="https://pbs.twimg.com/media/FV6VBRmXoAM05n_?format=jpg&name=large" >
   </a>
   <span class="caption"><a href="https://twitter.com/ninten_draw" target="_blank">@ninten_draw</a></span>
</div>

<div class="imagebox">
   <a href="https://pbs.twimg.com/media/FWdyIslWAAAKK-5?format=jpg&name=medium" target="_blank">
   <img src="https://pbs.twimg.com/media/FWdyIslWAAAKK-5?format=jpg&name=medium" >
   </a>
   <span class="caption"><a href="https://twitter.com/PitukaArt" target="_blank">@PitukaArt</a></span>
</div>

<div class="imagebox">
   <a href="https://pbs.twimg.com/media/FWa-CRcVUAA8vjR?format=jpg&name=large" target="_blank">
   <img src="https://pbs.twimg.com/media/FWa-CRcVUAA8vjR?format=jpg&name=large" >
   </a>
   <span class="caption"><a href="https://twitter.com/Amamidori1522" target="_blank">@Amamidori1522e</a></span>
</div>

<div class="imagebox">
   <a href="https://pbs.twimg.com/media/FWEBE_BWAAA6IZq?format=jpg&name=4096x4096" target="_blank">
   <img src="https://pbs.twimg.com/media/FWEBE_BWAAA6IZq?format=jpg&name=4096x4096" >
   </a>
   <span class="caption"><a href="https://twitter.com/anafabulaic" target="_blank">@anafabulaic</a></span>
</div>

<div class="imagebox">
   <a href="https://pbs.twimg.com/media/FV7PloDUEAArDJM?format=jpg&name=large" target="_blank">
   <img src="https://pbs.twimg.com/media/FV7PloDUEAArDJM?format=jpg&name=large" >
   </a>
   <span class="caption"><a href="https://twitter.com/NatQuitsLife" target="_blank">@NatQuitsLife</a></span>
</div>

</div>
<script>
var cards = $(".imagebox");
console.log(cards.length);
for(var i = 0; i < cards.length; i++){
    var target = Math.floor(Math.random() * cards.length -1) + 1;
    var target2 = Math.floor(Math.random() * cards.length -1) +1;
    cards.eq(target).before(cards.eq(target2));
}
</script>
[[/html]]
[[/div]]

🎂 SCP-173 Redesign Collab: Birthday Gallery 🎂

Module Styles

Inline Styles

Includes

CSS Classes

Page Source