Orbital Surveys Geospatial systems

Orbital Surveys

CloudCanvas Equal Gallery Implementation Plan

CloudCanvas Equal Gallery Implementation Plan

For Claude: REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

Goal: Display the two CloudCanvas visual cards at the same size and alignment on wider screens while preserving the existing mobile stack.

Architecture: Keep the existing gallery markup and images. Replace the asymmetric two-column proportions and offset with an equal two-column CSS grid; the shared image aspect ratio will make both cards the same height without fixed pixel dimensions.

Tech Stack: Jekyll, HTML, CSS, Playwright browser verification

Task 1: Add the failing visual assertion

Files:

  • Modify: C:/Users/dms/.codex/visualizations/2026/08/02/019fc123-21e6-7c31-ac78-1ca21434e1be/capture-cloudcanvas.js

Step 1: Extend the browser check

For widths of 768px and above, read both .software-gallery .software-visual bounding rectangles and assert that width, height, top and bottom differ by no more than one CSS pixel. Keep the existing overlap assertion and screenshot output.

Step 2: Run the check to verify it fails

Run the Playwright verification with the bundled Node runtime and NODE_PATH pointing to the bundled Node modules.

Expected: FAIL at 1362px because the existing grid uses unequal columns and offsets the second card.

Files:

  • Modify: assets/css/site.css:1829

Step 1: Make the columns equal

Change the wider-screen gallery rule to:

.software-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

Remove the tablet-and-up padding and the final card’s positional offset. Do not change the base mobile gallery rules, image aspect ratio, captions or content.

Step 2: Run the browser check

Expected: PASS at 320px, 768px, 1024px and 1362px, with matching card rectangles from 768px upward.

Task 3: Verify and commit

Files:

  • Verify: assets/css/site.css

Step 1: Build outside the tracked checkout

Run: rtk proxy bundle exec jekyll build --destination "..\\GPS Webpage-dev-output"

Expected: Jekyll exits successfully.

Step 2: Run the existing site verification

Run: rtk proxy ruby script\\verify-modern-site.rb "..\\GPS Webpage-dev-output"

Expected: Modern site verification passed (8 pages checked).

Step 3: Review and commit only the intended CSS change

Run rtk git diff --check, inspect the diff, then commit the gallery change separately from this plan.