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/fern-leaf-vein-pattern.png" alt="" class="clipart-section">
<div class="section-bar">Chapter One</div>
<h2 class="section-header">The Natural World</h2>
@@ -46,6 +48,8 @@
<div class="content-section clearfix">
<h2>Ancient Forests</h2>
<img src="img/acorns-illustration.png" alt="" class="clipart-left">
<div class="figure figure-right">
<img src="https://images.unsplash.com/photo-1448375240586-882707db888b?w=500&h=375&fit=crop" alt="Sunlight filtering through an old-growth forest canopy" width="500" height="375">
<p class="figure-caption">Old-growth canopy in the Pacific Northwest. Some trees in this photograph germinated before the Magna Carta was signed.</p>
@@ -67,6 +71,8 @@
<div class="content-section clearfix">
<h2>The Deep Ocean</h2>
<img src="img/seashell-worm-cartoon.png" alt="" class="clipart-right">
<div class="figure figure-left">
<img src="https://images.unsplash.com/photo-1559825481-12a05cc00344?w=500&h=375&fit=crop" alt="A deep ocean scene with bioluminescent creatures" width="500" height="375">
<p class="figure-caption">The mesopelagic zone, 2001,000 meters below the surface, where the last traces of sunlight fade and bioluminescence becomes the dominant light source.</p>
@@ -80,15 +86,22 @@
</div>
<div class="did-you-know">
<img src="img/ammonite-shell-image.png" alt="" style="float:right; margin: 0 0 8px 12px; max-width:60px;" class="clipart">
<h4>Did You Know?</h4>
<p>The underwater mountain range known as the Mid-Ocean Ridge is the longest mountain range on Earth — stretching over 65,000 kilometers around the planet. It is entirely submerged. Its volcanic peaks create new seafloor at a rate of roughly 5 centimeters per year, pushing tectonic plates apart in a slow, continuous remodeling of the planet's surface. Most of it has never been mapped at high resolution. We know more about the surface of Mars.</p>
</div>
<hr class="dk-rule">
<img src="img/ammonite-shell-fossil-image.png" alt="" class="clipart-wide">
<img src="img/botanical-flower-fruit-chart.png" alt="" class="clipart-wide">
<div class="content-section clearfix">
<h2>Symbiosis: Living Together</h2>
<img src="img/bee-illustration.png" alt="" class="clipart-right">
<p>No organism exists in isolation. Symbiosis — from the Greek <em>syn</em> (together) and <em>biōsis</em> (living) — describes the close, long-term interactions between different biological species. These relationships fall along a spectrum from mutually beneficial to parasitic, and the natural world is riddled with arrangements so intricate that it becomes impossible to say where one organism ends and another begins.</p>
<div class="figure">
@@ -102,6 +115,7 @@
</div>
<div class="fact-box">
<img src="img/green-leafy-plants-cartoon.png" alt="" style="float:right; margin: 0 0 8px 12px; max-width:60px;" class="clipart">
<h4>The Numbers of Life</h4>
<ul>
<li>An estimated 8.7 million eukaryotic species exist on Earth; only about 1.2 million have been formally described.</li>
@@ -117,6 +131,8 @@
<div class="content-section">
<h2>Extremophiles: Life at the Edges</h2>
<img src="img/beakers-scientific-experiment-image.png" alt="" class="clipart-left">
<p>For most of biology's history, life was thought to require moderate conditions — warm temperatures, neutral pH, liquid water, organic nutrients. The discovery of extremophiles shattered that assumption. These organisms don't merely tolerate extremes; they <em>require</em> them.</p>
<p><em>Hyperthermophiles</em> thrive in hydrothermal vents at temperatures exceeding 120°C. <em>Psychrophiles</em> multiply in Antarctic sea ice at temperatures as low as 12°C. <em>Acidophiles</em> grow at pH near zero — roughly the acidity of battery acid. <em>Halophiles</em> flourish in salt lakes where the salinity can reach eight to ten times that of seawater. <em>Radiophiles</em> — such as <em>Deinococcus radiodurans</em> — can survive radiation doses 3,000 times what would kill a human, rebuilding their shattered genome from fragments in a matter of hours.</p>
@@ -126,11 +142,15 @@
<p>Extremophiles have already proven useful to humans: <em>Thermus aquaticus</em>, discovered in a Yellowstone hot spring, gave us Taq polymerase — the enzyme that makes the polymerase chain reaction (PCR) possible, and with it, modern genetics, DNA fingerprinting, and the rapid COVID-19 tests that reshaped daily life in the 2020s. A creature from a boiling pool helped map a pandemic.</p>
</div>
<p class="ornament">§ § §</p>
<img src="img/fantasy-mushroom-illustration.png" alt="" class="clipart-wide">
<img src="img/fluttering-yellow-butterfly.png" alt="" class="clipart-wide">
<div class="content-section">
<h2>Migration: The Longest Journeys</h2>
<img src="img/blue-butterfly-illustration.png" alt="" class="clipart-right">
<p>Migration is not merely movement — it is a fixed, inherited pattern of seasonal travel that rivals any human voyage in endurance and far exceeds it in precision. The Arctic tern makes a round-trip of roughly 71,000 kilometers each year, flying from Arctic to Antarctic and back, experiencing two summers and more daylight than any other creature. Over its lifetime, a single tern may fly the equivalent of three trips to the moon and back.</p>
<div class="figure figure-right">
@@ -159,6 +179,8 @@
<div class="content-section">
<h2>Bizarre Animal Behaviors</h2>
<img src="img/owl-illustration.png" alt="" class="clipart-left">
<p>The natural world does not lack for strangeness — only for observers patient enough to notice it.</p>
<p>The <strong>mimic octopus</strong> (<em>Thaumoctopus mimicus</em>), discovered in 1998 off the coast of Indonesia, can imitate at least fifteen different species, flattening its body and swimming like a flounder, spreading its arms like a lionfish's venomous spines, or nestling into the sand like a sea snake. It chooses its disguise based on which predator is nearby — performing a rapid, real-time cost-benefit analysis of danger using a brain the size of a walnut.</p>
@@ -172,7 +194,9 @@
<p>The <strong>burrowing owl</strong> lines the entrance to its burrow with animal dung — not out of slovenliness, but as a bait trap. Dung beetles, drawn by the smell, wander in and become dinner. It is, in effect, agriculture: the owl cultivates a resource, harvests it, and benefits from the yield. Tool use once thought unique to primates and corvids turns out to be everywhere, once you learn to look.</p>
</div>
<p class="ornament">§ § §</p>
<img src="img/tropical-plant-leaf-artwork.png" alt="" class="clipart-wide">
<img src="img/tree-microscopic-life-clip-art.png" alt="" class="clipart-divider">
<div class="content-section">
<h2>The Inexhaustible Ordinary</h2>
@@ -181,6 +205,8 @@
<p>The extraordinary is not always far away or deep below. It is here, in the photosynthetic alchemy turning sunlight into sugar, in the mycorrhizal internet underfoot, in the barometric instincts of a storm-approaching flock. The natural world is not merely something to visit — it is something we are inside of, permanently, whether we remember it or not.</p>
<img src="img/rainforest-root-system-illustration.png" alt="" class="clipart-divider">
<p><em>Continue to <a href="inventions.html">Chapter Two: Inventions</a> &rarr;</em></p>
</div>