🎂 SCP-173 重新设计合作：生日画廊 🎂

[[include :scp-wiki-cn: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]] ------ [[=]] @@ @@ @@ @@ + __请访问[[[peanut-gallery|中心页]]]以查看更多画廊。__ @@ @@ @@ @@ ---- @@ @@ @@ @@ + 恭喜[https://twitter.com/Amamidori1522 @AMAMIDORI1522]的作品在 [https://twitter.com/scpwiki/status/1539594065070936064?s=20&t=v6Umpbepb92yheXkDvUSng SCP-173 生日艺作竞赛]中获胜！ @@ @@ @@ @@ + 在[[[173-anniversary-hub|此]]]查看其他 SCP-173 的 15 周年纪念相关材料！ @@ @@ @@ @@ [[/=]] [[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="http://czyesperanza.wikidot.com/local--files/scp-173-redesign-collab-hub-subpage-8/CuKnite" target="_blank">    <img src="http://czyesperanza.wikidot.com/local--files/scp-173-redesign-collab-hub-subpage-8/CuKnite" >    </a>    <span class="caption"><a href="https://twitter.com/CuKnite" target="_blank">@CuKnite</a></span> <div class="imagebox">    <a href="http://thymeberry.wikidot.com/local--files/files/ThePlanetArtist" target="_blank">    <img src="http://thymeberry.wikidot.com/local--files/files/ThePlanetArtist" >    </a>    <span class="caption"><a href="https://twitter.com/ThePlanetArtist" target="_blank">@ThePlanetArtist</a></span> </div> </div> <div class="imagebox">    <a href="http://thymeberry.wikidot.com/local--files/files/DarkVazher" target="_blank">    <img src="http://thymeberry.wikidot.com/local--files/files/DarkVazher" >    </a>    <span class="caption"><a href="https://twitter.com/DarkVazher" target="_blank">@DarkVazher</a></span> </div> <div class="imagebox">    <a href="http://thymeberry.wikidot.com/local--files/files/ninten_draw" target="_blank">    <img src="http://thymeberry.wikidot.com/local--files/files/ninten_draw" >    </a>    <span class="caption"><a href="https://twitter.com/ninten_draw" target="_blank">@ninten_draw</a></span> </div> <div class="imagebox">    <a href="http://czyesperanza.wikidot.com/local--files/scp-173-redesign-collab-hub-subpage-8/PitukaArt" target="_blank">    <img src="http://czyesperanza.wikidot.com/local--files/scp-173-redesign-collab-hub-subpage-8/PitukaArt" >    </a>    <span class="caption"><a href="https://twitter.com/PitukaArt" target="_blank">@PitukaArt</a></span> </div> <div class="imagebox">    <a href="http://czyesperanza.wikidot.com/local--files/scp-173-redesign-collab-hub-subpage-8/Amamidori1522e" target="_blank">    <img src="http://czyesperanza.wikidot.com/local--files/scp-173-redesign-collab-hub-subpage-8/Amamidori1522e" >    </a>    <span class="caption"><a href="https://twitter.com/Amamidori1522" target="_blank">@Amamidori1522e</a></span> </div> <div class="imagebox">    <a href="http://czyesperanza.wikidot.com/local--files/scp-173-redesign-collab-hub-subpage-8/anafabulaic" target="_blank">    <img src="http://czyesperanza.wikidot.com/local--files/scp-173-redesign-collab-hub-subpage-8/anafabulaic" >    </a>    <span class="caption"><a href="https://twitter.com/anafabulaic" target="_blank">@anafabulaic</a></span> </div> <div class="imagebox">    <a href="http://thymeberry.wikidot.com/local--files/files/NatQuitsLife" target="_blank">    <img src="http://thymeberry.wikidot.com/local--files/files/NatQuitsLife" >    </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]]