diff --git a/README.md b/README.md index 158fad2..2bdfc26 100644 --- a/README.md +++ b/README.md @@ -192,6 +192,11 @@ and development. Useful starting points: - [Ruffle](https://ruffle.rs/), for running Flash in modern browsers. - [Selkies](https://github.com/selkies-project/selkies), which streams the games. +- [Texgriddy](https://github.com/Weestuarty/texgriddy-es-de) by Weestuarty, an + ES-DE theme that inspired the site's look. The look was recreated from scratch + in CSS; none of Texgriddy's files, images or fonts are used. +- [Fredoka](https://fontsource.org/fonts/fredoka) (SIL Open Font License), the + display font. ## Legal diff --git a/docs/10-features/12-discovery-portal.md b/docs/10-features/12-discovery-portal.md index 40fa6fd..8d60ead 100644 --- a/docs/10-features/12-discovery-portal.md +++ b/docs/10-features/12-discovery-portal.md @@ -30,9 +30,15 @@ tokens are applied to `` while the portal is mounted, which takes precedence over the app theme on `` and also reaches dialogs and menus rendered into the body. -One scheme ships, **Chilled** (slate background, sage boxes). Adding a scheme +One scheme ships, **Slate** (slate background, sage boxes). Adding a scheme means adding an entry to `PORTAL_SCHEMES`; no component changes are needed. +The portal's look is inspired by +[Texgriddy](https://github.com/Weestuarty/texgriddy-es-de), an ES-DE theme by +Weestuarty: the framed page, glossy tiles with a metallic ring, outlined info +boxes, capsule buttons and the slate and sage palette. It was recreated from +scratch in CSS; none of Texgriddy's files, images or fonts are used. + Display text uses Fredoka (OFL, bundled via `@fontsource-variable/fredoka`); body text uses Verdana. diff --git a/frontend/src/components/portal/PortalLayout.tsx b/frontend/src/components/portal/PortalLayout.tsx index bd10467..75c6ae3 100644 --- a/frontend/src/components/portal/PortalLayout.tsx +++ b/frontend/src/components/portal/PortalLayout.tsx @@ -25,7 +25,7 @@ export function PortalLayout() { const searchRef = useRef(null); const [rolling, setRolling] = useState(false); - useEffect(() => applyPortalScheme('chilled'), []); + useEffect(() => applyPortalScheme('slate'), []); useMatureSync(); const playRandom = async () => { diff --git a/frontend/src/components/portal/schemes.ts b/frontend/src/components/portal/schemes.ts index ec3de44..669d163 100644 --- a/frontend/src/components/portal/schemes.ts +++ b/frontend/src/components/portal/schemes.ts @@ -8,8 +8,8 @@ export interface PortalScheme { } export const PORTAL_SCHEMES = { - chilled: { - label: 'Chilled', + slate: { + label: 'Slate', tokens: { '--p-bg': '#4c6878', '--p-bg-mix': '#2f4553',