{"id":51153127,"url":"https://github.com/brandonhon/press-start","last_synced_at":"2026-06-26T08:01:48.739Z","repository":{"id":364375439,"uuid":"1267655807","full_name":"brandonhon/press-start","owner":"brandonhon","description":"A side-scrolling 16/32-bit JRPG personal homepage theme for Zola — parallax pixel world, sprite hero, SNES-style HUD.","archived":false,"fork":false,"pushed_at":"2026-06-12T20:23:25.000Z","size":280,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-12T20:23:44.093Z","etag":null,"topics":["pixel-art","retro","theme","zola","zola-theme"],"latest_commit_sha":null,"homepage":"https://brandonhon.github.io/press-start/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brandonhon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-12T18:37:35.000Z","updated_at":"2026-06-12T20:08:15.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/brandonhon/press-start","commit_stats":null,"previous_names":["brandonhon/press-start"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/brandonhon/press-start","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonhon%2Fpress-start","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonhon%2Fpress-start/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonhon%2Fpress-start/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonhon%2Fpress-start/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brandonhon","download_url":"https://codeload.github.com/brandonhon/press-start/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonhon%2Fpress-start/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34808043,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-26T02:00:06.560Z","response_time":106,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["pixel-art","retro","theme","zola","zola-theme"],"created_at":"2026-06-26T08:01:45.908Z","updated_at":"2026-06-26T08:01:48.731Z","avatar_url":"https://github.com/brandonhon.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Press Start — a Zola theme\n\nA side-scrolling 16/32-bit JRPG personal homepage, built as a content-driven\n[Zola](https://www.getzola.org/) theme. The whole site is a single parallax\n\"quest\": a fixed pixel world, a walking sprite hero, an SNES-style HUD, and your\ncontent rendered as story dialogs, *GOT ITEM!* project cards, and quest-scroll\nblog dispatches.\n\nThe world/sprite engine and core styling are art-directed and fixed; everything a\nsite owner would want to change is plain text in `config.toml` and `content/`. The\nfiles ship with **demo content** (a fictional developer, *Alex Pixelsmith* at\n`example.com`) — replace it with your own.\n\n**▸ Live demo: \u003chttps://brandonhon.github.io/press-start/\u003e**\n\n[![Press Start — scrolling through the pixel quest world](preview-quest.gif)](https://brandonhon.github.io/press-start/)\n\n## Install\n\nRequires Zola ≥ 0.19.\n\nAdd the theme to your site's `themes/` directory:\n\n```bash\ncd themes\ngit clone https://github.com/brandonhon/press-start.git\n# or, as a submodule:\n# git submodule add https://github.com/brandonhon/press-start.git themes/press-start\n```\n\nEnable it at the **top level** of your `config.toml` (not under `[extra]`):\n\n```toml\ntheme = \"press-start\"\n```\n\nThen give it content. The quickest start is to copy this repo's demo as a template\nand edit it:\n\n- the `[extra]` blocks and `[[extra.*]]` tables from this repo's `config.toml`\n- `content/_index.md`, `content/projects/`, and `content/blog/`\n- `static/favicon.svg`\n\nThe theme provides `templates/`, `sass/`, and `static/js/`; you provide your own\n`content/` and `config.toml`. Override any theme file by creating the same path in\nyour own `templates/` or `static/` — see the\n[Zola theme docs](https://www.getzola.org/documentation/themes/installing-and-using-themes/).\n\n## Preview the demo\n\nThis repository is itself a runnable demo site:\n\n```bash\nzola serve     # dev server with live reload at 127.0.0.1:1111\nzola build     # static output to ./public\n```\n\nBefore deploying your own site, set `base_url` in `config.toml` and replace the\ndemo content.\n\n## What you configure vs. what's theme-level\n\n**You configure (no template/CSS editing):**\n\n| Thing | Where |\n| --- | --- |\n| Site title, description, `base_url` | `config.toml` |\n| Favicon | `config.toml [extra].favicon` + `static/` |\n| Smooth scrolling (desktop) | `config.toml [extra].smooth_scroll` |\n| CRT scanlines + vignette | `config.toml [extra].crt` |\n| Under-construction holding page | `config.toml [extra].under_construction` |\n| HUD text (name, level, HP/XP, labels, zone, scroll hint) | `config.toml [extra.hud]` |\n| Menu items — labels **and** targets/anchors | `config.toml [extra.menu]` + `content/_index.md` anchors |\n| Card badges + `READ`/`MIN` + back-link labels | `config.toml [extra.labels]` |\n| 404 / GAME OVER copy | `config.toml [extra.notfound]` |\n| Contact signpost | `config.toml [[extra.contact]]` |\n| Homepage title screen, story, dialogs, intros, end credits, per-section sky/zone/anchor | `content/_index.md` |\n| Projects (cards) | `content/projects/*.md` |\n| Dispatches (blog) | `content/blog/*.md` |\n\n**Theme-level (the art direction — edit the source if you want to retheme):**\n\n| Thing | Where |\n| --- | --- |\n| The pixel world (clouds, mountains, trees, houses) + hero sprite | `static/js/quest.js` (pixel-grid data) |\n| Sky / time-of-day color palettes | `static/js/quest.js` (`SKIES`) |\n| Color tokens, fonts, layout, CRT effect | `sass/main.scss` (`:root` + rules) |\n| Project-icon pixel art | `templates/macros/world.html` (`project_icon`) |\n| Decorative glyphs (`▼` `►` `📍`) | templates |\n\n## Structure\n\n```\nconfig.toml              # site + HUD + menu + badges + 404 + favicon + contact\ncontent/\n  _index.md              # the homepage \"quest\" — all narrative lives in [extra]\n  projects/              # THE WORKSHOP — one file per \"GOT ITEM!\" card\n  blog/                  # THE OLD LIBRARY — one file per quest-scroll dispatch\ntemplates/\n  base.html              # shared shell (world/HUD/menu/CRT); gates the construction page\n  index.html             # the scrolling homepage, assembled from content\n  section.html           # full /projects and /blog listings\n  page.html              # a single dispatch, styled as a reading scroll\n  404.html               # GAME OVER\n  construction.html      # the under-construction holding page (when toggled on)\n  macros/world.html      # project_icon() pixel-sprite macro\nsass/main.scss           # all styling (prototype CSS + nav, reading view, responsive)\nstatic/\n  js/quest.js            # parallax, sprite animation, sky/zone, XP ramp, menu, blips\n  js/construction.js     # the under-construction scene (hero hammering beehives)\n  js/lenis.min.js        # vendored Lenis (only loaded when smooth_scroll is on)\n  favicon.svg            # pixel-heart favicon (swap it for your own — see below)\ntheme.toml               # theme metadata\ndocs/index.html          # the original standalone prototype (reference only)\n```\n\n## Navigation \u0026 HUD\n\nEvery page sits inside a fixed chrome shell:\n\n- **HUD** — HP/XP bars, the player name, and a bottom zone tag + \"scroll to move\"\n  hint. The XP bar ramps as you scroll; the hint hides at the end of the page.\n- **Warp menu** — fast-travel links to the on-page zones (`VILLAGE`, `WORKSHOP`,\n  `LIBRARY`, `CROSSROADS`) plus the standalone `PROJECTS` (`/projects`) and\n  `DISPATCHES` (`/blog`) pages. Responsive:\n  - **≥ 1100px** — an always-visible links bar, aligned on the HP/XP line.\n  - **721–1099px** — the same bar, just below the HP/XP boxes.\n  - **≤ 720px** — collapses to a tap-to-open `MENU` dropdown.\n- **Back-to-top** — a pixel button that fades in once you scroll.\n- **Smooth scrolling** — with `[extra].smooth_scroll = true` (default), desktop gets\n  inertial scrolling via [Lenis](https://github.com/darkroomengineering/lenis) so the\n  parallax glides like it does on a phone. It only activates for fine pointers and never\n  under `prefers-reduced-motion`, and the library is **lazy-loaded** — phones (already\n  inertial) never download it. Set it to `false` for plain native scrolling.\n- **CRT overlay** — full-screen scanlines + vignette, on by default. Set\n  `[extra].crt = false` to drop both (they're the heaviest paint cost, so it's worth\n  disabling on software-rendered browsers).\n\n## Configuring text — `config.toml [extra]`\n\n**HUD** — every label and value:\n\n```toml\n[extra.hud]\nname        = \"A. PIXELSMITH\"\nlevel       = 12\nlevel_label = \"LV\"\nhp          = \"120/150\"\nhp_pct      = 80           # HP bar fill (0–100)\nhp_label    = \"HP\"\nxp_label    = \"XP\"\nxp_start    = 220          # XP counter start (ramps to xp_max on scroll)\nxp_max      = 1200\nstart_zone  = \"PIXEL FOREST\"\nzone_label  = \"ZONE\"\nscroll_hint = \"▼ SCROLL TO MOVE ▼\"\n```\n\n**Menu** — `label` is the mobile toggle word; each `[[extra.menu.items]]` is a\nbutton. Add, remove, and reorder freely. A `target` is one of:\n\n| `target` | goes to |\n| --- | --- |\n| `\"#village\"` | an on-page **anchor** (must match a section's `anchor` — see below) |\n| `\"@/blog/_index.md\"` | an internal Zola **page** |\n| `\"https://…\"` | an external **URL** |\n\n```toml\n[extra.menu]\nlabel = \"MENU\"\n\n[[extra.menu.items]]\nlabel  = \"VILLAGE\"\ntarget = \"#village\"\n\n[[extra.menu.items]]\nlabel  = \"PROJECTS\"\ntarget = \"@/projects/_index.md\"\n```\n\n**Where anchors land:** any homepage section can declare an `anchor` in\n`content/_index.md` (e.g. `anchor = \"village\"`). Clicking a `#village` menu item\nsmooth-scrolls so that section's **dialog box sits high in the sky** — the houses\nand the hero stay visible beneath it. (The landing offset is the\n`scroll-margin-top` on `.dialog, .story-box` in `sass/main.scss` — bump it to land\nboxes lower.)\n\n**Card badges + small affordances:**\n\n```toml\n[extra.labels]\ngot_item        = \"★ GOT ITEM!\"     # project cards\nquest_log       = \"📜 QUEST LOG\"     # blog scroll cards\ncrossroads      = \"✦ CROSSROADS ✦\"   # contact signpost\ndispatch        = \"📜 DISPATCH\"       # single post reading view\nread            = \"▶ READ —\"         # dispatch card read affordance\nmin             = \"MIN\"              # reading-time unit\nback_to_section = \"◄ BACK\"           # a post → its section\nback_to_home    = \"◄ RETURN TO THE QUEST\"   # a section → home\n```\n\n**404 / GAME OVER screen:**\n\n```toml\n[extra.notfound]\nzone    = \"THE VOID\"\nsky     = \"night\"\nheading = \"GAME OVER\"\nmessage = \"This screen does not exist in the known world.\"\nlink    = \"— PRESS START TO CONTINUE —\"\n```\n\n**Contact signpost** — one entry per road (`href` is optional):\n\n```toml\n[[extra.contact]]\nkind = \"EMAIL\"\nwho  = \"hello @ example.com\"\nhref = \"mailto:hello@example.com\"\n```\n\n## The homepage story — `content/_index.md`\n\nThe title screen, story crawl, the about dialogs, the section intros, and the end\ncredits are all structured data under `[extra]`. Each story/dialog screen sets its\nown `zone` and `sky` (`dawn`, `morning`, `day`, `afternoon`, `dusk`, `night`),\nwhich drives the parallax sky transition as you scroll past it. Paragraph strings\nmay contain inline HTML (e.g. `\u003cem\u003e`). `blog_count` (default 3) controls how many\ndispatches appear on the homepage.\n\n**The title screen:**\n\n```toml\n[extra.title]\nsmall     = \"★ A PERSONAL HOMEPAGE QUEST ★\"   # tiny line above\nmain      = \"PIXELSMITH\"                       # the large title word\nsub       = \"A QUEST IN 32 BITS\"               # line below\npress     = \"▼ PRESS DOWN TO START ▼\"\ncopyright = \"© MMXXVI EXAMPLE.COM — ALL ADVENTURES OBSERVED\"\n```\n\n`main` is the big word; it auto-scales to the viewport (`clamp()`), so it shrinks\non phones and caps out on desktop. One short word reads best (the display font is\nwide). To change the min/max sizes, edit `.title-screen h1` in `sass/main.scss`.\n\n## A project — `content/projects/\u003cname\u003e.md`\n\n```toml\n+++\ntitle = \"FORGE\"\nweight = 1                 # controls card order\n[extra]\nicon = \"ember\"             # ember | server | paper\nstatus = \"★ STATUS: ACTIVE ★\"\n+++\nThe card body. One short paragraph of Markdown.\n```\n\n## A dispatch — `content/blog/\u003cslug\u003e.md`\n\n```toml\n+++\ntitle = \"ON WRITING HONEST CODE\"\ndate = 2026-06-09\n[extra]\nvolume = \"VOL. I\"\ndispatch = \"DISPATCH 06\"\nread_min = 11              # optional; falls back to Zola's reading_time\nsummary = \"One-line teaser shown on the scroll card.\"\n+++\nFull post body in Markdown…\n```\n\nThe homepage shows the latest `blog_count` dispatches; the full list lives at\n`/blog`. Clicking a scroll opens the dispatch in a readable panel that keeps the\nworld and HUD intact.\n\n## Favicon\n\nThe theme ships a pixel-heart favicon at `static/favicon.svg`. To use your own,\neither overwrite that file, or drop any image into `static/` and point the config\nat it:\n\n```toml\n[extra]\nfavicon = \"favicon.svg\"   # any file in static/ — \"favicon.png\", \"icons/me.svg\", …\n```\n\nIt's a plain SVG of `\u003crect\u003e`s on a 16×16 grid, so you can recolor or redraw it by\nhand to match your palette.\n\n## Under-construction page\n\nFlip the whole site to a single no-scroll holding page — the pixel hero shuffling\nbetween three beehives, swinging a hammer (sparks, drifting bees, hazard tape):\n\n![Under construction — the hero hammering beehives](preview-construction.gif)\n\n```toml\n[extra]\nunder_construction = true\nuc_title   = \"UNDER CONSTRUCTION\"\nuc_message = \"This corner of the kingdom is being built. Mind the bees.\"\n```\n\nWith it on, **every** URL serves the holding page (the quest, blog, and projects\nare hidden until you flip it back to `false`). The scene is in\n`templates/construction.html` + `static/js/construction.js`.\n\n## Adding a project icon\n\nIcons are tiny inline pixel SVGs. Add a branch to the `project_icon` macro in\n`templates/macros/world.html` and reference it via `icon = \"yourname\"` in a\nproject's front matter. (This is pixel art, so it lives in a template rather than\nconfig.)\n\n## Retheming\n\nThe look is intentionally art-directed, but it's all in two files:\n\n- **Colors \u0026 type** — the `:root` custom properties at the top of `sass/main.scss`.\n- **Sky palettes** — the `SKIES` object in `static/js/quest.js` (one entry per\n  time of day).\n\n## License\n\nMIT — see [LICENSE](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrandonhon%2Fpress-start","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrandonhon%2Fpress-start","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrandonhon%2Fpress-start/lists"}