Skip to content

Commit 5a509fa

Browse files
lunasrclunasrc
committed
feat: change mars to mercury
1 parent 888802f commit 5a509fa

1 file changed

Lines changed: 57 additions & 45 deletions

File tree

‎docs/curators.html‎

Lines changed: 57 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@
147147

148148
.alcove[data-persona="moon"] { --tint: #C8D4E0; }
149149
.alcove[data-persona="venus"] { --tint: #FF8775; }
150-
.alcove[data-persona="mars"] { --tint: #E07B4D; }
150+
.alcove[data-persona="mercury"]{ --tint: #5f8693; }
151151

152152
.alcove:hover::before {
153153
background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--tint) 18%, transparent) 0%, transparent 60%);
@@ -480,52 +480,64 @@ <h2 class="name">Venus<em> ♀</em></h2>
480480
</div>
481481
</article>
482482

483-
<!-- MARS -->
484-
<article class="alcove" data-persona="mars">
485-
<div class="plaque"><span class="num">III</span> · The Historian</div>
486-
<div class="portrait">
483+
<!-- MERCURY -->
484+
<article class="alcove" data-persona="mercury">
485+
<div class="plaque"><span class="num">III</span> · The Witness</div>
486+
<div class="portrait">
487487
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
488-
<defs>
489-
<radialGradient id="marsBody" cx="40%" cy="38%" r="72%">
490-
<stop offset="0%" stop-color="#F4B395"/>
491-
<stop offset="35%" stop-color="#D87A4D"/>
492-
<stop offset="70%" stop-color="#8E3E22"/>
493-
<stop offset="100%" stop-color="#2E1410"/>
488+
<defs>
489+
<radialGradient id="mercuryBody" cx="38%" cy="35%" r="72%">
490+
<stop offset="0%" stop-color="#B5C5CB"/>
491+
<stop offset="40%" stop-color="#667E86"/>
492+
<stop offset="75%" stop-color="#3A4A50"/>
493+
<stop offset="100%" stop-color="#15191C"/>
494494
</radialGradient>
495-
<radialGradient id="marsRim" cx="50%" cy="50%" r="50%">
496-
<stop offset="86%" stop-color="rgba(255,255,255,0)"/>
497-
<stop offset="98%" stop-color="rgba(224,123,77,0.45)"/>
498-
<stop offset="100%" stop-color="rgba(224,123,77,0)"/>
495+
<radialGradient id="mercuryRim" cx="50%" cy="50%" r="50%">
496+
<stop offset="86%" stop-color="rgba(255,255,255,0)"/>
497+
<stop offset="98%" stop-color="rgba(181,197,203,0.5)"/>
498+
<stop offset="100%" stop-color="rgba(181,197,203,0)"/>
499499
</radialGradient>
500-
<clipPath id="marsClip"><circle cx="100" cy="100" r="88"/></clipPath>
501-
</defs>
502-
<circle cx="100" cy="100" r="88" fill="url(#marsBody)"/>
503-
<g clip-path="url(#marsClip)" opacity=".5">
504-
<path d="M 70 60 Q 95 55 110 75 Q 105 95 85 95 Q 65 88 70 60 Z" fill="#5A2818"/>
505-
<path d="M 120 110 Q 145 105 155 130 Q 148 152 125 148 Q 108 135 120 110 Z" fill="#5A2818"/>
506-
<ellipse cx="60" cy="130" rx="18" ry="10" fill="#5A2818" transform="rotate(-15 60 130)"/>
507-
<ellipse cx="145" cy="80" rx="12" ry="7" fill="#5A2818"/>
508-
</g>
509-
<g clip-path="url(#marsClip)">
510-
<ellipse cx="100" cy="28" rx="34" ry="14" fill="#F4ECD8" opacity=".88"/>
511-
<ellipse cx="100" cy="32" rx="28" ry="10" fill="#FFFFFF" opacity=".75"/>
512-
<ellipse cx="100" cy="178" rx="20" ry="7" fill="#F4ECD8" opacity=".7"/>
513-
</g>
514-
<circle cx="78" cy="98" r="4" fill="#F4B395" opacity=".7"/>
515-
<circle cx="78" cy="98" r="1.6" fill="#F4ECD8" opacity=".9"/>
516-
<circle cx="100" cy="100" r="88" fill="url(#marsRim)"/>
500+
<clipPath id="mercuryClip"><circle cx="100" cy="100" r="88"/></clipPath>
501+
</defs>
502+
503+
<circle cx="100" cy="100" r="88" fill="url(#mercuryBody)"/>
504+
505+
<!-- Caloris-like basin (Mercury's huge impact crater) and surrounding maria -->
506+
<g clip-path="url(#mercuryClip)" opacity=".45">
507+
<circle cx="78" cy="72" r="22" fill="#3a342a"/>
508+
<circle cx="78" cy="72" r="22" fill="none" stroke="#7a6f5e" stroke-width="1.2" opacity=".7"/>
509+
<ellipse cx="128" cy="118" rx="20" ry="14" fill="#3a342a" transform="rotate(20 128 118)"/>
510+
<ellipse cx="65" cy="135" rx="14" ry="9" fill="#3a342a"/>
511+
<ellipse cx="140" cy="78" rx="10" ry="7" fill="#3a342a"/>
512+
</g>
513+
514+
<!-- Dense crater field — Mercury is heavily cratered, more than Mars -->
515+
<g clip-path="url(#mercuryClip)" opacity=".55">
516+
<circle cx="142" cy="142" r="6" fill="none" stroke="#C8BFAE" stroke-width="1.2"/>
517+
<circle cx="55" cy="92" r="5" fill="none" stroke="#C8BFAE" stroke-width="1.1"/>
518+
<circle cx="115" cy="55" r="4" fill="none" stroke="#C8BFAE" stroke-width="1"/>
519+
<circle cx="155" cy="105" r="3.5" fill="none" stroke="#C8BFAE" stroke-width="1"/>
520+
<circle cx="98" cy="158" r="4" fill="none" stroke="#C8BFAE" stroke-width="1"/>
521+
<circle cx="48" cy="155" r="3" fill="none" stroke="#C8BFAE" stroke-width="0.9"/>
522+
<circle cx="168" cy="58" r="2.5" fill="none" stroke="#C8BFAE" stroke-width="0.9"/>
523+
<circle cx="85" cy="110" r="2.5" fill="none" stroke="#C8BFAE" stroke-width="0.9"/>
524+
<circle cx="125" cy="92" r="2" fill="none" stroke="#C8BFAE" stroke-width="0.8"/>
525+
<circle cx="40" cy="118" r="2" fill="none" stroke="#C8BFAE" stroke-width="0.8"/>
526+
</g>
527+
528+
<circle cx="100" cy="100" r="88" fill="url(#mercuryRim)"/>
517529
</svg>
518-
</div>
519-
<h2 class="name">Mars<em> ♂</em></h2>
520-
<p class="role">Curator of Endings · Permanent collection</p>
521-
<div class="divider"></div>
522-
<p class="quote">I had rivers once. Oceans, perhaps. I do not, anymore. Some of what you call disaster is what we call a Tuesday — and some of it is how a planet, slowly, becomes a museum.</p>
523-
<div class="stats">
524-
<div class="stat"><div class="lbl">Surface temp.</div><div class="v">−63 °C avg</div></div>
525-
<div class="stat"><div class="lbl">Atm. pressure</div><div class="v">0.006 atm</div></div>
526-
<div class="stat"><div class="lbl">Polar caps</div><div class="v">CO₂ + H₂O</div></div>
527-
<div class="stat"><div class="lbl">Olympus Mons</div><div class="v">21.9 km</div></div>
528-
</div>
530+
</div>
531+
<h2 class="name">Mercury<em> ☿</em></h2>
532+
<p class="role">Curator of Exposure · Closest to the fire</p>
533+
<div class="divider"></div>
534+
<p class="quote">I am the smallest, and the nearest. I have no atmosphere to soften anything — every meteor lands, every degree of sun arrives. I know what it is to face a thing without protection.</p>
535+
<div class="stats">
536+
<div class="stat"><div class="lbl">Distance from Sun</div><div class="v">57.9 M km</div></div>
537+
<div class="stat"><div class="lbl">Day temperature</div><div class="v">+430 °C</div></div>
538+
<div class="stat"><div class="lbl">Night temperature</div><div class="v">−180 °C</div></div>
539+
<div class="stat"><div class="lbl">Atmosphere</div><div class="v">None to speak of</div></div>
540+
</div>
529541
</article>
530542

531543
</div>
@@ -546,8 +558,8 @@ <h2 class="name">Mars<em> ♂</em></h2>
546558
</div>
547559
<div class="meta">
548560
Made for <span style="color:var(--text-mid)">COM-480 · Data Visualization · EPFL · 2026</span><br>
549-
Data — <a href="https://www.emdat.be/" target="_blank" rel="noopener">EM-DAT, CRED / UCLouvain</a><br>
550-
Source code — <a href="#" target="_blank" rel="noopener">GitHub repository</a>
561+
Data — <a href="https://public.emdat.be/" target="_blank" rel="noopener">EM-DAT, CRED / UCLouvain</a><br>
562+
Source code — <a href="https://github.com/com-480-data-visualization/PixElles#" target="_blank" rel="noopener">GitHub repository</a>
551563
</div>
552564
</div>
553565
</section>

0 commit comments

Comments
 (0)