fragment: Site-69 Map

Link to article: fragment: Site-69 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--ring-east {
  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--ring-east {
  --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-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--d1 {
  --room-top: 38.6666666666667%;
  --room-left: 24.5%;
  --room-height: 13.3333333333333%;
  --room-width: 9%;
}
.map__room--d2 {
  --room-top: 38.6666666666667%;
  --room-left: 34.5%;
  --room-height: 13.3333333333333%;
  --room-width: 9%;
}
.map__room--d3 {
  --room-top: 38.6666666666667%;
  --room-left: 44.5%;
  --room-height: 13.3333333333333%;
  --room-width: 9%;
}
.map__room--d4 {
  --room-top: 58%;
  --room-left: 24.5%;
  --room-height: 13.3333333333333%;
  --room-width: 9%;
}
.map__room--d5 {
  --room-top: 58%;
  --room-left: 34.5%;
  --room-height: 13.3333333333333%;
  --room-width: 9%;
}
.map__room--d6 {
  --room-top: 58%;
  --room-left: 44.5%;
  --room-height: 13.3333333333333%;
  --room-width: 9%;
}
.map__room--d-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--bay {
  --room-top: 72%;
  --room-left: 84%;
  --room-height: 18.6666666666667%;
  --room-width: 14.5%;
}
.map__room--containment {
  --room-top: 48.6666666666667%;
  --room-left: 65.5%;
  --room-height: 8%;
  --room-width: 6%;
}
.map__room--airlock {
  --room-top: 51.3333333333333%;
  --room-left: 58%;
  --room-height: 2.66666666666667%;
  --room-width: 6.5%;
}
.map__room--a4 {
  --room-top: 20.6666666666667%;
  --room-left: 77%;
  --room-height: 12.6666666666667%;
  --room-width: 9%;
  flex-direction: column;
}
.map__room--a2 {
  --room-top: 4.66666666666667%;
  --room-left: 77%;
  --room-height: 8.66666666666667%;
  --room-width: 4%;
}
.map__room--a3 {
  --room-top: 14%;
  --room-left: 77%;
  --room-height: 6%;
  --room-width: 4%;
}
.map__room--a1 {
  --room-top: 4.66666666666667%;
  --room-left: 64.5%;
  --room-height: 17.3333333333333%;
  --room-width: 9%;
  flex-direction: column;
}
.map__room--server-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--office-corridor {
  --room-top: 4.66666666666667%;
  --room-left: 74%;
  --room-height: 29.3333333333333%;
  --room-width: 2.5%;
}
.map__room--ring-north {
  --room-top: 34%;
  --room-left: 57%;
  --room-height: 3.33333333333333%;
  --room-width: 23%;
}
.map__room--ring-south {
  --room-top: 68%;
  --room-left: 57%;
  --room-height: 3.33333333333333%;
  --room-width: 25.5%;
}
.map__room--ring-west {
  --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, .footage__selector:visited {
  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--ring-east
```
```
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
```
```
map__room
```
```
map__room--cafe
```
```
map__room
```
```
map__room--d1
```
```
map__room
```
```
map__room--d2
```
```
map__room
```
```
map__room--d3
```
```
map__room
```
```
map__room--d4
```
```
map__room
```
```
map__room--d5
```
```
map__room
```
```
map__room--d6
```
```
map__room
```
```
map__room--d-corridor
```
```
map__room
```
```
map__room--armoury
```
```
map__room
```
```
map__room--toilet
```
```
map__room
```
```
map__room--bay
```
```
map__room
```
```
map__room--containment
```
```
map__room
```
```
map__room--airlock
```
```
map__room
```
```
map__room--a4
```
```
map__room
```
```
map__room--a2
```
```
map__room
```
```
map__room--a3
```
```
map__room
```
```
map__room--a1
```
```
map__room
```
```
map__room--server-corridor
```
```
map__room
```
```
map__room--armoury-corridor
```
```
map__room
```
```
map__room--office-corridor
```
```
map__room
```
```
map__room--ring-north
```
```
map__room
```
```
map__room--ring-south
```
```
map__room
```
```
map__room--ring-west
```
```
targets
```
```
footage__selectors
```
```
footage__selector
```
```
footage__selector--hangar
```
```
room-icon
```
```
room-icon--cctv
```
```
room-icon
```
```
room-icon--new
```
```
footage__selector
```
```
footage__selector--server
```
```
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--new
```
```
footage__selector
```
```
footage__selector--a1
```
```
room-icon
```
```
room-icon--cctv
```
```
room-icon
```
```
room-icon--mic
```
```
room-icon
```
```
room-icon--new
```
```
footage__selector
```
```
footage__selector--a2
```
```
room-icon
```
```
room-icon--new
```
```
footage__selector
```
```
footage__selector--a3
```
```
room-icon
```
```
room-icon--cctv
```
```
room-icon
```
```
room-icon--new
```
```
footage__selector
```
```
footage__selector--a4
```
```
room-icon
```
```
room-icon--cctv
```
```
room-icon
```
```
room-icon--mic
```
```
room-icon
```
```
room-icon--new
```
```
footage__selector
```
```
footage__selector--d1
```
```
room-icon
```
```
room-icon--cctv
```
```
room-icon
```
```
room-icon--new
```
```
footage__selector
```
```
footage__selector--d2
```
```
room-icon
```
```
room-icon--cctv
```
```
room-icon
```
```
room-icon--new
```
```
footage__selector
```
```
footage__selector--d3
```
```
room-icon
```
```
room-icon--cctv
```
```
room-icon
```
```
room-icon--new
```
```
footage__selector
```
```
footage__selector--d4
```
```
room-icon
```
```
room-icon--cctv
```
```
room-icon
```
```
room-icon--new
```
```
footage__selector
```
```
footage__selector--d5
```
```
room-icon
```
```
room-icon--cctv
```
```
room-icon
```
```
room-icon--new
```
```
footage__selector
```
```
footage__selector--d6
```
```
room-icon
```
```
room-icon--cctv
```
```
room-icon
```
```
room-icon--new
```
```
footage__selector
```
```
footage__selector--airlock
```
```
room-icon
```
```
room-icon--cctv
```
```
room-icon
```
```
room-icon--mic
```
```
room-icon
```
```
room-icon--new
```
```
footage__selector
```
```
footage__selector--containment
```
```
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--new
```
```
footage__selector
```
```
footage__selector--bay
```
```
room-icon
```
```
room-icon--cctv
```
```
room-icon
```
```
room-icon--new
```
```
footage__selector
```
```
footage__selector--server-corridor
```
```
room-icon
```
```
room-icon--cctv
```
```
room-icon
```
```
room-icon--new
```
```
footage__selector
```
```
footage__selector--office-corridor
```
```
room-icon
```
```
room-icon--cctv
```
```
room-icon
```
```
room-icon--new
```
```
footage__selector
```
```
footage__selector--d-corridor
```
```
room-icon
```
```
room-icon--cctv
```
```
room-icon
```
```
room-icon--new
```
```
footage__selector
```
```
footage__selector--ring-north
```
```
room-icon
```
```
room-icon--cctv
```
```
room-icon
```
```
room-icon--new
```
```
footage__selector
```
```
footage__selector--ring-east
```
```
room-icon
```
```
room-icon--cctv
```
```
room-icon
```
```
room-icon--new
```
```
footage__selector
```
```
footage__selector--ring-south
```
```
room-icon
```
```
room-icon--cctv
```
```
room-icon
```
```
room-icon--new
```
```
footage__selector
```
```
footage__selector--ring-west
```
```
room-icon
```
```
room-icon--cctv
```
```
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--outside
```
```
room-icon
```
```
room-icon--cctv
```
```
room-icon
```
```
room-icon--new
```
```
footage__selector
```
```
footage__selector--all
```
```
footage__instruct
```
```
footage__instruct--below
```

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

[[div_ class="map"]]
[[a href="#u-ring-east"class="map__room map__room--ring-east"]][[/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"class="map__room map__room--server"]]Servers[[/a]] \
[[a href="#u-cafe"class="map__room map__room--cafe"]]Café[[/a]] \
[[a href="#u-d1"class="map__room map__room--d1"]]C1[[/a]] \
[[a href="#u-d2"class="map__room map__room--d2"]]C2[[/a]] \
[[a href="#u-d3"class="map__room map__room--d3"]]C3[[/a]] \
[[a href="#u-d4"class="map__room map__room--d4"]]C4[[/a]] \
[[a href="#u-d5"class="map__room map__room--d5"]]C5[[/a]] \
[[a href="#u-d6"class="map__room map__room--d6"]]C6[[/a]] \
[[a href="#u-d-corridor"class="map__room map__room--d-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-bay"class="map__room map__room--bay"]]Bay[[/a]] \
[[a href="#u-containment"class="map__room map__room--containment"]]C**′**[[/a]] \
[[a href="#u-airlock"class="map__room map__room--airlock"]][[/a]] \
[[a href="#u-a4"class="map__room map__room--a4"]]Office[[/a]] \
[[a href="#u-a2"class="map__room map__room--a2"]]S[[/a]] \
[[a href="#u-a3"class="map__room map__room--a3"]]R[[/a]] \
[[a href="#u-a1"class="map__room map__room--a1"]]Break[[/a]] \
[[a href="#u-server-corridor"class="map__room map__room--server-corridor"]][[/a]] \
[[a href="#u-armoury-corridor"class="map__room map__room--armoury-corridor"]][[/a]] \
[[a href="#u-office-corridor"class="map__room map__room--office-corridor"]][[/a]] \
[[a href="#u-ring-north"class="map__room map__room--ring-north"]][[/a]] \
[[a href="#u-ring-south"class="map__room map__room--ring-south"]][[/a]] \
[[a href="#u-ring-west"class="map__room map__room--ring-west"]][[/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"]][[/a]][[a id="u-cafe"]][[/a]][[a id="u-d1"]][[/a]][[a id="u-d2"]][[/a]][[a id="u-d3"]][[/a]][[a id="u-d4"]][[/a]][[a id="u-d5"]][[/a]][[a id="u-d6"]][[/a]][[a id="u-armoury"]][[/a]][[a id="u-toilet"]][[/a]][[a id="u-bay"]][[/a]][[a id="u-containment"]][[/a]][[a id="u-airlock"]][[/a]][[a id="u-a4"]][[/a]][[a id="u-a2"]][[/a]][[a id="u-a3"]][[/a]][[a id="u-a1"]][[/a]][[a id="u-office-corridor"]][[/a]][[a id="u-server-corridor"]][[/a]][[a id="u-d-corridor"]][[/a]][[a id="u-ring-north"]][[/a]][[a id="u-ring-east"]][[/a]][[a id="u-ring-south"]][[/a]][[a id="u-ring-west"]][[/a]][[a id="u-armoury-corridor"]][[/a]][[a id="u-outside"]][[/a]][[a id="u-all"]][[/a]]
[[/div]]

[[div_ class="footage__selectors"]]
[[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" class="footage__selector footage__selector--server"]]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--new"]]New[[/span]][[/a]] \
[[a href="#u-a1" class="footage__selector footage__selector--a1"]]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-a2" class="footage__selector footage__selector--a2"]]Security [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-a3" class="footage__selector footage__selector--a3"]]Records [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-a4" class="footage__selector footage__selector--a4"]]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-d1" class="footage__selector footage__selector--d1"]]Cell 1 [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-d2" class="footage__selector footage__selector--d2"]]Cell 2 [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-d3" class="footage__selector footage__selector--d3"]]Cell 3 [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-d4" class="footage__selector footage__selector--d4"]]Cell 4 [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-d5" class="footage__selector footage__selector--d5"]]Cell 5 [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-d6" class="footage__selector footage__selector--d6"]]Cell 6 [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-airlock" class="footage__selector footage__selector--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-containment" class="footage__selector footage__selector--containment"]]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--new"]]New[[/span]][[/a]] \
[[a href="#u-bay" class="footage__selector footage__selector--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-corridor" class="footage__selector footage__selector--server-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-office-corridor" class="footage__selector footage__selector--office-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-d-corridor" class="footage__selector footage__selector--d-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-ring-north" class="footage__selector footage__selector--ring-north"]]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-ring-east" class="footage__selector footage__selector--ring-east"]]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-ring-south" class="footage__selector footage__selector--ring-south"]]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-ring-west" class="footage__selector footage__selector--ring-west"]]Corridor: West Ring [[span class="room-icon room-icon--cctv"]]CCTV[[/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-outside" class="footage__selector footage__selector--outside"]]Exterior [[span class="room-icon room-icon--cctv"]]CCTV[[/span]] [[span class="room-icon room-icon--new"]]New[[/span]][[/a]] \
[[a href="#u-all" class="footage__selector footage__selector--all"]]SHOW ALL ROOMS[[/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--ring-east {
  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--ring-east {
  --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-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--d1 {
  --room-top: 38.6666666666667%;
  --room-left: 24.5%;
  --room-height: 13.3333333333333%;
  --room-width: 9%;
}
.map__room--d2 {
  --room-top: 38.6666666666667%;
  --room-left: 34.5%;
  --room-height: 13.3333333333333%;
  --room-width: 9%;
}
.map__room--d3 {
  --room-top: 38.6666666666667%;
  --room-left: 44.5%;
  --room-height: 13.3333333333333%;
  --room-width: 9%;
}
.map__room--d4 {
  --room-top: 58%;
  --room-left: 24.5%;
  --room-height: 13.3333333333333%;
  --room-width: 9%;
}
.map__room--d5 {
  --room-top: 58%;
  --room-left: 34.5%;
  --room-height: 13.3333333333333%;
  --room-width: 9%;
}
.map__room--d6 {
  --room-top: 58%;
  --room-left: 44.5%;
  --room-height: 13.3333333333333%;
  --room-width: 9%;
}
.map__room--d-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--bay {
  --room-top: 72%;
  --room-left: 84%;
  --room-height: 18.6666666666667%;
  --room-width: 14.5%;
}
.map__room--containment {
  --room-top: 48.6666666666667%;
  --room-left: 65.5%;
  --room-height: 8%;
  --room-width: 6%;
}
.map__room--airlock {
  --room-top: 51.3333333333333%;
  --room-left: 58%;
  --room-height: 2.66666666666667%;
  --room-width: 6.5%;
}
.map__room--a4 {
  --room-top: 20.6666666666667%;
  --room-left: 77%;
  --room-height: 12.6666666666667%;
  --room-width: 9%;
  flex-direction: column;
}
.map__room--a2 {
  --room-top: 4.66666666666667%;
  --room-left: 77%;
  --room-height: 8.66666666666667%;
  --room-width: 4%;
}
.map__room--a3 {
  --room-top: 14%;
  --room-left: 77%;
  --room-height: 6%;
  --room-width: 4%;
}
.map__room--a1 {
  --room-top: 4.66666666666667%;
  --room-left: 64.5%;
  --room-height: 17.3333333333333%;
  --room-width: 9%;
  flex-direction: column;
}
.map__room--server-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--office-corridor {
  --room-top: 4.66666666666667%;
  --room-left: 74%;
  --room-height: 29.3333333333333%;
  --room-width: 2.5%;
}
.map__room--ring-north {
  --room-top: 34%;
  --room-left: 57%;
  --room-height: 3.33333333333333%;
  --room-width: 23%;
}
.map__room--ring-south {
  --room-top: 68%;
  --room-left: 57%;
  --room-height: 3.33333333333333%;
  --room-width: 25.5%;
}
.map__room--ring-west {
  --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, .footage__selector:visited {
  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]]

fragment: Site-69 Map

Module Styles

Inline Styles

Includes

CSS Classes

Page Source