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/ink-and-quill-icon.png" alt="" class="clipart-section">
<div class="section-bar">Chapter Two</div>
<h2 class="section-header">Inventions &amp; Ideas</h2>
@@ -47,8 +49,13 @@
<hr class="dk-rule">
<img src="img/alchemical-still-distillation.png" alt="" class="clipart-wide">
<div class="content-section">
<h2>Accidental Inventions</h2>
<img src="img/beakers-scientific-experiment-image.png" alt="" class="clipart-right">
<p>History honours the inventor who toiled — but some of the most transformative discoveries arrived uninvited, like guests who turn out to be more interesting than anyone on the invitation list.</p>
<h3>Penicillin: The Mould That Saved Millions</h3>
@@ -63,10 +70,16 @@
</div>
<h3>The Microwave Oven: A Melted Candy Bar</h3>
<img src="img/electronic-device-circuit-board.png" alt="" class="clipart-left">
<p>In 1945, Percy Spencer, an engineer at Raytheon, was standing near a radar magnetron when he noticed something odd: the candy bar in his pocket had melted. Spencer, a self-taught engineer who had been designing radar equipment during the war, did not throw the candy away. He sent an assistant for popcorn kernels, which promptly popped when placed near the magnetron. An egg was next — it exploded spectacularly.</p>
<p>Within a year, Raytheon had filed a patent for the first microwave oven. It was called the Radarange, stood nearly six feet tall, weighed 750 pounds, and cost roughly $5,000 (approximately $68,000 in today's money). It would take another twenty years before countertop microwaves became affordable — and another decade after that before people stopped being afraid of them. Today, over 90% of American households own one.</p>
<h3>Post-it Notes: A Failure That Stuck</h3>
<img src="img/classic-clock-black-and-white.png" alt="" class="clipart-right">
<p>In 1968, 3M scientist Spencer Silver was trying to develop a super-strong adhesive. Instead, he invented a super-weak one — a glue that formed tiny, easily detached spheres that would stick to a surface but peel away without leaving any residue. For five years, no one at 3M could figure out what to do with it. Silver promoted his adhesive at internal seminars, where it attracted approximately no interest.</p>
<p>Then, in 1974, another 3M scientist named Art Fry grew frustrated that the bookmarks kept falling out of his hymnal during choir practice. He remembered Silver's adhesive, applied it to a strip of paper, and the Post-it Note was born — or rather, conceived. It took four more years before 3M agreed to manufacture it, and even then the initial test marketing in four cities in 1977 was a flop. Free samples were the key: once people used them, they could not stop. By 1980, Post-it Notes were nationwide. By the end of the decade, they were everywhere.</p>
</div>
@@ -76,7 +89,10 @@
<div class="content-section">
<h2>The Printing Press &amp; the Shape of the World</h2>
<img src="img/old-leather-book-illustration.png" alt="" class="clipart-left">
<div class="did-you-know">
<img src="img/quill-and-ink-jar-clip.png" alt="" style="float:right; margin: 0 0 8px 12px; max-width:60px;" class="clipart">
<strong>Did You Know?</strong><br>
Before the printing press, a single hand-copied Bible could take a scribe two to three years to complete and cost more than a house. Within fifty years of Gutenberg's invention, an estimated 20 million volumes had been printed in Europe. The price of a book fell by more than 80%. It remains the single most dramatic price drop in the history of information.
</div>
@@ -92,13 +108,19 @@
<p>Yet the machine he built had consequences no one could have predicted. Within fifty years, Europe had printed more books than all of the continent's scribes had produced in a thousand. The Reformation, the scientific revolution, the Enlightenment — none of these happens in the same way, or perhaps at all, without cheap, widely available text. The printing press did not merely spread knowledge. It created the conditions under which knowledge could challenge power.</p>
</div>
<div class="ornament">&sect; &sect; &sect;</div>
<img src="img/coiled-golden-scroll-image.png" alt="" class="clipart-wide">
<div class="content-section">
<h2>Forgotten Inventions</h2>
<img src="img/old-fashioned-steam-engine-drawing.png" alt="" class="clipart-right">
<p>Not every great idea survives its moment. Some were ahead of their time; others were simply outrun by louder, faster, or cheaper alternatives. Here are two that deserved better.</p>
<h3>The Pneumatic Railway</h3>
<img src="img/industrial-steampunk-engine-illustration.png" alt="" class="clipart-left">
<p>In the 1860s, the London Pneumatic Despatch Company built a network of underground tubes through which freight carriages were propelled by differential air pressure — essentially, a giant version of the capsules used in hospital pharmacies to send prescriptions between floors. A pipe laid beneath the streets of London carried carriages at up to 40 miles per hour. For a few heady years, it seemed as though the future of urban transport would be pneumatic.</p>
<p>The system was extraordinarily expensive to build and maintain. Seals leaked. Valves froze. The arrival of electric trams and underground railways made the pneumatic tubes redundant almost as soon as they were installed. By 1875, the experiment was over. The tunnels were sealed and forgotten. But the core idea — moving objects through tubes using air pressure — never entirely went away. It survives in pneumatic mail systems, bank drive-throughs, and the perennial dream of Elon Musk's Hyperloop, which is, at its heart, a pneumatic railway wearing a Silicon Valley T-shirt.</p>
@@ -112,6 +134,8 @@
<div class="content-section clearfix">
<h2>The Lightbulb: A Team Effort</h2>
<img src="img/lit-gold-bulb-icon.png" alt="" class="clipart-left">
<div class="figure-right">
<img src="https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?w=600&h=400&fit=crop" alt="A glowing vintage lightbulb">
<p class="figure-caption">The incandescent lamp — not the invention of one man, but the product of decades of collective problem-solving.</p>
@@ -129,6 +153,8 @@
<div class="content-section">
<h2>How the Zipper Was Invented</h2>
<img src="img/mechanical-golden-clock-cartoon.png" alt="" class="clipart-divider">
<p>The zipper is one of those inventions so perfectly suited to its purpose that it seems inevitable — as though it had always existed, like the wheel or the door hinge. In fact, it took more than forty years of false starts, patent disputes, and consumer indifference before anyone wore one.</p>
<p>In 1851, Elias Howe — the same man who invented the sewing machine — received a patent for an "Automatic, Continuous Clothing Closure." He never seriously marketed it, perhaps because his sewing machine was consuming all his attention. Forty-two years later, in 1893, a Chicago engineer named Whitcomb Judson invented a "clasp locker" for shoes and displayed it at the 1893 Chicago World's Fair. It was complicated, unreliable, and tended to jam. Judson's Universal Fastener Company sold very few.</p>
@@ -142,6 +168,9 @@
<div class="content-section">
<h2>Strange Patents</h2>
<img src="img/antique-golden-magnifying-glass.png" alt="" class="clipart-left">
<p>The patent office is a museum of human ambition — including the ambitions that probably should have stayed in the garage. A few selections from the archives of earnest ingenuity:</p>
<ol class="fact-list">
@@ -164,6 +193,7 @@
<div class="content-section">
<div class="fact-box">
<img src="img/old-fashioned-record-player.png" alt="" style="float:right; margin: 0 0 8px 12px; max-width:60px;" class="clipart">
<h4>Timeline of Inventions That Changed Everything</h4>
<ul>
<li><strong>c. 3500 BCE</strong> — The wheel (Mesopotamia). Originally used for pottery, not transport.</li>
@@ -182,9 +212,13 @@
<hr class="dk-rule">
<img src="img/classic-typewriter-cartoon.png" alt="" class="clipart-wide">
<div class="content-section">
<h2>The Eureka Myth</h2>
<img src="img/antique-brass-microscope.png" alt="" class="clipart-right">
<p>The stories we tell about invention always seem to feature a flash of insight — Archimedes in the bath, Newton under the apple tree, Fleming with his mouldy Petri dish. These moments of sudden clarity make for good narratives, but they are almost always <span class="easter-egg"> The best ideas arrive in disguise. </span>the last step in a long climb. Archimedes had been working on the problem of specific gravity for months before he noticed the water level. Newton had spent years on the mathematics of gravitation before the apple (if it fell at all) gave him a convenient way to explain it to others. Fleming saw the mould because he had trained himself, over decades, to pay attention to anomalies that others would discard as contamination.</p>
<p>The eureka myth is not harmless. It obscures the real conditions of invention: persistence, collaboration, institutional support, and — often — sheer stubbornness in the face of indifference. The lightbulb, the zipper, the printing press — none of these sprang fully formed from a single mind. Each was the product of many hands, many setbacks, and many moments where someone chose not to give up. That the popular versions of these stories credit a single genius is not an accident. It is a cultural preference, and perhaps a dangerous one.</p>