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