nnda.itch.io

Source code for my itch.io profile page.

Main stylesheet: src/styles.css ｜ Profile content: src/content.html

Devlog

• May 23^rd 2025 — Profile Page Updates: Documentation
• March 15^th 2026 — Profile Page Updates: Little Updates

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
• GitHub account
• Bun

Installation

0. Star this repository?? 👉👈 (optional)

1. Fork this repository, and clone your fork locally.

2. Install the dependencies.

   bun install
   

3. Modify the src/styles.css and/or the src/content.html to your liking.

   See the Development section.

4. Edit package.json, and bump the version field. e.g. from 1.2.0 to 1.3.0.

5. Build the CSS.

   bun run build
   

6. 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.

7. 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.

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. Hence the need of versioning, as jsDelivr caches aggressively.

Warning

Because of the nature of @import in CSS, it will cause FOUC on the profile page.

License

MIT licensed :)