From a4fb25333d85c37ab9b41c21e28a783dbe2b547b Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 22 Apr 2026 12:59:07 +0000 Subject: [PATCH] Fix pill outline and tighten hero letter spacing - Strengthen the purple skill pill border from 26% to 56% violet, and bump to 1.5px, so the outline is clearly visible - Reduce hero canvas letter offsetX values by 20% (multiply by 0.8) and shift each line's anchorX right by half the span reduction to keep lines visually centered on both desktop and mobile https://claude.ai/code/session_011632bvvZ9FbrugSXt8KC14 --- .../floating-letters-authoring-snapshot.json | 88 +++++++++---------- src/generated/floatingLettersBuildSnapshot.js | 84 +++++++++--------- src/styles.css | 2 +- 3 files changed, 87 insertions(+), 87 deletions(-) diff --git a/src/authoring/floating-letters-authoring-snapshot.json b/src/authoring/floating-letters-authoring-snapshot.json index aa3ad22..9fff6d8 100644 --- a/src/authoring/floating-letters-authoring-snapshot.json +++ b/src/authoring/floating-letters-authoring-snapshot.json @@ -61,17 +61,17 @@ }, "lines": { "explain-it": { - "anchorX": 0.109, + "anchorX": 0.187, "anchorY": 0.207, "scale": 1 }, "like-im": { - "anchorX": 0.277, + "anchorX": 0.3316, "anchorY": 0.534, "scale": 1 }, "five": { - "anchorX": 0.38299999999999995, + "anchorX": 0.42229999999999995, "anchorY": 0.8529999999999999, "scale": 1 } @@ -85,49 +85,49 @@ }, "hero-0-1-X": { "line": "explain-it", - "offsetX": 169.6, + "offsetX": 135.68, "offsetY": 25.200000000000017, "rotation": -16.8 }, "hero-0-2-P": { "line": "explain-it", - "offsetX": 347.20000000000005, + "offsetX": 277.76000000000005, "offsetY": -21.599999999999994, "rotation": -0.8 }, "hero-0-3-L": { "line": "explain-it", - "offsetX": 499.20000000000005, + "offsetX": 399.36000000000007, "offsetY": -1.799999999999983, "rotation": -1.6 }, "hero-0-4-A": { "line": "explain-it", - "offsetX": 654.4000000000001, + "offsetX": 523.5200000000001, "offsetY": -4.499999999999972, "rotation": 2.8 }, "hero-0-5-I": { "line": "explain-it", - "offsetX": 776, + "offsetX": 620.8000000000001, "offsetY": -22.5, "rotation": -4.8 }, "hero-0-6-N": { "line": "explain-it", - "offsetX": 913.6, + "offsetX": 730.8800000000001, "offsetY": -23.399999999999977, "rotation": -1.4 }, "hero-0-8-I": { "line": "explain-it", - "offsetX": 1140.7999999999997, + "offsetX": 912.6399999999999, "offsetY": 28.80000000000001, "rotation": 0.4 }, "hero-0-9-T": { "line": "explain-it", - "offsetX": 1248, + "offsetX": 998.4000000000001, "offsetY": -21.599999999999994, "rotation": -1.9 }, @@ -139,37 +139,37 @@ }, "hero-1-1-I": { "line": "like-im", - "offsetX": 99.20000000000005, + "offsetX": 79.36000000000004, "offsetY": 3.6000000000000227, "rotation": 0.2 }, "hero-1-2-K": { "line": "like-im", - "offsetX": 225.5999999999999, + "offsetX": 180.47999999999993, "offsetY": -4.5, "rotation": 4.9 }, "hero-1-3-E": { "line": "like-im", - "offsetX": 387.19999999999993, + "offsetX": 309.76, "offsetY": -29.700000000000045, "rotation": -5.8 }, "hero-1-5-I": { "line": "like-im", - "offsetX": 651.2, + "offsetX": 520.96, "offsetY": -38.700000000000045, "rotation": 0.8 }, "hero-1-6-'": { "line": "like-im", - "offsetX": 726.3999999999999, + "offsetX": 581.1199999999999, "offsetY": -121.5, "rotation": 4.2 }, "hero-1-7-M": { "line": "like-im", - "offsetX": 873.5999999999999, + "offsetX": 698.88, "offsetY": -13.5, "rotation": 8.4 }, @@ -181,25 +181,25 @@ }, "hero-2-1-I": { "line": "five", - "offsetX": 113.60000000000002, + "offsetX": 90.88000000000002, "offsetY": 0, "rotation": -6.7 }, "hero-2-2-V": { "line": "five", - "offsetX": 240.0000000000001, + "offsetX": 192.0000000000001, "offsetY": -35.10000000000002, "rotation": 6.2 }, "hero-2-3-E": { "line": "five", - "offsetX": 414.4000000000001, + "offsetX": 331.5200000000001, "offsetY": -30.600000000000023, "rotation": -2.3 }, - "hero-2-4-\u2026": { + "hero-2-4-…": { "line": "five", - "offsetX": 628.8000000000002, + "offsetX": 503.0400000000002, "offsetY": 42.30000000000007, "rotation": -1.2 } @@ -218,17 +218,17 @@ }, "lines": { "explain-it": { - "anchorX": 0.19, + "anchorX": 0.256, "anchorY": 0.25, "scale": 1 }, "like-im": { - "anchorX": 0.48999999999999994, + "anchorX": 0.5199999999999999, "anchorY": 0.4640000000000001, "scale": 1 }, "five": { - "anchorX": 0.48, + "anchorX": 0.522, "anchorY": 0.696, "scale": 1 } @@ -242,49 +242,49 @@ }, "hero-0-1-X": { "line": "explain-it", - "offsetX": 126.72, + "offsetX": 101.376, "offsetY": 10.080000000000013, "rotation": -16.8 }, "hero-0-2-P": { "line": "explain-it", - "offsetX": 253.43999999999997, + "offsetX": 202.75199999999998, "offsetY": -10.080000000000013, "rotation": -0.8 }, "hero-0-3-L": { "line": "explain-it", - "offsetX": 380.1600000000001, + "offsetX": 304.1280000000001, "offsetY": 0.7199999999999989, "rotation": -1.6 }, "hero-0-4-A": { "line": "explain-it", - "offsetX": 506.8800000000001, + "offsetX": 405.50400000000013, "offsetY": -5.039999999999992, "rotation": 2.8 }, "hero-0-5-I": { "line": "explain-it", - "offsetX": 612.48, + "offsetX": 489.98400000000004, "offsetY": -12.23999999999998, "rotation": -4.8 }, "hero-0-6-N": { "line": "explain-it", - "offsetX": 696.96, + "offsetX": 557.5680000000001, "offsetY": -10.800000000000011, "rotation": -1.4 }, "hero-0-8-I": { "line": "explain-it", - "offsetX": 42.24000000000001, + "offsetX": 33.79200000000001, "offsetY": 152.64000000000004, "rotation": 0.4 }, "hero-0-9-T": { "line": "explain-it", - "offsetX": 168.95999999999995, + "offsetX": 135.16799999999998, "offsetY": 132.48000000000002, "rotation": -1.9 }, @@ -296,37 +296,37 @@ }, "hero-1-1-I": { "line": "like-im", - "offsetX": 95.03999999999996, + "offsetX": 76.03199999999997, "offsetY": 1.4399999999999977, "rotation": 0.2 }, "hero-1-2-K": { "line": "like-im", - "offsetX": 200.6400000000001, + "offsetX": 160.51200000000009, "offsetY": -9.360000000000014, "rotation": 4.9 }, "hero-1-3-E": { "line": "like-im", - "offsetX": 316.80000000000007, + "offsetX": 253.44000000000005, "offsetY": -10.080000000000041, "rotation": -5.8 }, "hero-1-5-I": { "line": "like-im", - "offsetX": -327.35999999999996, + "offsetX": -261.888, "offsetY": 138.23999999999995, "rotation": 0.8 }, "hero-1-6-'": { "line": "like-im", - "offsetX": -269.28, + "offsetX": -215.42399999999998, "offsetY": 83.51999999999992, "rotation": 4.2 }, "hero-1-7-M": { "line": "like-im", - "offsetX": -168.95999999999992, + "offsetX": -135.16799999999995, "offsetY": 135.35999999999996, "rotation": 8.4 }, @@ -338,25 +338,25 @@ }, "hero-2-1-I": { "line": "five", - "offsetX": 116.15999999999997, + "offsetX": 92.92799999999998, "offsetY": 1.4399999999999977, "rotation": -6.7 }, "hero-2-2-V": { "line": "five", - "offsetX": 232.31999999999994, + "offsetX": 185.85599999999997, "offsetY": -8.63999999999993, "rotation": 6.2 }, "hero-2-3-E": { "line": "five", - "offsetX": 348.48, + "offsetX": 278.78400000000005, "offsetY": -5.759999999999991, "rotation": -2.3 }, - "hero-2-4-\u2026": { + "hero-2-4-…": { "line": "five", - "offsetX": 443.52, + "offsetX": 354.81600000000003, "offsetY": 34.56, "rotation": -1.2 } diff --git a/src/generated/floatingLettersBuildSnapshot.js b/src/generated/floatingLettersBuildSnapshot.js index eddee6c..5621655 100644 --- a/src/generated/floatingLettersBuildSnapshot.js +++ b/src/generated/floatingLettersBuildSnapshot.js @@ -85,17 +85,17 @@ export const FLOATING_LETTER_BUILD_SNAPSHOT = { }, "lines": { "explain-it": { - "anchorX": 0.109, + "anchorX": 0.187, "anchorY": 0.207, "scale": 1 }, "like-im": { - "anchorX": 0.277, + "anchorX": 0.3316, "anchorY": 0.534, "scale": 1 }, "five": { - "anchorX": 0.38299999999999995, + "anchorX": 0.42229999999999995, "anchorY": 0.8529999999999999, "scale": 1 } @@ -109,49 +109,49 @@ export const FLOATING_LETTER_BUILD_SNAPSHOT = { }, "hero-0-1-X": { "line": "explain-it", - "offsetX": 169.6, + "offsetX": 135.68, "offsetY": 25.200000000000017, "rotation": -16.8 }, "hero-0-2-P": { "line": "explain-it", - "offsetX": 347.20000000000005, + "offsetX": 277.76000000000005, "offsetY": -21.599999999999994, "rotation": -0.8 }, "hero-0-3-L": { "line": "explain-it", - "offsetX": 499.20000000000005, + "offsetX": 399.36000000000007, "offsetY": -1.799999999999983, "rotation": -1.6 }, "hero-0-4-A": { "line": "explain-it", - "offsetX": 654.4000000000001, + "offsetX": 523.5200000000001, "offsetY": -4.499999999999972, "rotation": 2.8 }, "hero-0-5-I": { "line": "explain-it", - "offsetX": 776, + "offsetX": 620.8000000000001, "offsetY": -22.5, "rotation": -4.8 }, "hero-0-6-N": { "line": "explain-it", - "offsetX": 913.6, + "offsetX": 730.8800000000001, "offsetY": -23.399999999999977, "rotation": -1.4 }, "hero-0-8-I": { "line": "explain-it", - "offsetX": 1140.7999999999997, + "offsetX": 912.6399999999999, "offsetY": 28.80000000000001, "rotation": 0.4 }, "hero-0-9-T": { "line": "explain-it", - "offsetX": 1248, + "offsetX": 998.4000000000001, "offsetY": -21.599999999999994, "rotation": -1.9 }, @@ -163,37 +163,37 @@ export const FLOATING_LETTER_BUILD_SNAPSHOT = { }, "hero-1-1-I": { "line": "like-im", - "offsetX": 99.20000000000005, + "offsetX": 79.36000000000004, "offsetY": 3.6000000000000227, "rotation": 0.2 }, "hero-1-2-K": { "line": "like-im", - "offsetX": 225.5999999999999, + "offsetX": 180.47999999999993, "offsetY": -4.5, "rotation": 4.9 }, "hero-1-3-E": { "line": "like-im", - "offsetX": 387.19999999999993, + "offsetX": 309.76, "offsetY": -29.700000000000045, "rotation": -5.8 }, "hero-1-5-I": { "line": "like-im", - "offsetX": 651.2, + "offsetX": 520.96, "offsetY": -38.700000000000045, "rotation": 0.8 }, "hero-1-6-'": { "line": "like-im", - "offsetX": 726.3999999999999, + "offsetX": 581.1199999999999, "offsetY": -121.5, "rotation": 4.2 }, "hero-1-7-M": { "line": "like-im", - "offsetX": 873.5999999999999, + "offsetX": 698.88, "offsetY": -13.5, "rotation": 8.4 }, @@ -205,25 +205,25 @@ export const FLOATING_LETTER_BUILD_SNAPSHOT = { }, "hero-2-1-I": { "line": "five", - "offsetX": 113.60000000000002, + "offsetX": 90.88000000000002, "offsetY": 0, "rotation": -6.7 }, "hero-2-2-V": { "line": "five", - "offsetX": 240.0000000000001, + "offsetX": 192.0000000000001, "offsetY": -35.10000000000002, "rotation": 6.2 }, "hero-2-3-E": { "line": "five", - "offsetX": 414.4000000000001, + "offsetX": 331.5200000000001, "offsetY": -30.600000000000023, "rotation": -2.3 }, "hero-2-4-…": { "line": "five", - "offsetX": 628.8000000000002, + "offsetX": 503.0400000000002, "offsetY": 42.30000000000007, "rotation": -1.2 } @@ -242,17 +242,17 @@ export const FLOATING_LETTER_BUILD_SNAPSHOT = { }, "lines": { "explain-it": { - "anchorX": 0.19, + "anchorX": 0.256, "anchorY": 0.25, "scale": 1 }, "like-im": { - "anchorX": 0.48999999999999994, + "anchorX": 0.5199999999999999, "anchorY": 0.4640000000000001, "scale": 1 }, "five": { - "anchorX": 0.48, + "anchorX": 0.522, "anchorY": 0.696, "scale": 1 } @@ -266,49 +266,49 @@ export const FLOATING_LETTER_BUILD_SNAPSHOT = { }, "hero-0-1-X": { "line": "explain-it", - "offsetX": 126.72, + "offsetX": 101.376, "offsetY": 10.080000000000013, "rotation": -16.8 }, "hero-0-2-P": { "line": "explain-it", - "offsetX": 253.43999999999997, + "offsetX": 202.75199999999998, "offsetY": -10.080000000000013, "rotation": -0.8 }, "hero-0-3-L": { "line": "explain-it", - "offsetX": 380.1600000000001, + "offsetX": 304.1280000000001, "offsetY": 0.7199999999999989, "rotation": -1.6 }, "hero-0-4-A": { "line": "explain-it", - "offsetX": 506.8800000000001, + "offsetX": 405.50400000000013, "offsetY": -5.039999999999992, "rotation": 2.8 }, "hero-0-5-I": { "line": "explain-it", - "offsetX": 612.48, + "offsetX": 489.98400000000004, "offsetY": -12.23999999999998, "rotation": -4.8 }, "hero-0-6-N": { "line": "explain-it", - "offsetX": 696.96, + "offsetX": 557.5680000000001, "offsetY": -10.800000000000011, "rotation": -1.4 }, "hero-0-8-I": { "line": "explain-it", - "offsetX": 42.24000000000001, + "offsetX": 33.79200000000001, "offsetY": 152.64000000000004, "rotation": 0.4 }, "hero-0-9-T": { "line": "explain-it", - "offsetX": 168.95999999999995, + "offsetX": 135.16799999999998, "offsetY": 132.48000000000002, "rotation": -1.9 }, @@ -320,37 +320,37 @@ export const FLOATING_LETTER_BUILD_SNAPSHOT = { }, "hero-1-1-I": { "line": "like-im", - "offsetX": 95.03999999999996, + "offsetX": 76.03199999999997, "offsetY": 1.4399999999999977, "rotation": 0.2 }, "hero-1-2-K": { "line": "like-im", - "offsetX": 200.6400000000001, + "offsetX": 160.51200000000009, "offsetY": -9.360000000000014, "rotation": 4.9 }, "hero-1-3-E": { "line": "like-im", - "offsetX": 316.80000000000007, + "offsetX": 253.44000000000005, "offsetY": -10.080000000000041, "rotation": -5.8 }, "hero-1-5-I": { "line": "like-im", - "offsetX": -327.35999999999996, + "offsetX": -261.888, "offsetY": 138.23999999999995, "rotation": 0.8 }, "hero-1-6-'": { "line": "like-im", - "offsetX": -269.28, + "offsetX": -215.42399999999998, "offsetY": 83.51999999999992, "rotation": 4.2 }, "hero-1-7-M": { "line": "like-im", - "offsetX": -168.95999999999992, + "offsetX": -135.16799999999995, "offsetY": 135.35999999999996, "rotation": 8.4 }, @@ -362,25 +362,25 @@ export const FLOATING_LETTER_BUILD_SNAPSHOT = { }, "hero-2-1-I": { "line": "five", - "offsetX": 116.15999999999997, + "offsetX": 92.92799999999998, "offsetY": 1.4399999999999977, "rotation": -6.7 }, "hero-2-2-V": { "line": "five", - "offsetX": 232.31999999999994, + "offsetX": 185.85599999999997, "offsetY": -8.63999999999993, "rotation": 6.2 }, "hero-2-3-E": { "line": "five", - "offsetX": 348.48, + "offsetX": 278.78400000000005, "offsetY": -5.759999999999991, "rotation": -2.3 }, "hero-2-4-…": { "line": "five", - "offsetX": 443.52, + "offsetX": 354.81600000000003, "offsetY": 34.56, "rotation": -1.2 } diff --git a/src/styles.css b/src/styles.css index 41f3e7a..e780195 100644 --- a/src/styles.css +++ b/src/styles.css @@ -2113,7 +2113,7 @@ html[data-debug-ui='true'] .eli5-control-dock { align-items: center; min-height: 34px; padding: 0 12px; - border: 1px solid color-mix(in srgb, var(--magnet-violet) 26%, var(--slate-300)); + border: 1.5px solid color-mix(in srgb, var(--magnet-violet) 56%, var(--slate-300)); border-radius: 12px; background: var(--skill-pill-fill); box-shadow: none;