Skip to main content

Custom Pages

Write your own HTML and CSS for your profile and project pages. Custom pages are served from u.makenot.work, so your styling never collides with the rest of the platform.

The one rule: a custom page references only Makenot.work. No external scripts, no third-party images or fonts, no tracking. Everything you use lives on the platform. This keeps your page private for your visitors, free of surprise third-party loads, and working for as long as Makenot.work is around.

What you can customize

  • Your profile (u.makenot.work/yourname) — full HTML and CSS.
  • Each project (u.makenot.work/yourname/project-slug) — full HTML and CSS.
  • Item pages inherit their parent project’s CSS automatically. There is no separate item editor: style your items by styling the project. A project’s buy button, file list, and price slots carry its look onto every item.

The editor

Open it from Settings > Profile > Custom page, or a project’s Settings > Custom page.

  • Two editors: one for HTML, one for CSS.
  • A live preview updates as you type.
  • A Blocked references panel lists anything the sanitizer stripped, with the reason. This is how you learn the rules: if a link points off-platform, it shows up here and is dropped.
  • Save and publish makes your changes live. Reset to default clears everything back to the standard page.

Edits autosave to a private draft while you work, so the preview reflects your changes without touching the live page until you publish.

What HTML is allowed

Structure and text: div, section, article, header, footer, nav, main, aside, h1–h6, p, ul, ol, li, dl, blockquote, pre, code, table and friends, plus inline tags like strong, em, a, span, mark, time, abbr.

Media: img, picture, source, video, audio, track, figure, figcaption.

Not allowed, and removed on save: script, style (put CSS in the CSS editor), iframe, object, embed, form and inputs, and the inline style attribute. There is no JavaScript, by design.

Links and media must point to Makenot.work. External hrefs and srcs are stripped and listed in the blocked panel.

What CSS is allowed

Almost everything. Your CSS is automatically scoped to your page’s canvas, so you cannot accidentally restyle the platform chrome around it. A few notes:

  • @import is not allowed (it would pull in off-platform CSS). Put everything in the one editor.
  • url(...) must resolve to Makenot.work — your own uploaded files, or the built-in assets below.
  • @font-face works, but its src must be on-platform.
  • Selectors like html, body, and :root are scoped to your canvas, so put CSS variables on a wrapper element rather than :root.
  • Fast strobing animations are capped; a reduced-motion fallback is added automatically.

System slots

Project and item pages include a few elements you can style but not remove: the buy/subscribe block (.mnw-buy), the file list (.mnw-files), and the item block (.mnw-item). Style them to match your page. Rules that try to hide them (for example display: none) are dropped — visitors always have a way to buy and a way to report.

Using your own files

Any file you’ve uploaded can be referenced by its on-platform URL — as an <img>, a <video>/<audio> source, or a CSS background-image. The buy button still appears for paid items; the page is your storefront, not a way around checkout.

Built-in assets

Because pages reference only Makenot.work, we ship a small set of on-platform assets you can use without uploading anything.

Fonts (/static/fonts/): Lato (Lato-Regular.woff2, Lato-Bold.woff2), IBM Plex Mono (IBMPlexMono-Regular.woff2, IBMPlexMono-Bold.woff2), and the Young Serif display face (ysrf.woff2). Use them with @font-face, or just name the system stack:

@font-face {
  font-family: "Plex Mono";
  src: url(/static/fonts/IBMPlexMono-Regular.woff2) format("woff2");
}
.code { font-family: "Plex Mono", monospace; }

Background patterns (/static/patterns/): tileable SVGs in a neutral gray that sit on light or dark backgrounds — dots.svg, grid.svg, diagonal.svg, checker.svg.

.hero {
  background-color: #0c1a2c;
  background-image: url(/static/patterns/diagonal.svg);
}

Examples

A simple hero on a project page:

<section class="hero">
  <h1>Field Recordings, Vol. 3</h1>
  <p>Twelve tracks from a winter in the Cascades.</p>
</section>

.hero {
  padding: 4rem 2rem;
  text-align: center;
  background: #10243a;
  color: #eef;
}
.hero h1 { font-size: 2.5rem; margin: 0 0 .5rem; }

Styling a system slot so it fits the page:

.mnw-buy {
  border: 2px solid #eef;
  border-radius: 8px;
  background: #0c1a2c;
}
.mnw-buy-cta { background: #eef; color: #10243a; }

A responsive two-column layout:

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 700px) { .grid { grid-template-columns: 1fr; } }

Moderation

Custom pages are public and subject to the acceptable-use policy. Pages that violate it can be cleared by moderators; your original source is preserved so it can be restored on a successful appeal. Questions go to info@makenot.work.