Site-69 II: Picker

Link to article: Site-69 II: Picker.

.footage-picker {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 4rem;
  border: thin solid rgb(var(--tables-border));
  max-width: 29em !important;
  margin-inline: auto;
}
.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:any-link {
  background-color: rgb(var(--tabs-bg));
  box-sizing: border-box;
  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;
  border: thin solid rgb(var(--tables-border));
}
.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;
}

/* 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}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

/* Outside */
.footage-picker__link:nth-child(5) {
  color: transparent;
  background-image: linear-gradient(
    to bottom,
    #3073ad 7.1%,
    #387cb9 21.4%,
    #4687c1 35.7%,
    #5997cb 50%,
    #6da6d3 64.3%,
    #84b4d9 78.6%,
    #97bedb 92.9%
  );
}

.footage-picker__link--locked {
  position: relative;
  font-size: 0;
  color: inherit !important;
  background: inherit !important;
  pointer-events: none;
}
.footage-picker__link--locked::after {
  content: "\f023";
  font-family: "FontAwesome";
  font-size: 1rem;
}

```
text-align: center;
```
```
display: none;
```

(none)

```
meta-title
```
```
footage-picker-section__title
```
```
footage-picker-section__intro
```
```
footage-picker
```
```
footage-picker__heading
```
```
footage-picker__heading
```
```
footage-picker__heading--expedition
```
```
footage-picker__links
```
```
footage-picker__link
```
```
footage-picker__link
```
```
footage-picker__link
```
```
footage-picker__link
```
```
footage-picker__link
```
```
footage-picker__link
```

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

[[div class="meta-title footage-picker-section__title"]]
Site-69 Live Camera Feed
[!-- Site-69 Camera Feed Archive --]
[[/div]]

[[div class="footage-picker-section__intro" style="text-align: center;"]]
All recorded footage from Site-69 is available for review:
[[/div]]

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

[[div class="footage-picker__heading"]]
**Site-69 date:** 9th January 2000
[[/div]]

[[div class="footage-picker__heading footage-picker__heading--expedition" style="display: none;"]]
**Expedition date:** 16th May 1981
[[/div]]

[[div_ class="footage-picker__links"]]
[[a href="/site-69-ii/offset/0#footage" class="footage-picker__link"]]12 PM[[/a]] \
[[a href="/site-69-ii/offset/1#footage" class="footage-picker__link"]]1 PM[[/a]] \
[[a href="/site-69-ii/offset/2#footage" class="footage-picker__link"]]2 PM[[/a]] \
[[a href="/site-69-ii/offset/3#footage" class="footage-picker__link"]]3 PM[[/a]] \
[[a href="/site-69-ii/offset/4" class="footage-picker__link"]]Dark[[/a]] \
[[a href="/site-69-ii/offset/5#footage" class="footage-picker__link"]]4 PM[[/a]]
[[/div]] [!-- .footage-picker__links --]

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

>[!-{$markup-only} --]
[[module CSS]]
.footage-picker {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 4rem;
  border: thin solid rgb(var(--tables-border));
  max-width: 29em !important;
  margin-inline: auto;
}
.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:any-link {
  background-color: rgb(var(--tabs-bg));
  box-sizing: border-box;
  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;
  border: thin solid rgb(var(--tables-border));
}
.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;
}

/* 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}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

/* Outside */
.footage-picker__link:nth-child(5) {
  color: transparent;
  background-image: linear-gradient(
    to bottom,
    #3073ad 7.1%,
    #387cb9 21.4%,
    #4687c1 35.7%,
    #5997cb 50%,
    #6da6d3 64.3%,
    #84b4d9 78.6%,
    #97bedb 92.9%
  );
}

.footage-picker__link--locked {
  position: relative;
  font-size: 0;
  color: inherit !important;
  background: inherit !important;
  pointer-events: none;
}
.footage-picker__link--locked::after {
  content: "\f023";
  font-family: "FontAwesome";
  font-size: 1rem;
}
[[/module]]
[!-- --]

Site-69 II: Picker

Module Styles

Inline Styles

Includes

CSS Classes

Page Source