diff --git a/src/help/book.md b/src/help/book.md new file mode 100644 index 0000000..ae69f21 --- /dev/null +++ b/src/help/book.md @@ -0,0 +1,111 @@ +# Book + +Multi-page reflowable book with cover, designed pages, reflow +chapters, masters, PDF export, and full-screen Reader Mode. + +> Hands-on walkthrough: see [`BOOK_DESIGNER_TUTORIAL.md`](https://github.com/PR0M3TH3AN/Artstr-Studio/blob/main/docs/BOOK_DESIGNER_TUTORIAL.md). +> Spec: see [`BOOK_DESIGNER_FEATURE.md`](https://github.com/PR0M3TH3AN/Artstr-Studio/blob/main/docs/BOOK_DESIGNER_FEATURE.md). + +## Starting + +When you enter Book mode with no pages, four starter cards appear +(US Trade / A5 / A4 / Square). Clicking one seeds a default master +with a text-frame, a starter chapter, and a Title page. + +A 5th card appears when you have a slide deck loaded — **Convert +deck to book** turns each slide into a designed page (letterbox-fit +into the trim). + +## The two main views + +- **Pages overview** — every manifest entry as a tile (designed + pages + reflow chapters). Drag to reorder. Hover for per-tile + actions (proof PDF, duplicate, delete, master picker). +- **Cover** — wraparound spread editor. Front / spine / back panels + selected via the layer-target dropdown. + +Plus two **per-entry** views: + +- **Designed page editor** — same flat-canvas tools as Custom Art, + scoped to one `book-page:` target. Master layers render + underneath at 55% opacity. +- **Chapter editor** — markdown-on-left, paginated preview on right. + CodeMirror with markdown syntax + smart Enter for list + continuation. + +## Masters + +Reusable underlays. A master with a **text-frame** layer becomes a +valid reflow target — the chapter's prose flows into that frame. +Header / footer text on the master can use **tokens** that resolve +per page: + +- `{page-number}`, `{page-count}`, `{physical-page-count}` +- `{book-title}`, `{book-author}` +- `{chapter-title}`, `{chapter-number}` + +## Markdown features in chapters + +- GFM headings / lists / blockquotes / code / tables / task lists. +- Nested lists (up to depth 6). +- `[^N]` footnote refs + `[^N]: definition` for footnote bodies + (renders as Unicode superscript + chapter-end Footnotes section). +- `^[term]` invisible index markers. +- `[link text](#chapter-3)` cross-references — auto-appended with + ` (p. N)` at render time. +- Magic tokens on their own line: + - `{toc}` — auto-generated table of contents with page numbers. + - `{index}` — alphabetical index of every `^[term]` marker. + +## Publishing + +Sidecar-architecture: each surface publishes as its own Nostr event. + +| Surface | Event | d-tag | +|---------|-------|-------| +| Designed page | kind-30078 `casewrap-page` (role: 'interior') | `book-page:` | +| Master | kind-30078 `casewrap-page` (role: 'master') | `book-master:` | +| Cover | kind-30078 `casewrap-page` (role: 'cover-spread') | `book-cover:` | +| Chapter (public) | kind-30023 NIP-23 article | `chapter:` | +| Chapter (private) | kind-30078 encrypted envelope | `book-chapter:` | +| Manifest | kind-30078 `casewrap-book` | `book:` | + +The manifest references its sidecars via `{kind, pubkey, dTag}` +coords + emits matching `link` tags so external clients can +resolve them. + +Publish each surface first (via the per-editor Publish buttons), +then the manifest (top-bar Publish). + +## Private path + +Toggle the sidebar **🔒 Private** chip. Every subsequent publish +(manifest + sidecars) goes through the encrypted envelope path +(AES-256-GCM, key wrapped to your own pubkey via NIP-44 / NIP-04). +Re-opens decrypt automatically. + +## Reader Mode + embed + +- **▶ Read** opens a full-screen page-flip viewer with TOC sidebar, + keyboard nav, click-to-flip, and prefetch. +- The published manifest's `naddr` works in the embed iframe via + `?book=` (cut-down Reader Mode without TOC). + +## PDF export + +The **Export PDF…** modal exposes: + +- Page range (All / from–to). +- Include cover spread. +- Include bleed margin. +- Crop marks (L-marks at trim corners). +- Single vs split output (interior + cover separate). +- Filename pattern. + +Reflowed prose using Times / Helvetica / Courier-family fonts emits +as real PDF text (vector, selectable, searchable). Other fonts fall +back to vector raster + warning. + +**📄 Proof PDF** in any editor toolbar exports just that single +page / chapter — useful for a printer paper-and-colour proof +before committing to the full book. diff --git a/src/help/cover.md b/src/help/cover.md new file mode 100644 index 0000000..d9b8157 --- /dev/null +++ b/src/help/cover.md @@ -0,0 +1,49 @@ +# Case cover wrap + +A printable wraparound for DVD, Blu-ray, softcover, or any +back + spine + front case format. + +## Geometry + +- **Trim** — outer cut line. +- **Bleed** — extends past the trim on each outer edge so the + printer's cut tolerance doesn't reveal white. +- **Spine** — middle strip whose width depends on the case style + (DVD = 14 mm, Blu-ray = 11 mm, etc). +- **Safe area** — interior margin you should keep text + key art + inside. + +Pick a preset in the sidebar (DVD / Blu-ray / U-Card / Custom) or +enter your own panel width + trim height + spine + bleed under the +**Custom** preset. + +## Artwork modes + +- **Combined wraparound** — one canvas spanning the full + back+spine+front. Best for continuous artwork. +- **Slots** — separate back / spine / front layers. Best for posters + + spine text + back-cover layout. + +## Slots panel + +When you're in slot mode, each panel exposes: + +- A drop-zone for an image or a published cover design from Nostr. +- Fit (`cover` / `contain` / `fill` / `none`), zoom, position offsets, + rotation. +- Show / hide for testing different layouts. + +## Spine text + +The **Spine label** input adds a vertical text caption along the +spine. Family + weight + colour controls in the right options pane. + +## Common gotchas + +- The **show guides** checkbox toggles trim + bleed lines on the + canvas; **show crops** adds the cut marks. Both stay off in the + exported file unless you also enable the matching **print** options. +- Switching presets resets panel widths to that preset's defaults — + if you've customised, save first. +- Publishing posts a `casewrap-cover` event with the same flat + payload anyone can fork. diff --git a/src/help/customart.md b/src/help/customart.md new file mode 100644 index 0000000..9dd306c --- /dev/null +++ b/src/help/customart.md @@ -0,0 +1,57 @@ +# Custom art + +A freeform flat canvas you can size to anything from a Twitter banner +(1500×500) to a poster. The most general-purpose Artstr surface — if +your design doesn't fit one of the other modes, start here. + +## Sizing the canvas + +In the sidebar: + +- **Preset** — common social / print sizes. +- **W × H (px)** — manual override. +- **Background** — solid colour or `#ffffff` for transparent-on-export. + +The canvas is rendered at 96 DPI; the PDF/PNG export upscales to your +chosen DPI on the way out. + +## Layer types + +Custom Art accepts every layer kind in the app: + +- **Text** — full HTML rich text with bold / italic / underline / + strikethrough / link, inline-marks-aware. +- **Image** — drag-drop or pick; fit (cover / contain / fill / none), + rotate, opacity, optional clip. +- **Shape** — rectangle / ellipse / polygon / star + Pen-tool path + (full SVG-path support with anchors + handles). +- **Color block** — solid fill. +- **QR code** — input a string, choose ECC + style. +- **Pixel art** — sub-grid pixel art layer, edited via the Pixel + editor. +- **Linked design** — embeds another author's published Artstr design + as a live-resolving layer (Linked Designs feature). Right-click the + layer to expand into the linked event's full layer list and edit + pieces inline. + +## Tools + +The vertical tool palette has: +- **Select (V)** — move / scale / rotate whole layers. +- **Direct Selection (A)** — edit anchors + handles on a path. +- **Pen (P)** — Illustrator-parity pen tool (auto-add/delete anchors, + spacebar reposition, alt-drag asymmetric handles, Cmd+J join, + Cmd+Alt+J average). +- **Eyedropper (I)** — uses `window.EyeDropper` to sample any colour + on screen. +- **Pathfinder** — Unite / Subtract / Intersect / Exclude on selected + vector shapes. +- **Align / Distribute** — left/center/right + top/middle/bottom + + even-distribute. +- **Free Transform** — handles around the selection bbox for scale + + rotate. + +## Publish + +Posts a `casewrap-customart` event. Public, private (encrypted), or +premium (zap-gated) — selected in the publish-confirm modal. diff --git a/src/help/deck.md b/src/help/deck.md new file mode 100644 index 0000000..e83940c --- /dev/null +++ b/src/help/deck.md @@ -0,0 +1,64 @@ +# Slide deck + +An ordered list of slides published as a single event. Every slide's +full layer data is embedded inline — Presenter Mode + previews never +depend on additional relay fetches. + +## Sorter view + +The deck-sorter grid shows every slide as a thumbnail: + +- **+ Add slide** — append a blank slide. +- **Import PowerPoint (.pptx)** — imports `.pptx` files via a + vendored parser. Shapes, text runs, images, charts, tables, theme + fills, and slide notes all convert. +- **→ Convert to book** — turn the deck into a Book Designer book + (each slide → one designed page, letterbox-fit into the trim). +- Click a thumbnail to edit that slide; the canvas opens with the + slide's layers as canvas layers. +- Drag thumbnails to reorder. Right-click for duplicate / delete. + +## Theme + +Deck-wide theme overrides under **Deck theme** in the sidebar: + +- **Font family** — applied to every slide's text layers (unless + the slide explicitly opts out via "Ignore deck theme"). +- **Background colour** — applied to every slide's canvas + background. Same opt-out applies. + +A slide can pin its own font + background by toggling **Ignore deck +theme** in the slide-editor sidebar. + +## Presenter Mode + +Click **Present** to launch a full-screen reader: + +- Arrow keys flip slides. +- **S** toggles speaker-notes overlay. +- **F** toggles fullscreen. +- **Esc** exits. +- Footer counter shows `N / total`. + +## Embed + +A published deck's `naddr` works in the embed iframe: + +```html + +``` + +The embed renders a paginated player with prev/next + a slide +counter, plus fullscreen + reduced-motion handling. + +## Publish + +Posts a `casewrap-deck` event with every slide inlined. Forks land +with the full deck intact; remixers can swap slides + republish. + +## Tips + +- For just one slide, the [Slide](#/help/slide) mode is lighter — + standalone slides import into decks as forkable units later. +- The deck's `deck.theme` overrides apply at render time only — a + slide's own `fontFamily` / `background` stay in the event payload. diff --git a/src/help/designer.md b/src/help/designer.md new file mode 100644 index 0000000..f8e8805 --- /dev/null +++ b/src/help/designer.md @@ -0,0 +1,43 @@ +# Designer tab + +The **Designer** tab opens a dedicated single-disc canvas — one +13.5 cm circular disc face, optimised for designing the kind of +reusable disc artwork you'd drop into multiple disc-label sheets. + +## When to use the Designer tab + +- You want one disc artwork to publish + reuse across many disc-label + sheets (Top / Bottom of a single sheet, or shared across multiple + releases). +- The geometry is a single circle, not a sheet. Bleed + safe-area + rings render dedicated to the circular trim instead of the + rectangular cover/jewel layout. + +## Compared to Template > Disc-label sheet + +- **Template / Disc** = a sheet with *two* disc slots side-by-side, + printed on full-page label stock. +- **Designer** = one disc design, publishable as `disc-design`. Import + it later into a sheet via the Disc-label slot picker. + +## Layers + +Layers target `designer-disc`. The single disc surface scales them in +its native pixel space (the same `discTemplate.discD` constant used +by sheet rendering), so a disc design opened standalone vs dropped +into a sheet slot renders identically. + +## Publish + +- Title + Category in **Project Metadata** are required. +- The publish event type is `casewrap-disc-design`. Other authors can + fork it or drop it into their own disc-label sheets via the sheet's + slot picker → *Browse community*. + +## Tips + +- The **Spine label** input in the sidebar applies to Disc-label + sheets, not Designer mode — leave it alone here. +- Use **Print / Save as PDF** to get a circular vector cut sheet for + test prints. Most consumer printers won't print full bleed on a + disc; check your printer's safe area before mass printing. diff --git a/src/help/disc.md b/src/help/disc.md new file mode 100644 index 0000000..83537d5 --- /dev/null +++ b/src/help/disc.md @@ -0,0 +1,43 @@ +# Disc-label sheet + +Two-up disc-label sheet, sized for full-page label stock with two disc +circles arranged vertically (Disc 1 / Disc 2). + +## Geometry + +- **Sheet** — full-page (Letter / A4) with two disc cut-outs. +- **Disc diameter** — standard CD/DVD ~118 mm with a centre hole. +- **Safe area** — interior ring that printers and label stock + tolerances tend to respect. + +## Slots: Disc 1 + Disc 2 + +Each slot accepts: + +- A local image (drop or pick). +- A previously-published **disc design** from Nostr (the standalone + `disc-design` from the Designer tab). Click **Browse community →** + inside the slot. +- Disc-level meta: title, IMDb id, language. Used for both publish + tagging and the layout's text decoration. + +You can also leave a slot empty — only the populated disc(s) emit +output. + +## Spine labels + +The **Spine labels** inputs apply to a CD/DVD spine running between +the two discs (some label stocks include a spine strip). Top label ++ bottom label render in the small strip between the two discs. + +## Publishing + +Posts a `casewrap-disc` event with both disc slot images + +spine-label text. Forks land with the full sheet preserved. + +## Tips + +- For ONE disc only, use the Designer tab instead — that's the + standalone-publishable single-disc surface. +- The Crop marks toggle in the Export fieldset adds printer cut + marks at the trim corners of each disc. diff --git a/src/help/index.md b/src/help/index.md new file mode 100644 index 0000000..fd71325 --- /dev/null +++ b/src/help/index.md @@ -0,0 +1,49 @@ +# Artstr Studio docs + +Welcome. Artstr Studio is a single-page design tool that publishes +everything to Nostr instead of a private server. Pick a topic below. + +## The two app modes + +- **[Template](#/help/template)** — print + screen artwork (cover wraps, disc + labels, jewel inserts, custom-art canvases, slides, decks, pixel art, + books). Every artboard publishes as one or more Nostr events that anyone + can fork or remix. +- **[Designer](#/help/designer)** — a reusable single-disc design surface. + Disc designs publish independently, then drop into any disc slot of a + disc-label sheet. + +## Template-mode layouts + +- **[Case cover wrap](#/help/cover)** — front + spine + back wraparound + for DVD / Blu-ray / softcover printable cases. +- **[Disc-label sheet](#/help/disc)** — two-up CD/DVD label sheet. +- **[Jewel-case insert](#/help/jewel)** — front + tray jewel inserts. +- **[Custom art](#/help/customart)** — any-aspect flat canvas. +- **[Slide](#/help/slide)** — 16:9 standalone slide with speaker notes. +- **[Slide deck](#/help/deck)** — ordered collection of slides. +- **[Pixel art](#/help/pixelart)** — palette-indexed grid editor with + multi-frame animation. +- **[Book](#/help/book)** — multi-page reflowable book with cover, + chapters, masters, PDF export, and Reader Mode. + +## Working in Nostr + +- Sign in with a browser extension (Alby, nos2x, etc) using the top- + right widget. Without one you can still author and export locally; + publishing + browsing the community requires a key. +- Every Artstr event is replaceable (NIP-33). Re-publishing under the + same d-tag updates the design in place. +- Private publishing uses NIP-44 / NIP-04 to encrypt the payload to + your own key — only you can decrypt on a fresh device. + +## Tips + +- Most modes autosave to localStorage as you edit, so you can close + the tab and come back later. Publish to Nostr to share or to back + up across devices. +- Linked Designs let you reference another author's published design + as a layer in yours. Their event is fetched and rendered live; the + manifest p-tags the contributors for attribution. +- The community browser (top-right Nostr widget) shows feeds you can + filter and import from. diff --git a/src/help/jewel.md b/src/help/jewel.md new file mode 100644 index 0000000..cadb2f6 --- /dev/null +++ b/src/help/jewel.md @@ -0,0 +1,39 @@ +# Jewel-case insert + +Front-cover + tray inserts for a standard CD jewel case. + +## Geometry + +- **Jewel front** — 4.72 × 4.72 in trim, sits behind the clear plastic + front cover. +- **Jewel tray** — 5.91 × 4.72 in trim, sits under the disc tray (with + vertical spine edges that wrap into the case sides). +- **Bleed** + **safe area** mirror the standard CD/DVD design. + +## Slots + +Both inserts pick up artwork the same way: + +- Drop in a local image, or +- **Browse community →** to pick a published design from Nostr. + +Per slot you can set fit / zoom / x / y / rotate independently. + +## Spine labels + +Left + right spine inputs feed the strips that wrap around the +tray-card sides — typically your album / movie title text. + +## Publishing + +Posts a `casewrap-jewel` event. Both inserts' images + the spine +labels live in the same event so a forker gets the complete jewel +package. + +## Tips + +- Test print at 100% on plain paper first; trim by hand and check the + fit before printing on label stock. +- For double-sided printing, the tray usually needs a flipped layout + on the back — print the same event twice with the front oriented + correctly and you'll match most consumer printers. diff --git a/src/help/pixelart.md b/src/help/pixelart.md new file mode 100644 index 0000000..de79cf2 --- /dev/null +++ b/src/help/pixelart.md @@ -0,0 +1,57 @@ +# Pixel art + +Palette-indexed grid editor for sprite work + simple animation. + +## Canvas + +- Grid sizes from 8×8 up to 128×128. +- Palette-indexed (not RGB) — every pixel is an index into the + palette block, which means animations + colour-cycling are cheap. +- Pencil / eraser / fill / eyedropper / line / rect / ellipse tools. +- Mirror X / Y for symmetric sprites. +- Flip / rotate / resize transforms. + +## Animation + +- Multi-frame timeline at the bottom of the canvas. +- Per-frame duration (ms). +- Playback preview with onion-skin of the previous frame. +- Reorder frames by drag. + +## Palette + +- HSV picker inline. +- **Eyedropper (I)** uses `window.EyeDropper` to sample any colour + on screen. +- Up to 256 palette entries; unused entries don't cost anything in + the export. + +## Import + +- **Browse community** — pulls a published pixel-art design from + Nostr as a layer. +- **Import from file** — JSON design export. +- **From image…** — pick any image, then the live side-by-side + preview tunes target W/H, colour count, and fit mode (Cover / + Fit / Stretch) before applying. Uses median-cut quantization. + +## Export + +- **PNG** at 1× / 2× / 4× / 8× / 16× / 32× (transparent or solid bg, + optional grid lines). +- **Sprite sheet PNG** — every frame tiled in a Grid or Row layout. +- **Animated GIF** — inline GIF89a encoder, no vendored dependency + (palette-indexed input is what GIF expects natively). + +## Embed + +Published pixel-art animations play back live in the embed iframe. +Embed URL params: `?play=0` starts paused; `?fps=N` overrides +frame rate; reduced-motion users get static start unless `?play=1` +opts in. + +## Publish + +Posts a `casewrap-pixelart` event with the palette + per-frame +pixel data (run-length encoded). Forks land with the full +animation intact. diff --git a/src/help/slide.md b/src/help/slide.md new file mode 100644 index 0000000..fe4a971 --- /dev/null +++ b/src/help/slide.md @@ -0,0 +1,45 @@ +# Slide + +A 16:9 standalone slide. Same flat-canvas model as Custom Art but +locked to 16:9 + carries a speaker-notes field. + +## When to use + +- A single one-off slide you want to share or embed (16:9 social + card, lecture insert, recap card). +- The slide is the artwork — you don't need a multi-slide deck shell. + +## Geometry + +Default 1920 × 1080 at 96 DPI. The aspect lock keeps you on 16:9; you +can resize via Presets in the sidebar. + +## Speaker notes + +The **Notes** field in the sidebar attaches a freeform string to the +slide event. Shown in: + +- Presenter Mode (Deck mode only). +- The published event's payload — anyone who forks gets your notes. + +## Importing into a deck + +A standalone Slide is also a Deck-importable unit: + +1. In **Deck** mode, click **Import slide** on a slide tile. +2. Pick from Nostr or paste a slide event id. +3. The slide drops in as a new entry; can be edited inline. + +## Publish + +Posts a `casewrap-slide` event. The full layer state ships in +`payload.slide.layers`; the canvas dimensions + background + notes +live in `payload.slide`. + +## Tips + +- For multi-slide presentations, jump to [Slide deck](#/help/deck) + instead. A deck owns its own ordered slide list; standalone + slides import as forkable units. +- Linked-design layers work in slides too — embed someone else's + Custom Art / Pixel Art as a layer. diff --git a/src/help/template.md b/src/help/template.md new file mode 100644 index 0000000..d667186 --- /dev/null +++ b/src/help/template.md @@ -0,0 +1,65 @@ +# Template tab + +The **Template** tab is where you author finished artwork — anything +you'd hand off to a printer, post as a slide, or publish to a community +feed. Each option below the tab switcher picks a different artboard. + +## Choosing a layout + +Click an item in the left sidebar's *Template type* picker. The +canvas reshapes to that mode's geometry and the right-side options +(layers, export) re-scope to it. + +| Mode | When to use | +|------|-------------| +| **[Cover wrap](#/help/cover)** | DVD / Blu-ray / softcover case wraparound. | +| **[Disc-label sheet](#/help/disc)** | Two-up CD/DVD label sheet for printing on full-page label stock. | +| **[Jewel-case insert](#/help/jewel)** | Front + tray inserts for a CD jewel case. | +| **[Custom art](#/help/customart)** | Any-aspect freeform canvas. Posters, social art, anything. | +| **[Slide](#/help/slide)** | 16:9 single slide with speaker-notes field. | +| **[Slide deck](#/help/deck)** | Ordered list of slides; publishes as one event with all slides inlined. | +| **[Pixel art](#/help/pixelart)** | Palette-indexed grid editor up to 128×128 with multi-frame animation. | +| **[Book](#/help/book)** | Multi-page reflowable book with cover, masters, chapters, PDF export. | + +## Project metadata + +Above the type picker is the **Project Metadata** block: + +- **Title** — required for publish. +- **Category** — required for publish; chooses the discovery facet + (`movie`, `comic`, `book`, etc). +- **IMDb / UPC / TVDB / MusicBrainz IDs** — optional external IDs; + used to deduplicate against other community designs. +- **Language** — affects search / browser filters. +- **Custom tag** — free-form discovery tag. + +## Layers panel + +Once you add anything to the canvas, the **Layers** panel surfaces: + +- Per-layer visibility / lock toggles. +- Drag to reorder z. +- Multi-select with shift/cmd, then use the **Align / Distribute** + panel + the **Pathfinder** ops (Unite / Subtract / Intersect / + Exclude) for vector shapes. +- Layer-target dropdown picks which sub-surface a new layer belongs + to (e.g. cover front vs spine vs back; jewel front vs tray). + +## Export + publish + +- **Save / Save as** — local JSON download of the project. +- **Open** — load a previously-saved JSON file. +- **Print / Save as PDF** — opens the browser print dialog with + proper trim + bleed. +- **Export JPEG / PNG** — direct raster export. +- **Publish to Nostr** — opens a confirmation modal. Public, private + (encrypted to self), or premium (zap-gated, watermarked preview). + +## Common gotchas + +- The Layers panel respects the active layer-target. If you don't see + a layer you just added, switch the dropdown to its surface. +- "Custom" book size unlocks the trim inputs in Document settings. +- Mode-specific guides + bleed lines toggle on the canvas via the + show-guides / show-bleed / show-crops checkboxes in the right-side + Export fieldset. diff --git a/src/index.html b/src/index.html index ede0808..2d4a13d 100644 --- a/src/index.html +++ b/src/index.html @@ -545,6 +545,119 @@ text-decoration: underline; } + /* Docs modal — Read-the-Docs-style two-pane layout. */ + #docsModal .modalInner { + max-width: 1100px; width: 92vw; + max-height: 88vh; height: 720px; + padding: 0; overflow: hidden; + display: flex; flex-direction: column; + } + .docsHeader { + display: flex; align-items: center; gap: 10px; + padding: 10px 14px; border-bottom: 1px solid var(--line); + background: var(--bg); + } + .docsHeader h2 { margin: 0; font-size: 1rem; font-family: inherit; flex: 1; } + .docsHeader .docsBreadcrumb { + font-size: .76rem; color: var(--muted); + } + .docsBody { + flex: 1; display: flex; min-height: 0; + } + .docsSidebar { + width: 240px; flex-shrink: 0; + border-right: 1px solid var(--line); + overflow-y: auto; + background: var(--bg); + } + .docsSidebarGroup { padding: 6px 0; } + .docsSidebarGroup + .docsSidebarGroup { border-top: 1px solid var(--line); } + .docsSidebarLabel { + font-size: .68rem; text-transform: uppercase; + letter-spacing: .08em; color: var(--muted); + padding: 10px 14px 6px; font-weight: 700; + } + .docsSidebarItem { + display: block; padding: 6px 14px; + font-size: .85rem; color: var(--ink); + cursor: pointer; text-decoration: none; + border-left: 3px solid transparent; + } + .docsSidebarItem:hover { background: rgba(0,0,0,.04); } + .docsSidebarItem.current { + background: rgba(0,0,0,.06); + border-left-color: var(--accent); + font-weight: 600; + } + body.dark .docsSidebarItem:hover { background: rgba(255,255,255,.05); } + body.dark .docsSidebarItem.current { background: rgba(255,255,255,.08); } + .docsContent { + flex: 1; overflow-y: auto; + padding: 22px 30px; + font-family: Georgia, serif; + line-height: 1.6; font-size: 15px; + color: var(--ink); background: #fff; + } + body.dark .docsContent { background: #1a1a1a; } + .docsContent h1 { + font-family: inherit; font-size: 1.6rem; + margin: 0 0 .4em; padding-bottom: .3em; + border-bottom: 1px solid var(--line); + } + .docsContent h2 { + font-family: inherit; font-size: 1.2rem; + margin: 1.4em 0 .4em; + } + .docsContent h3 { + font-family: inherit; font-size: 1rem; + margin: 1.1em 0 .3em; + } + .docsContent p { margin: 0 0 .9em; } + .docsContent ul, .docsContent ol { margin: 0 0 .9em; padding-left: 1.4em; } + .docsContent li { margin-bottom: .2em; } + .docsContent a { color: var(--accent); } + .docsContent code { + font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; + font-size: .92em; padding: 1px 5px; + background: rgba(0,0,0,.06); border-radius: 3px; + } + body.dark .docsContent code { background: rgba(255,255,255,.08); } + .docsContent pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; + font-size: .85em; padding: 10px 14px; + background: rgba(0,0,0,.06); border-radius: 4px; + overflow-x: auto; + } + body.dark .docsContent pre { background: rgba(255,255,255,.06); } + .docsContent pre code { background: transparent; padding: 0; } + .docsContent blockquote { + margin: .9em 0; padding: 6px 14px; + border-left: 3px solid var(--accent); + background: rgba(0,0,0,.03); font-style: italic; + } + body.dark .docsContent blockquote { background: rgba(255,255,255,.04); } + .docsContent table { + border-collapse: collapse; margin: 1em 0; + font-size: .9em; + } + .docsContent th, .docsContent td { + border: 1px solid var(--line); padding: 6px 10px; + text-align: left; + } + .docsContent th { background: rgba(0,0,0,.04); font-weight: 700; } + body.dark .docsContent th { background: rgba(255,255,255,.05); } + .docsContent hr { + border: none; border-top: 1px solid var(--line); + margin: 1.4em 0; + } + .docsLoading { + color: var(--muted); font-style: italic; + } + @media (max-width: 720px) { + .docsSidebar { width: 160px; } + .docsContent { padding: 16px 18px; } + } + .appModeTabs { display: grid; grid-template-columns: 1fr 1fr; @@ -4362,6 +4475,7 @@
+ 📖 Docs GitHub Repository artstr.org
@@ -5524,6 +5638,20 @@ + +