Reference

Interactive

Collapsibles and sliders below are pure HTML — no JavaScript dependency, work on any page. The Timeline further down needs the shared site.js (linked on every page already) for its slider-to-scroll wiring — the hover tooltips themselves are still plain CSS.

Collapsible Sections

Single collapsible

Click to expand

Content that stays hidden until the reader chooses to expand it — useful for long exploration logs or spoilers.

<details>
  <summary>Click to expand</summary>
  <p>Content that stays hidden until the reader chooses to expand it.</p>
</details>

Nested collapsibles

Outer section

Some top-level content.

Nested subsection

More detail inside, revealed independently.

<details>
  <summary>Outer section</summary>
  <p>Some top-level content.</p>
  <details>
    <summary>Nested subsection</summary>
    <p>More detail inside, revealed independently.</p>
  </details>
</details>

Nesting other components inside a collapsible

A <details> is only a show/hide container, so anything can go inside it: an image, a self-hosted <video>, a table, a Callout, another collapsible, even a Timeline. No special wiring needed; it works the same as putting that block directly in the article.

Recovered photograph (click to view)

<details>
  <summary>Recovered footage (click to view)</summary>
  <video class="entry-video lightbox" src="path/to/clip.mp4" controls></video>
</details>

Sliders

Rated scale (e.g. Danger Level)

Danger Level3

<div class="slider-row">
  <span>Danger Level</span>
  <input type="range" min="1" max="5" value="3"
         oninput="this.nextElementSibling.value = this.value">
  <output>3</output>
</div>

Percentage scale (e.g. Containment Confidence)

Containment Confidence50%

<div class="slider-row">
  <span>Containment Confidence</span>
  <input type="range" min="0" max="100" value="50"
         oninput="this.nextElementSibling.value = this.value + '%'">
  <output>50%</output>
</div>

Timeline

A row of dated nodes on a track. Drag the slider underneath to scroll left and right through it; hover (or focus, for keyboard users) a node to see its explanation. Use the Timeline /TimelineNode components — give a node an href to make it link out to another entry, like the third node below does.

1973

1975

1989

1994

Present

import Timeline from "../../components/Timeline.astro";
import TimelineNode from "../../components/TimelineNode.astro";

<Timeline>
  
  <TimelineNode label="1973" tooltip="Explanation shown on hover." />

  
  <TimelineNode label="1989" tooltip="Explanation, plus a hint that clicking goes somewhere."
                href="/landscapes/the-lobby/the-lobby" />
</Timeline>