Skip to content

The phone pages get the icon, the site's pictures hold no buttons, and Inter is a third of its size #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mercury-gingham merged 1 commit into from
Oct 27, 2026
Merged

The phone pages get the icon, the site's pictures hold no buttons, and Inter is a third of its size #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions dist/admin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="robots" content="noindex">
<title>Households</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%236fb4ee'/%3E%3Ccircle cx='16' cy='16' r='7' fill='%23ffd36a'/%3E%3C/svg%3E">
<link rel="stylesheet" href="/tokens.css">
<link rel="stylesheet" href="/setup.css">
</head>
Expand Down
Binary file added dist/fonts/inter-4.1-latin-var.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed dist/fonts/inter-4.1-var.woff2
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<title>Gingham</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%236fb4ee'/%3E%3Ccircle cx='16' cy='16' r='7' fill='%23ffd36a'/%3E%3C/svg%3E">
<link rel="preload" href="/fonts/bricolage-grotesque-var.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/inter-4.1-var.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/inter-4.1-latin-var.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/tokens.css">
<link rel="stylesheet" href="/style.css">
</head>
Expand Down
1 change: 1 addition & 0 deletions dist/lists.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Lists">
<title>Lists</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%236fb4ee'/%3E%3Ccircle cx='16' cy='16' r='7' fill='%23ffd36a'/%3E%3C/svg%3E">
<link rel="stylesheet" href="/tokens.css">
<link rel="stylesheet" href="/setup.css">
</head>
Expand Down
1 change: 1 addition & 0 deletions dist/photos.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="robots" content="noindex">
<title>Photos</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%236fb4ee'/%3E%3Ccircle cx='16' cy='16' r='7' fill='%23ffd36a'/%3E%3C/svg%3E">
<link rel="stylesheet" href="/tokens.css">
<link rel="stylesheet" href="/setup.css">
</head>
Expand Down
2 changes: 1 addition & 1 deletion dist/setup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* The setup page: the frame's type and colour, laid out for a phone held in one hand. */
@font-face{font-family:"Inter";src:url(/fonts/inter-4.1-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/inter-4.1-latin-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
/* Colour lives in tokens.css, linked before this file; the theme follows the phone's. */
:root{--text:"Inter",-apple-system,system-ui,sans-serif;color-scheme:light dark}
*{box-sizing:border-box;margin:0}
Expand Down
1 change: 1 addition & 0 deletions dist/setup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="robots" content="noindex">
<title>Gingham setup</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%236fb4ee'/%3E%3Ccircle cx='16' cy='16' r='7' fill='%23ffd36a'/%3E%3C/svg%3E">
<link rel="stylesheet" href="/tokens.css">
<link rel="stylesheet" href="/setup.css">
</head>
Expand Down
2 changes: 1 addition & 1 deletion dist/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
*/
@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage-grotesque-var.woff2) format("woff2");font-weight:200 800;font-display:swap}
/* Inter 4.1 from rsms/inter's own release: Google Fonts' build drops the cv05/cv08 alternates used below. */
@font-face{font-family:"Inter";src:url(/fonts/inter-4.1-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/inter-4.1-latin-var.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
--display:"Bricolage Grotesque","Avenir Next","Segoe UI",Roboto,sans-serif;
Expand Down
Binary file added site/fonts/inter-4.1-latin-var.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed site/fonts/inter-4.1-var.woff2
View file
Open in desktop
Binary file not shown.
12 changes: 7 additions & 5 deletions site/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="preload" href="fonts/bricolage-grotesque-var.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="fonts/inter-4.1-var.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="fonts/inter-4.1-latin-var.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="style.css">
<script src="sky.js"></script>
<script type="application/ld+json">
Expand Down Expand Up @@ -315,8 +315,10 @@ <h3>No Gingham cloud</h3>
<h2 class="h2">Lists, at the wall or from a phone.</h2>
<p class="lede">Kept by Gingham, or in Todoist, Google Tasks, Microsoft To Do, Home Assistant or a CalDAV server such as Nextcloud or Fastmail. Check things off with a moment to undo. A phone reaches Gingham’s own lists on the home Wi‑Fi, or from anywhere when they live on a server with https. The others go wherever their own apps go.</p>
</div>
<!-- A crop is a picture of the wall: its label says what it shows, and what is drawn inside it is inert, so its
buttons are never reached or read as buttons. The inert sits inside the picture so the label is still read. -->
<div class="crop right" role="img" aria-label="The grocery list on the wall, with Cilantro just checked off and a toast reading Checked off Cilantro, with Undo">
<div class="s-ahead">
<div class="s-ahead" inert>
<div class="s-view">
<div class="s-head s-listhead"><p class="s-h"><svg class="s-glyph"><use href="#g-cart"/></svg>Grocery</p><p class="s-sub"></p><span class="s-add">Add</span></div>
<div class="s-card s-listbody">
Expand Down Expand Up @@ -364,7 +366,7 @@ <h2 class="h2">A list a five‑year‑old can run.</h2>
<p class="lede">Big rows, a picture on each, and a little cheer when something gets done.</p>
</div>
<div class="crop right" role="img" aria-label="June’s list on the wall: Brush teeth, Tidy up just checked off with a celebration and a toast offering Undo, Pick a book">
<div class="s-ahead">
<div class="s-ahead" inert>
<div class="s-view">
<div class="s-head s-listhead"><p class="s-h"><span class="s-avatar" style="--who:#e2a83a">J</span>June</p><p class="s-sub">Before bed</p><span class="s-add">Add</span></div>
<div class="s-card s-listbody kid">
Expand Down Expand Up @@ -424,7 +426,7 @@ <h2 class="h2">Photos from <span class="keep">a shared album,</span> <span class
<p class="lede">A photo sent from a phone is made smaller and loses its location before it leaves.</p>
</div>
<div class="crop right" role="img" aria-label="Photos on the wall: a picture captioned June 2025, shown whole over a blurred copy of itself">
<div class="s-ahead">
<div class="s-ahead" inert>
<div class="s-view s-photoview">
<div class="s-head"><p class="s-h">June 2025</p><span class="s-sub"></span><div class="s-pager"><span class="s-arrow off"><svg><use href="#g-left"/></svg></span><span class="s-arrow"><svg><use href="#g-right"/></svg></span></div></div>
<div class="s-card s-photo">
Expand Down Expand Up @@ -463,7 +465,7 @@ <h2 class="h2"><span class="keep">Set up from a phone.</span> <span class="keep"
</ol>
</div>
<div class="crop right" role="img" aria-label="The screen before it is set up, headed Welcome: a QR code to scan with a phone, and beside it, for a phone without a camera, the address gingham.local:4173/setup and the code K7W-PX4">
<div class="s-ahead">
<div class="s-ahead" inert>
<div class="s-view">
<div class="s-head"><p class="s-h">Welcome</p></div>
<div class="s-card s-strip hug"><div class="welcome">
Expand Down
2 changes: 1 addition & 1 deletion site/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
and lights the wall around it; the mark's butter becomes the colour of the one button that matters.
*/
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque-var.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-4.1-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-4.1-latin-var.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
--display:"Bricolage Grotesque","Avenir Next","Segoe UI",Roboto,sans-serif;
Expand Down
2 changes: 1 addition & 1 deletion test/sw.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const at = 'https://frame.test', p = (path, method = 'GET') => policy(method, at

test('What the frame may keep for a bad day, and what it never keeps', () => {
for (const path of ['/api/calendar?from=2026-09-20&to=2026-10-18', '/api/tasks', '/api/weather', '/api/household', '/api/settings', '/api/photos']) assert.equal(p(path), 'data', path);
for (const path of ['/', '/app.js', '/style.css', '/fonts/inter-4.1-var.woff2', '/lists', '/lists-page.js']) assert.equal(p(path), 'shell', path);
for (const path of ['/', '/app.js', '/style.css', '/fonts/inter-4.1-latin-var.woff2', '/lists', '/lists-page.js']) assert.equal(p(path), 'shell', path);
assert.equal(p('/photos/up-0123456789abcdef01234567.jpg'), 'photo');
// Secrets in an address, the pages that change things, and every write stay out of it entirely.
for (const path of ['/?k=a-frame-secret', '/s/a-one-time-link', '/setup', '/admin', '/photos', '/api/setup', '/api/setup/places?q=x', '/api/admin', '/api/pair/poll', '/api/owner-code', '/healthz']) assert.equal(p(path), 'pass', path);
Expand Down
Loading