# 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 `href`s and `src`s 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:

```css
@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`.

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

## Examples

A simple hero on a project page:

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

```css
.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:

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

A responsive two-column layout:

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