feat(gioser): sol detrás, título central, drawers MD + pluma agnóstico
Visual de la chacana retrabajado contra chakana.png de referencia:
- Sol detrás (gauss + corona, masked al interior de la chacana — sólo
asoma por la superficie de la cruz, no se cuela afuera).
- Doble outline dorado (línea principal + paralela offset 0.020), color
CHACANA_LINE pasa de cyan helado a dorado-ámbar del logo.
- Interior con niebla violeta-noche (u_dark_color) y rayos radiales
sutiles desde el centro, modulados por sin(t * 0.3).
- Aro doble exterior: ring fino interior + ring grueso con 4 grupos de
3 puntos cardinales (calculados angularmente, no rayos largos).
- WORLD_SCALE 1.45→1.05, MAX_TILT 35°→28° (más sólido, menos caricaturesco).
Título "GioSer" centrado dentro de la superficie de la chacana, sin
subtítulo. Se inclina junto con la chacana vía CSS perspective +
rotateX/rotateY desde u-tilt-x/y inyectadas cada frame por WASM.
Botones (4 tips):
- Reposicionados a `arm_extent * 1.32` (entre punta y aro grueso).
- Bigger: min-width 168px, glyph 54px, label Cinzel 0.95rem.
- Doble anillo en hover (::before con border + glow).
- Cuando un drawer se abre, fade-out de tips + canvas + brand.
Drawers MD (uno por elemento):
- `<aside class="drawer drawer-{element}">` con transform-origin desde
CSS vars (--origin-x/y) seteadas por WASM al click — crece desde la
posición exacta del botón hasta fullscreen en 700ms con cubic-bezier.
- Ambience por elemento: AIRE (radial drift), FUEGO (flicker keyframe),
AGUA (tide vertical), TIERRA (warm earth gradient).
- Cerrado con botón X, Escape o data-close-drawer.
- Carga MD desde ./md/{element}.md via spawn_local + Reader::open_url.
Pluma (visor MD agnóstico, dos crates nuevos):
- `crates/modules/pluma/pluma-md` — wrapper sobre pulldown-cmark 0.12.
API: to_html(), to_themed_html(md, theme) con sanitización del theme,
events() para AST stream. GFM completo. No deps web. 5 tests.
- `crates/modules/pluma/pluma-reader-web` — toma HtmlElement, expone
open_url async (fetch via wasm-bindgen-futures), render_md sync,
show_loading/show_error. NO inyecta CSS — el host estiliza
`.pluma-doc[data-pluma-theme="..."]` con sus colores.
CSS pluma-doc completo: h1/h2/h3, code/pre con border-left accent,
blockquote, tables, lists, hr gradient. Loader spinner + error state.
Placeholders en md/{aire,fuego,tierra,agua}.md con texto seed.
Workspace verde + 18 tests (6 geom + 4 palette + 3 physics + 5 pluma-md).
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
sergio
@@ -7,67 +7,110 @@
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Inter:wght@300;500&display=swap">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Inter:wght@300;500;600&family=JetBrains+Mono:wght@400;600&display=swap">
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="gioser-canvas" aria-hidden="true"></canvas>
|
||||
|
||||
<header class="brand">
|
||||
<header id="brand" class="brand">
|
||||
<h1 class="brand-title">Gio<span class="brand-dot">·</span>Ser</h1>
|
||||
<p class="brand-sub">EN EL CENTRO · EL SER</p>
|
||||
</header>
|
||||
|
||||
<main id="tips" aria-label="Cuatro elementos">
|
||||
<a id="tip-aire" class="tip tip-aire" href="#aire" aria-label="Aire">
|
||||
<svg viewBox="0 0 40 40" class="tip-glyph">
|
||||
<path d="M6 14 q 7 -10 14 0 t 14 0" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
|
||||
<path d="M6 22 q 7 -10 14 0 t 14 0" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" opacity="0.75"/>
|
||||
<circle cx="32" cy="9" r="2.2" fill="none" stroke="currentColor" stroke-width="1.2"/>
|
||||
<a id="tip-aire" class="tip tip-aire" href="#aire" data-md="./md/aire.md" aria-label="Aire — Software e IA">
|
||||
<svg viewBox="0 0 48 48" class="tip-glyph" aria-hidden="true">
|
||||
<path d="M6 18 q 9 -12 18 0 t 18 0" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
|
||||
<path d="M6 28 q 9 -12 18 0 t 18 0" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" opacity="0.75"/>
|
||||
<path d="M6 38 q 9 -12 18 0 t 18 0" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" opacity="0.45"/>
|
||||
</svg>
|
||||
<span class="tip-label">AIRE</span>
|
||||
<span class="tip-sub">Software · IA</span>
|
||||
</a>
|
||||
|
||||
<a id="tip-fuego" class="tip tip-fuego" href="#fuego" aria-label="Fuego">
|
||||
<svg viewBox="0 0 40 40" class="tip-glyph">
|
||||
<path d="M20 4 q -10 10 -5 20 q 3 -5 5 -5 q 1 8 5 10 q 8 -8 0 -18 q -4 5 -5 -7 z"
|
||||
fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
|
||||
<circle cx="20" cy="22" r="2.5" fill="currentColor" opacity="0.55"/>
|
||||
<a id="tip-fuego" class="tip tip-fuego" href="#fuego" data-md="./md/fuego.md" aria-label="Fuego — Inspiración">
|
||||
<svg viewBox="0 0 48 48" class="tip-glyph" aria-hidden="true">
|
||||
<path d="M24 4 q -12 12 -6 24 q 3 -6 6 -6 q 1 10 6 12 q 10 -10 0 -22 q -4 6 -6 -8 z"
|
||||
fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
|
||||
<circle cx="24" cy="28" r="3" fill="currentColor" opacity="0.5"/>
|
||||
</svg>
|
||||
<span class="tip-label">FUEGO</span>
|
||||
<span class="tip-sub">Inspiración</span>
|
||||
</a>
|
||||
|
||||
<a id="tip-tierra" class="tip tip-tierra" href="#tierra" aria-label="Tierra">
|
||||
<svg viewBox="0 0 40 40" class="tip-glyph">
|
||||
<path d="M4 30 l 10 -14 l 6 7 l 5 -10 l 11 17 z"
|
||||
fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
|
||||
<path d="M20 30 v 6 M16 32 l -3 4 M24 32 l 3 4 M20 36 v 1"
|
||||
fill="none" stroke="currentColor" stroke-width="1.1" opacity="0.7"/>
|
||||
<a id="tip-tierra" class="tip tip-tierra" href="#tierra" data-md="./md/tierra.md" aria-label="Tierra — Cuerpo">
|
||||
<svg viewBox="0 0 48 48" class="tip-glyph" aria-hidden="true">
|
||||
<path d="M4 36 l 12 -16 l 8 9 l 6 -12 l 14 19 z"
|
||||
fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
|
||||
<path d="M24 36 v 8 M19 38 l -4 5 M29 38 l 4 5 M24 44 v 2"
|
||||
fill="none" stroke="currentColor" stroke-width="1.3" opacity="0.7"/>
|
||||
</svg>
|
||||
<span class="tip-label">TIERRA</span>
|
||||
<span class="tip-sub">Cuerpo</span>
|
||||
</a>
|
||||
|
||||
<a id="tip-agua" class="tip tip-agua" href="#agua" aria-label="Agua">
|
||||
<svg viewBox="0 0 40 40" class="tip-glyph">
|
||||
<path d="M5 20 q 5 -8 10 0 t 10 0 t 10 0" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
|
||||
<path d="M5 27 q 5 -8 10 0 t 10 0 t 10 0" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" opacity="0.75"/>
|
||||
<path d="M5 34 q 5 -8 10 0 t 10 0 t 10 0" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" opacity="0.5"/>
|
||||
<a id="tip-agua" class="tip tip-agua" href="#agua" data-md="./md/agua.md" aria-label="Agua — Espiritualidad aplicada">
|
||||
<svg viewBox="0 0 48 48" class="tip-glyph" aria-hidden="true">
|
||||
<path d="M6 22 q 6 -10 12 0 t 12 0 t 12 0" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
|
||||
<path d="M6 30 q 6 -10 12 0 t 12 0 t 12 0" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" opacity="0.75"/>
|
||||
<path d="M6 38 q 6 -10 12 0 t 12 0 t 12 0" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" opacity="0.5"/>
|
||||
</svg>
|
||||
<span class="tip-label">AGUA</span>
|
||||
<span class="tip-sub">Espiritualidad</span>
|
||||
</a>
|
||||
</main>
|
||||
|
||||
<footer class="quote">aire · agua · fuego · tierra</footer>
|
||||
<!-- DRAWERS: uno por elemento. Cada uno crece desde la posición del tip
|
||||
clickeado (origin set via CSS vars desde WASM) hasta fullscreen. -->
|
||||
<aside id="drawer-aire" class="drawer drawer-aire" data-element="aire" aria-hidden="true">
|
||||
<button class="drawer-close" data-close-drawer aria-label="Cerrar Aire">×</button>
|
||||
<div class="drawer-ambience" aria-hidden="true"></div>
|
||||
<header class="drawer-head">
|
||||
<span class="drawer-mark">aire</span>
|
||||
<h2 class="drawer-title">Aire</h2>
|
||||
<span class="drawer-tag">Software · IA · Aspiración</span>
|
||||
</header>
|
||||
<section class="drawer-content" id="drawer-aire-content"></section>
|
||||
</aside>
|
||||
|
||||
<aside id="drawer-fuego" class="drawer drawer-fuego" data-element="fuego" aria-hidden="true">
|
||||
<button class="drawer-close" data-close-drawer aria-label="Cerrar Fuego">×</button>
|
||||
<div class="drawer-ambience" aria-hidden="true"></div>
|
||||
<header class="drawer-head">
|
||||
<span class="drawer-mark">fuego</span>
|
||||
<h2 class="drawer-title">Fuego</h2>
|
||||
<span class="drawer-tag">Inspiración</span>
|
||||
</header>
|
||||
<section class="drawer-content" id="drawer-fuego-content"></section>
|
||||
</aside>
|
||||
|
||||
<aside id="drawer-tierra" class="drawer drawer-tierra" data-element="tierra" aria-hidden="true">
|
||||
<button class="drawer-close" data-close-drawer aria-label="Cerrar Tierra">×</button>
|
||||
<div class="drawer-ambience" aria-hidden="true"></div>
|
||||
<header class="drawer-head">
|
||||
<span class="drawer-mark">tierra</span>
|
||||
<h2 class="drawer-title">Tierra</h2>
|
||||
<span class="drawer-tag">Cuerpo</span>
|
||||
</header>
|
||||
<section class="drawer-content" id="drawer-tierra-content"></section>
|
||||
</aside>
|
||||
|
||||
<aside id="drawer-agua" class="drawer drawer-agua" data-element="agua" aria-hidden="true">
|
||||
<button class="drawer-close" data-close-drawer aria-label="Cerrar Agua">×</button>
|
||||
<div class="drawer-ambience" aria-hidden="true"></div>
|
||||
<header class="drawer-head">
|
||||
<span class="drawer-mark">agua</span>
|
||||
<h2 class="drawer-title">Agua</h2>
|
||||
<span class="drawer-tag">Espiritualidad aplicada</span>
|
||||
</header>
|
||||
<section class="drawer-content" id="drawer-agua-content"></section>
|
||||
</aside>
|
||||
|
||||
<script type="module">
|
||||
import init from "./pkg/gioser_web.js";
|
||||
init().catch(err => {
|
||||
console.error(err);
|
||||
document.body.insertAdjacentHTML("beforeend",
|
||||
'<pre style="color:#f59056;position:fixed;left:1rem;bottom:1rem;max-width:90vw;white-space:pre-wrap;font-family:monospace">' +
|
||||
'<pre style="color:#f59056;position:fixed;left:1rem;bottom:1rem;max-width:90vw;white-space:pre-wrap;font-family:monospace;z-index:9999">' +
|
||||
String(err) + '</pre>');
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user