Site-69 II: Map

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

(none)

(none)

```
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
```

[[div class="footage__instruct footage__instruct--above"]]
↓ SELECT A ROOM TO OBSERVE ↓
[[/div]]

[[div_ class="map"]]
[[a href="#u-east-ring-corridor" class="map__room map__room--east-ring-corridor"]][[/a]] \
[[a href="#u-pantry" class="map__room map__room--pantry"]]Pantry[[/a]] \
[[a href="#u-storage" class="map__room map__room--storage"]]Storage[[/a]] \
[[a href="#u-foyer" class="map__room map__room--foyer"]]Foyer[[/a]] \
[[a href="#u-hangar" class="map__room map__room--hangar"]]Hangar[[/a]] \
[[a href="#u-server-room" class="map__room map__room--server-room"]]Servers[[/a]] \
[[a href="#u-cafe" class="map__room map__room--cafe"]]Café[[/a]] \
[[a href="#u-cell-1" class="map__room map__room--cell-1"]]C1[[/a]] \
[[a href="#u-cell-2" class="map__room map__room--cell-2"]]C2[[/a]] \
[[a href="#u-cell-3" class="map__room map__room--cell-3"]]C3[[/a]] \
[[a href="#u-cell-4" class="map__room map__room--cell-4"]]C4[[/a]] \
[[a href="#u-cell-5" class="map__room map__room--cell-5"]]C5[[/a]] \
[[a href="#u-cell-6" class="map__room map__room--cell-6"]]C6[[/a]] \
[[a href="#u-cells-corridor" class="map__room map__room--cells-corridor"]][[/a]] \
[[a href="#u-armoury" class="map__room map__room--armoury"]]Armoury[[/a]] \
[[a href="#u-toilet" class="map__room map__room--toilet"]]WC[[/a]] \
[[a href="#u-vehicle-bay" class="map__room map__room--vehicle-bay"]]Bay[[/a]] \
[[a href="#u-main-cell" class="map__room map__room--main-cell"]]C**′**[[/a]] \
[[a href="#u-main-cell-airlock" class="map__room map__room--main-cell-airlock"]][[/a]] \
[[a href="#u-office" class="map__room map__room--office"]]Office[[/a]] \
[[a href="#u-security" class="map__room map__room--security"]]S[[/a]] \
[[a href="#u-records-store" class="map__room map__room--records-store"]]R[[/a]] \
[[a href="#u-break-room" class="map__room map__room--break-room"]]Break[[/a]] \
[[a href="#u-server-room-corridor" class="map__room map__room--server-room-corridor"]][[/a]] \
[[a href="#u-armoury-corridor" class="map__room map__room--armoury-corridor"]][[/a]] \
[[a href="#u-offices-corridor" class="map__room map__room--offices-corridor"]][[/a]] \
[[a href="#u-north-ring-corridor" class="map__room map__room--north-ring-corridor"]][[/a]] \
[[a href="#u-south-ring-corridor" class="map__room map__room--south-ring-corridor"]][[/a]] \
[[a href="#u-west-ring-corridor" class="map__room map__room--west-ring-corridor"]][[/a]] \
[[/div]]

[[div_ class="targets"]]
[[a id="u-pantry"]][[/a]][[a id="u-storage"]][[/a]][[a id="u-foyer"]][[/a]][[a id="u-hangar"]][[/a]][[a id="u-server-room"]][[/a]][[a id="u-cafe"]][[/a]][[a id="u-cell-1"]][[/a]][[a id="u-cell-2"]][[/a]][[a id="u-cell-3"]][[/a]][[a id="u-cell-4"]][[/a]][[a id="u-cell-5"]][[/a]][[a id="u-cell-6"]][[/a]][[a id="u-armoury"]][[/a]][[a id="u-toilet"]][[/a]][[a id="u-vehicle-bay"]][[/a]][[a id="u-main-cell"]][[/a]][[a id="u-main-cell-airlock"]][[/a]][[a id="u-office"]][[/a]][[a id="u-security"]][[/a]][[a id="u-records-store"]][[/a]][[a id="u-break-room"]][[/a]][[a id="u-offices-corridor"]][[/a]][[a id="u-server-room-corridor"]][[/a]][[a id="u-cells-corridor"]][[/a]][[a id="u-north-ring-corridor"]][[/a]][[a id="u-east-ring-corridor"]][[/a]][[a id="u-south-ring-corridor"]][[/a]][[a id="u-west-ring-corridor"]][[/a]][[a id="u-armoury-corridor"]][[/a]][[a id="u-exterior"]][[/a]][[a id="u-all"]][[/a]]
[[/div]]

