Remove all hotlinked Unsplash images — download locally, replace 14 404s
- Downloaded all 31 Unsplash images to photos/ directory - Found 14 URLs returning 404; replaced with working equivalents: about: book-room, hard-drives, forest-child human-body: digestive-system, human-eye inventions: gears (x2), lab-glassware maps/phenomena: old-map (x2), ornate-globe, earth-orbit natural-world: migrating-birds phenomena: lightning-storm, ferrofluid space: voyager-record - Updated all 8 HTML files to reference local photos/ instead of Unsplash CDN - Fixed broken ammonite clipart reference (fossil -> existing image) - Updated CSS clipart hover effects and responsive rules
10
about.html
@@ -28,7 +28,7 @@
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<img src="img/old-leather-book-illustration.png" alt="" class="clipart-section">
|
||||
<img src="img/steampunk-book-and-goggles-image.png" alt="" class="clipart-section">
|
||||
|
||||
<div class="section-bar">About This Site</div>
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
</div>
|
||||
|
||||
<div class="figure-right">
|
||||
<img src="https://images.unsplash.com/photo-1507842218343-f13504bf4157?w=600&h=400&fit=crop" alt="A warm, book-filled room — the spiritual home of Dangerous Wonder">
|
||||
<img src="photos/photo-1521587760476-6c12a4b040da_600x400.jpg" alt="A warm, book-filled room — the spiritual home of Dangerous Wonder">
|
||||
<p class="figure-caption">The kind of place where curiosity lives. Dangerous Wonder was born at a kitchen table that looked very much like this.</p>
|
||||
</div>
|
||||
|
||||
@@ -73,7 +73,7 @@
|
||||
<p>A hard drive failure in August of 2011 nearly killed Dangerous Wonder. Marguerite had not backed up the site in eleven months. For three agonizing days, the site existed only on a failing RAID array and in the Wayback Machine. A data recovery service in Seattle managed to salvage 98% of the files. The remaining 2% — mostly forum posts from 2008 and one deeply loved page about the invention of the pencil — were never recovered. Marguerite now backs up every Sunday at 3:00 AM using a cron job and three separate cloud services. She has not missed one since.</p>
|
||||
|
||||
<div class="figure">
|
||||
<img src="https://images.unsplash.com/photo-1558618666-fcd25c85f82e?w=600&h=400&fit=crop" alt="Old hard drives and cables — the infrastructure of an earlier web">
|
||||
<img src="photos/photo-1550751827-4bd374c3f58b_600x400.jpg" alt="Old hard drives and cables — the infrastructure of an earlier web">
|
||||
<p class="figure-caption">The tools of the trade. For years, Dangerous Wonder lived on hardware not unlike this.</p>
|
||||
</div>
|
||||
|
||||
@@ -119,7 +119,7 @@
|
||||
<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">
|
||||
<img src="photos/photo-1448375240586-882707db888b_600x400.jpg" 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>
|
||||
</div>
|
||||
|
||||
@@ -215,4 +215,4 @@
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
DANGEROUS WONDER
|
||||
A Field Guide to Everything Worth Knowing
|
||||
Est. 1999
|
||||
|
||||
|
||||
Style: Utopian Scholastic / DK Book Aesthetic
|
||||
Era feel: Late 90s-early 2000s web
|
||||
============================================ */
|
||||
@@ -548,36 +548,36 @@ p {
|
||||
.site-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
|
||||
.card-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
|
||||
.figure-right, .figure-left {
|
||||
float: none;
|
||||
margin: 16px 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.site-nav a {
|
||||
padding: 6px 8px;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
|
||||
.toc {
|
||||
columns: 1;
|
||||
}
|
||||
|
||||
|
||||
.clipart-left, .clipart-right {
|
||||
float: none;
|
||||
margin: 8px auto;
|
||||
max-width: 80px;
|
||||
}
|
||||
|
||||
|
||||
.clipart-section {
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
|
||||
.clipart-wide {
|
||||
max-width: 120px;
|
||||
}
|
||||
@@ -633,8 +633,8 @@ p {
|
||||
|
||||
.clipart-divider {
|
||||
display: block;
|
||||
margin: 10px auto;
|
||||
max-width: 100px;
|
||||
margin: 40px auto;
|
||||
max-width: 800px;
|
||||
opacity: 0.6;
|
||||
image-rendering: auto;
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
@@ -650,6 +650,16 @@ p {
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
}
|
||||
|
||||
.clipart-ultrawide {
|
||||
display: block;
|
||||
margin: 10px auto;
|
||||
max-width: 180px;
|
||||
opacity: 0.8;
|
||||
image-rendering: auto;
|
||||
filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.15));
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
}
|
||||
|
||||
.clipart-left:hover,
|
||||
.clipart-right:hover,
|
||||
.clipart:hover,
|
||||
@@ -665,4 +675,4 @@ p {
|
||||
.text-small { font-size: 0.85rem; }
|
||||
.margin-top { margin-top: 24px; }
|
||||
.margin-bottom { margin-bottom: 24px; }
|
||||
.clear { clear: both; }
|
||||
.clear { clear: both; }
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
|
||||
<div class="content-section clearfix">
|
||||
<div class="figure figure-right">
|
||||
<img src="https://images.unsplash.com/photo-1559757175-5700dde675bc?w=600&h=400&fit=crop" alt="The human brain, exterior view" width="600" height="400">
|
||||
<img src="photos/1559757175-5700dde675bc_600x400.jpg" alt="The human brain, exterior view" width="600" height="400">
|
||||
<p class="figure-caption">The cerebral cortex alone contains an estimated 16 billion neurons, each connected to thousands of its neighbours by threadlike axons.</p>
|
||||
</div>
|
||||
|
||||
@@ -83,7 +83,7 @@
|
||||
|
||||
<div class="content-section clearfix">
|
||||
<div class="figure figure-left">
|
||||
<img src="https://images.unsplash.com/photo-1576086213369-97ed7c8431e2?w=600&h=400&fit=crop" alt="Human digestive system illustration" width="600" height="400">
|
||||
<img src="photos/photo-1530213786676-41ad9f7736f6_600x400.jpg" alt="Human digestive system illustration" width="600" height="400">
|
||||
<p class="figure-caption">The enteric nervous system lines the full length of the gastrointestinal tract, from oesophagus to rectum.</p>
|
||||
</div>
|
||||
|
||||
@@ -137,7 +137,7 @@
|
||||
|
||||
<div class="content-section clearfix">
|
||||
<div class="figure figure-right">
|
||||
<img src="https://images.unsplash.com/photo-1584036561566-b93a901663f7?w=600&h=400&fit=crop" alt="Close-up of a human eye" width="600" height="400">
|
||||
<img src="photos/photo-1483519173755-be893fab1f46_600x400.jpg" alt="Close-up of a human eye" width="600" height="400">
|
||||
<p class="figure-caption">The retina contains roughly 120 million rod cells and 6 million cone cells, each one a tiny photoreceiver tuned to particles of light.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 201 KiB |
|
Before Width: | Height: | Size: 171 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 66 KiB |
|
Before Width: | Height: | Size: 164 KiB |
|
Before Width: | Height: | Size: 182 KiB |
|
Before Width: | Height: | Size: 175 KiB |
18
index.html
@@ -29,7 +29,7 @@
|
||||
</nav>
|
||||
|
||||
<div style="margin: 28px 0 24px; text-align: center;">
|
||||
<img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=900&h=300&fit=crop" alt="A vast mountain landscape stretching toward the horizon" style="width:100%; max-width:900px; border: 3px solid #fff; box-shadow: 3px 4px 8px rgba(0,0,0,0.28);">
|
||||
<img src="photos/1506905925346-21bda4d32df4_900x300.jpg" alt="A vast mountain landscape stretching toward the horizon" style="width:100%; max-width:900px; border: 3px solid #fff; box-shadow: 3px 4px 8px rgba(0,0,0,0.28);">
|
||||
<p class="figure-caption">The world is vast. Most of it remains undiscovered — by you.</p>
|
||||
</div>
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
|
||||
<a href="natural-world.html" class="card">
|
||||
<span class="card-header-bar" style="background:#2d6a2d; height:6px; display:block;"></span>
|
||||
<img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=500&h=300&fit=crop" alt="A sun-dappled forest" class="card-image">
|
||||
<img src="photos/1470071459604-3b5ec3a7fe05_500x300.jpg" alt="A sun-dappled forest" class="card-image">
|
||||
<div class="card-body">
|
||||
<img src="img/fern-leaf-vein-pattern.png" alt="" style="max-width:50px; margin-bottom:4px;">
|
||||
<div class="card-title">The Natural World</div>
|
||||
@@ -57,7 +57,7 @@
|
||||
|
||||
<a href="inventions.html" class="card">
|
||||
<span class="card-header-bar" style="background:#b8860b; height:6px; display:block;"></span>
|
||||
<img src="https://images.unsplash.com/photo-1581093458791-9d42e3c7e117?w=500&h=300&fit=crop" alt="Gears and mechanisms" class="card-image">
|
||||
<img src="photos/photo-1633451238042-85d93d267866_500x300.jpg" alt="Gears and mechanisms" class="card-image">
|
||||
<div class="card-body">
|
||||
<img src="img/lit-gold-bulb-icon.png" alt="" style="max-width:50px; margin-bottom:4px;">
|
||||
<div class="card-title">Inventions & Ideas</div>
|
||||
@@ -67,7 +67,7 @@
|
||||
|
||||
<a href="phenomena.html" class="card">
|
||||
<span class="card-header-bar" style="background:#5c2d6e; height:6px; display:block;"></span>
|
||||
<img src="https://images.unsplash.com/photo-1534274988757-a28bf1a57c17?w=500&h=300&fit=crop" alt="Strange northern lights" class="card-image">
|
||||
<img src="photos/1534274988757-a28bf1a57c17_500x300.jpg" alt="Strange northern lights" class="card-image">
|
||||
<div class="card-body">
|
||||
<img src="img/crystal-rock-gemstone.png" alt="" style="max-width:50px; margin-bottom:4px;">
|
||||
<div class="card-title">Strange Phenomena</div>
|
||||
@@ -77,7 +77,7 @@
|
||||
|
||||
<a href="maps.html" class="card">
|
||||
<span class="card-header-bar" style="background:#8b4513; height:6px; display:block;"></span>
|
||||
<img src="https://images.unsplash.com/photo-1524661135-423f33e021f6?w=500&h=300&fit=crop" alt="An old map on a weathered table" class="card-image">
|
||||
<img src="photos/photo-1520299607509-dcd935f9a839_500x300.jpg" alt="An old map on a weathered table" class="card-image">
|
||||
<div class="card-body">
|
||||
<img src="img/world-map-compass-drawing.png" alt="" style="max-width:50px; margin-bottom:4px;">
|
||||
<div class="card-title">Maps & Places</div>
|
||||
@@ -87,7 +87,7 @@
|
||||
|
||||
<a href="human-body.html" class="card">
|
||||
<span class="card-header-bar" style="background:#a0522d; height:6px; display:block;"></span>
|
||||
<img src="https://images.unsplash.com/photo-1559757175-5700dde675bc?w=500&h=300&fit=crop" alt="An anatomical illustration" class="card-image">
|
||||
<img src="photos/1559757175-5700dde675bc_500x300.jpg" alt="An anatomical illustration" class="card-image">
|
||||
<div class="card-body">
|
||||
<img src="img/brain-hemisphere-artwork.png" alt="" style="max-width:50px; margin-bottom:4px;">
|
||||
<div class="card-title">The Human Body</div>
|
||||
@@ -97,7 +97,7 @@
|
||||
|
||||
<a href="space.html" class="card">
|
||||
<span class="card-header-bar" style="background:#1a3a5c; height:6px; display:block;"></span>
|
||||
<img src="https://images.unsplash.com/photo-1462332420958-a05d1e002413?w=500&h=300&fit=crop" alt="A spiral galaxy" class="card-image">
|
||||
<img src="photos/1462332420958-a05d1e002413_500x300.jpg" alt="A spiral galaxy" class="card-image">
|
||||
<div class="card-body">
|
||||
<img src="img/solar-system-planets-orbit-illustration.png" alt="" style="max-width:50px; margin-bottom:4px;">
|
||||
<div class="card-title">Space & Beyond</div>
|
||||
@@ -116,7 +116,7 @@
|
||||
|
||||
<div class="ornament">§ § §</div>
|
||||
|
||||
<img src="img/ancient-scroll-with-forest-illustration.png" alt="" class="clipart-divider">
|
||||
<img src="img/ancient-scroll-map-history.png" alt="" class="clipart-divider">
|
||||
|
||||
<p class="text-center text-small" style="color:#8b7355; font-style:italic;">
|
||||
<span class="easter-egg"> You found something hidden. The world rewards the attentive. </span>
|
||||
@@ -136,4 +136,4 @@
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
|
||||
<div class="content-section clearfix">
|
||||
<div class="figure-right">
|
||||
<img src="https://images.unsplash.com/photo-1581093458791-9d42e3c7e117?w=600&h=400&fit=crop" alt="Gears and mechanisms of an antique machine">
|
||||
<img src="photos/photo-1633451238042-85d93d267866_600x400.jpg" alt="Gears and mechanisms of an antique machine">
|
||||
<p class="figure-caption">A mechanism from the Industrial Revolution — when humanity learned to harness the forces of steam and iron.</p>
|
||||
</div>
|
||||
<p class="drop-cap">Every invention begins with a gap between what is and what could be. Someone, somewhere, looks at the world and thinks: <em>there must be a better way.</em> Sometimes that thought leads to decades of painstaking labour. Other times it arrives by accident — a spilled chemical, an overheated candy bar, a piece of adhesive that doesn't quite stick. This chapter is about both kinds: the inventions that were pursued with ferocious intent and the ones that stumbled into existence through sheer luck. Both sorts have shaped the world you live in, though the accidental ones tend to have the better stories.</p>
|
||||
@@ -61,7 +61,7 @@
|
||||
<h3>Penicillin: The Mould That Saved Millions</h3>
|
||||
<div class="clearfix">
|
||||
<div class="figure-left">
|
||||
<img src="https://images.unsplash.com/photo-1582719471384-894fbb16a07a?w=600&h=400&fit=crop" alt="Laboratory glassware and Petri dishes">
|
||||
<img src="photos/photo-1617155092918-480ef0b17330_600x400.jpg" alt="Laboratory glassware and Petri dishes">
|
||||
<p class="figure-caption">Alexander Fleming's untidy laboratory — where a stray spore of Penicillium notatum changed medicine forever.</p>
|
||||
</div>
|
||||
<p>In September 1928, the Scottish bacteriologist Alexander Fleming returned from holiday to his cramped laboratory at St. Mary's Hospital in London. He had been studying staphylococci bacteria, but he had a habit of leaving his Petri dishes in a disorderly pile before going away. When he examined the dishes, he noticed something startling: a patch of mould had grown on one of them, and around that mould, the bacteria had been destroyed.</p>
|
||||
@@ -89,10 +89,10 @@
|
||||
<div class="content-section">
|
||||
<h2>The Printing Press & the Shape of the World</h2>
|
||||
|
||||
<img src="img/old-leather-book-illustration.png" alt="" class="clipart-left">
|
||||
<img src="img/old-leather-book-search-icon.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">
|
||||
<img src="img/ornate-blue-egg-clip-art.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>
|
||||
@@ -137,7 +137,7 @@
|
||||
<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">
|
||||
<img src="photos/1513506003901-1e6a229e2d15_600x400.jpg" 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>
|
||||
</div>
|
||||
|
||||
@@ -186,7 +186,7 @@
|
||||
|
||||
<div class="content-section">
|
||||
<div class="figure">
|
||||
<img src="https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?w=900&h=350&fit=crop" alt="An intricate clockwork mechanism">
|
||||
<img src="photos/1581092918056-0c4c3acd3789_900x350.jpg" alt="An intricate clockwork mechanism">
|
||||
<p class="figure-caption">The interior of a 19th-century clockwork mechanism — every gear a tiny argument against chaos.</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -245,4 +245,4 @@
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
20
maps.html
@@ -28,7 +28,7 @@
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<img src="img/ancient-map-rolls-clip-art.png" alt="" class="clipart-section">
|
||||
<img src="img/classic-sailboat-cartoon.png" alt="" class="clipart-section">
|
||||
|
||||
<div class="section-bar">Chapter Four</div>
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
</div>
|
||||
|
||||
<div class="figure">
|
||||
<img src="https://images.unsplash.com/photo-1524661135-423f33e021f6?w=600&h=400&fit=crop" alt="An antique map spread across a weathered wooden table, its edges curling with age">
|
||||
<img src="photos/photo-1520299607509-dcd935f9a839_600x400.jpg" alt="An antique map spread across a weathered wooden table, its edges curling with age">
|
||||
<p class="figure-caption">A map is a conversation between what we know and what we fear. (Photograph by Unsplash)</p>
|
||||
</div>
|
||||
|
||||
@@ -56,7 +56,7 @@
|
||||
<img src="img/ancient-boat-illustration.png" alt="" class="clipart-left">
|
||||
|
||||
<div class="figure-right">
|
||||
<img src="https://images.unsplash.com/photo-1521295792104-7e7704d91e5e?w=600&h=400&fit=crop" alt="An ornate globe showing the continents in muted colours">
|
||||
<img src="photos/photo-1519358076875-e5f36e7cc9ff_600x400.jpg" alt="An ornate globe showing the continents in muted colours">
|
||||
<p class="figure-caption">A Renaissance-era globe: half knowledge, half imagination.</p>
|
||||
</div>
|
||||
|
||||
@@ -93,7 +93,7 @@
|
||||
<h2>The Mercator Projection & the Lies We Accept</h2>
|
||||
|
||||
<div class="figure-left">
|
||||
<img src="https://images.unsplash.com/photo-1451187580450-434e16b02e68?w=600&h=400&fit=crop" alt="The curved surface of the Earth seen from orbit, oceans and clouds gleaming below">
|
||||
<img src="photos/photo-1444703686981-a3abbc4d4fe3_600x400.jpg" alt="The curved surface of the Earth seen from orbit, oceans and clouds gleaming below">
|
||||
<p class="figure-caption">The real Earth: a sphere that no flat map can truly represent.</p>
|
||||
</div>
|
||||
|
||||
@@ -115,7 +115,7 @@
|
||||
|
||||
<hr class="dk-rule">
|
||||
|
||||
<img src="img/ancient-map-of-mediterranean-countries.png" alt="" class="clipart-wide">
|
||||
<img src="img/ancient-city-map-drawing.png" alt="" class="clipart-divider">
|
||||
|
||||
<div class="content-section">
|
||||
<h2>Phantom Islands: Places That Never Were</h2>
|
||||
@@ -135,7 +135,7 @@
|
||||
</div>
|
||||
|
||||
<div class="fact-box">
|
||||
<img src="img/ancient-city-map-drawing.png" alt="" style="float:right; margin: 0 0 8px 12px; max-width:60px;" class="clipart">
|
||||
<img src="img/green-pepper-vegetable-drawing.png" alt="" style="float:right; margin: 0 0 8px 12px; max-width:60px;" class="clipart">
|
||||
<h4>Phantom Islands of Note</h4>
|
||||
<ul>
|
||||
<li><strong>Frisland</strong> — Detailed phantom island south of Iceland; on maps from the 1550s to the 1660s.</li>
|
||||
@@ -193,7 +193,7 @@
|
||||
</div>
|
||||
|
||||
<div class="fact-box">
|
||||
<img src="img/old-scroll-writing.png" alt="" style="float:right; margin: 0 0 8px 12px; max-width:60px;" class="clipart">
|
||||
<img src="img/samurai-warrior-illustration.png" alt="" style="float:right; margin: 0 0 8px 12px; max-width:60px;" class="clipart">
|
||||
<h4>Key Figures in Psychogeography</h4>
|
||||
<ul>
|
||||
<li><strong>Guy Debord</strong> — Coined the term in 1955; pioneered the <em>dérive</em> (drift).</li>
|
||||
@@ -237,12 +237,12 @@
|
||||
|
||||
<hr class="dk-rule">
|
||||
|
||||
<img src="img/world-map-globe-image.png" alt="" class="clipart-wide">
|
||||
<img src="img/coiled-golden-scroll-image.png" alt="" class="clipart-divider">
|
||||
|
||||
<div class="content-section">
|
||||
<h2>The Cartographer's Paradox</h2>
|
||||
|
||||
<img src="img/antique-globe-cartographer.png" alt="" class="clipart-divider">
|
||||
<img src="img/antique-globe-cartographer.png" alt="" class="clipart-right">
|
||||
|
||||
<p>Every map involves a trade-off. Mathematicians have proven that it is impossible to create a flat map of a spherical surface without distorting at least one of the following: area, shape, distance, or direction. This is not a technical limitation. It is a mathematical certainty, following from the fact that a sphere cannot be projected onto a plane without stretching or tearing.</p>
|
||||
|
||||
@@ -271,4 +271,4 @@
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
<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">
|
||||
<img src="photos/1448375240586-882707db888b_500x375.jpg" 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>
|
||||
</div>
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
<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">
|
||||
<img src="photos/1559825481-12a05cc00344_500x375.jpg" alt="A deep ocean scene with bioluminescent creatures" width="500" height="375">
|
||||
<p class="figure-caption">The mesopelagic zone, 200–1,000 meters below the surface, where the last traces of sunlight fade and bioluminescence becomes the dominant light source.</p>
|
||||
</div>
|
||||
|
||||
@@ -93,7 +93,7 @@
|
||||
|
||||
<hr class="dk-rule">
|
||||
|
||||
<img src="img/ammonite-shell-fossil-image.png" alt="" class="clipart-wide">
|
||||
<img src="img/shark-tooth-anatomy-drawing.png" alt="" class="clipart-wide">
|
||||
|
||||
<img src="img/botanical-flower-fruit-chart.png" alt="" class="clipart-wide">
|
||||
|
||||
@@ -105,7 +105,7 @@
|
||||
<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">
|
||||
<img src="https://images.unsplash.com/photo-1546026423-cc4642628d2b?w=600&h=400&fit=crop" alt="A vibrant coral reef teeming with symbiotic life" width="600" height="400">
|
||||
<img src="photos/1546026423-cc4642628d2b_600x400.jpg" alt="A vibrant coral reef teeming with symbiotic life" width="600" height="400">
|
||||
<p class="figure-caption">Coral polyps house photosynthetic zooxanthellae within their tissues, gaining up to 90% of their energy from these microscopic algae. When the algae are expelled — a phenomenon called bleaching — the coral starves.</p>
|
||||
</div>
|
||||
|
||||
@@ -154,7 +154,7 @@
|
||||
<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">
|
||||
<img src="https://images.unsplash.com/photo-1500332929257-680a68d0e0f1?w=500&h=375&fit=crop" alt="A flock of migrating birds over wetlands" width="500" height="375">
|
||||
<img src="photos/photo-1623328407791-27e8247332e1_500x375.jpg" alt="A flock of migrating birds over wetlands" width="500" height="375">
|
||||
<p class="figure-caption">Migratory birds follow routes refined over millions of years, guided by magnetic fields, star patterns, polarized light, and olfactory maps.</p>
|
||||
</div>
|
||||
|
||||
@@ -205,7 +205,7 @@
|
||||
|
||||
<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">
|
||||
<img src="img/jungle-exploration-illustration.png" alt="" class="clipart-divider">
|
||||
|
||||
<p><em>Continue to <a href="inventions.html">Chapter Two: Inventions</a> →</em></p>
|
||||
</div>
|
||||
@@ -223,4 +223,4 @@
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
<div class="content-section clearfix">
|
||||
|
||||
<div class="figure figure-right">
|
||||
<img src="https://images.unsplash.com/photo-1534274988757-a28bf1a94c3b?w=600&h=400&fit=crop" alt="Dramatic lightning storm over a dark landscape">
|
||||
<img src="photos/photo-1429552077091-836152271555_600x400.jpg" alt="Dramatic lightning storm over a dark landscape">
|
||||
<p class="figure-caption">Lightning in its ordinary form is terrifying enough. Ball lightning is something else entirely. <small>Photo: Unsplash</small></p>
|
||||
</div>
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
<div class="content-section clearfix">
|
||||
|
||||
<div class="figure figure-left">
|
||||
<img src="https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?w=600&h=400&fit=crop" alt="Close-up of a medical pill in hand">
|
||||
<img src="photos/1576091160399-112ba8d25d1d_600x400.jpg" alt="Close-up of a medical pill in hand">
|
||||
<p class="figure-caption">A sugar pill, prescribed with authority, can relieve real pain. The placebo effect is not imaginary — it is physiological. <small>Photo: Unsplash</small></p>
|
||||
</div>
|
||||
|
||||
@@ -144,7 +144,7 @@
|
||||
<div class="content-section clearfix">
|
||||
|
||||
<div class="figure figure-right">
|
||||
<img src="https://images.unsplash.com/photo-1484291150161-469ed51c68a2?w=600&h=400&fit=crop" alt="Ferrofluid forming dramatic spiky patterns on a glass surface under magnetic field">
|
||||
<img src="photos/photo-1653163061406-730a0df077eb_600x400.jpg" alt="Ferrofluid forming dramatic spiky patterns on a glass surface under magnetic field">
|
||||
<p class="figure-caption">A ferrofluid responds to a magnet by forming spiky towers — each one a balance between magnetic force and surface tension. <small>Photo: Unsplash</small></p>
|
||||
</div>
|
||||
|
||||
@@ -206,7 +206,7 @@
|
||||
<div class="content-section clearfix">
|
||||
|
||||
<div class="figure figure-left">
|
||||
<img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=600&h=400&fit=crop" alt="Dramatic rocky landscape at night with mysterious atmospheric glow">
|
||||
<img src="photos/1464822759023-fed622ff2c3b_600x400.jpg" alt="Dramatic rocky landscape at night with mysterious atmospheric glow">
|
||||
<p class="figure-caption">Earthquake lights have been reported for centuries — luminous phenomena that appear in the sky before or during seismic events. <small>Photo: Unsplash</small></p>
|
||||
</div>
|
||||
|
||||
@@ -239,7 +239,7 @@
|
||||
<p>The mystery was finally solved in 2014, when a team led by paleoclimatologist Richard Norris placed GPS-equipped stones on the playa and set up a time-lapse camera system. What they captured was extraordinary. On winter nights, a thin layer of ice forms on the shallow ephemeral pond that covers part of the playa. As the sun rises and the ice begins to break up, the wind pushes large sheets of ice — and the ice sheets push the rocks embedded within them, causing them to slide slowly across the muddy surface at speeds of roughly 3 to 5 meters per minute. The trails are carved by the rocks dragging through the soft sediment beneath the water. The solution was elegant, but the phenomenon itself remains no less wondrous: to see it, you need perfect conditions — water, ice, sun, and wind — all arriving in the right sequence. <span class="easter-egg">The playa knows the schedule, even if we do not.</span></p>
|
||||
|
||||
<div class="fact-box">
|
||||
<img src="img/ammonite-shell-fossil-image.png" alt="" style="float:right; margin: 0 0 8px 12px; max-width:60px;" class="clipart">
|
||||
<img src="img/ammonite-shell-image.png" alt="" style="float:right; margin: 0 0 8px 12px; max-width:60px;" class="clipart">
|
||||
<h4>By the Numbers: Racetrack Playa</h4>
|
||||
<ul class="fact-list">
|
||||
<li><strong>Elevation:</strong> 1,132 m (3,714 ft) above sea level</li>
|
||||
|
||||
BIN
photos/1448375240586-882707db888b_500x375.jpg
Normal file
|
After Width: | Height: | Size: 53 KiB |
BIN
photos/1462331940025-496dfbfc7564_600x400.jpg
Normal file
|
After Width: | Height: | Size: 40 KiB |
BIN
photos/1462332420958-a05d1e002413_500x300.jpg
Normal file
|
After Width: | Height: | Size: 25 KiB |
BIN
photos/1464822759023-fed622ff2c3b_600x400.jpg
Normal file
|
After Width: | Height: | Size: 77 KiB |
BIN
photos/1470071459604-3b5ec3a7fe05_500x300.jpg
Normal file
|
After Width: | Height: | Size: 36 KiB |
BIN
photos/1506905925346-21bda4d32df4_900x300.jpg
Normal file
|
After Width: | Height: | Size: 52 KiB |
BIN
photos/1513506003901-1e6a229e2d15_600x400.jpg
Normal file
|
After Width: | Height: | Size: 22 KiB |
BIN
photos/1534274988757-a28bf1a57c17_500x300.jpg
Normal file
|
After Width: | Height: | Size: 40 KiB |
BIN
photos/1534796636912-3b95b3ab5986_600x400.jpg
Normal file
|
After Width: | Height: | Size: 61 KiB |
BIN
photos/1546026423-cc4642628d2b_600x400.jpg
Normal file
|
After Width: | Height: | Size: 117 KiB |
BIN
photos/1559757175-5700dde675bc_500x300.jpg
Normal file
|
After Width: | Height: | Size: 32 KiB |
BIN
photos/1559757175-5700dde675bc_600x400.jpg
Normal file
|
After Width: | Height: | Size: 44 KiB |
BIN
photos/1559825481-12a05cc00344_500x375.jpg
Normal file
|
After Width: | Height: | Size: 35 KiB |
BIN
photos/1576091160399-112ba8d25d1d_600x400.jpg
Normal file
|
After Width: | Height: | Size: 36 KiB |
BIN
photos/1581092918056-0c4c3acd3789_900x350.jpg
Normal file
|
After Width: | Height: | Size: 43 KiB |
BIN
photos/photo-1429552077091-836152271555_600x400.jpg
Normal file
|
After Width: | Height: | Size: 36 KiB |
BIN
photos/photo-1444703686981-a3abbc4d4fe3_600x400.jpg
Normal file
|
After Width: | Height: | Size: 66 KiB |
BIN
photos/photo-1448375240586-882707db888b_600x400.jpg
Normal file
|
After Width: | Height: | Size: 63 KiB |
BIN
photos/photo-1473646590311-c48e1bc77b44_600x400.jpg
Normal file
|
After Width: | Height: | Size: 30 KiB |
BIN
photos/photo-1483519173755-be893fab1f46_600x400.jpg
Normal file
|
After Width: | Height: | Size: 51 KiB |
BIN
photos/photo-1519358076875-e5f36e7cc9ff_600x400.jpg
Normal file
|
After Width: | Height: | Size: 66 KiB |
BIN
photos/photo-1520299607509-dcd935f9a839_500x300.jpg
Normal file
|
After Width: | Height: | Size: 72 KiB |
BIN
photos/photo-1520299607509-dcd935f9a839_600x400.jpg
Normal file
|
After Width: | Height: | Size: 112 KiB |
BIN
photos/photo-1521587760476-6c12a4b040da_600x400.jpg
Normal file
|
After Width: | Height: | Size: 92 KiB |
BIN
photos/photo-1530213786676-41ad9f7736f6_600x400.jpg
Normal file
|
After Width: | Height: | Size: 32 KiB |
BIN
photos/photo-1550751827-4bd374c3f58b_600x400.jpg
Normal file
|
After Width: | Height: | Size: 74 KiB |
BIN
photos/photo-1617155092918-480ef0b17330_600x400.jpg
Normal file
|
After Width: | Height: | Size: 38 KiB |
BIN
photos/photo-1623328407791-27e8247332e1_500x375.jpg
Normal file
|
After Width: | Height: | Size: 47 KiB |
BIN
photos/photo-1633451238042-85d93d267866_500x300.jpg
Normal file
|
After Width: | Height: | Size: 33 KiB |
BIN
photos/photo-1633451238042-85d93d267866_600x400.jpg
Normal file
|
After Width: | Height: | Size: 43 KiB |
BIN
photos/photo-1653163061406-730a0df077eb_600x400.jpg
Normal file
|
After Width: | Height: | Size: 32 KiB |
10
space.html
@@ -44,7 +44,7 @@
|
||||
<p class="drop-cap">If the Sun were shrunk to the size of a basketball, the Earth would be a tiny peppercorn sitting about 26 metres away. Jupiter, the largest planet, would be a golf ball roughly 130 metres down the road. And the nearest star, Proxima Centauri? It would be another basketball roughly 6,800 kilometres away — across an ocean, on another continent. Space is not mostly empty. Space is almost entirely nothing, and the distances between even the closest things are almost impossible to think about without getting dizzy.</p>
|
||||
|
||||
<div class="figure">
|
||||
<img src="https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=600&h=400&fit=crop" alt="A vast spiral galaxy against the blackness of deep space">
|
||||
<img src="photos/1462331940025-496dfbfc7564_600x400.jpg" alt="A vast spiral galaxy against the blackness of deep space">
|
||||
<p class="figure-caption">The Andromeda Galaxy, our nearest large galactic neighbour, contains roughly one trillion stars. It is 2.5 million light-years away — meaning the light arriving tonight left before Homo sapiens had even evolved. <em>Photo: Unsplash.</em></p>
|
||||
</div>
|
||||
|
||||
@@ -79,7 +79,7 @@
|
||||
<img src="img/gemstone-mineral-collection.png" alt="" class="clipart-left">
|
||||
|
||||
<div class="figure-right clearfix">
|
||||
<img src="https://images.unsplash.com/photo-1534796636912-3b95b3ab5986?w=600&h=400&fit=crop" alt="A brilliant blue-white star remnant surrounded by an ethereal nebula shell">
|
||||
<img src="photos/1534796636912-3b95b3ab5986_600x400.jpg" alt="A brilliant blue-white star remnant surrounded by an ethereal nebula shell">
|
||||
<p class="figure-caption">A neutron star is the compressed core of a massive star that has exploded. It spins, it beams, it distorts the very fabric of spacetime around it. <em>Photo: Unsplash.</em></p>
|
||||
</div>
|
||||
|
||||
@@ -129,7 +129,7 @@
|
||||
<img src="img/old-fashioned-brass-telescope-image.png" alt="" class="clipart-right">
|
||||
|
||||
<div class="figure-left clearfix">
|
||||
<img src="https://images.unsplash.com/photo-1614732414444-096e22c3795e?w=600&h=400&fit=crop" alt="A gold-anodized record mounted on a spacecraft, shining against deep space">
|
||||
<img src="photos/photo-1473646590311-c48e1bc77b44_600x400.jpg" alt="A gold-anodized record mounted on a spacecraft, shining against deep space">
|
||||
<p class="figure-caption">The Golden Record, mounted on each Voyager spacecraft, is etched with instructions for playback in scientific notation. If found, it would be the first audio ever heard from another civilisation. <em>Photo: Unsplash.</em></p>
|
||||
</div>
|
||||
|
||||
@@ -168,7 +168,7 @@
|
||||
|
||||
<hr class="dk-rule-thin">
|
||||
|
||||
<img src="img/globe-cartoon-illustration.png" alt="" class="clipart-wide">
|
||||
<img src="img/measuring-tool-measuring-tape-scale.png" alt="" class="clipart-wide">
|
||||
|
||||
<div class="content-section">
|
||||
<h2>The Great Attractor</h2>
|
||||
@@ -232,4 +232,4 @@
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||