Add WebP image versions and other minor site tweaks

docs/index.css

@@ -32,7 +32,8 @@ ul {
 
 :root {
     color: var(--text-color-primary);
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    --system-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-family: var(--system-font);
     font-size: 10px;
 }
 
@@ -67,7 +68,7 @@ body {
     align-items: flex-end;
     display: flex;
     flex-direction: column;
-    font-family: "SF Mono";
+    font-family: "SF Mono", var(--system-font);
     grid-area: header;
     justify-content: flex-end;
     margin-top: 5rem;
@@ -243,10 +244,10 @@ body {
     margin-top: 1rem;
 }
 
-.preview--fg[src="images/preview-fg_macOS_dark.png"],
+.preview--fg[src="images/preview-fg_dark.png"],
-.preview--fg[src="images/preview-fg_macOS_dark@2x.png"],
+.preview--fg[src="images/preview-fg_dark@2x.png"],
-.preview--fg[src="images/preview-fg_macOS_light.png"],
+.preview--fg[src="images/preview-fg_light.png"],
-.preview--fg[src="images/preview-fg_macOS_light@2x.png"] {
+.preview--fg[src="images/preview-fg_light@2x.png"] {
     transform: translate(-55px, -36px);
 }
 
@@ -266,7 +267,6 @@ body {
 
 .faq {
     box-sizing: content-box;
-    overflow-x: auto;
     
 }
 
@@ -277,6 +277,7 @@ body {
 .faq__summary {
     cursor: pointer;
     font-size: 1.1em;
+    font-weight: 600;
     padding: 1rem;
     -moz-user-select: none;
     -webkit-user-select: none;
@@ -284,7 +285,8 @@ body {
 }
 
 .faq__content {
-    max-width: 70rem;
+    max-width: 80rem;
+    overflow-x: auto;
     padding: 2rem;
     padding-top: 1rem;
 }
@@ -302,8 +304,7 @@ body {
 .faq__content code {
     background-color: var(--grey-90-a10);
     border-radius: 3px;
-    vertical-align: top;
+    white-space: pre;
-    word-break: break-all;
 }
 
 

docs/index.html

@@ -66,14 +66,25 @@
                                 <summary class="faq__summary">How do I cast something?</summary>
                                 <div class="faq__content">
                                     <picture style="float: right">
-                                        <source alt="Media context menu"
+                                        <source type="image/webp"
+                                                srcset="images/webp/menu_light.webp,
+                                                        images/webp/menu_light@2x.webp 2x"
+                                                media="(prefers-color-scheme: light)">
+                                        <source type="image/webp"
+                                                srcset="images/webp/menu_dark.webp,
+                                                        images/webp/menu_dark@2x.webp 2x"
+                                                media="(prefers-color-scheme: dark)">
+                                        <source type="image/png"
                                                 srcset="images/menu_light.png,
                                                         images/menu_light@2x.png 2x"
                                                 media="(prefers-color-scheme: light)">
-                                        <img alt="Media context menu"
+                                        <source type="image/png"
-                                             src="images/menu_dark.png"
                                                 srcset="images/menu_dark.png,
-                                                     images/menu_dark@2x.png 2x">
+                                                        images/menu_dark@2x.png 2x"
+                                                media="(prefers-color-scheme: dark)">
+
+                                        <img alt="Screenshot, media context menu."
+                                             src="images/menu_dark.png">
                                     </picture>
                                     <p>
                                         For sites with built-in cast support, click the cast button in the page and select the destination in the receiver selector popup. You may have to add the site to the whitelist to get the cast button to appear.
@@ -256,23 +267,41 @@
                 </section>
             </main>
 
-            <img class="preview preview--bg"
+            <picture style="display: contents">
-                 alt="Screenshot preview, background"
+                <source type="image/webp"
-                 src="images/preview-bg.png"
+                        srcset="images/webp/preview-bg.webp,
+                                images/webp/preview-bg@2x.webp 2x">
+                <source type="image/png"
                         srcset="images/preview-bg.png,
                                 images/preview-bg@2x.png 2x">
 
+                <img class="preview preview--bg"
+                     alt="Screenshot preview (background), browser window."
+                     src="images/preview-bg.png">
+            </picture>
+
             <picture style="display: contents">
-                <source alt="Media context menu"
+                <source type="image/webp"
-                        srcset="images/preview-fg_macOS_light.png,
+                        srcset="images/webp/preview-fg_light.webp,
-                                images/preview-fg_macOS_light@2x.png 2x"
+                                images/webp/preview-fg_light@2x.webp 2x"
                         media="(prefers-color-scheme: light)">
+                <source type="image/webp"
+                        srcset="images/webp/preview-fg_dark.webp,
+                                images/webp/preview-fg_dark@2x.webp 2x"
+                        media="(prefers-color-scheme: dark)">
+                <source type="image/png"
+                        srcset="images/preview-fg_light.png,
+                                images/preview-fg_light@2x.png 2x"
+                        media="(prefers-color-scheme: light)">
+                <source type="image/png"
+                        srcset="images/preview-fg_dark.png,
+                                images/preview-fg_dark@2x.png 2x"
+                        media="(prefers-color-scheme: dark)">
+
                 <img class="preview preview--fg"
-                     alt="Media context menu"
+                     alt="Screenshot preview (foreground), receiver selector popup."
                      width="462" height="275"
-                     src="images/preview-fg_macOS_dark.png"
+                     src="images/preview-fg_dark.png">
-                     srcset="images/preview-fg_macOS_dark.png,
-                             images/preview-fg_macOS_dark@2x.png 2x">
             </picture>
 
             <footer class="footer">