[[div_ class="footage__selectors"]]
[[a href="#u-all" class="footage__selector footage__selector--all"]]ALL EVENTS[[/a]] \
[[a href="#u-hangar" class="footage__selector footage__selector--hangar"]]Hangar [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-server-room" class="footage__selector footage__selector--server-room"]]Server Room [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-pantry" class="footage__selector footage__selector--pantry"]]Pantry [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-cafe" class="footage__selector footage__selector--cafe"]]Cafeteria [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--mic"]]Audio[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-break-room" class="footage__selector footage__selector--break-room"]]Break Room [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--mic"]]Audio[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-security" class="footage__selector footage__selector--security"]]Security [[span class="room-icon room-icon--mic"]]Audio[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-records-store" class="footage__selector footage__selector--records-store"]]Records [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--mic"]]Audio[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-office" class="footage__selector footage__selector--office"]]Office [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--mic"]]Audio[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-cell-1" class="footage__selector footage__selector--cell-1"]]Cell 1 [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-cell-2" class="footage__selector footage__selector--cell-2"]]Cell 2 [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-cell-3" class="footage__selector footage__selector--cell-3"]]Cell 3 [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-cell-4" class="footage__selector footage__selector--cell-4"]]Cell 4 [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-cell-5" class="footage__selector footage__selector--cell-5"]]Cell 5 [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-cell-6" class="footage__selector footage__selector--cell-6"]]Cell 6 [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-main-cell-airlock" class="footage__selector footage__selector--main-cell-airlock"]]Main Cell Airlock [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--mic"]]Audio[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-main-cell" class="footage__selector footage__selector--main-cell"]]Main Cell [[span class="room-icon room-icon--mic"]]Audio[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-foyer" class="footage__selector footage__selector--foyer"]]Foyer [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-armoury" class="footage__selector footage__selector--armoury"]]Armoury [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-toilet" class="footage__selector footage__selector--toilet"]]Toilet [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-storage" class="footage__selector footage__selector--storage"]]Storage [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--mic"]]Audio[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-vehicle-bay" class="footage__selector footage__selector--vehicle-bay"]]Vehicle Bay [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-server-room-corridor" class="footage__selector footage__selector--server-room-corridor"]]Corridor: Server Room [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-offices-corridor" class="footage__selector footage__selector--offices-corridor"]]Corridor: Offices [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-cells-corridor" class="footage__selector footage__selector--cells-corridor"]]Corridor: Cells [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-north-ring-corridor" class="footage__selector footage__selector--north-ring-corridor"]]Corridor: North Ring [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-east-ring-corridor" class="footage__selector footage__selector--east-ring-corridor"]]Corridor: East Ring [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-south-ring-corridor" class="footage__selector footage__selector--south-ring-corridor"]]Corridor: South Ring [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-west-ring-corridor" class="footage__selector footage__selector--west-ring-corridor"]]Corridor: West Ring [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--mic"]]Audio[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-armoury-corridor" class="footage__selector footage__selector--armoury-corridor"]]Corridor: Armoury [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-exterior" class="footage__selector footage__selector--exterior"]]Exterior [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[/div]]

[[div class="footage__instruct footage__instruct--below"]]
↑ SELECT A ROOM TO OBSERVE ↑
[[/div]]

[[module CSS]]
.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;
}
[[/module]]

Site-69 II: Map

Module Styles

Inline Styles

Includes

CSS Classes

Page Source