only show quotes on windows (#1006)

Author: mbostock

docs/getting-started.md

@@ -90,11 +90,11 @@ Framework includes a helper script (`observable create`) for creating new projec
 
 To create a new project with npm, run:
 
-<pre data-copy>npm init "@observablehq"</pre>
+<pre data-copy>npm init <span class="win">"</span>@observablehq<span class="win">"</span></pre>
 
 If you prefer Yarn, run:
 
-<pre data-copy>yarn create "@observablehq"</pre>
+<pre data-copy>yarn create <span class="win">"</span>@observablehq<span class="win">"</span></pre>
 
 You can run the above command anywhere, but you may want to `cd` to your `~/Development` directory first (or wherever you do local development).
 

docs/index.md

@@ -110,7 +110,7 @@ index: false
   <h1>The best dashboards are built with <em class="red">code.</em></h1>
   <h2>Create fast, beautiful data apps, dashboards, and reports from the command line. Write Markdown, JavaScript, SQL, Python, R… and any language you like. Free and open-source.</h2>
   <div class="cta">
-    <pre data-copy>npm init @observablehq</pre>
+    <pre data-copy>npm init <span class="win">"</span>@observablehq<span class="win">"</span></pre>
     <a href="./getting-started" class="small arrow" style="color: var(--theme-red);">Get started</a>
   </div>
 </div>

observablehq.config.ts

@@ -92,7 +92,8 @@ export default {
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-9B88TP6PKQ"></script>
 <script>window.dataLayer=window.dataLayer||[];\nfunction gtag(){dataLayer.push(arguments);}\ngtag('js',new Date());\ngtag('config','G-9B88TP6PKQ');</script>`
       : ""
-  }`,
+  }
+<script type="module">/Win/.test(navigator.platform) || Array.from(document.querySelectorAll(".win"), (e) => e.remove())</script>`,
   header: `<div style="display: flex; align-items: center; gap: 0.5rem; height: 2.2rem; margin: -1.5rem -2rem 2rem -2rem; padding: 0.5rem 2rem; border-bottom: solid 1px var(--theme-foreground-faintest); font: 500 16px var(--sans-serif);">
   <a href="https://observablehq.com/" style="display: flex; align-items: center;">
     <svg width="22" height="22" viewBox="0 0 21.92930030822754 22.68549919128418" fill="currentColor">

src/style/layout.css

@@ -426,11 +426,10 @@
   content: "Copied!";
   position: absolute;
   right: calc(100% + 0.25rem);
-  background: var(--theme-background-alt);
+  background: linear-gradient(to right, transparent, var(--theme-background-alt) 10%);
   color: var(--theme-green);
   font: var(--font-small);
-  border-radius: 4px;
-  padding: 4px 8px;
+  padding: 4px 8px 4px 16px;
   pointer-events: none;
   animation-name: observablehq-pre-copied;
   animation-duration: 250ms;