patx/twig

root / docs / index.html [View Raw] 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="color-scheme" content="light dark">
  <meta name="description" content="Twig is an ultra-minimal GTK code editor for Linux.">
  <title>Twig — minimal code editor for Linux</title>
  <link rel="icon" href="https://gitman.io/patx/twig/raw/docs/logo.png">
  <style>
    :root {
      color-scheme: light dark;
      --background: #fafbfa;
      --text: #171a18;
      --muted: #646a66;
      --line: #dde1de;
      --accent: #6f994c;
      --code: #f0f2f0;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background: var(--background);
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
      font-size: 16px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    a {
      color: inherit;
      text-underline-offset: 3px;
    }

    a:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 4px;
      border-radius: 3px;
    }

    .page {
      width: min(680px, calc(100% - 40px));
      margin: 0 auto;
      padding: 56px 0 72px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 72px;
      font-weight: 650;
      letter-spacing: -0.02em;
      text-decoration: none;
    }

    .brand img {
      width: 42px;
      height: 42px;
      border-radius: 10px;
    }

    h1,
    h2,
    p {
      margin-top: 0;
    }

    h1 {
      max-width: 620px;
      margin-bottom: 20px;
      font-size: clamp(2.7rem, 9vw, 4.6rem);
      font-weight: 620;
      line-height: 1.02;
      letter-spacing: -0.055em;
    }

    .intro {
      max-width: 580px;
      margin-bottom: 28px;
      color: var(--muted);
      font-size: 1.15rem;
    }

    .intro strong {
      color: var(--text);
      font-weight: 600;
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px 22px;
    }

    .download {
      display: inline-block;
      padding: 10px 16px;
      border: 1px solid var(--text);
      border-radius: 6px;
      background: var(--text);
      color: var(--background);
      font-weight: 600;
      text-decoration: none;
    }

    .download:hover {
      background: var(--accent);
      border-color: var(--accent);
    }

    .secondary-link {
      color: var(--muted);
      font-size: 0.92rem;
    }

    figure {
      margin: 56px 0 0;
    }

    figure a {
      display: block;
    }

    figure img {
      display: block;
      width: 100%;
      height: auto;
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: 0 14px 40px rgba(20, 28, 22, 0.08);
    }

    figcaption {
      margin-top: 10px;
      color: var(--muted);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 0.72rem;
    }

    section:not(.hero) {
      margin-top: 72px;
      padding-top: 40px;
      border-top: 1px solid var(--line);
    }

    h2 {
      margin-bottom: 24px;
      font-size: 1.25rem;
      font-weight: 650;
      letter-spacing: -0.025em;
    }

    .features {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px 32px;
      margin: 0;
      padding: 0;
      color: var(--muted);
      list-style: none;
    }

    .features li::before {
      content: "—";
      margin-right: 10px;
      color: var(--accent);
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    tr {
      border-top: 1px solid var(--line);
    }

    th,
    td {
      padding: 12px 0;
      text-align: left;
      vertical-align: top;
    }

    th {
      width: 54%;
      padding-right: 24px;
      font-weight: 400;
    }

    td {
      color: var(--muted);
      font-size: 0.92rem;
    }

    kbd {
      padding: 2px 5px;
      border-radius: 4px;
      background: var(--code);
      color: var(--text);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 0.75rem;
      font-weight: 400;
      white-space: nowrap;
    }

    footer {
      margin-top: 72px;
      padding-top: 24px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 0.78rem;
    }

    footer p {
      margin-bottom: 0;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --background: #111412;
        --text: #eff2ef;
        --muted: #a3aaa5;
        --line: #303631;
        --accent: #8bb765;
        --code: #202521;
      }

      figure img {
        box-shadow: none;
      }
    }

    @media (max-width: 520px) {
      .page {
        padding-top: 32px;
      }

      .brand {
        margin-bottom: 52px;
      }

      .features {
        grid-template-columns: 1fr;
      }

      th,
      td {
        display: block;
        width: 100%;
        padding-right: 0;
      }

      th {
        padding-bottom: 4px;
      }

      td {
        padding-top: 0;
      }
    }
  </style>
