reudy-net/Papure
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Replace page glow with a flat outline and add a canvas grid

Browse source 
Pages now get a crisp 1 screen-px outline instead of a blurred shadow,
and the canvas background shows faint world-anchored grid lines that
pan and zoom with the pages (spacing steps up ×4 when zoomed out).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
agent 2026-09-27 17:27:39 +00:00
parent 964b3b1cdd
commit 4acb3a614c
3 changed files with 19 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/app.css
View file

@ -59,7 +59,8 @@
--success: #2f9e5c;
--warn: #d9901b;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.08);
--page-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
--page-line: rgba(0, 0, 0, 0.18);
--grid-line: rgba(0, 0, 0, 0.05);
--ghost: rgba(0, 0, 0, 0.045);
--ghost-border: rgba(0, 0, 0, 0.12);
--radius: 6px;
@ -85,7 +86,8 @@
--success: #44cf6e;
--warn: #e9973f;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.35);
--page-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 2px 8px rgba(0, 0, 0, 0.5);
--page-line: rgba(255, 255, 255, 0.16);
--grid-line: rgba(255, 255, 255, 0.04);
--ghost: rgba(255, 255, 255, 0.04);
--ghost-border: rgba(255, 255, 255, 0.14);
color-scheme: dark;

14
src/lib/components/CanvasView.svelte
View file

@ -28,6 +28,13 @@
let stage: HTMLDivElement;
const cssVars = pageCssVars();
// Background grid: world-anchored, stepping up ×4 when zoomed out so lines never get denser than ~12px.
const gridStep = $derived.by(() => {
let step = 24 * viewport.scale;
while (step < 12) step *= 4;
return step;
});
// ---- autosave --------------------------------------------------------
$effect(() => {
if (doc.version > 0) untrack(() => workspace.scheduleSave());
@ -522,6 +529,7 @@
class:panning
class:erasing={tools.tool === 'eraser'}
bind:this={stage}
style="--grid: {gridStep}px; background-position: {viewport.x}px {viewport.y}px"
onpointerdown={onPointerDown}
onpointermove={onPointerMove}
onpointerup={onPointerUp}
@ -660,7 +668,11 @@
touch-action: none;
user-select: none;
-webkit-user-select: none;
background: var(--bg-canvas);
background-color: var(--bg-canvas);
background-image:
linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
background-size: var(--grid) var(--grid);
}
.stage :global(.cm-content) {
user-select: text;

3
src/lib/components/PageView.svelte
View file

@ -49,7 +49,8 @@
inset: 0;
background: #ffffff;
overflow: hidden;
box-shadow: var(--page-shadow);
/* Crisp 1 screen-px outline, no blur. */
box-shadow: 0 0 0 calc(1px / var(--s)) var(--page-line);
}
.paper.invert {
filter: invert(0.88) hue-rotate(180deg);