Website: crop the empty half off the Tools screenshot; tighten wrapped footer links

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

.github/FUNDING.yml

@@ -0,0 +1 @@
+ko_fi: alexsouthwell

site/public/404.html

@@ -24,6 +24,10 @@
       <a href="/feedback/">Feedback</a>
     </nav>
     <div class="end">
+      <a class="btn small ghost" href="https://github.com/saphid/frame-control">
+        <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
+        GitHub
+      </a>
       <a class="btn small coffee" data-kofi href="#" target="_blank" rel="noopener">Support</a>
     </div>
   </div>
@@ -45,9 +49,11 @@
       <a href="https://github.com/saphid/frame-control">GitHub</a>
       <a href="https://github.com/saphid/frame-control/releases">Releases</a>
       <a href="https://github.com/saphid/frame-control/blob/main/docs/frame-control.md">Docs</a>
+      <a href="/feedback/">Feedback</a>
+      <a href="https://github.com/saphid/frame-control/blob/main/CONTRIBUTING.md">Contributing</a>
       <a href="/privacy/">Privacy</a>
     </div>
-    <p class="legal">© <span data-year>2026</span> saphid · MIT licence. Unofficial and not affiliated with or endorsed by Valve.</p>
+    <p class="legal">© <span data-year>2026</span> saphid · MIT licence. Unofficial and not affiliated with or endorsed by Valve. Steam, Steam Frame and SteamVR are trademarks of Valve Corporation.</p>
   </div>
 </footer>
 </body>

site/public/css/site.css

@@ -32,12 +32,14 @@ code { font: 14px ui-monospace, SFMono-Regular, Menlo, monospace; background: rg
        -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); }
 .top .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
 .brand { display: flex; align-items: center; gap: 10px; color: var(--bright); font-weight: 700; letter-spacing: 2.2px; font-size: 14px; text-transform: uppercase; }
+.brand { white-space: nowrap; }
 .brand img { width: 30px; height: 30px; }
 .top nav { display: flex; gap: 22px; margin-left: 8px; }
 .top nav a { color: var(--muted); font-size: 14.5px; font-weight: 500; }
 .top nav a:hover, .top nav a[aria-current] { color: var(--bright); }
 .top .end { margin-left: auto; display: flex; gap: 10px; align-items: center; }
 @media (max-width: 880px) { .top nav { display: none; } }
+@media (max-width: 480px) { .top .end .ghost { display: none; } }
 
 /* ---- buttons ---- */
 .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0 22px; border-radius: 10px;
