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:
33
maps.html
33
maps.html
@@ -28,6 +28,8 @@
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<img src="img/ancient-map-rolls-clip-art.png" alt="" class="clipart-section">
|
||||
|
||||
<div class="section-bar">Chapter Four</div>
|
||||
|
||||
<h2 class="section-header">Maps & Places</h2>
|
||||
@@ -51,6 +53,8 @@
|
||||
<div class="content-section clearfix">
|
||||
<h2>Here Be Dragons</h2>
|
||||
|
||||
<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">
|
||||
<p class="figure-caption">A Renaissance-era globe: half knowledge, half imagination.</p>
|
||||
@@ -69,8 +73,13 @@
|
||||
|
||||
<hr class="dk-rule">
|
||||
|
||||
<img src="img/ancient-map-set-antique-geography.png" alt="" class="clipart-wide">
|
||||
|
||||
<div class="content-section">
|
||||
<h2>Terra Incognita</h2>
|
||||
|
||||
<img src="img/antique-world-map-cards.png" alt="" class="clipart-right">
|
||||
|
||||
<p><em>Terra incognita</em> — unknown land. The phrase appears again and again on maps from the 15th through 18th centuries, marking the boundaries of European understanding. These were not empty spaces; they were spaces filled with possibility. Every <em>terra incognita</em> on a map was a question asked in ink: What is there? Who lives there? What grows, what shines, what breathes in the places we have not yet reached?</p>
|
||||
|
||||
<p>Perhaps the most remarkable thing about <em>terra incognita</em> is how it has never truly disappeared. Today, our maps are satellite-verified down to the metre, and yet enormous portions of the world remain fundamentally unknown — not because we cannot see them, but because we have not truly explored them. More of the surface of Venus has been mapped at high resolution than the floor of our own oceans. We have mapped more of Mars's surface at high resolution than our own ocean floor.</p>
|
||||
@@ -99,14 +108,20 @@
|
||||
</div>
|
||||
|
||||
<div class="did-you-know">
|
||||
<img src="img/antique-globe-cartographer.png" alt="" style="float:right; margin: 0 0 8px 12px; max-width:60px;" class="clipart">
|
||||
<strong>Did You Know?</strong><br>
|
||||
On a standard Mercator projection, Antarctica appears absurdly vast. In reality, it is larger than the United States and Mexico combined. Meanwhile, Algeria — which on Mercator looks roughly the size of Greenland — is in reality more than four times larger than Greenland. The map in your school classroom was lying to you, and it probably still is.
|
||||
</div>
|
||||
|
||||
<hr class="dk-rule">
|
||||
|
||||
<img src="img/ancient-map-of-mediterranean-countries.png" alt="" class="clipart-wide">
|
||||
|
||||
<div class="content-section">
|
||||
<h2>Phantom Islands: Places That Never Were</h2>
|
||||
|
||||
<img src="img/world-map-compass-drawing.png" alt="" class="clipart-right">
|
||||
|
||||
<p>For centuries, map-makers included islands that did not exist — and not as imaginative decoration, but as earnest assertions of fact. Sailors reported them. Captains charted them. Nations claimed them. Only gradually, sometimes over hundreds of years, did the truth emerge: these places were phantoms.</p>
|
||||
|
||||
<h3>Frisland</h3>
|
||||
@@ -120,6 +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">
|
||||
<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>
|
||||
@@ -135,6 +151,9 @@
|
||||
|
||||
<div class="content-section">
|
||||
<h2>The Most Remote Place on Earth</h2>
|
||||
|
||||
<img src="img/antique-compass-jewelry.png" alt="" class="clipart-left">
|
||||
|
||||
<p>In the middle of the South Atlantic Ocean, approximately 1,500 miles from the nearest continent, there exists a small volcanic island group called <strong>Tristan da Cunha</strong>. It is the most remote inhabited archipelago in the world. There is no airport. The only way to reach it is by ship — a journey of roughly six days from South Africa, and even then, the harbour is so treacherous that ships can often not land.</p>
|
||||
|
||||
<p>Approximately 250 people live on the main island, nearly all of them descended from seven original settlers. The village, called Edinburgh of the Seven Seas, has one school, one small supermarket, one pub, and one doctor. The islanders speak a distinctive dialect of English that has evolved in isolation for nearly two hundred years. Cars are few. Internet connections are slow. The nearest neighbour is the island of St. Helena — Napoleon's final exile — 1,350 miles to the north.</p>
|
||||
@@ -146,6 +165,9 @@
|
||||
|
||||
<div class="content-section">
|
||||
<h2>Underground Cities</h2>
|
||||
|
||||
<img src="img/ancient-stone-arch-icon.png" alt="" class="clipart-right">
|
||||
|
||||
<p>In the Cappadocia region of central Turkey, the soft volcanic rock called <em>tuff</em> has been carved into dwellings, churches, and entire cities for thousands of years. The most astonishing of these is <strong>Derinkuyu</strong>, an underground city descending at least eight levels — roughly 85 metres — beneath the surface, capable of sheltering as many as 20,000 people along with their livestock and food stores.</p>
|
||||
|
||||
<p>Derinkuyu was not a temporary refuge. It was a fully functional subterranean metropolis, complete with ventilation shafts, freshwater wells, wine presses, oil lamps, stables, chapels, and a school. Its massive stone doors — circular millstones that could be rolled into place from the inside — could seal each level independently, making the city virtually impenetrable from without. It had been built and rebuilt across centuries, used by successive peoples — the Phrygians, the Persians, the early Christians — each expanding the tunnels deeper into the earth.</p>
|
||||
@@ -161,6 +183,8 @@
|
||||
<div class="content-section">
|
||||
<h2>Psychogeography: Walking as an Act of Discovery</h2>
|
||||
|
||||
<img src="img/ancient-scroll-map-history.png" alt="" class="clipart-left">
|
||||
|
||||
<p>In 1955, the French theorist Guy Debord coined the term <em>psychogeography</em> to describe "the study of the precise laws and specific effects of the geographical environment, consciously organised or not, on the emotions and behaviour of individuals." In plainer terms: the way a place <em>feels</em> — and the way that feeling changes how you move through it.</p>
|
||||
|
||||
<p>Debord and the Situationists developed a practice called the <em>dérive</em> — the drift. A dérive involved walking through a city without a destination, letting the emotional textures of different neighbourhoods guide your path. You walk toward what attracts you. You turn away from what repels you. The result is a kind of lived map — one that has nothing to do with street names or transit routes and everything to do with atmosphere, memory, association, and desire.</p>
|
||||
@@ -169,6 +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">
|
||||
<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>
|
||||
@@ -182,6 +207,9 @@
|
||||
|
||||
<div class="content-section">
|
||||
<h2>Borders Are Stranger Than You Think</h2>
|
||||
|
||||
<img src="img/ancient-flag-heraldry-image.png" alt="" class="clipart-left">
|
||||
|
||||
<p>National borders seem permanent, obvious, and inevitable — lines drawn by reason or nature. None of this is true. Borders are among the strangest artefacts of human civilisation, and the closer you look at them, the weirder they become.</p>
|
||||
|
||||
<ul class="fact-list">
|
||||
@@ -209,8 +237,13 @@
|
||||
|
||||
<hr class="dk-rule">
|
||||
|
||||
<img src="img/world-map-globe-image.png" alt="" class="clipart-wide">
|
||||
|
||||
<div class="content-section">
|
||||
<h2>The Cartographer's Paradox</h2>
|
||||
|
||||
<img src="img/antique-globe-cartographer.png" alt="" class="clipart-divider">
|
||||
|
||||
<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>
|
||||
|
||||
<p>This means that every map — the one in your classroom, the one in your phone, the one in your imagination — is always, necessarily, a compromise. It can be accurate in one dimension and false in another, but it can never be simply true. The cartographer's art lies in choosing which truth to tell.</p>
|
||||
|
||||
Reference in New Issue
Block a user