fragment: Site-69 Picker

Link to article: fragment: Site-69 Picker.

.footage-picker {
  position: relative;
  display: flex;
  flex-direction: column;
  border: thin solid rgb(var(--tables-border));
  margin-bottom: 4rem;
}
.footage-picker p {
  margin: 0;
}
.footage-picker__heading {
  margin: 0;
  background: rgb(var(--tables-header-bg));
  color: rgb(var(--tables-header-txt));
  text-align: center;
  padding: 0.5em 1em;
}
.footage-picker__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4em, max-content));
  gap: 0.5em;
  padding: 0.5em;
  justify-content: center;
  box-sizing: border-box;
}
.footage-picker__link, .footage-picker__link:visited {
  background-color: rgb(var(--tabs-bg));
  box-sizing: border-box;
  border-bottom: medium solid rgb(var(--tabs-selected-outline));
  box-shadow: inset 0px 0px 0px 0px transparent;
  color: inherit;
  text-decoration: none !important;
  text-align: center;
  padding-block: 1.25rem;
  transition: box-shadow 0.1s ease-in;
}
.footage-picker__link:hover, .footage-picker__link:focus-visible,
.footage-picker__link:visited:hover, .footage-picker__link:visited:focus-visible {
  box-shadow: inset 0px 0px 0px 5px rgb(var(--tabs-selected-outline));
  transition: box-shadow 0.1s ease-out;
}
.footage-picker__link--2 {
  grid-column: span 2;
}
.footage-picker__link--3 {
  grid-column: span 3;
}


/* Hide targets so you don't scroll to them on click */
.targets { display: none }
/* But if they do show, add some space to the top of the screen after clicking a room */
.targets a { scroll-margin-top: 1ch }

/* Stagger fade on the links */
.footage-picker { counter-reset: fade }
.footage-picker__link {
  counter-increment: fade;
  opacity: 0;
  animation: fadeIn 1s ease forwards;
  --b: 0;
  animation-delay: calc(0.3s * (var(--n) - var(--b)));
}
.footage-picker__link:nth-child(1) {--n:1}
.footage-picker__link:nth-child(2) {--n:2}
.footage-picker__link:nth-child(3) {--n:3}
.footage-picker__link:nth-child(4) {--n:4}
.footage-picker__link:nth-child(5) {--n:5}
.footage-picker__link:nth-child(6) {--n:6}
.footage-picker__link:nth-child(7) {--n:7}
.footage-picker__link:nth-child(8) {--n:8}
.footage-picker__link:nth-child(9) {--n:9}
.footage-picker__link:nth-child(10) {--n:10}
.footage-picker__link:nth-child(11) {--n:11}
.footage-picker__link:nth-child(12) {--n:12}
.footage-picker__link:nth-child(13) {--n:13}
.footage-picker__link:nth-child(14) {--n:14}
.footage-picker__link:nth-child(15) {--n:15}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

/* Hide hidden link */
.footage-picker__link--hidden:not(.reading-detector:has(.html-block-iframe[style*="2px"]) + .footage-picker__links .footage-picker__link--hidden) {
  opacity: 0 !important;
}

```
height: 0
```
```
height: 1px
```

(none)

```
meta-title
```
```
footage-picker
```
```
footage-picker__heading
```
```
reading-detector
```
```
footage-picker__links
```
```
footage-picker__link
```
```
footage-picker__link
```
```
footage-picker__link
```
```
footage-picker__link
```
```
footage-picker__link
```
```
footage-picker__link
```
```
footage-picker__link
```
```
footage-picker__link
```
```
footage-picker__link
```
```
footage-picker__link
```
```
footage-picker__link
```
```
footage-picker__link
```
```
footage-picker__link
```
```
footage-picker__link--3
```
```
footage-picker__link
```
```
footage-picker__link--3
```
```
footage-picker__link
```
```
footage-picker__link--hidden
```
```
footage-picker__link--2
```

