max / makenotwork

5.2 KB · 117 lines History Blame Raw

1	# Custom Pages
2
3	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.
4
5	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.
6
7	## What you can customize
8
9	- Your profile (`u.makenot.work/yourname`) — full HTML and CSS.
10	- Each project (`u.makenot.work/yourname/project-slug`) — full HTML and CSS.
11	- 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.
12
13	## The editor
14
15	Open it from Settings > Profile > Custom page, or a project's Settings > Custom page.
16
17	- Two editors: one for HTML, one for CSS.
18	- A live preview updates as you type.
19	- 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.
20	- Save and publish makes your changes live. Reset to default clears everything back to the standard page.
21
22	Edits autosave to a private draft while you work, so the preview reflects your changes without touching the live page until you publish.
23
24	## What HTML is allowed
25
26	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`.
27
28	Media: `img`, `picture`, `source`, `video`, `audio`, `track`, `figure`, `figcaption`.
29
30	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.
31
32	Links and media must point to Makenot.work. External `href`s and `src`s are stripped and listed in the blocked panel.
33
34	## What CSS is allowed
35
36	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:
37
38	- `@import` is not allowed (it would pull in off-platform CSS). Put everything in the one editor.
39	- `url(...)` must resolve to Makenot.work — your own uploaded files, or the built-in assets below.
40	- `@font-face` works, but its `src` must be on-platform.
41	- Selectors like `html`, `body`, and `:root` are scoped to your canvas, so put CSS variables on a wrapper element rather than `:root`.
42	- Fast strobing animations are capped; a reduced-motion fallback is added automatically.
43
44	## System slots
45
46	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.
47
48	## Using your own files
49
50	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.
51
52	## Built-in assets
53
54	Because pages reference only Makenot.work, we ship a small set of on-platform assets you can use without uploading anything.
55
56	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:
57
58	```css
59	@font-face {
60	font-family: "Plex Mono";
61	src: url(/static/fonts/IBMPlexMono-Regular.woff2) format("woff2");
62	}
63	.code { font-family: "Plex Mono", monospace; }
64	```
65
66	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`.
67
68	```css
69	.hero {
70	background-color: #0c1a2c;
71	background-image: url(/static/patterns/diagonal.svg);
72	}
73	```
74
75	## Examples
76
77	A simple hero on a project page:
78
79	```html
80	<section class="hero">
81	<h1>Field Recordings, Vol. 3</h1>
82	<p>Twelve tracks from a winter in the Cascades.</p>
83	</section>
84	```
85
86	```css
87	.hero {
88	padding: 4rem 2rem;
89	text-align: center;
90	background: #10243a;
91	color: #eef;
92	}
93	.hero h1 { font-size: 2.5rem; margin: 0 0 .5rem; }
94	```
95
96	Styling a system slot so it fits the page:
97
98	```css
99	.mnw-buy {
100	border: 2px solid #eef;
101	border-radius: 8px;
102	background: #0c1a2c;
103	}
104	.mnw-buy-cta { background: #eef; color: #10243a; }
105	```
106
107	A responsive two-column layout:
108
109	```css
110	.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
111	@media (max-width: 700px) { .grid { grid-template-columns: 1fr; } }
112	```
113
114	## Moderation
115
116	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.
117