Share mode: centered page layout with paper styling#17
Open
cathrynlavery wants to merge 1 commit into
Open
Conversation
6 tasks
cathrynlavery
changed the title
maphilipps
added a commit
to maphilipps/proof-sdk
that referenced
this pull request
May 24, 2026
Reads proposal-*.SKILL.md from ../skills/ (adProof repo root) via filesystem, parses JSON frontmatter inline. Mounted when ADPROOF_MODE=1. Storage-agnostic — no db dependency. Related: adProof issue EveryInc#17 INT-2 skill-loader slice
maphilipps
added a commit
to maphilipps/proof-sdk
that referenced
this pull request
May 24, 2026
…ugin für Inline-Einfärbung - Neues Plugin provenance-inline.ts: liest proofAuthored-Marks, erzeugt Decoration.inline mit CSS-Klasse prov-human oder prov-ai-free - CSS-Klassen in src/index.html ergänzt (mint-transparent / lavender-transparent) - Plugin in editor/index.ts registriert nach authoredTrackerPlugin - ai-with-source-Klasse bleibt TODO bis EveryInc#17 (INT-2) Sources-Index verfügbar Browser-verify: span.prov-human erscheint sofort beim Tippen (human:Anonymous-Mark) 407/407 Unit-Tests grün, tsc --noEmit sauber (keine neuen Fehler)
maphilipps
added a commit
to maphilipps/proof-sdk
that referenced
this pull request
May 24, 2026
…ot-Metriken-Aggregation - adproof-metrics-route.ts: In-Memory-Store (inline, kein Cross-Package-Import aus src/) - aggregateMetrics(): 4 PRD-Metriken, histogram-Typ (sum+values) und rate-Typ (avg+values) - recordServerMetric(): Export für späteres Event-Wiring in EveryInc#17 (INT-2) - GET /adproof/metrics: {success, metrics, sampleCount, wireStatus} - index.ts: Router unter ADPROOF_MODE=1 registriert (3. adProof-Route) - Store ist intentional leer bis Bridge-Tools in EveryInc#17 Events schreiben
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Gives shared documents a polished, centered-page look — transforming the full-bleed white canvas into a paper card on a light gray background. This PR contains all the CSS that brings the share-mode visual refresh to life, including styling for the formatting toolbar introduced in PR #16.
Why
Share mode is the public face of Proof documents. The previous layout was a plain white page with no visual distinction — it didn't feel like a crafted reading experience. This update creates a warm, editorial aesthetic: a centered paper card with subtle shadows, rounded corners, and comfortable reading margins. The goal is to make shared Proof documents feel as intentional as a well-designed blog post or published article.
What changed (all in
index.htmlCSS)Page background & container:
body[data-share-mode="true"]getsbackground: #f9f9f9(light gray) — clean, neutral backdrop#editor-containercapped at1120pxwith vertical padding for breathing roomEditor card (the "paper"):
#editorconstrained to860px, centered, with warm-tinted background usingcolor-mix()with#f7ecd9(parchment)18px) and layered box-shadow for soft depth88px 96px) for comfortable reading width (~65-75 characters per line)Formatting bar styles (companion to PR #16):
#share-formatting-bar— right rail on desktop (absolute positioned in the ~130px margin), bottom dock on mobile (fixed, frosted glass withbackdrop-filter)#share-contextual-formatting-bar— floating popup near text selection.mark-selection-barwhen contextual toolbar is visible to prevent overlap--fmt-text,--fmt-bg-hover, etc.) using warm parchment-derived colorsMobile responsive (≤900px):
48px 36px), smaller border-radius (12px), lighter shadowDesign tokens
The formatting bar uses a warm color system derived from the paper aesthetic:
--fmt-text: #9a8e7f(warm gray for icons/labels)--fmt-bg-hover: rgba(154,142,127,0.10)(subtle hover states)--fmt-border: rgba(154,142,127,0.18)(group dividers)--fmt-active: #5c4f3d(active state — darker warm tone)Dependency
Builds on the
data-share-modeattribute introduced in PR #16. Should be merged after or together with #16.Files changed
src/index.htmlTest plan
data-share-mode="true")