The GitHub-like look is the default; the RetroPlay look stays behind ?look=classic (closes #74) f6346d875ee5
base.html always loads assets/github.css and sets data-look=github unless the browser chose the classic look with ?look=classic (a cookie keeps it; ?look=github returns to the default). The hub spec's theme section describes both.
- Author
- Andy McCall @andymccall <[email protected]>
- When
- · 2026-10-01 22:18 UTC
- Signature
- ✔ signed by Andy McCall
- Hash
f6346d875ee504786b29316cc2b52d2b74c7fc83695ba94fb3bd5193ce71fa74- Depends on
- 5c6eb1feaa71 749d9a5fcd9f 93be9ce4653e b5668108487f c40c2d3edb51 d23464c0ac60
- Depended on by
- a7aa76ac52d7 d98a93c10a0d 8e820b4ae875
- In bookmarks
- api-unknown-fields cancel-landed-runs clear-waiting close-proposal-140 diffusion-pin-bookmark draft-ready image-check job-waits main oh-comment-body-file proposal-list-fast run-one-job wiki-says-so
- In tags
- v0.3.0 v0.3.1 v0.4.0 v0.4.1 v0.4.2 v0.5.0 v0.5.1 v0.5.2 v0.6.0 v0.6.1 v0.7.0 v0.8.0 v0.9.0 v0.9.1 v0.9.11 v0.9.15 v0.9.16 v0.9.19 v0.9.2 v0.9.20 v0.9.21 v0.9.22 v0.9.23 v0.9.24 v0.9.3 v0.9.4 v0.9.5 v0.9.6 v0.9.7 v0.9.8 v0.9.9
- Edits
- 9 atoms, 0 tree operations, 4 files
Browse the tree at this change
modified CHANGELOG.md +1 −1
| … | 3 unchanged lines |
||
| 4 | 4 | ||
| 5 | 5 | ## Unreleased |
|
| 6 | 6 | ||
| 7 | - | - **A trial GitHub-like look (#74).** `?look=github` on any page turns it on for that browser (a cookie keeps it), and `?look=default` turns it off. It uses Primer colours in light and dark, system fonts, rounded boxes, underline navigation, grey and green buttons, sentence case and pill labels. Nobody else sees it: it is for judging whether that layout reads better. |
|
| 7 | + | - **A GitHub-like look, now the default (#74).** Primer colours in light and dark, system fonts, rounded boxes, underline navigation, grey and green buttons, sentence case and pill labels, for readability and familiarity. The RetroPlay look stays available: `?look=classic` on any page keeps it for that browser, and `?look=github` returns to the default. |
|
| 8 | 8 | ||
| 9 | 9 | ## 0.2.0 (2026-10-01) |
|
| 10 | 10 | ||
| … | 16 unchanged lines |
modified assets/github.css +6 −5
| 1 | - | /* A trial look close to GitHub's (Primer colours, system fonts, rounded |
|
| 2 | - | boxes, underline navigation), loaded over style.css only for a browser |
|
| 3 | - | that asked for it with ?look=github (?look=default turns it off). Every |
|
| 4 | - | rule is scoped to :root[data-look="github"], so the hub's own theme is |
|
| 5 | - | unchanged for everyone else. Light and dark follow the theme toggle. */ |
|
| 1 | + | /* OxygenHub's look (oxygenhub#74), close to GitHub's: Primer colours, |
|
| 2 | + | system fonts, rounded boxes, underline navigation, sentence case. It is |
|
| 3 | + | the default, loaded over style.css: every rule is scoped to |
|
| 4 | + | :root[data-look="github"], which base.html sets unless the browser chose |
|
| 5 | + | the classic RetroPlay look with ?look=classic. Light and dark follow the |
|
| 6 | + | theme toggle. */ |
|
| 6 | 7 | ||
| 7 | 8 | :root[data-look="github"] { |
|
| 8 | 9 | --bg:#ffffff; --panel:#ffffff; --soft:#f6f8fa; --ink:#1f2328; --mute:#59636e; --line:#d1d9e0; --dim:#818b98; |
|
| … | 159 unchanged lines |
modified docs/spec.md +3 −1
| … | 208 unchanged lines |
||
| 209 | 209 | ||
| 210 | 210 | ### 6.1 Theme |
|
| 211 | 211 | ||
| 212 | - | The visual language follows the RetroPlay Network's shape (dark by default, `Barlow` for text and `Press Start 2P` for the wordmark and first columns, square corners, thin `--line` rules, a `--panel` header and footer, a full-width `--band` navigation bar with the active tab underlined in `--acc`) with the palette taken from the Oxygen mark shared with the VS Code extension: the mark's cyan `#00F0FF` to blue `#0072FF` gradient on `#070c18`, so `--acc` is cyan, `--acc-2` blue, and the band a deep blue. The mark itself is the logo in the header, the footer and the favicon; the wordmark beside it reads OXYGEN**HUB**. The stylesheet starts from `retroplay-manager/templates/style.css` lines 1–171 (tokens, shell, band, tabs, main, tables, forms, footer) and adds forge components; the store, showcase and game components are not carried over. |
|
| 212 | + | The default look (since 2026-10-01, oxygenhub#74) is close to GitHub's, chosen for readability and familiarity: Primer colours in light and dark, the system font stack at 14px, rounded boxes with divided rows, the site band and repository tabs as underline navigation, grey buttons with green primary actions, sentence case throughout, and pill labels. It is `assets/github.css`, loaded over the stylesheet below with every rule scoped to `:root[data-look="github"]`, which the page sets unless the browser chose the classic look with `?look=classic` (a cookie keeps the choice; `?look=github` returns to the default). The Oxygen mark stays the logo, with the wordmark OxygenHub. |
|
| 213 | 213 | ||
| 214 | + | The classic look follows the RetroPlay Network's shape (dark by default, `Barlow` for text and `Press Start 2P` for the wordmark and first columns, square corners, thin `--line` rules, a `--panel` header and footer, a full-width `--band` navigation bar with the active tab underlined in `--acc`) with the palette taken from the Oxygen mark shared with the VS Code extension: the mark's cyan `#00F0FF` to blue `#0072FF` gradient on `#070c18`, so `--acc` is cyan, `--acc-2` blue, and the band a deep blue. The mark itself is the logo in the header, the footer and the favicon; the wordmark beside it reads OXYGEN**HUB**. The stylesheet starts from `retroplay-manager/templates/style.css` lines 1–171 (tokens, shell, band, tabs, main, tables, forms, footer) and adds forge components; the store, showcase and game components are not carried over. |
|
| 215 | + | ||
| 214 | 216 | The theme is dark, light, or auto (follow the system's `prefers-color-scheme`, and change with it), chosen with the switch in the header (it cycles) or under Settings → Appearance, and kept in a `theme` cookie for a year; dark when unset. A script in the page head applies it before first paint. Syntax highlighting uses the highlighter's scope names as classes prefixed `sy-`, so no scope can collide with the page's own classes. |
|
| 215 | 217 | ||
| 216 | 218 | Tokens (dark default, light under `:root[data-theme="light"]`): |
|
| … | 442 unchanged lines |
modified templates/base.html +2 −1
| … | 5 unchanged lines |
||
| 6 | 6 | <title>{% block title %}{{ shell.site }}{% endblock %} · {{ shell.site }}</title> |
|
| 7 | 7 | <link rel="stylesheet" href="/style.css"> |
|
| 8 | 8 | <link rel="icon" href="/favicon.svg" type="image/svg+xml"> |
|
| 9 | - | <script>/* A trial look (assets/github.css): ?look=github turns it on for this browser, ?look=default off; a cookie keeps it. */(function(){var q=new URLSearchParams(location.search).get("look");if(q==="github")document.cookie="look=github; path=/; max-age=31536000; SameSite=Lax";else if(q==="default")document.cookie="look=; path=/; max-age=0; SameSite=Lax";if(/(?:^|; )look=github/.test(document.cookie)){document.documentElement.dataset.look="github";document.write('<link rel="stylesheet" href="/static/github.css">');}})();</script> |
|
| 9 | + | <link rel="stylesheet" href="/static/github.css"> |
|
| 10 | + | <script>/* The look (oxygenhub#74): GitHub-like by default (assets/github.css, every rule scoped to data-look="github"); ?look=classic keeps the RetroPlay look for this browser, ?look=github returns to the default. */(function(){var q=new URLSearchParams(location.search).get("look");if(q==="classic")document.cookie="look=classic; path=/; max-age=31536000; SameSite=Lax";else if(q==="github"||q==="default")document.cookie="look=; path=/; max-age=0; SameSite=Lax";if(!/(?:^|; )look=classic/.test(document.cookie))document.documentElement.dataset.look="github";})();</script> |
|
| 10 | 11 | <script>/* Theme before first paint: the theme cookie (dark, light or auto; dark when unset), auto following the system. */(function(){var d=document.documentElement,m=document.cookie.match(/(?:^|; )theme=(light|dark|auto)/),p=m?m[1]:"dark",q=window.matchMedia&&matchMedia("(prefers-color-scheme: light)");function a(){d.dataset.theme=p==="auto"?(q&&q.matches?"light":"dark"):p;}d.dataset.themePref=p;a();if(q&&q.addEventListener)q.addEventListener("change",function(){if(d.dataset.themePref==="auto")d.dataset.theme=q.matches?"light":"dark";});})();</script> |
|
| 11 | 12 | </head> |
|
| 12 | 13 | <body{% block bodyattrs %}{% endblock %}> |
|
| … | 50 unchanged lines |