Link to article: Site-69 II: Map.
.map {
position: relative;
background-image: url(https://scp-wiki.wdfiles.com/local--files/site-69/sitemap.svg);
background-size: cover;
width: 100%;
max-width: 37.5rem;
aspect-ratio: 4 / 3;
margin: 1rem auto;
container-type: inline-size;
}
.map__room {
position: absolute;
top: var(--room-top);
left: var(--room-left);
width: var(--room-width);
height: var(--room-height);
background-color: var(--swatch-gba-light);
display: flex;
justify-content: center;
align-items: center;
font-size: 2.3cqw;
text-decoration: none !important;
color: var(--swatch-gba-dark) !important;
}
.map__room::after {
content: inherit;
height: 0.3rem;
width: 0.3rem;
margin: 0.3ch;
background-color: #f21a;
border-radius: 1rem;
}
/* Individual room tweaks */
.map__room--east-ring-corridor {
clip-path: polygon(0% 0%, 100% 0%, 100% 9.7%, 41% 9.7%, 41% 100%, 0% 100%);
justify-content: start;
}
.map__room--pantry {
clip-path: polygon(0% 0%, 100% 0%, 100% 38.7%, 51% 38.7%, 51% 100%, 0% 100%);
align-items: start;
line-height: 5cqw;
}
.map__room--storage {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 15.6% 100%, 15.6% 64%, 0% 64%);
}
.map__room--foyer {
clip-path: polygon(22.7% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 37.6%, 22.7% 37.6%);
}
.map__room--toilet {
font-size: 1.6cqw;
}
/* Generated room positions */
.map__room--east-ring-corridor {
--room-top: 34%;
--room-left: 80%;
--room-height: 34%;
--room-width: 6%;
}
.map__room--pantry {
--room-top: 14.6666666666667%;
--room-left: 44.5%;
--room-height: 18.6666666666667%;
--room-width: 19.5%;
}
.map__room--storage {
--room-top: 72%;
--room-left: 57.5%;
--room-height: 18.6666666666667%;
--room-width: 26%;
}
.map__room--foyer {
--room-top: 18%;
--room-left: 83%;
--room-height: 53.3333333333333%;
--room-width: 15.5%;
}
.map__room--hangar {
--room-top: 2%;
--room-left: 1.5%;
--room-height: 96%;
--room-width: 22%;
}
.map__room--server-room {
--room-top: 2%;
--room-left: 24%;
--room-height: 31.3333333333333%;
--room-width: 20%;
}
.map__room--cafe {
--room-top: 22.6666666666667%;
--room-left: 55%;
--room-height: 10.6666666666667%;
--room-width: 18.5%;
}
.map__room--cell-1 {
--room-top: 38.6666666666667%;
--room-left: 24.5%;
--room-height: 13.3333333333333%;
--room-width: 9%;
}
.map__room--cell-2 {
--room-top: 38.6666666666667%;
--room-left: 34.5%;
--room-height: 13.3333333333333%;
--room-width: 9%;
}
.map__room--cell-3 {
--room-top: 38.6666666666667%;
--room-left: 44.5%;
--room-height: 13.3333333333333%;
--room-width: 9%;
}
.map__room--cell-4 {
--room-top: 58%;
--room-left: 24.5%;
--room-height: 13.3333333333333%;
--room-width: 9%;
}
.map__room--cell-5 {
--room-top: 58%;
--room-left: 34.5%;
--room-height: 13.3333333333333%;
--room-width: 9%;
}
.map__room--cell-6 {
--room-top: 58%;
--room-left: 44.5%;
--room-height: 13.3333333333333%;
--room-width: 9%;
}
.map__room--cells-corridor {
--room-top: 53.3333333333333%;
--room-left: 24.5%;
--room-height: 3.33333333333333%;
--room-width: 29%;
}
.map__room--armoury {
--room-top: 73.3333333333333%;
--room-left: 25%;
--room-height: 17.3333333333333%;
--room-width: 28%;
}
.map__room--toilet {
--room-top: 84.6666666666667%;
--room-left: 57.5%;
--room-height: 6%;
--room-width: 3.5%;
}
.map__room--vehicle-bay {
--room-top: 72%;
--room-left: 84%;
--room-height: 18.6666666666667%;
--room-width: 14.5%;
}
.map__room--main-cell {
--room-top: 48.6666666666667%;
--room-left: 65.5%;
--room-height: 8%;
--room-width: 6%;
}
.map__room--main-cell-airlock {
--room-top: 51.3333333333333%;
--room-left: 58%;
--room-height: 2.66666666666667%;
--room-width: 6.5%;
}
.map__room--office {
--room-top: 20.6666666666667%;
--room-left: 77%;
--room-height: 12.6666666666667%;
--room-width: 9%;
flex-direction: column;
}
.map__room--security {
--room-top: 4.66666666666667%;
--room-left: 77%;
--room-height: 8.66666666666667%;
--room-width: 4%;
}
.map__room--records-store {
--room-top: 14%;
--room-left: 77%;
--room-height: 6%;
--room-width: 4%;
}
.map__room--break-room {
--room-top: 4.66666666666667%;
--room-left: 64.5%;
--room-height: 17.3333333333333%;
--room-width: 9%;
flex-direction: column;
}
.map__room--server-room-corridor {
--room-top: 34%;
--room-left: 24%;
--room-height: 3.33333333333333%;
--room-width: 30.5%;
}
.map__room--armoury-corridor {
--room-top: 71.3333333333333%;
--room-left: 54.5%;
--room-height: 19.3333333333333%;
--room-width: 2.5%;
}
.map__room--offices-corridor {
--room-top: 4.66666666666667%;
--room-left: 74%;
--room-height: 29.3333333333333%;
--room-width: 2.5%;
}
.map__room--north-ring-corridor {
--room-top: 34%;
--room-left: 57%;
--room-height: 3.33333333333333%;
--room-width: 23%;
}
.map__room--south-ring-corridor {
--room-top: 68%;
--room-left: 57%;
--room-height: 3.33333333333333%;
--room-width: 25.5%;
}
.map__room--west-ring-corridor {
--room-top: 34%;
--room-left: 54.5%;
--room-height: 37.3333333333333%;
--room-width: 2.5%;
}
.room-icon {
background-size: 1rem;
background-position: center;
background-repeat: no-repeat;
height: 1.2rem;
width: 1.2rem;
display: inline-block;
font-size: 0px;
transform: translateX(0.2rem);
vertical-align: top;
}
.room-icon--new {
background-image: var(--icon-new);
background-size: cover;
border-radius: 99rem;
}
.room-icon--cctv {
background-image: var(--icon-cctv);
}
.room-icon--mic {
background-image: var(--icon-mic);
}
.footage__instruct {
font-weight: bold;
--wght: 700;
color: var(--swatch-gba-dark);
font-size: large;
text-align: center;
}
:root:has(.targets :target) .footage__instruct--below {
display: none;
}
.footage__selectors {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.5rem;
}
.footage__selector:any-link {
position: relative;
padding: 0.3rem clamp(0.25rem, 2cqw, 0.75rem);
border: 2px solid var(--swatch-gba-dark);
border-radius: 0.2rem;
color: black;
background-color: var(--swatch-gba-hpale);
display: flex;
justify-content: center;
align-items: center;
gap: 0.5ch;
--shadow-colour: var(--swatch-gba-medium);
--shadow-3d-height: 0.2rem;
--_shadow-3d-height: 0rem;
box-shadow: 0px var(--_shadow-3d-height) var(--shadow-colour);
transform: translateY(calc(-1 * (var(--_shadow-3d-height))));
transition: box-shadow 0.2s ease, transform 0.2s ease, color 0.1s ease, background-color 0.1s ease, border-color 0.1s ease !important;
}
.footage__selector:hover {
--_shadow-3d-height: 0.2rem;
text-decoration: none;
color: black !important;
background-color: white;
}
footage__instruct
footage__instruct--above
map
map__room
map__room--east-ring-corridor
map__room
map__room--pantry
map__room
map__room--storage
map__room
map__room--foyer
map__room
map__room--hangar
map__room
map__room--server-room
map__room
map__room--cafe
map__room
map__room--cell-1
map__room
map__room--cell-2
map__room
map__room--cell-3
map__room
map__room--cell-4
map__room
map__room--cell-5
map__room
map__room--cell-6
map__room
map__room--cells-corridor
map__room
map__room--armoury
map__room
map__room--toilet
map__room
map__room--vehicle-bay
map__room
map__room--main-cell
map__room
map__room--main-cell-airlock
map__room
map__room--office
map__room
map__room--security
map__room
map__room--records-store
map__room
map__room--break-room
map__room
map__room--server-room-corridor
map__room
map__room--armoury-corridor
map__room
map__room--offices-corridor
map__room
map__room--north-ring-corridor
map__room
map__room--south-ring-corridor
map__room
map__room--west-ring-corridor
targets
footage__selectors
footage__selector
footage__selector--all
footage__selector
footage__selector--hangar
room-icon
room-icon--cctv
room-icon
room-icon--new
footage__selector
footage__selector--server-room
room-icon
room-icon--cctv
room-icon
room-icon--new
footage__selector
footage__selector--pantry
room-icon
room-icon--cctv
room-icon
room-icon--new
footage__selector
footage__selector--cafe
room-icon
room-icon--cctv
room-icon
room-icon--mic
room-icon
room-icon--new
footage__selector
footage__selector--break-room
room-icon
room-icon--cctv
room-icon
room-icon--mic
room-icon
room-icon--new
footage__selector
footage__selector--security
room-icon
room-icon--mic
room-icon
room-icon--new
footage__selector
footage__selector--records-store
room-icon
room-icon--cctv
room-icon
room-icon--mic
room-icon
room-icon--new
footage__selector
footage__selector--office
room-icon
room-icon--cctv
room-icon
room-icon--mic
room-icon
room-icon--new
footage__selector
footage__selector--cell-1
room-icon
room-icon--cctv
room-icon
room-icon--new
footage__selector
footage__selector--cell-2
room-icon
room-icon--cctv
room-icon
room-icon--new
footage__selector
footage__selector--cell-3
room-icon
room-icon--cctv
room-icon
room-icon--new
footage__selector
footage__selector--cell-4
room-icon
room-icon--cctv
room-icon
room-icon--new
footage__selector
footage__selector--cell-5
room-icon
room-icon--cctv
room-icon
room-icon--new
footage__selector
footage__selector--cell-6
room-icon
room-icon--cctv
room-icon
room-icon--new
footage__selector
footage__selector--main-cell-airlock
room-icon
room-icon--cctv
room-icon
room-icon--mic
room-icon
room-icon--new
footage__selector
footage__selector--main-cell
room-icon
room-icon--mic
room-icon
room-icon--new
footage__selector
footage__selector--foyer
room-icon
room-icon--cctv
room-icon
room-icon--new
footage__selector
footage__selector--armoury
room-icon
room-icon--cctv
room-icon
room-icon--new
footage__selector
footage__selector--toilet
room-icon
room-icon--new
footage__selector
footage__selector--storage
room-icon
room-icon--cctv
room-icon
room-icon--mic
room-icon
room-icon--new
footage__selector
footage__selector--vehicle-bay
room-icon
room-icon--cctv
room-icon
room-icon--new
footage__selector
footage__selector--server-room-corridor
room-icon
room-icon--cctv
room-icon
room-icon--new
footage__selector
footage__selector--offices-corridor
room-icon
room-icon--cctv
room-icon
room-icon--new
footage__selector
footage__selector--cells-corridor
room-icon
room-icon--cctv
room-icon
room-icon--new
footage__selector
footage__selector--north-ring-corridor
room-icon
room-icon--cctv
room-icon
room-icon--new
footage__selector
footage__selector--east-ring-corridor
room-icon
room-icon--cctv
room-icon
room-icon--new
footage__selector
footage__selector--south-ring-corridor
room-icon
room-icon--cctv
room-icon
room-icon--new
footage__selector
footage__selector--west-ring-corridor
room-icon
room-icon--cctv
room-icon
room-icon--mic
room-icon
room-icon--new
footage__selector
footage__selector--armoury-corridor
room-icon
room-icon--cctv
room-icon
room-icon--new
footage__selector
footage__selector--exterior
room-icon
room-icon--cctv
room-icon
room-icon--new
footage__instruct
footage__instruct--below