diff --git a/web/guide/guide.css b/web/guide/guide.css index e97e43e..cdf6217 100644 --- a/web/guide/guide.css +++ b/web/guide/guide.css @@ -133,8 +133,12 @@ figcaption { .overview-map { display: grid; - grid-template-columns: minmax(240px, 0.78fr) minmax(220px, 0.72fr); - gap: 48px; + /* Slightly wider screenshot column + tighter gap so the sidebar shot's + natural portrait height grows to roughly match the callouts column + height (image aspect 728:1206 → ~1.656x width). Markers scale with the + image since they use percentage positioning. */ + grid-template-columns: minmax(240px, 0.84fr) minmax(220px, 0.66fr); + gap: 24px; align-items: center; padding: 22px 28px 22px 22px; border: 1px solid var(--line); @@ -156,7 +160,7 @@ figcaption { .overview-box { position: absolute; - right: -18px; + right: -4px; width: 4px; border: 0; border-radius: 999px; @@ -169,39 +173,44 @@ figcaption { content: none; } +/* Marker percentages tuned to the redesigned 666×1202 sidebar-overview.png. + Section dividers measured at y = 76 / 152 / 262 / 342 / 418 / 1202 + (= 6.32% / 12.65% / 21.80% / 28.45% / 34.78% / 100%). Each bar is inset + ~0.4% from its dividers so the marker sits cleanly inside the row band + instead of straddling the divider line. */ .overview-snapshot { - top: 1.8%; - height: 6.8%; + top: 0.5%; + height: 5.3%; color: #4a8058; } .overview-tools { - top: 9.7%; - height: 6.4%; + top: 6.8%; + height: 5.3%; color: #4268ba; } .overview-search { - top: 17.8%; - height: 5.6%; + top: 13.2%; + height: 8.2%; color: #d59b3d; } .overview-nodes { - top: 26.2%; - height: 8.2%; + top: 22.3%; + height: 5.7%; color: #b64747; } .overview-workflows { - top: 34.9%; - height: 8%; + top: 28.9%; + height: 5.4%; color: #452e83; } .overview-saved { - top: 43.5%; - height: 51.8%; + top: 35.3%; + height: 63.7%; color: #4a8058; } @@ -298,11 +307,30 @@ figcaption { } .band > p { - max-width: 760px; padding: 18px 22px 0; font-size: 17px; } +/* Text-only band (no figure to provide bottom padding) — its trailing + paragraph needs explicit bottom space so the body text doesn't sit + flush against the panel's bottom edge. */ +.band-text > p:last-child { + padding-bottom: 22px; +} + +/* Inline code spans — used for filename / path fragments inside body + prose like _autosave/. Slight tinted bg + monospace stack + so they read as code without dominating the line. */ +.band p code, +.band-text p code { + padding: 1px 6px; + border-radius: 4px; + background: rgb(255 255 255 / 6%); + color: var(--text); + font-family: ui-monospace, SFMono-Regular, Consolas, monospace; + font-size: 0.92em; +} + .full { margin: 18px 22px 22px; } @@ -364,112 +392,130 @@ figcaption { } .function-list { - display: flex; - flex-wrap: wrap; - gap: 7px; - margin-top: 14px; + margin: 14px 0 0; + padding-left: 18px; + list-style: disc; } -.function-list span { - display: inline-flex; - align-items: center; - min-height: 28px; - padding: 4px 8px; - border: 1px solid #3d3d3d; - border-radius: 4px; - background: #1a1a1f; +.function-list li { color: var(--text); font-size: 12px; font-weight: 700; - line-height: 1.2; + line-height: 1.6; } .recipes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 18px; + gap: 40px 32px; padding: 34px 0 64px; } +/* Each recipe is wrapped in its own panel so the row of recipes reads as a + set of self-contained "case studies" — same outer container shape, same + inner layout (screenshot above, callout below, caption at bottom). + Wrapper is a flex column so the figcaption uses `margin-top: auto` and + sits flush at the bottom of every panel, aligned across the row even when + the callouts above vary in height. Wrapper bg is intentionally darker + than --panel so the screenshots inside read as the lighter focal subject. */ .recipe-real { - padding: 14px; + display: flex; + flex-direction: column; + padding: 22px 22px 22px; border: 1px solid var(--line); border-radius: 8px; - background: var(--panel); + /* Darker than the screenshot's own edge color (#171718) so the screenshot + reads as the lighter focal subject inside a darker frame. */ + background: #111111; } -.recipe-real img { - border-color: #454545; - background: #101010; +.recipe-real figcaption { + margin-top: auto; + padding-top: 22px; + text-align: center; } .recipe-shot { position: relative; + max-width: 70%; + /* `margin-top: auto` + figcaption's existing `margin-top: auto` distribute + the leftover vertical space equally — top space above the shot equals + space between callout and figcaption, so the shot+callout pair is + vertically centered in the panel above the bottom-pinned figcaption. */ + margin: auto auto 0; } +.recipes .recipe-shot img { + display: block; + width: 100%; + height: auto; + border: 0; + border-radius: 0; + background: transparent; + box-shadow: none; + outline: none; +} + +/* Focus-dot overlays were visually noisy and frequently misaligned over the + underlying screenshots; hidden by default until they can be redrawn + against the new sidebar imagery. Aria-hidden already, so nothing changes + for AT users. Specific overlays (e.g. .focus-module) re-enable themselves + below with positioning tuned to the new screenshots. */ .focus-dot { + display: none; +} + +/* Workflow save-selection recipe — translucent yellow overlay highlighting + the two action buttons (floppy + grid-2x2) at the bottom-right of the + Workflows row in all-icons-new.png. Anchored to the bottom-right corner + of the screenshot since that's where the buttons sit in the PNG. */ +.recipes .focus-module { + display: block; position: absolute; - width: 72px; - height: 72px; - border-radius: 999px; - background: rgb(66 104 186 / 30%); - box-shadow: 0 0 0 2px rgb(66 104 186 / 88%); - pointer-events: none; -} - -.focus-save { - right: 3%; - bottom: 7%; -} - -.focus-load { - left: 7%; - top: 39%; -} - -.focus-module { - right: 0.5%; - bottom: 0.5%; - background: rgb(201 148 75 / 30%); - box-shadow: 0 0 0 2px rgb(201 148 75 / 88%); -} - -.focus-node-search { - left: 12%; - top: 19%; - background: rgb(74 128 88 / 30%); - box-shadow: 0 0 0 2px rgb(74 128 88 / 88%); -} - -.focus-workflow-search { - left: 10%; - top: 16%; - background: rgb(69 46 131 / 30%); - box-shadow: 0 0 0 2px rgb(69 46 131 / 88%); + bottom: 0; + right: 0; + width: 22%; + height: 15.6%; + background: rgb(255 210 74 / 30%); + border-radius: 6px; + box-shadow: none; } .recipe-callout { width: fit-content; - max-width: min(520px, calc(100% - 44px)); - margin: 18px auto 0; - padding: 14px 18px 14px 22px; - border-left: 5px solid var(--blue); - border-radius: 8px; + /* About two-thirds the width of the recipe screenshot, so the callout + reads as a sub-element rather than a full-width banner. Right-aligned + to the SCREENSHOT'S right edge: the screenshot is `max-width: 70%` + centered, so its right edge sits at the 85% mark of the wrapper, which + is 15% from the wrapper's right side. `margin-right: 15%` reproduces + that offset, `margin-left: auto` pushes the callout right against it. */ + max-width: min(240px, calc(100% - 24px)); + margin: 22px 15% 0 auto; + padding: 14px 18px 14px 20px; + border-left: 4px solid var(--blue); + border-radius: 6px; background: #111111; - box-shadow: 0 14px 30px rgb(0 0 0 / 26%); + box-shadow: 0 10px 22px rgb(0 0 0 / 22%); } .recipe-callout p { margin: 0; color: var(--muted); - font-size: 17px; + font-size: 14px; line-height: 1.55; } +/* Paragraph chapters inside a callout — when a recipe explains two distinct + actions (e.g. Save vs. Save as new), each gets its own paragraph and they + are separated by a small gap so they read as visually distinct topics. */ +.recipe-callout p + p { + margin-top: 8px; +} + .recipe-callout strong { color: var(--text); - font-size: 18px; - font-weight: 800; + font-size: 14px; + font-weight: 700; } .recipe-callout.amber { diff --git a/web/guide/img/autosave-recovery.svg b/web/guide/img/autosave-recovery.svg deleted file mode 100644 index faef066..0000000 --- a/web/guide/img/autosave-recovery.svg +++ /dev/null @@ -1,26 +0,0 @@ - - Autosave recovery recipe - Annotated mock screenshot for recovering from autosaves. - - - - Load Snapshot - - Client_Shot010 - - Lookdev_HDR - AUTOSAVES - - _autosave_periodic_01 - - - - Recover safely - Autosaves are kept in the - same Snapshot library. - Load one if state was lost. - - Library folder - Set it per project or facility. - - diff --git a/web/guide/img/screenshots/all-icons-new.png b/web/guide/img/screenshots/all-icons-new.png index 128629b..7bddc2f 100644 Binary files a/web/guide/img/screenshots/all-icons-new.png and b/web/guide/img/screenshots/all-icons-new.png differ diff --git a/web/guide/img/screenshots/folder-actions.png b/web/guide/img/screenshots/folder-actions.png new file mode 100644 index 0000000..5176e61 Binary files /dev/null and b/web/guide/img/screenshots/folder-actions.png differ diff --git a/web/guide/img/screenshots/load-snapshot.png b/web/guide/img/screenshots/load-snapshot.png index 3f4b23b..efb1148 100644 Binary files a/web/guide/img/screenshots/load-snapshot.png and b/web/guide/img/screenshots/load-snapshot.png differ diff --git a/web/guide/img/screenshots/right-click-functions.png b/web/guide/img/screenshots/right-click-functions.png new file mode 100644 index 0000000..e4eef2f Binary files /dev/null and b/web/guide/img/screenshots/right-click-functions.png differ diff --git a/web/guide/img/screenshots/save-snapshot.png b/web/guide/img/screenshots/save-snapshot.png index 8084c75..7ef1165 100644 Binary files a/web/guide/img/screenshots/save-snapshot.png and b/web/guide/img/screenshots/save-snapshot.png differ diff --git a/web/guide/img/screenshots/search-B.png b/web/guide/img/screenshots/search-B.png deleted file mode 100644 index 1a953e6..0000000 Binary files a/web/guide/img/screenshots/search-B.png and /dev/null differ diff --git a/web/guide/img/screenshots/search-C.png b/web/guide/img/screenshots/search-C.png index 3a16464..f3e02a2 100644 Binary files a/web/guide/img/screenshots/search-C.png and b/web/guide/img/screenshots/search-C.png differ diff --git a/web/guide/img/screenshots/sidebar-overview.png b/web/guide/img/screenshots/sidebar-overview.png index e9cb577..b69d0fa 100644 Binary files a/web/guide/img/screenshots/sidebar-overview.png and b/web/guide/img/screenshots/sidebar-overview.png differ diff --git a/web/guide/img/snapshot-flow.svg b/web/guide/img/snapshot-flow.svg index 0b57ebe..69b0d15 100644 --- a/web/guide/img/snapshot-flow.svg +++ b/web/guide/img/snapshot-flow.svg @@ -1,37 +1,59 @@ - + Snapshot mental model - Sidebar state becomes a snapshot file in a library, then can be loaded later. - - - MENTAL MODEL - Snapshot saves the whole project kit. - - + Sidebar state becomes a snapshot file in a library, then can be loaded later. The named file updates only on Save; the autosave refreshes continuously in the background. + + + + + + + + Sidebar state favorite nodes workflows / modules - tags + custom folders + user-defined tags - - - - - Snapshot file - Client_Shot010 - portable JSON - saved on disk + + + + + + + + + + Snapshot files + • Client_Shot010.json + • Client_Shot010_autosave/ + └ periodic.json - - - - - Project library - one folder for a show - or one per client - load it later + + + + + + + + + + Custom Folder + holds multiple snapshots + quick access with 'Load' + 'Browse' or create 'New folder' - - - Return to the project without rebuilding your setup + + + Quick Save / Save = updates the main snapshot file. Autosave = saves the current state every 5 minutes. diff --git a/web/guide/index.html b/web/guide/index.html index 27941f7..801e147 100644 --- a/web/guide/index.html +++ b/web/guide/index.html @@ -50,11 +50,11 @@ SPDX-License-Identifier: GPL-3.0-only

Nodes action bar

-

Switch tree or list view, then add a favorite node.

+

Arrange nodes by Git repo name or theme, and add favorite nodes to the side panel.

Workflows action bar

-

Save the canvas or selected nodes, then browse saved workflows.

+

Save the entire canvas or selected nodes.

Saved lists

@@ -69,14 +69,22 @@ SPDX-License-Identifier: GPL-3.0-only

Most important idea

-

Snapshot = your project kit

+

Snapshot saves the whole project kit.

-

A Snapshot saves Kforge Labs state: favorite nodes, saved workflows, modules, tags, archive, and the current sidebar organization. Use one named snapshot per project, shot, client, or experiment.

+

A snapshot saves your favorite nodes, workflows, modules, tags, and the current sidebar organization. Use one named snapshot per project, shot, client, or experiment.

Snapshot flow from sidebar state to saved file to project library and later reload
+
+
+

Two-layer save

+

Save when you mean it. Auto-save catches the rest.

+
+

Your named snapshot only changes when you click Save or Quick Save. Auto-save runs every 5 minutes in the background — but only when something has actually changed — and writes a separate recovery copy under <snapshot>_autosave/. If you load a snapshot whose auto-save is newer than the saved version, Kforge Labs asks YES (load auto-save) or NO (load saved version). Every Load also writes a pre-load recovery file first, so destructive Loads are reversible from the Recovery section.

+
+

Project rhythm

@@ -100,52 +108,52 @@ SPDX-License-Identifier: GPL-3.0-only

Snapshots

Save and reload the whole project kit.

-
- Load - Quick Save - Save - Settings -
+
    +
  • Load
    • +
  • Quick Save
    • +
  • Save
    • +
  • Settings
    • +

Nodes

Keep favorite nodes organized and easy to update.

-
- Search - Add - Remove - Group -
+
    +
  • Search
    • +
  • Add
    • +
  • Remove
    • +
  • Smart view
    • +

Search

-

Find saved work from one field. Tags keep exact capitalization.

-
- Nodes - Workflows - Folders - Tags -
+

Find by name, repo, or tag — partial matches OK.

+
    +
  • Nodes
    • +
  • Workflows
    • +
  • Folders
    • +
  • Tags
    • +

Workflows

Save full scripts or reusable node selections.

-
- Save script - Save selection - Load - Insert module -
+
    +
  • Save script
    • +
  • Save selection
    • +
  • Load
    • +
  • Insert module
    • +
-

Safety / setup

-

Quiet helpers protect projects and make saved kits portable.

-
- Autosaves - Missing packs - Starter preset - Library folder -
+

Smart organization

+

Reshape your saved work folders, drag-drop, and move.

+
    +
  • Create folders
    • +
  • Drag and drop
    • +
  • Move setups
    • +
  • Rename or archive
    • +
@@ -160,7 +168,8 @@ SPDX-License-Identifier: GPL-3.0-only
-

Save updates the current project kit. Save as new creates another named snapshot.

+

Save updates the current project kit.

+

Save as new creates another named snapshot.

Save the current sidebar state as a named project snapshot.
@@ -170,7 +179,8 @@ SPDX-License-Identifier: GPL-3.0-only
-

Snapshot row restores that saved project kit. Recovery auto-saves are available below saved snapshots.

+

Load snapshot row restores that saved project kit.

+

Recovery auto-saves are available below.

Load a snapshot when you switch projects or return to a shot.
@@ -180,7 +190,8 @@ SPDX-License-Identifier: GPL-3.0-only
-

Workflow save-selection is the bottom-right workflow action. Use it after selecting nodes on the canvas.

+

Save saves the entire canvas under the workflows tree.

+

Save selection stores only the selected canvas nodes. Tag it with 'Module' to insert it back into another canvas later.

Save selected nodes as a module, then insert that module into another canvas.
@@ -190,23 +201,29 @@ SPDX-License-Identifier: GPL-3.0-only
-

Node search narrows favorites so useful nodes are easier to scan and add.

+

Search narrows displayed items so useful nodes and workflows are easier to find.

Search narrows the Nodes list so useful favorites are easier to scan and add.
- Search results showing matching nodes and workflows - + Right-click context menu on a saved workflow showing available actions
-
-

One search field finds nodes and workflows, including saved workflows found through tags.

+
+

Right-click any saved workflow or module for a full action menu.

+

Load, rename, retag, move between folders, or archive — all without leaving the sidebar.

-
Search finds both nodes and workflows from the same field, including saved workflows found through tags.
+
Manage saved workflows and modules directly from the right-click menu.
-
- Annotated mockup showing autosave recovery -
If something goes sideways, load an autosave from the Snapshot Load dialog.
+
+
+ Sidebar showing folder actions — create, rename, delete, drag-and-drop +
+
+

Create or delete folders to shape your library.

+

Drag and drop to rearrange items between folders.

+
+
Organize your saved kit with folders — group, rename, or rearrange anytime.