assets/og/og.html

<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>ru-text — Open Graph source</title>
<!--
  The source of every social image this project ships. Rendered by tools/build-og.sh.

  Why this file exists instead of a design file: the image is a generated artefact, and this
  repository's own standard is that a generated artefact has a committed generator you can
  read and diff. The .pen it was drawn in is gitignored binary — it cannot be reviewed, and
  a change to it leaves no trace. This can.

  ONE markup, two variants. The layout, the sizes and the copy exist exactly once; the
  variants differ only in the colour tokens under :root.light. That is deliberate: the last
  time this project kept two copies of the same content by hand, the English README shipped
  a release behind. Two cards cannot drift when there is only one of them.

  The font is vendored under assets/fonts/ rather than pulled from Google Fonts, because a
  network font fails SILENTLY — the build succeeds, the fallback renders, and the image
  changes without anyone noticing. build-og.sh asserts the face actually loaded.

  Sizes are absolute px against a fixed viewport, not relative units. The canvas is always
  1200x628 or 1280x640, both set by the renderer, and a design measured in pixels is the one
  a reviewer can check with a colour picker.
-->
<style>
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  src: url('../fonts/golos-text-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  src: url('../fonts/golos-text-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* GitHub's own dark palette, inherited from the previous social preview. The image lives on
   GitHub, so it does not fight the page it sits on — that restraint is most of why the
   earlier card read as «thin». */
:root {
  --bg: #0D1117;
  --fg: #E6EDF3;
  --muted: #8B949E;
  --faint: #8B949E;      /* raised from #6E7681: 4.12:1 on this bg is below the AA floor */
  --accent: #58A6FF;
  --disc: #FFFFFF;
  --ring: transparent;   /* a white disc on a dark ground needs no edge */
}
:root.light {
  --bg: #FFFFFF;
  --fg: #1F2328;
  --muted: #59636E;
  --faint: #6E7781;      /* 4.55:1 on white — already above AA, darkening it adds weight */
  --accent: #0550AE;     /* not #0969DA: 5.19:1 vs the dark variant's 7.49:1 is not parity */
  --disc: #FFFFFF;
  --ring: #D0D7DE;       /* the mark keeps its own figure and ground; only the page inverts */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  gap: 56px;
  padding: 0 60px;
  background: var(--bg);
  font-family: 'Golos Text', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.mark {
  flex: 0 0 auto;
  width: 244px;
  height: 244px;
  border-radius: 50%;
  background: var(--disc);
  box-shadow: inset 0 0 0 1px var(--ring);
  background-image: url('../mark.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 184px 184px;
}

.copy { display: flex; flex-direction: column; align-items: flex-start; }

/* The one number that governs the lower block. Three intervals from one token — the
   previous version used 26 / 30 / 17 and read as a clump rather than a list. */
.copy > * + * { margin-top: 22px; }

.title { display: flex; align-items: baseline; gap: 18px; margin-top: 0; }

.word {
  font-size: 62px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--fg);
}

.ver { font-size: 31px; font-weight: 700; line-height: 1.15; color: var(--accent); }

.sub {
  font-size: 31px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--muted);
  margin-top: 16px;      /* the headline step, deliberately tighter than the token below */
}

.rule { width: 58px; height: 2px; background: var(--accent); }

.dom { font-size: 16px; font-weight: 400; line-height: 1.35; color: var(--faint); }

.plat { font-size: 17px; font-weight: 400; line-height: 1.35; color: var(--accent); }
</style>
<script>
  // Build-time only. The variant is an input to the render, not a runtime behaviour: the
  // renderer loads og.html?v=light and screenshots what comes out. Keeping it here instead
  // of duplicating the file is what makes drift between the variants impossible.
  if (new URLSearchParams(location.search).get('v') === 'light') {
    document.documentElement.className = 'light';
  }
</script>
</head>
<body>
  <div class="mark"></div>
  <div class="copy">
    <div class="title">
      <span class="word">ru-text</span>
      <span class="ver">2.3</span>
    </div>
    <div class="sub">Вычитка русского текста для ИИ-агентов</div>
    <div class="rule"></div>
    <div class="dom">Нейрослоп · Типографика · Инфостиль · Редактура · UX-тексты · Деловая переписка</div>
    <!-- «Codex и ChatGPT» as one item, the phrasing README.md already uses: ChatGPT appears
         in no platform inventory in this repository, and its only surface in INSTALL.md is
         a Codex mode. «и другие» rather than «ещё 3» on purpose — a baked count is a second
         hand-maintained number with no gate, and platform 13 would make the image lie. -->
    <div class="plat">Claude Code &nbsp;·&nbsp; Codex и&nbsp;ChatGPT &nbsp;·&nbsp; Cursor &nbsp;·&nbsp; GitHub Copilot &nbsp;·&nbsp; Gemini CLI &nbsp;·&nbsp; и&nbsp;другие</div>
  </div>
</body>
</html>