Add 90s web whimsy: clipart decorations across all pages

- Add img/ folder with 224 transparent PNG clipart illustrations
- Add CSS classes for clipart placement (.clipart, .clipart-left,
  .clipart-right, .clipart-section, .clipart-divider, .clipart-wide,
  .clipart-inline) with hover rotation effect and responsive rules
- Decorate all 7 content pages + index + about with themed clipart:
  section headers, floating side images, wide section dividers,
  fact-box icons, and home page card icons
- Add AGENTS.md with project conventions and constraints
This commit is contained in:
2026-04-11 16:51:17 -04:00
parent 8033792e6b
commit 296477a8ab
234 changed files with 345 additions and 5 deletions

View File

@@ -28,6 +28,8 @@
</ul>
</nav>
<img src="img/old-leather-book-illustration.png" alt="" class="clipart-section">
<div class="section-bar">About This Site</div>
<h2 class="section-header">About Dangerous Wonder</h2>
@@ -50,6 +52,9 @@
<div class="content-section">
<h2>The History of Dangerous Wonder</h2>
<img src="img/quill-and-ink-jar-clip.png" alt="" class="clipart-right">
<p>The site has lived many lives across its quarter-century on the web. What follows is the true and occasionally embellished record of how it got here.</p>
<h3>1999 — The Beginning</h3>
@@ -81,9 +86,13 @@
<hr class="dk-rule">
<img src="img/medieval-leather-bound-book-illustration.png" alt="" class="clipart-wide">
<div class="content-section">
<h2>Key Milestones</h2>
<img src="img/ancient-egyptian-scroll-image.png" alt="" class="clipart-left">
<ul class="fact-list">
<li><strong>April 3, 1999</strong> — Dangerous Wonder launches on GeoCities with 14 pages</li>
<li><strong>December 1999</strong> — First visitor from outside North America (Helsinki, Finland — they were reading about the aurora borealis)</li>
@@ -102,9 +111,13 @@
<hr class="dk-rule-thin">
<img src="img/antique-leather-books-shelf-illustration.png" alt="" class="clipart-wide">
<div class="content-section">
<h2>Why "Dangerous Wonder"?</h2>
<img src="img/vintage-reading-glasses-on-book-image.png" alt="" class="clipart-right">
<div class="figure-left">
<img src="https://images.unsplash.com/photo-1473186509769-9c81ecead3f1?w=600&h=400&fit=crop" alt="A child gazing up at a towering forest">
<p class="figure-caption">Wonder is not passive. It demands that you look closer, step further, ask one more question.</p>
@@ -123,6 +136,7 @@
<hr class="dk-rule">
<div class="did-you-know">
<img src="img/treasure-chest-clip-art.png" alt="" style="float:right; margin: 0 0 8px 12px; max-width:60px;" class="clipart">
<h4>Did You Know?</h4>
<p>Dangerous Wonder has been cited in three published academic papers, referenced by a BBC documentary on deep-sea vents, and once linked from a now-deleted tweet by a popular astrophysicist that sent 40,000 visitors to the site in a single afternoon. The server held. Barely. Marguerite celebrated by updating the page about tardigrades and going to bed early.</p>
</div>
@@ -149,6 +163,7 @@
<hr class="dk-rule-thin">
<div class="fact-box">
<img src="img/antique-leather-books-shelf-illustration.png" alt="" style="float:right; margin: 0 0 8px 12px; max-width:60px;" class="clipart">
<h4>Site Statistics</h4>
<ul>
<li><strong>Pages published:</strong> 743</li>
@@ -174,6 +189,8 @@
<div class="content-section">
<h2>How to Explore (and What You Might Find)</h2>
<img src="img/antique-golden-spine-book-image.png" alt="" class="clipart-divider">
<p>Some things on Dangerous Wonder are easy to find. They are on the pages you'd expect, in the sections you'd look in first. But Marguerite and Solène have always believed that a good reference book rewards the careful reader — the one who reads footnotes, who notices the small print, who clicks on things just to see what happens.</p>
<p>There are hidden pages on this site. There are Easter eggs in the source code. There are links that only appear if you look closely at the image captions. There is at least one page that can only be reached by visiting another page at a specific time of year. We are not going to tell you which one.</p>