patx/twig
update website
Commit a9123c2 · patx · 2026-08-26T00:39:31-04:00
Comments
No comments yet.
Diff
diff --git a/docs/index.html b/docs/index.html
index 2998d68..15d6e71 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,104 +1,341 @@
<!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">
-<title>Twig — minimal code editor</title>
-<style>
- :root {
- color-scheme: light dark;
- --page-bg: #fff;
- --text: #111;
- --body-text: #444;
- --muted: #888;
- --subtle: #bbb;
- --code-bg: #f2f2f2;
- }
-
- @media (prefers-color-scheme: dark) {
+ <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 {
- --page-bg: #111;
- --text: #f2f2f2;
- --body-text: #d0d0d0;
- --muted: #a0a0a0;
- --subtle: #777;
- --code-bg: #242424;
- }
- }
-
- body {
- font-family: monospace;
- font-size: 15px;
- line-height: 1.7;
- max-width: 600px;
- margin: 60px auto;
- padding: 0 20px 80px;
- color: var(--text);
- background: var(--page-bg);
- }
- h1 { font-size: 1.1rem; margin: 0 0 8px; }
- h2 { font-size: 0.85rem; margin: 40px 0 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
- p { color: var(--body-text); margin: 0 0 8px; }
- ul { padding-left: 1.2em; color: var(--body-text); margin: 0; }
- li { margin: 2px 0; }
- table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
- td { padding: 4px 0; vertical-align: top; }
- td:first-child { width: 55%; color: var(--text); }
- td:last-child { color: var(--muted); }
- code { background: var(--code-bg); color: var(--text); padding: 1px 5px; }
- a { color: var(--text); }
- footer { margin-top: 48px; color: var(--subtle); font-size: 0.8rem; }
- pre { background: var(--code-bg); padding: 12px; margin: 0; overflow-x: auto; }
- .site-title { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 25px; }
- .site-title img { height: 150px; width: auto; }
-</style>
+ 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 & replace</li>
+ <li>Undo & redo</li>
+ <li>Auto-indent</li>
+ <li>Dirty indicators</li>
+ <li>Jump to line</li>
+ <li>Print support</li>
+ </ul>
+ </section>
-<div class="site-title">
- <img src="https://gitman.io/patx/twig/raw/docs/logo.png" alt="Twig logo">
-</div>
-<div class="site-title">
- <h1>Twig Text Editor</h1>
-</div>
-<p><strong>Twig is an ultra-minimal and lightweight GTK code editor</strong> for Linux. No toolbar or menu bar, just code. <a href="https://gitman.io/patx/twig/raw/docs/screenshot.png" target="_blank">View screenshot</a>.</p>
-<br>
-<p><a href="https://gitman.io/patx/twig/raw/dist/twig_0.1.1_all.deb" target="_blank">Download/Install 64 bit .deb</a></p>
-<p><small>You can also install from <a href="https://gitman.io/patx/twig" target="_blank">source</a> or use <a href="https://snapcraft.io/twig" target="_blank">Snap</a>.</small></p>
-
-<h2>Features</h2>
-<ul>
- <li>Syntax highlighting</li>
- <li>Line numbers</li>
- <li>Find & replace</li>
- <li>Undo / redo</li>
- <li>Auto-indent</li>
- <li>Dirty indicators</li>
- <li>Jump to line</li>
- <li>Print support</li>
-</ul>
-
-<h2>Keyboard shortcuts</h2>
-<table>
- <tr><td><code>Ctrl+N</code> / <code>Ctrl+T</code></td><td>New window</td></tr>
- <tr><td><code>Ctrl+O</code></td><td>Open file(s)</td></tr>
- <tr><td><code>Ctrl+S</code> / <code>Ctrl+Shift+S</code></td><td>Save / Save as</td></tr>
- <tr><td><code>Ctrl+W</code></td><td>Close window</td></tr>
- <tr><td><code>Ctrl+P</code></td><td>Print</td></tr>
- <tr><td><code>Ctrl+Q</code></td><td>Quit</td></tr>
- <tr><td><code>Ctrl+Z</code> / <code>Ctrl+Shift+Z</code></td><td>Undo / Redo</td></tr>
- <tr><td><code>Ctrl+X</code> / <code>Ctrl+C</code> / <code>Ctrl+V</code></td><td>Cut / Copy / Paste</td></tr>
- <tr><td><code>Ctrl+A</code></td><td>Select all</td></tr>
- <tr><td><code>Ctrl+D</code></td><td>Delete line(s)</td></tr>
- <tr><td><code>Ctrl+F</code> / <code>Ctrl+R</code></td><td>Find / Replace</td></tr>
- <tr><td><code>Ctrl+G</code> / <code>Ctrl+Shift+G</code></td><td>Find next / previous</td></tr>
- <tr><td><code>Ctrl+J</code></td><td>Jump to line</td></tr>
- <tr><td><code>Ctrl++</code> / <code>Ctrl+-</code></td><td>Increase / decrease editor font size</td></tr>
- <tr><td><code>Tab</code> / <code>Shift+Tab</code></td><td>Indent / Unindent</td></tr>
-</table>
-
-<footer>View source and report issues at <a href="https://gitman.io/patx/twig">gitman.io/patx/twig</a> · MIT license</footer>
+ <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>