</head>
<body>
  <div class="page">
    <header>
      <a class="brand" href="#top" aria-label="Twig home">
        <img src="https://gitman.io/patx/twig/raw/docs/logo.png" alt="">
        <span>Twig</span>
      </a>
    </header>

    <main id="top">
      <section class="hero" aria-labelledby="page-title">
        <h1 id="page-title">A small code editor for Linux.</h1>
        <p class="intro"><strong>Twig is an ultra-minimal GTK editor.</strong> No toolbar or menu bar—just code.</p>
        <div class="actions">
          <a class="download" href="https://gitman.io/patx/twig/raw/dist/twig_0.1.1_all.deb">Download .deb</a>
          <a class="secondary-link" href="https://gitman.io/patx/twig" target="_blank" rel="noopener noreferrer">Source</a>
          <a class="secondary-link" href="https://snapcraft.io/twig" target="_blank" rel="noopener noreferrer">Snap</a>
        </div>

        <figure>
          <a href="https://gitman.io/patx/twig/raw/docs/screenshot.png" target="_blank" rel="noopener noreferrer" aria-label="Open the Twig screenshot at full size">
            <img src="https://gitman.io/patx/twig/raw/docs/screenshot.png" alt="Twig editing a short Python file in a dark editor window">
          </a>
          <figcaption>Twig editing app.py</figcaption>
        </figure>
      </section>

      <section aria-labelledby="features-title">
        <h2 id="features-title">Features</h2>
        <ul class="features">
          <li>Syntax highlighting</li>
          <li>Line numbers</li>
          <li>Find &amp; replace</li>
          <li>Undo &amp; redo</li>
          <li>Auto-indent</li>
          <li>Dirty indicators</li>
          <li>Jump to line</li>
          <li>Print support</li>
        </ul>
      </section>

      <section aria-labelledby="shortcuts-title">
        <h2 id="shortcuts-title">Keyboard shortcuts</h2>
        <table>
          <tbody>
            <tr><th scope="row"><kbd>Ctrl N</kbd> / <kbd>Ctrl T</kbd></th><td>New window</td></tr>
            <tr><th scope="row"><kbd>Ctrl O</kbd></th><td>Open files</td></tr>
            <tr><th scope="row"><kbd>Ctrl S</kbd> / <kbd>Ctrl Shift S</kbd></th><td>Save / Save as</td></tr>
            <tr><th scope="row"><kbd>Ctrl W</kbd></th><td>Close window</td></tr>
            <tr><th scope="row"><kbd>Ctrl P</kbd></th><td>Print</td></tr>
            <tr><th scope="row"><kbd>Ctrl Q</kbd></th><td>Quit</td></tr>
            <tr><th scope="row"><kbd>Ctrl Z</kbd> / <kbd>Ctrl Shift Z</kbd></th><td>Undo / Redo</td></tr>
            <tr><th scope="row"><kbd>Ctrl X</kbd> / <kbd>Ctrl C</kbd> / <kbd>Ctrl V</kbd></th><td>Cut / Copy / Paste</td></tr>
            <tr><th scope="row"><kbd>Ctrl A</kbd></th><td>Select all</td></tr>
            <tr><th scope="row"><kbd>Ctrl D</kbd></th><td>Delete line</td></tr>
            <tr><th scope="row"><kbd>Ctrl F</kbd> / <kbd>Ctrl R</kbd></th><td>Find / Replace</td></tr>
            <tr><th scope="row"><kbd>Ctrl G</kbd> / <kbd>Ctrl Shift G</kbd></th><td>Find next / Previous</td></tr>
            <tr><th scope="row"><kbd>Ctrl J</kbd></th><td>Jump to line</td></tr>
            <tr><th scope="row"><kbd>Ctrl +</kbd> / <kbd>Ctrl −</kbd></th><td>Increase / Decrease font size</td></tr>
            <tr><th scope="row"><kbd>Tab</kbd> / <kbd>Shift Tab</kbd></th><td>Indent / Unindent</td></tr>
          </tbody>
        </table>
      </section>
    </main>

    <footer>
      <p><a href="https://gitman.io/patx/twig" target="_blank" rel="noopener noreferrer">Source and issues</a> · MIT license</p>
    </footer>
  </div>
</body>
</html>