Repository navigation
feat(web): logo, favicon and landing cards - #37
Merged
Merged
Conversation
The logo is the treble ring. The wordmark is "treblewise" in Barlow ExtraBold with the t's crossbar raised over the word and running on as a row of red and green beds; the dot of the i is the bull. The icon is three beds close up, green, red, green, with the same t in the red one. The landing title is now the wordmark (Wordmark.vue, still announced as the name). The favicon is the bare beds as SVG and ICO, and the app icons for #13 are ready in public/icons; the manifest comes with #13. scripts/build-logo.py draws all of it from Barlow's outlines. Part of #23. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The crossbar rectangle was wound against the font's outline, so where the two overlapped in one path they cancelled and left a dark square at the junction, in the wordmark and the icons alike. Part of #23. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The landing page's four points were text in rounded boxes. Each card now shows its point over the words, drawn in the lobby's hand: the scoreboard mid-leg for scoring, the caller and the lit double for the call, the spread and the bars for statistics, and two devices with no cloud for the last. The pictures are decoration, hidden from screen readers; the words still carry the meaning. Closes #23. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The "Where this is up to" panel becomes "What comes next": the steps in order, from what works now to a better interface, automatic board calibration and, later, the camera keeping score. The cards now lead with their words, rewritten for the first three, and keep their drawing small and faint in a corner behind them. Part of #23. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The experimental autoscorer already scores a match, so "Now" says so and "Later" is the autoscorer leaving experimental, not the camera starting to score. The first card names the camera as a way in. The cards' drawings are bigger, at the same faintness. Part of #23. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The cards kept room at their foot for the drawing; without it they are shorter and the drawing sits behind the text, as a background. Part of #23. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Stacked in one column, each card took its own text's height. On a phone every card is now as tall as the tallest; side by side is unchanged. Part of #23. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #23.
The logo
The landing title is now the wordmark (
Wordmark.vue). It is drawn from outlines, so no font loads, and it is still announced as "treblewise".New files:
public/favicon.svgandfavicon.ico(16, 32 and 48 px), with no tile.public/icons/: 192, 512, maskable 512 and apple-touch 180.index.htmllinks the favicon and the apple-touch icon. The manifest is left to #13, which can use these icons directly.apps/web/scripts/build-logo.pyregenerates all of it from Barlow's outlines. It needs fonttools, Pillow and Chrome. docs/08 now has a row for Barlow (SIL OFL 1.1).The landing page
Checks
npm test(472 passing),npm run typecheck, and a build withSITE_URLset: the icon links come out under/treblewise/.The App flow test (landing → game) failed twice in about six full-suite runs earlier on this branch. It passes on its own, and the cause was not captured.
🤖 Generated with Claude Code