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