eric/www.dangerouswonder.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add 90s web whimsy: clipart decorations across all pages

Browse Source 
- 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:
Eric Taylor
2026-04-11 16:51:17 -04:00
parent 8033792e6b
commit 296477a8ab
234 changed files with 345 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@@ -41,12 +41,15 @@
<h2 class="section-header" style="text-align:center;">Where Shall You Begin?</h2>
<img src="img/compass-metal-vintage.png" alt="" class="clipart-divider">
<div class="card-grid">
<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">
<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>
<div class="card-text">Forests, oceans, creatures, and the hidden logic of living things</div>
</div>
@@ -56,6 +59,7 @@
<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">
<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 &amp; Ideas</div>
<div class="card-text">The machines and notions that reshaped the world</div>
</div>
@@ -65,6 +69,7 @@
<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">
<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>
<div class="card-text">Optical illusions, weird science, and things that shouldn't be</div>
</div>
@@ -74,6 +79,7 @@
<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">
<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 &amp; Places</div>
<div class="card-text">Real and imagined geographies, faraway lands</div>
</div>
@@ -83,6 +89,7 @@
<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">
<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>
<div class="card-text">The most remarkable machine you will ever inhabit</div>
</div>
@@ -92,6 +99,7 @@
<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">
<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 &amp; Beyond</div>
<div class="card-text">Stars, planets, and the deep emptiness between everything</div>
</div>
@@ -108,6 +116,8 @@
<div class="ornament">&sect; &sect; &sect;</div>
<img src="img/ancient-scroll-with-forest-illustration.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>
There are wonders here that do not announce themselves. <a href="about.html">Learn more about this site.</a>