Spaces:
Running
Running
| <html lang="es" data-root="../../"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Tarjeta para compartir</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="../amc.css"> | |
| <link rel="stylesheet" href="../nav.css"> | |
| <style> | |
| /* The preview image a shared link shows: 1200×630, no figures (they would go | |
| stale), only the story's name and the shape of its main chart. Rendered | |
| to PNG when the site is built; this page is the template. */ | |
| html, body { width: 1200px; height: 630px; overflow: hidden; } | |
| body { background: var(--page); } | |
| .og { display: grid; grid-template-columns: 1fr 520px; height: 630px; } | |
| .og .t { padding: 52px 56px 46px; display: flex; flex-direction: column; } | |
| .og .k { font: 700 22px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 22px; } | |
| .og h1 { font: 800 70px/1.02 var(--display); letter-spacing: -.035em; margin: 0; color: var(--ink); } | |
| .og .d { font: 500 25px/1.36 var(--sans); color: var(--ink-2); margin: 20px 0 24px; } | |
| .og .foot { margin-top: auto; display: grid; gap: 8px; } | |
| .og .b { display: flex; align-items: center; gap: 14px; font: 700 24px var(--display); color: var(--ink); white-space: nowrap; } | |
| .og .b span.m { background: var(--ink); color: var(--page); border-radius: 10px; padding: 8px 12px; font: 800 20px var(--display); letter-spacing: .04em; } | |
| .og .b .by { display: inline-flex; align-items: center; gap: 10px; padding-left: 16px; border-left: 2px solid var(--border); font: 500 20px var(--sans); color: var(--muted); } | |
| .og .b .clyx.word { height: 27px; } | |
| .og .u { font: 500 20px var(--sans); color: var(--muted); margin: 0; } | |
| .og .v { background: var(--surface-2); position: relative; border-left: 1px solid var(--border); } | |
| .og .v > div { position: absolute; inset: 40px; } | |
| .og .v > div > span { font-size: 120px ; } | |
| .og .v svg, .og .v canvas { width: 100%; height: 100%; display: block; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="og"><div class="t"><p class="k" id="k"></p><h1 id="h"></h1><p class="d" id="d"></p> | |
| <div class="foot"><div class="b"><span class="m">AMC</span>Analíticas Mercantiles <span class="by">por<span class="clyx word" aria-label="Clyx Consulting"></span></span></div> | |
| <p class="u">amc.clyxconsulting.com</p></div></div> | |
| <div class="v"><div id="v"></div></div></div> | |
| <script type="module"> | |
| import { STORIES } from "../catalog.js"; | |
| const slug = new URLSearchParams(location.search).get("s"); | |
| const s = STORIES.find((x) => x.slug === slug); | |
| if (s) { | |
| document.getElementById("k").textContent = s.kicker; | |
| document.getElementById("h").textContent = s.title; | |
| document.getElementById("d").textContent = s.dek; | |
| await s.thumb(document.getElementById("v")); | |
| } else { | |
| document.getElementById("k").textContent = "Datos abiertos"; | |
| document.getElementById("h").textContent = "Las empresas de Colombia, en datos"; | |
| document.getElementById("d").textContent = "El registro empresarial depurado, verificado y abierto: historias, consulta SQL y datos para descargar."; | |
| await STORIES.find((x) => x.slug === "latido").thumb(document.getElementById("v")); | |
| } | |
| await new Promise((r) => setTimeout(r, 600)); | |
| window.__ogReady = true; | |
| </script> | |
| </body> | |
| </html> | |