Skip to main content

max / makenotwork

3.6 KB · 67 lines History Blame Raw
1 <style>
2 /* Platform chrome for custom pages. Lives outside the user canvas, so creator
3 CSS (scoped to .user-canvas / .item-canvas) can never restyle or hide it.
4 Deliberately minimal and theme-independent.
5
6 STAYS INLINE. Asked and answered 2026-08-16.
7
8 The guarantee is structural, not a cascade contest. css_sanitizer.rs
9 re-emits every creator rule nested inside .user-canvas#uc-{owner}; the
10 header and footer are siblings of that canvas, so a creator selector
11 naming .mnw-chrome is emitted under the canvas and matches nothing. No
12 specificity, layer or !important is involved, which is why this block
13 needs none. Demonstrated by css_sanitizer.rs's
14 platform_chrome_is_unreachable_from_creator_css, which walks eight escape
15 attempts including `*`, `html body .mnw-chrome-brand` and `:root`.
16
17 So a cascade layer would buy nothing here, and these pages have none to
18 join: custom/*.html are standalone documents that do not go through
19 shell.rs, link no stylesheet, and never emit the `@layer makeover, base,
20 components, responsive` statement. Moving these lines into style.css
21 would pull the whole platform sheet onto every creator page and put every
22 platform class in scope on the one surface built for creator control.
23
24 A separate linked chrome.css would be cacheable, and is still not worth
25 it: ~1.3KB against a second request, and a fetch that fails leaves the
26 chrome unstyled while the creator's inline CSS still renders. Inline
27 cannot fail that way. Revisit only if this block grows past the point
28 where its bytes beat the round trip. */
29 html, body { margin: 0; padding: 0; }
30 /* NOT the house font, and deliberately so. The typography standard covers
31 MNW's own frontends; this is a creator's document with our chrome strip on
32 it, and the body element belongs to them. Pulling Quasi Body in here would
33 restyle their page and fetch 81KB onto it to do so, neither of which they
34 asked for. The chrome bar below inherits it for the same reason: one face
35 on the page is the creator's choice, and two would be worse than a
36 compromise. */
37 body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
38 .mnw-chrome, .mnw-chrome-footer {
39 background: #161616; color: #e9e9e9; font-size: .85rem; line-height: 1.4;
40 }
41 .mnw-chrome {
42 display: flex; justify-content: space-between; align-items: center;
43 gap: 1rem; padding: .55rem 1rem; border-bottom: 1px solid #2c2c2c;
44 }
45 .mnw-chrome a, .mnw-chrome-footer a { color: #e9e9e9; text-decoration: none; }
46 .mnw-chrome a:hover, .mnw-chrome-footer a:hover { text-decoration: underline; }
47 .mnw-chrome-brand { font-weight: 600; letter-spacing: .01em; }
48 .mnw-chrome-actions { display: flex; gap: 1rem; }
49 .mnw-chrome-footer {
50 padding: 1rem; text-align: center; border-top: 1px solid #2c2c2c;
51 color: #9a9a9a;
52 }
53 /* Canvas baseline so an unstyled page is still readable. */
54 .user-canvas, .item-canvas { min-height: 50vh; padding: 1rem; box-sizing: border-box; }
55 /* System slots: visible defaults the creator can restyle but not remove. */
56 .mnw-buy, .mnw-item {
57 margin: 1.5rem 0; padding: 1rem; border: 1px solid currentColor; border-radius: 4px;
58 }
59 .mnw-buy-cta, .mnw-item-cta {
60 display: inline-block; margin-top: .5rem; padding: .4rem .9rem;
61 border: 1px solid currentColor; border-radius: 4px; font-weight: 600;
62 }
63 .mnw-files { margin: 1.5rem 0; padding: 0; list-style: none; }
64 .mnw-files li { padding: .35rem 0; border-bottom: 1px solid currentColor; }
65 .mnw-price { font-weight: 600; }
66 </style>
67