Skip to content

PlotLink: Enhance book spine with page-thickness lines #292

@realproject7

Description

@realproject7

Summary

Follow-up to PR #291 (#208). The current card spine is a single 3px bar. Enhance it to match the book silhouette reference — a front cover with a visible spine edge and layered page lines on the left and bottom.

Reference shape (book silhouette)

Image

The reference shows a book viewed from the front at a slight angle:

  • Spine: a thick vertical line on the left edge
  • Page layers: 2-3 thin parallel lines offset slightly to the left/bottom of the main cover rectangle, creating a 3D "closed book" effect — like you can see the stacked pages from the side and bottom
  • Top edge: a thin horizontal line across the top suggesting the page block thickness
  • The overall shape is a rectangle with layered offset lines on the left and bottom edges

Current

  • Single 3px bg-border div on the left edge only

Desired

  • Main card rectangle = the front cover
  • Add 2-3 thin offset lines on the left side and bottom edge, slightly shifted, to create a stacked-pages / book-depth illusion
  • Optionally add a thin top-edge line for the page block
  • All lines are vector/stroke only — no fills, no images, no shadows
  • Keep it subtle — should enhance the book feel without crowding content

Acceptance Criteria

  • Card has layered offset lines on left and bottom suggesting page thickness (like a closed book)
  • All lines are vector/stroke, no fills or images
  • Card content still has proper padding and is not crowded
  • Looks good at all responsive card sizes
  • Existing spine line is incorporated into the new layered effect

Labels

agent/T3, plotlink, ui

Metadata

Metadata

Assignees

No one assigned

    Labels

    agent/T3Assigned to T3 builder agent

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions