diff --git a/examples/website/src/index.html b/examples/website/src/index.html index 3e99d61..7c3cb56 100644 --- a/examples/website/src/index.html +++ b/examples/website/src/index.html @@ -99,11 +99,7 @@ - + Internal > Ready - -Use color-coded changes to compare tokenisers.`; +Color-coded edits.`; let pendingUpdate: number | null = null; function scheduleUpdate(): void { @@ -74,7 +67,7 @@ function loadSample(): void { .replace('- Prototype\n', '') .replace('- [ ] Draft\n', '') .replace('> Internal\n', '') - .replace('color', 'colour'); + .replace('Color', 'Colour'); rightTextArea.value = sampleText .replace('## Release plan', '# Release plan') .replace('- Publish', '1. Publish') diff --git a/examples/website/src/style.scss b/examples/website/src/style.scss index f2a3374..568a423 100644 --- a/examples/website/src/style.scss +++ b/examples/website/src/style.scss @@ -68,7 +68,7 @@ header { padding: 32px 32px 0 32px; } -header>h1 { +header > h1 { font-size: 2.5rem; font-weight: 700; color: $primary-blue; @@ -93,13 +93,13 @@ code { font-weight: 500; } -header>p { +header > p { color: $text-secondary; font-size: 1.1rem; margin-bottom: 0; } -header>p:not(:first-of-type) { +header > p:not(:first-of-type) { margin-top: 16px; } @@ -299,13 +299,12 @@ textarea { width: 100%; user-select: text; - >* { + > * { position: relative; white-space: pre-wrap; } &:not(.show-deletions) { - .RemovedFromLeft, .RemovedFromRight { display: none; @@ -371,12 +370,12 @@ $DOT_RADIUS: 4; background: caret-colour($light-blue); } - >* { + > * { position: absolute; background-color: inherit; } - >.stick { + > .stick { left: 0; top: 0; transform: translateX(-50%); @@ -387,7 +386,7 @@ $DOT_RADIUS: 4; animation: blink-stick 1s steps(1) infinite; } - >.dot { + > .dot { border-radius: 50%; width: #{$DOT_RADIUS * 2}px; height: #{$DOT_RADIUS * 2}px; @@ -409,11 +408,11 @@ $DOT_RADIUS: 4; } } - &:hover>.dot { + &:hover > .dot { opacity: 0; } - >.info { + > .info { top: -1.3em; left: calc(-#{$CARET_WIDTH} / 2 * 1px); font-size: 0.9em; @@ -426,13 +425,12 @@ $DOT_RADIUS: 4; border-radius: 3px 3px 3px 0; } - &:hover>.info { + &:hover > .info { opacity: 1; } } @keyframes blink-stick { - 0%, 100% { opacity: 1; @@ -448,11 +446,11 @@ $DOT_RADIUS: 4; padding: 32px 18px 0 18px; } - header>h1 { + header > h1 { margin-bottom: 18px; } - header>p { + header > p { font-size: 1rem; } @@ -519,14 +517,14 @@ footer { gap: 16px; } -.footer-links>a>svg { +.footer-links > a > svg { color: $text-secondary; width: 28px; height: 28px; transition: transform 0.2s; } -.footer-links>a>svg:hover { +.footer-links > a > svg:hover { cursor: pointer; transform: scale(1.15); -} \ No newline at end of file +}