@@ -46,6 +48,8 @@ code { font: 14px ui-monospace, SFMono-Regular, Menlo, monospace; background: rg
 .btn:hover { background: rgba(103, 112, 123, .4); color: var(--bright); }
 .btn.primary { background: var(--action); box-shadow: 0 8px 28px rgba(26, 159, 255, .28); }
 .btn.primary:hover { background: var(--action-hi); transform: translateY(-1px); }
+/* The background shorthand resets this; without it the gradient repeats under the transparent border. */
+.btn.primary, .btn.primary:hover { background-origin: border-box; }
 .btn.ghost { background: transparent; border-color: var(--line); }
 .btn.ghost:hover { border-color: rgba(143,152,160,.4); background: rgba(255,255,255,.03); }
 .btn.small { height: 36px; padding: 0 14px; font-size: 14px; border-radius: 8px; }
@@ -63,6 +67,8 @@ code { font: 14px ui-monospace, SFMono-Regular, Menlo, monospace; background: rg
 .eyebrow { display: inline-block; max-width: 100%; padding: 6px 14px; border-radius: 999px; font-size: 13.5px;
            color: var(--link); background: rgba(26,159,255,.1); border: 1px solid rgba(102,192,244,.22); margin-bottom: 26px; }
 .eyebrow b { color: var(--bright); font-weight: 600; }
+.eyebrow .plats { white-space: nowrap; }
+@media (max-width: 520px) { .eyebrow { border-radius: 16px; } .eyebrow .sep { display: none; } .eyebrow .plats { display: block; white-space: normal; } }
 .hero h1 { max-width: 880px; margin: 0 auto; }
 .hero h1 span { background: linear-gradient(90deg, #66c0f4, #1a9fff 45%, #8a6cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
 .lede { max-width: 680px; margin: 22px auto 0; font-size: 19px; color: var(--text); }
@@ -135,6 +141,8 @@ section.alt { background: var(--bg-2); border-block: 1px solid var(--line); }
 .faq details[open] summary::after { transform: rotate(45deg); }
 .faq details > div { padding: 0 0 20px; color: var(--muted); }
 .faq details > div p + p { margin-top: 10px; }
+.faq.notes section { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px 20px; color: var(--muted); }
+.faq.notes h2 { font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--bright); margin: 0 0 10px; }
 
 .split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
 .split .card { padding: 36px; }
@@ -145,7 +153,7 @@ section.alt { background: var(--bg-2); border-block: 1px solid var(--line); }
 /* ---- footer ---- */
 footer { border-top: 1px solid var(--line); padding: 48px 0 56px; color: var(--dim); font-size: 14px; }
 footer .wrap { display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; }
-footer .cols { display: flex; gap: 28px; flex-wrap: wrap; }
+footer .cols { display: flex; gap: 12px 28px; flex-wrap: wrap; }
 footer a { color: var(--muted); }
 footer .legal { flex-basis: 100%; font-size: 13px; }
 
@@ -160,6 +168,7 @@ aside.panel p { color: var(--muted); font-size: 15px; }
 aside.panel p + h3 { margin-top: 26px; }
 .field { display: grid; gap: 8px; margin-bottom: 22px; }
 .field > label, .field > legend { color: var(--bright); font-weight: 600; font-size: 14.5px; padding: 0; }
+.field > legend { margin-bottom: 10px; }  /* fieldset grids ignore gap for the legend */
 .field small { color: var(--muted); font-size: 13px; font-weight: 400; }
 .row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
 @media (max-width: 640px) { .row3 { grid-template-columns: 1fr; } }

site/public/feedback/index.html

@@ -25,6 +25,10 @@
       <a href="/feedback/" aria-current="page">Feedback</a>
     </nav>
     <div class="end">
+      <a class="btn small ghost" href="https://github.com/saphid/frame-control">
+        <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
+        GitHub
+      </a>
       <a class="btn small coffee" data-kofi href="#" target="_blank" rel="noopener">Support</a>
     </div>
   </div>
@@ -128,9 +132,11 @@
       <a href="https://github.com/saphid/frame-control">GitHub</a>
       <a href="https://github.com/saphid/frame-control/releases">Releases</a>
       <a href="https://github.com/saphid/frame-control/blob/main/docs/frame-control.md">Docs</a>
+      <a href="/feedback/">Feedback</a>
+      <a href="https://github.com/saphid/frame-control/blob/main/CONTRIBUTING.md">Contributing</a>
       <a href="/privacy/">Privacy</a>
     </div>
-    <p class="legal">© <span data-year>2026</span> saphid · MIT licence. Unofficial and not affiliated with or endorsed by Valve.</p>
+    <p class="legal">© <span data-year>2026</span> saphid · MIT licence. Unofficial and not affiliated with or endorsed by Valve. Steam, Steam Frame and SteamVR are trademarks of Valve Corporation.</p>
   </div>
 </footer>
 </body>

site/public/index.html

@@ -41,7 +41,7 @@
 <main>
 <section class="hero">
   <div class="wrap">
-    <span class="eyebrow"><b>Free and open source</b> · macOS · Windows · Linux · iPhone</span>
+    <span class="eyebrow"><b>Free and open source</b><span class="sep"> · </span><span class="plats">macOS · Windows · Linux · iPhone</span></span>
     <h1>Your Steam Frame, <span>managed from your desk.</span></h1>
     <p class="lede">See what the headset sees, install games and Android apps, move files and text across, and keep an eye on battery and status. All over SSH, with nothing to install on the Frame.</p>
     <div class="cta">
@@ -163,7 +163,7 @@
         <h2>The fiddly bits, done for you</h2>
         <p>Open an SSH session or SFTP, start Steam Link or remote desktop, change the volume, or put the headset to sleep, all from one tab.</p>
       </div>
-      <img src="/img/tools.jpg" width="1600" height="1000" loading="lazy" alt="The Tools tab: SSH, SFTP, Steam Link, remote desktop and power controls.">
+      <img src="/img/tools.jpg" width="1600" height="600" loading="lazy" alt="The Tools tab: SSH, SFTP, Steam Link, remote desktop and power controls.">
     </div>
   </div>
 </section>

site/public/js/site.js

@@ -2,7 +2,7 @@
 const SITE = {
   repo: "saphid/frame-control",
   // Ko-fi page name, the part after ko-fi.com/. Donate buttons stay hidden while it's empty.
-  kofi: "",
+  kofi: "alexsouthwell",
 };
 
 const RELEASE = `https://github.com/${SITE.repo}/releases/latest/download/`;

site/public/privacy/index.html

@@ -24,6 +24,10 @@
       <a href="/feedback/">Feedback</a>
     </nav>
     <div class="end">
+      <a class="btn small ghost" href="https://github.com/saphid/frame-control">
+        <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
+        GitHub
+      </a>
       <a class="btn small coffee" data-kofi href="#" target="_blank" rel="noopener">Support</a>
     </div>
   </div>
@@ -36,10 +40,10 @@
       <h1>Privacy</h1>
       <p>Short version: the app collects nothing, and the website keeps only what you choose to send.</p>
     </div>
-    <div class="faq">
+    <div class="faq notes">
-      <details open><summary>The app</summary><div><p>Frame Control talks only to your headset (over SSH on your network), to GitHub for releases, and to Steam and F-Droid for game and app listings. It has no analytics and no accounts.</p></div></details>
+      <section><h2>The app</h2><p>Frame Control talks only to your headset (over SSH on your network), to GitHub for releases, and to Steam and F-Droid for game and app listings. It has no analytics and no accounts.</p></section>
-      <details open><summary>The feedback form</summary><div><p>What you type becomes a public GitHub issue on <a href="https://github.com/saphid/frame-control/issues">saphid/frame-control</a>. To stop abuse, the form keeps a one-way hash of your IP address for about an hour to count submissions. The address itself isn't stored or published.</p></div></details>
+      <section><h2>The feedback form</h2><p>What you type becomes a public GitHub issue on <a href="https://github.com/saphid/frame-control/issues">saphid/frame-control</a>. To stop abuse, the form keeps a one-way hash of your IP address for about an hour to count submissions. The address itself isn't stored or published.</p></section>
-      <details open><summary>This website</summary><div><p>Hosted on Cloudflare Pages. No cookies, no analytics, no trackers. The download section asks GitHub for the latest version number. Donations go through Ko-fi, under Ko-fi's own privacy policy.</p></div></details>
+      <section><h2>This website</h2><p>Hosted on Cloudflare Pages. No cookies, no analytics, no trackers. The download section asks GitHub for the latest version number. Donations go through Ko-fi, under Ko-fi's own privacy policy.</p></section>
     </div>
   </div>
 </main>
@@ -51,9 +55,11 @@
       <a href="https://github.com/saphid/frame-control">GitHub</a>
       <a href="https://github.com/saphid/frame-control/releases">Releases</a>
       <a href="https://github.com/saphid/frame-control/blob/main/docs/frame-control.md">Docs</a>
+      <a href="/feedback/">Feedback</a>
+      <a href="https://github.com/saphid/frame-control/blob/main/CONTRIBUTING.md">Contributing</a>
       <a href="/privacy/">Privacy</a>
     </div>
-    <p class="legal">© <span data-year>2026</span> saphid · MIT licence. Unofficial and not affiliated with or endorsed by Valve.</p>
+    <p class="legal">© <span data-year>2026</span> saphid · MIT licence. Unofficial and not affiliated with or endorsed by Valve. Steam, Steam Frame and SteamVR are trademarks of Valve Corporation.</p>
   </div>
 </footer>
 </body>