红尘
d73ff9b0fb
Deploy Site / deploy-vercel (push) Has been cancelled
Deploy Site / deploy-docs (push) Has been cancelled
Docker / shell lint / Lint Dockerfile (hadolint) (push) Has been cancelled
Docker / shell lint / Lint docker/ shell scripts (shellcheck) (push) Has been cancelled
Docker Build and Publish / build-amd64 (push) Has been cancelled
Docker Build and Publish / build-arm64 (push) Has been cancelled
Lint (ruff + ty) / ruff + ty diff (push) Has been cancelled
Lint (ruff + ty) / ruff enforcement (blocking) (push) Has been cancelled
Lint (ruff + ty) / Windows footguns (blocking) (push) Has been cancelled
Nix Lockfile Fix / auto-fix-main (push) Has been cancelled
Nix Lockfile Fix / fix (push) Has been cancelled
Nix / nix (macos-latest) (push) Has been cancelled
Nix / nix (ubuntu-latest) (push) Has been cancelled
OSV-Scanner / Scan lockfiles (push) Has been cancelled
Build Skills Index / build-index (push) Has been cancelled
Tests / test (1) (push) Has been cancelled
Tests / test (2) (push) Has been cancelled
Tests / test (3) (push) Has been cancelled
Tests / test (4) (push) Has been cancelled
Tests / test (5) (push) Has been cancelled
Tests / test (6) (push) Has been cancelled
Tests / e2e (push) Has been cancelled
uv.lock check / uv lock --check (push) Has been cancelled
Docker Build and Publish / merge (push) Has been cancelled
Build Skills Index / trigger-deploy (push) Has been cancelled
Tests / save-durations (push) Has been cancelled
49 lines
1.2 KiB
Markdown
49 lines
1.2 KiB
Markdown
# binary-comparison
|
|
|
|
Side-by-side comparison of two items, states, or concepts.
|
|
|
|
## Structure
|
|
|
|
- Vertical divider splitting image in half
|
|
- Left side: Item A / Before / Pro
|
|
- Right side: Item B / After / Con
|
|
- Mirrored layout for easy comparison
|
|
- Clear visual distinction between sides
|
|
|
|
## Variants
|
|
|
|
| Variant | Focus | Visual Emphasis |
|
|
|---------|-------|-----------------|
|
|
| **Before-After** | Transformation over time | Temporal change, improvement |
|
|
| **A vs B** | Feature comparison | Direct contrast, differences |
|
|
| **Pro-Con** | Advantages/disadvantages | Balanced evaluation |
|
|
|
|
## Best For
|
|
|
|
- Before/after transformations
|
|
- Product or option comparisons
|
|
- Pros and cons analysis
|
|
- Old vs new comparisons
|
|
- Two perspectives on a topic
|
|
|
|
## Visual Elements
|
|
|
|
- Strong vertical dividing line or gradient
|
|
- Contrasting colors per side
|
|
- Matching element positions for comparison
|
|
- VS symbol or divider decoration
|
|
- Transformation arrow for before-after
|
|
|
|
## Text Placement
|
|
|
|
- Main title centered at top
|
|
- Side labels (A/B, Before/After)
|
|
- Corresponding points aligned horizontally
|
|
- Summary at bottom if needed
|
|
|
|
## Recommended Pairings
|
|
|
|
- `corporate-memphis`: Business comparisons
|
|
- `bold-graphic`: High-contrast dramatic comparisons
|
|
- `craft-handmade`: Friendly explainers
|