https://github.com/nndda/itchio-profile
HTML & CSS source code and build pipelines for my itch.io profile page's content. Live at https://nnda.itch.io
https://github.com/nndda/itchio-profile
css front-end itch itchio
Last synced: about 1 month ago
JSON representation
HTML & CSS source code and build pipelines for my itch.io profile page's content. Live at https://nnda.itch.io
- Host: GitHub
- URL: https://github.com/nndda/itchio-profile
- Owner: nndda
- License: mit
- Created: 2024-10-10T14:14:14.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2026-05-28T08:03:09.000Z (about 1 month ago)
- Last Synced: 2026-05-28T08:22:44.825Z (about 1 month ago)
- Topics: css, front-end, itch, itchio
- Language: TypeScript
- Homepage: https://nnda.itch.io/
- Size: 591 KB
- Stars: 31
- Watchers: 1
- Forks: 16
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
nnda.itch.io
Source code for my itch.io profile page.
Main stylesheet: [`src/styles.css`](src/styles.css)
｜
Profile content: [`src/content.html`](src/content.html)
## Devlog
- May 28th 2026 — [Profile Page Updates: Time is Ticking...](https://itch.io/blog/1536605/profile-page-updates-time-is-ticking)
- March 15th 2026 — [Profile Page Updates: Little Updates](https://itch.io/blog/1459365/profile-page-update-little-updates)
- May 23rd 2025 — [Profile Page Updates: Documentation](https://itch.io/blog/950966/profile-page-updates-documentation)
## Page theme settings
Settings used in the itch.io profile page's theme editor.
Theme setting
Value
Color
BG
`#15141B`
Text
`#E7E9E8` (match `--text` CSS variable)
Link
`#EAEAEA` (match `--link` CSS variable)
Text
Font
`Zen Kaku Gothic New`
Size
`96`
Images
Size
`Full width`
My Projects
Layout
`Grid`
B. Radius
`0`
Collections
Layout
`List`
## Requirements
- [git](https://git-scm.com/)
- GitHub account
- [Bun](https://bun.com/)
## Installation
0. Star this repository?? 👉👈 (optional)
1. [Fork](https://github.com/nndda/itchio-profile/fork) this repository, and clone your fork locally.
1. Install the dependencies.
```
bun install
```
1. Modify the [`src/styles.css`](src/styles.css) and/or the [`src/content.html`](src/content.html) to your liking.
See the [Development](#development) section.
1. Edit `package.json`, and bump the `version` field. e.g. from `1.2.0` to `1.3.0`.
1. Build the CSS.
```
bun run build
```
1. Test the CSS and the HTML, by copy-pasting the content of `dist/test.css` and `dist/content.html` to your itch.io profile page.
1. If everything's fine and ready, publish your updates.
```
bun run publish
```
And then copy-paste the CSS from `dist/styles.css` to your itch.io profile page's CSS field, and `dist/content.html` to your profile content, and save it.
> [!IMPORTANT]
> If you've only changed the HTML, there's no ***need to bump the version and publish the update*** via `bun run publish`, as that is only for the CSS updates.
>
> You should, however, run the `bun run build`, and then commit and push the changes to the HTML files yourself.
## Development
How I update and develop my profile page with its HTML and CSS.
I use Firefox, because it has a nice CSS editor feature on its dev tool.
1. Open your itch.io profile page. And clear out the custom CSS field (just clear it out, you don't need to save it).
2. Open the Firefox Web Developer Tools by pressing f12 or Ctrl + Shift + I.
3. Go to the `Style Editor` tab, and import the CSS source file `src/styles.css`.
You can start working with the CSS from here. And save your changes by pressing Ctrl + S.
> [!IMPORTANT]
> When importing CSS file that has unicode characters in it (like this CSS),
> Firefox might break those characters.
>
> To fix that:
> 1. Open the CSS in your favourite text editor.
> 2. Select and copy ALL of the content.
> 3. Go back to the Firefox `Style Editor`, and paste over the imported CSS, **overwriting** it.
As for editing the HTML, I just copy-paste the content of `src/content.html` to the `.user_profile.formatted` element on the `Inspector` tab. Edit it there, and copy it back to the `src/content.html` HTML file.
## Icons
Most of the icons are from [Font Awesome](https://fontawesome.com/), that is merged, and subsetted ([`src/icons.txt`](src/icons.txt)).
```sh
bun install
pip install fonttools brotli
pyftmerge \
node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2 \
node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2 \
--output-file=merged.woff2 \
--verbose
pyftsubset merged.woff2 \
--unicodes-file=src/icons.txt \
--flavor=woff2 \
--no-hinting \
--desubroutinize \
--ignore-missing-glyphs \
--ignore-missing-unicodes \
--output-file=dist/i.woff2 \
--verbose
rm merged.woff2
```
## Why all these setup just for HTML and CSS??
CSS on itch.io's profile page is limited to only ***5120 characters***. And so, the whole build pipeline is made as a workaround for that limitation. The idea is:
1. If the CSS' characters count exceeded 5120, split it to two.
2. One 'main' CSS, that will be copy-pasted directly onto the profile page.
3. The other half of the CSS will be imported, using CSS' `@import`, via [jsDelivr](https://www.jsdelivr.com/). Hence the need of versioning, as jsDelivr caches aggressively.
> [!WARNING]
> Because of the nature of `@import` in CSS, it will cause [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) on the profile page.
## License
[MIT licensed](LICENSE) :)