[!-- Anchor so that switching pages takes the user straight here, skipping past the note + dossier --]
[[# footage]]

[[div class="meta-title"]]
Site-69 Camera Feed Archive
[[/div]]

[[=]]
All recorded footage from Site-69 is available for review:
[[/=]]

[[div class="footage-picker"]]

[[div class="footage-picker__heading"]]
**Site-69 date:** 8th October 1999
[[/div]]

[[div class="reading-detector" style="height: 0"]]
[[html]]
<body style="height: 1px"></body>
<script>
function check() {
  if (localStorage.getItem("site69-read-afteraction") === "true")
    document.body.style.height = "2px"
}

check()

setTimeout(() => check(), 100)
setTimeout(() => check(), 200)
setTimeout(() => check(), 300)
</script>
[[/html]]
[[/div]]

[[div_ class="footage-picker__links"]]
[[a href="/site-69/offset/0#footage" class="footage-picker__link"]]12 AM[[/a]] \
[[a href="/site-69/offset/1#footage" class="footage-picker__link"]]1 AM[[/a]] \
[[a href="/site-69/offset/2#footage" class="footage-picker__link"]]2 AM[[/a]] \
[[a href="/site-69/offset/3#footage" class="footage-picker__link"]]3 AM[[/a]] \
[[a href="/site-69/offset/4#footage" class="footage-picker__link"]]4 AM[[/a]] \
[[a href="/site-69/offset/5#footage" class="footage-picker__link"]]5 AM[[/a]] \
[[a href="/site-69/offset/6#footage" class="footage-picker__link"]]6 AM[[/a]] \
[[a href="/site-69/offset/7#footage" class="footage-picker__link"]]7 AM[[/a]] \
[[a href="/site-69/offset/8#footage" class="footage-picker__link"]]8 AM[[/a]] \
[[a href="/site-69/offset/9#footage" class="footage-picker__link"]]9 AM[[/a]] \
[[a href="/site-69/offset/10#footage" class="footage-picker__link"]]10 AM[[/a]] \
[[a href="/site-69/offset/11#footage" class="footage-picker__link"]]11 AM[[/a]] \
[[a href="/site-69/offset/12#footage" class="footage-picker__link footage-picker__link--3"]]RTF-K13 Report[[/a]] \
[[a href="/site-69/offset/13#footage" class="footage-picker__link footage-picker__link--3"]]After-Action Report[[/a]] \
[[a href="/site-69/offset/14#footage" class="footage-picker__link footage-picker__link--hidden footage-picker__link--2"]][DATA LOST][[/a]]
[[/div]] [!-- .footage-picker__links --]

= See also: [[[site-69-ii | 9th January 2000 footage]]]

[[/div]] [!-- .footage-picker --]

[[module CSS]]
.footage-picker {
  position: relative;
  display: flex;
  flex-direction: column;
  border: thin solid rgb(var(--tables-border));
  margin-bottom: 4rem;
}
.footage-picker p {
  margin: 0;
}
.footage-picker__heading {
  margin: 0;
  background: rgb(var(--tables-header-bg));
  color: rgb(var(--tables-header-txt));
  text-align: center;
  padding: 0.5em 1em;
}
.footage-picker__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4em, max-content));
  gap: 0.5em;
  padding: 0.5em;
  justify-content: center;
  box-sizing: border-box;
}
.footage-picker__link, .footage-picker__link:visited {
  background-color: rgb(var(--tabs-bg));
  box-sizing: border-box;
  border-bottom: medium solid rgb(var(--tabs-selected-outline));
  box-shadow: inset 0px 0px 0px 0px transparent;
  color: inherit;
  text-decoration: none !important;
  text-align: center;
  padding-block: 1.25rem;
  transition: box-shadow 0.1s ease-in;
}
.footage-picker__link:hover, .footage-picker__link:focus-visible,
.footage-picker__link:visited:hover, .footage-picker__link:visited:focus-visible {
  box-shadow: inset 0px 0px 0px 5px rgb(var(--tabs-selected-outline));
  transition: box-shadow 0.1s ease-out;
}
.footage-picker__link--2 {
  grid-column: span 2;
}
.footage-picker__link--3 {
  grid-column: span 3;
}


/* Hide targets so you don't scroll to them on click */
.targets { display: none }
/* But if they do show, add some space to the top of the screen after clicking a room */
.targets a { scroll-margin-top: 1ch }

/* Stagger fade on the links */
.footage-picker { counter-reset: fade }
.footage-picker__link {
  counter-increment: fade;
  opacity: 0;
  animation: fadeIn 1s ease forwards;
  --b: 0;
  animation-delay: calc(0.3s * (var(--n) - var(--b)));
}
.footage-picker__link:nth-child(1) {--n:1}
.footage-picker__link:nth-child(2) {--n:2}
.footage-picker__link:nth-child(3) {--n:3}
.footage-picker__link:nth-child(4) {--n:4}
.footage-picker__link:nth-child(5) {--n:5}
.footage-picker__link:nth-child(6) {--n:6}
.footage-picker__link:nth-child(7) {--n:7}
.footage-picker__link:nth-child(8) {--n:8}
.footage-picker__link:nth-child(9) {--n:9}
.footage-picker__link:nth-child(10) {--n:10}
.footage-picker__link:nth-child(11) {--n:11}
.footage-picker__link:nth-child(12) {--n:12}
.footage-picker__link:nth-child(13) {--n:13}
.footage-picker__link:nth-child(14) {--n:14}
.footage-picker__link:nth-child(15) {--n:15}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

/* Hide hidden link */
.footage-picker__link--hidden:not(.reading-detector:has(.html-block-iframe[style*="2px"]) + .footage-picker__links .footage-picker__link--hidden) {
  opacity: 0 !important;
}
[[/module]]

fragment: Site-69 Picker

Module Styles

Inline Styles

Includes

CSS Classes

Page Source