60 lines
3.9 KiB
HTML
60 lines
3.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
<title>Two Poles of One Sphere</title>
|
|
<meta name="description" content="The Śrī Yantra, circle inversion and the Riemann sphere: a narrated video and two explorers.">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;1,500&family=JetBrains+Mono:wght@400;500&display=swap">
|
|
<style>
|
|
/* Layout: one centred column; video first, then two explorer cards. Single dark look, matching the explorers. */
|
|
:root{--bg:#0b0a12;--panel:#15131f;--line:#2a2638;--fg:#e9e4f2;--muted:#9a93ad;--up:#f0b44c;--down:#e2559a;--bindu:#ff3b4e;
|
|
--display:"Cormorant Garamond",Georgia,serif;--mono:"JetBrains Mono",ui-monospace,monospace;color-scheme:dark}
|
|
html,body{margin:0}
|
|
body{background:var(--bg);color:var(--fg);font-family:var(--mono);font-size:14px;line-height:1.6;
|
|
padding:calc(32px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(48px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
|
|
main{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
|
|
.eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
|
|
h1{font-family:var(--display);font-weight:500;font-size:clamp(32px,6vw,52px);line-height:1.05;margin:.2em 0 0;text-wrap:balance}
|
|
h1 i{color:var(--down)}
|
|
.lede{color:var(--muted);max-width:62ch;margin:0}
|
|
video{width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--line);border-radius:6px;display:block}
|
|
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
|
|
a.card{display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--fg);text-decoration:none}
|
|
a.card:hover,a.card:focus-visible{border-color:var(--down);outline:none}
|
|
a.card h2{font-family:var(--display);font-weight:500;font-size:24px;margin:0}
|
|
a.card p{margin:0;color:var(--muted);font-size:12.5px}
|
|
.go{font-size:11px;letter-spacing:.06em;color:var(--up)}
|
|
.notes{border-top:1px solid var(--line);padding-top:20px;color:var(--muted);font-size:12.5px;max-width:66ch}
|
|
.notes p{margin:0 0 10px}
|
|
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<header>
|
|
<div class="eyebrow">maths · projective geometry</div>
|
|
<h1>Two poles <i>of one sphere</i></h1>
|
|
</header>
|
|
<p class="lede">The Śrī Yantra turned inside out by circle inversion, then wrapped onto a ball by stereographic projection. On the sphere the inversion is just a flip, and the bindu and infinity are the two poles.</p>
|
|
<video id="v" controls playsinline preload="metadata" src="https://teahub.xyz/maths/videos/raw/commit/ec0bb56210abe087f4731777ffba8d1fa6bab3df/yantra-two-poles.mp4"></video>
|
|
<div class="cards">
|
|
<a class="card" href="sphere/">
|
|
<h2>On the sphere</h2>
|
|
<p>Spin the yantra and its inversion on the Riemann sphere. Slide the lift, compare stereographic with great circles, and switch the sphere off to watch only the plane.</p>
|
|
<span class="go">open explorer →</span>
|
|
</a>
|
|
<a class="card" href="inversion/">
|
|
<h2>On the plane</h2>
|
|
<p>The yantra inverted in its own outer circle, z ↦ z / |z|². Pan and zoom out to follow the arcs toward infinity.</p>
|
|
<span class="go">open explorer →</span>
|
|
</a>
|
|
</div>
|
|
<section class="notes">
|
|
<p><span class="dot" style="background:var(--up)"></span>four upward triangles · <span class="dot" style="background:var(--down)"></span>five downward · <span class="dot" style="background:var(--bindu)"></span>the bindu</p>
|
|
<p>Triangle coordinates follow a numerical solution of the yantra's concurrency conditions (after Kulaichev and Huet), drawn as 27 lines with 29 triple points.</p>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|