diff --git a/README.md b/README.md index 4513aa59..6adf2cf4 100644 --- a/README.md +++ b/README.md @@ -60,6 +60,24 @@ This project has adopted the [Microsoft Open Source Code of Conduct](https://ope For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments. +### Website changes + +The website source is in [site](./site). From the repository root: + +```sh +npm --prefix site ci +npm --prefix site run build +npm --prefix site run serve +``` + +For UI changes, check keyboard navigation, including visible focus in Windows high-contrast themes. +Focus indicators should have at least 3:1 contrast against the adjacent background. +Check reflow at a 320 x 256 CSS-pixel viewport, equivalent to 400% zoom at 1280 x 1024. +Also apply text-spacing overrides: line height of 1.5, letter spacing of 0.12em, word spacing of +0.16em, and paragraph spacing of 2em. The install command must remain readable and its copy button +visible and keyboard-operable. With JavaScript disabled, the command should remain readable and the +inactive copy button should be hidden. + ## Trademarks This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft diff --git a/site/src/css/styles.css b/site/src/css/styles.css index c6df0e8d..71824f95 100644 --- a/site/src/css/styles.css +++ b/site/src/css/styles.css @@ -39,6 +39,15 @@ --typechat-monospace: Consolas, Menlo, Monaco, Roboto, monospace; --typechat-inline-code-color: #a10615; --typechat-rounding-radius: 0.5rem; + --typechat-focus-color: #005a9e; +} + +:focus-visible, +.btn:focus-visible, +.nav-link:focus-visible, +.typechat-prose-content pre:focus { + outline: 3px solid var(--typechat-focus-color); + outline-offset: 3px; } .typechat-cap-content-width { @@ -46,6 +55,12 @@ } .typechat-hero .typechat-code-copy { + --typechat-focus-color: #fff; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 0.75rem; background-color: #212529; color: #fff; font-style: var(--typechat-monospace); @@ -55,18 +70,17 @@ } .typechat-hero .typechat-code-copy code { + flex: 1 1 auto; + min-width: 0; + overflow-wrap: anywhere; background-color: inherit; color: inherit; } .typechat-hero .typechat-code-copy button { - height: 100%; - width: fit-content; - right: 0; - top: 0; + flex: 0 0 auto; border: none; - /* border-radius: var(--typechat-rounding-radius) 0 0 var(--typechat-rounding-radius); */ - border-radius: 0 var(--typechat-rounding-radius) var(--typechat-rounding-radius) 0; + border-radius: var(--typechat-rounding-radius); } .typechat-prose-content :is(pre, blockquote) { @@ -79,11 +93,6 @@ background-color: #f5f8fa; } -.typechat-prose-content pre:focus { - outline: 3px solid #0078d4; - outline-offset: 2px; -} - .typechat-prose-content code { font-family: var(--typechat-monospace); color: var(--typechat-inline-code-color); @@ -117,3 +126,10 @@ .typechat-prose-content th { border-top: 0; } + +@media (forced-colors: active) { + :root, + .typechat-hero .typechat-code-copy { + --typechat-focus-color: CanvasText; + } +} diff --git a/site/src/index.njk b/site/src/index.njk index 68de66d8..f35883a1 100644 --- a/site/src/index.njk +++ b/site/src/index.njk @@ -15,9 +15,9 @@ layout: base Docs GitHub
-
- +
npm install typechat +
diff --git a/site/src/js/interactivity.js b/site/src/js/interactivity.js index a8de42a6..ec2945da 100644 --- a/site/src/js/interactivity.js +++ b/site/src/js/interactivity.js @@ -9,7 +9,7 @@ copyButton?.addEventListener("click", async () => { clearTimeout(lastTimeout); try { - await navigator.clipboard?.writeText("npm install typechat"); + await navigator.clipboard.writeText("npm install typechat"); copyButton.textContent = "✅"; copyButton.title = copyButton.ariaLabel = "Command copied." }