A couple of CSS tweaks

- Fix the "Run" button scrolling horizontally on small screens.
 - Make the "X" in the computer popup square.
 - Make the computer popup more fun.

projects/web/src/index.tsx

@@ -88,7 +88,7 @@ class Window extends Component<WindowProps, WindowState> {
 
             const mount = element.getAttribute("data-mount");
             const peripheral = element.getAttribute("data-peripheral");
-            render(<Click run={this.runExample(example, mount, peripheral)} />, element);
+            render(<Click run={this.runExample(example, mount, peripheral)} />, element.parentElement!!);
         }
     }
 
@@ -98,14 +98,16 @@ class Window extends Component<WindowProps, WindowState> {
 
     public render(_: WindowProps, { visible, example, exampleIdx }: WindowState): ComponentChild {
         return visible ? <div class="example-window" style={`transform: translate(${this.left}px, ${this.top}px);`}>
-            <div class="titlebar">
+            <div class="example-contents">
-                <div class="titlebar-drag" onMouseDown={this.onMouseDown} onTouchStart={this.onTouchDown} />
+                <div class="titlebar">
-                <button type="button" class="titlebar-close" onClick={this.close}>{"\u2715"}</button>
+                    <div class="titlebar-drag" onMouseDown={this.onMouseDown} onTouchStart={this.onTouchDown} />
-            </div>
+                    <button type="button" class="titlebar-close" onClick={this.close}>{"\u2715"}</button>
-            <div class="computer-container">
+                </div>
-                <Computer key={exampleIdx} files={{
+                <div class="computer-container">
-                    ...defaultFiles, ...example!.files,
+                    <Computer key={exampleIdx} files={{
-                }} peripherals={{ back: example!.peripheral }} />
+                        ...defaultFiles, ...example!.files,
+                    }} peripherals={{ back: example!.peripheral }} />
+                </div>
             </div>
         </div> : <div class="example-window example-window-hidden" />;
     }

projects/web/src/styles.css

@@ -1,6 +1,8 @@
-// SPDX-FileCopyrightText: 2020 The CC: Tweaked Developers
+/*
-//
+SPDX-FileCopyrightText: 2020 The CC: Tweaked Developers
-// SPDX-License-Identifier: LicenseRef-CCPL
+
+SPDX-License-Identifier: LicenseRef-CCPL
+*/
 
 :root {
     --nav-width: 250px;
@@ -29,7 +31,7 @@ table th {
     background-color: var(--background-2);
 }
 
-pre.highlight {
+div.lua-example {
     position: relative;
 }
 
@@ -49,6 +51,24 @@ pre.highlight {
     top: 0px;
 }
 
+.example-window-hidden {
+    display: none;
+}
+
+.example-contents {
+    animation: popup 0.3s cubic-bezier(.18,.89,.32,1.28);
+    transform-origin: center center;
+}
+
+@keyframes popup {
+    0% { scale: 0.5; }
+    100% { scale: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .example-contents { animation: none; }
+}
+
 /* Behold, the most cursed CSS! copy-cat's resizing algorithm is a weird, in
    that it basically does "wrapper height - 40px" to determine the effective
    size. But the footer is actually 1em+6px high, so we need to do very weird
@@ -62,10 +82,6 @@ pre.highlight {
     margin-top: calc((1em + 6px - 40px) / 2);
 }
 
-.example-window-hidden {
-    display: none;
-}
-
 .titlebar {
     display: flex;
     background: #dede6c;
@@ -84,6 +100,7 @@ pre.highlight {
     border-radius: 0px;
     margin: 0px;
     font-size: 15px;
+    width: 30px; /* Same as titlebar height. */
 }
 
 .titlebar-close:hover {

projects/web/src/transform.tsx

@@ -37,6 +37,12 @@ import { DataExport, WithExport } from "./components/WithExport.js";
             components: {
                 ['mc-recipe']: noChildren(Recipe),
                 ['mcrecipe']: noChildren(Recipe),
+                // Wrap example snippets in a <div class="lua-example">...</div>, so we can inject a
+                // Run button into them.
+                ['pre']: (args: JSX.IntrinsicElements["pre"] & { "data-lua-kind"?: undefined }) => {
+                    const element = <pre {...args} />;
+                    return args["data-lua-kind"] ? <div className="lua-example">{element}</div> : element
+                }
             } as any
         });