55 lines
3.7 KiB
HTML
55 lines
3.7 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>Explore it</h2>
|
|
<p>Spin the yantra and its inversion on the Riemann sphere, with the plane underneath. Slide the lift, compare stereographic with great circles, and switch the sphere off to see just the plane.</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>
|