From 75e92db2fab5e0746a565159f6e27ee19bba3505 Mon Sep 17 00:00:00 2001 From: saphid <4596216+saphid@users.noreply.github.com> Date: Mon, 28 Sep 2026 16:18:12 +1000 Subject: [PATCH 1/3] Website: point the donate buttons at ko-fi.com/alexsouthwell; add FUNDING.yml Co-Authored-By: Claude Opus 5.5 (1M context) --- .github/FUNDING.yml | 1 + site/public/js/site.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) create mode 100644 .github/FUNDING.yml diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..2aa60c9 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1 @@ +ko_fi: alexsouthwell diff --git a/site/public/js/site.js b/site/public/js/site.js index f7f8592..c1c338d 100644 --- a/site/public/js/site.js +++ b/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/`; From 2b89eeba1de4419fdbc37b27e4181ed6c1f14a1b Mon Sep 17 00:00:00 2001 From: saphid <4596216+saphid@users.noreply.github.com> Date: Mon, 28 Sep 2026 16:26:43 +1000 Subject: [PATCH 2/3] Website: fix visual bugs found in a page-by-page review - Gradient buttons showed a dark sliver on the right: the background shorthand reset background-origin, so the gradient repeated under the transparent border. - Phone header: keep the brand on one line and drop the GitHub button under 480px. - Hero pill: put the platform list on its own line on phones instead of orphaning one item. - Privacy page: plain sections instead of open accordions whose x looked like a close button. - Same header (GitHub button) and footer links on every page; legend spacing on the form. Co-Authored-By: Claude Opus 5.5 (1M context) --- site/public/404.html | 8 +++++++- site/public/css/site.css | 9 +++++++++ site/public/feedback/index.html | 8 +++++++- site/public/index.html | 2 +- site/public/privacy/index.html | 16 +++++++++++----- 5 files changed, 35 insertions(+), 8 deletions(-) diff --git a/site/public/404.html b/site/public/404.html index c01a92b..3854c60 100644 --- a/site/public/404.html +++ b/site/public/404.html @@ -24,6 +24,10 @@ Feedback @@ -45,9 +49,11 @@ GitHub Releases Docs + Feedback + Contributing Privacy - + diff --git a/site/public/css/site.css b/site/public/css/site.css index d589e0b..0d211be 100644 --- a/site/public/css/site.css +++ b/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; } } .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; } @@ -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; } } diff --git a/site/public/feedback/index.html b/site/public/feedback/index.html index b03e181..66f5d00 100644 --- a/site/public/feedback/index.html +++ b/site/public/feedback/index.html @@ -25,6 +25,10 @@ Feedback @@ -128,9 +132,11 @@ GitHub Releases Docs + Feedback + Contributing Privacy - + diff --git a/site/public/index.html b/site/public/index.html index 5578b44..b43983d 100644 --- a/site/public/index.html +++ b/site/public/index.html @@ -41,7 +41,7 @@
- Free and open source · macOS · Windows · Linux · iPhone + Free and open source · macOS · Windows · Linux · iPhone

Your Steam Frame, managed from your desk.

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.

diff --git a/site/public/privacy/index.html b/site/public/privacy/index.html index d1f637e..51cdfa5 100644 --- a/site/public/privacy/index.html +++ b/site/public/privacy/index.html @@ -24,6 +24,10 @@ Feedback
@@ -36,10 +40,10 @@

Privacy

Short version: the app collects nothing, and the website keeps only what you choose to send.

-
-
The app

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.

-
The feedback form

What you type becomes a public GitHub issue on saphid/frame-control. 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.

-
This website

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.

+
+

The app

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.

+

The feedback form

What you type becomes a public GitHub issue on saphid/frame-control. 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.

+

This website

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.

@@ -51,9 +55,11 @@ GitHub Releases Docs + Feedback + Contributing Privacy - + From 48eedbc2ebaff55ee1aa3307ba64eaee71b3b990 Mon Sep 17 00:00:00 2001 From: saphid <4596216+saphid@users.noreply.github.com> Date: Mon, 28 Sep 2026 16:31:39 +1000 Subject: [PATCH 3/3] Website: let the hero platform list wrap on phones so large text isn't clipped Co-Authored-By: Claude Opus 5.5 (1M context) --- site/public/css/site.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/public/css/site.css b/site/public/css/site.css index 0d211be..e77852a 100644 --- a/site/public/css/site.css +++ b/site/public/css/site.css @@ -68,7 +68,7 @@ code { font: 14px ui-monospace, SFMono-Regular, Menlo, monospace; background: rg 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; } } +@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); }