mjasin/Nexus.Reader
1
0
Fork 0
Code Issues 9 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

[UI/UX] Implement Immersive Reader Layout & Merriweather Typography #12

New Issue
Closed
opened 2026-05-07 16:45:37 +00:00 by mjasin · 1 comment
mjasin commented 2026-05-07 16:45:37 +00:00
Owner
Copy Link
Copy Source

Issue 1: Reader Content Centering & Typographic Refinement

System Prompt:

Context: The current reader content is left-aligned, causing eye strain on wide displays.
Role: Senior UI Engineer.
Task: Refactor ReaderCanvas.razor and its isolated CSS to implement a "Zen-focused" reading container.
Requirements:

  1. Wrap content in a .reader-flow-container with max-width: 800px and margin: 0 auto.
  2. Enforce font-family: 'Merriweather', serif; for all TextSegmentBlock elements.
  3. Set line-height: 1.65 and letter-spacing: -0.01em for optimal readability.
  4. Ensure the background remains #F9F9F9 (Paper-white).
    Constraint: Do not break the Vertical Flow engine; use padding-bottom to ensure the last paragraph is reachable above the footer.
#### **Issue 1: Reader Content Centering & Typographic Refinement** **System Prompt:** > **Context:** The current reader content is left-aligned, causing eye strain on wide displays. > **Role:** Senior UI Engineer. > **Task:** Refactor `ReaderCanvas.razor` and its isolated CSS to implement a "Zen-focused" reading container. > **Requirements:** > > 1. Wrap content in a `.reader-flow-container` with `max-width: 800px` and `margin: 0 auto`. > 2. Enforce `font-family: 'Merriweather', serif;` for all `TextSegmentBlock` elements. > 3. Set `line-height: 1.65` and `letter-spacing: -0.01em` for optimal readability. > 4. Ensure the background remains `#F9F9F9` (Paper-white). > **Constraint:** Do not break the Vertical Flow engine; use padding-bottom to ensure the last paragraph is reachable above the footer.
mjasin commented 2026-05-08 17:25:09 +00:00
Author
Owner
Copy Link
Copy Source

In addition, the canvas displaying the ebook content should have dedicated scroll bars. Currently, there are none, as shown in the attached screenshot. Vertical scrolling is intuitive, but horizontal scrolling is not. This is problematic, for example, for code blocks.

image.png

In addition, the canvas displaying the ebook content should have dedicated scroll bars. Currently, there are none, as shown in the attached screenshot. Vertical scrolling is intuitive, but horizontal scrolling is not. This is problematic, for example, for code blocks. ![image.png](/attachments/a87ada31-b592-4eaa-b1fb-e2128947f7a0)
image.png
120 KiB
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
Antigravity M.Wojtaszek mjasin (Marek Jaisński)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: mjasin/Nexus.Reader#12
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?