Add WebP image versions and other minor site tweaks
hensm
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 90 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 90 KiB After Width: | Height: | Size: 90 KiB |
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 91 KiB After Width: | Height: | Size: 91 KiB |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 58 KiB |
BIN
docs/images/webp/menu_dark.webp
Normal file
|
After Width: | Height: | Size: 14 KiB |
BIN
docs/images/webp/menu_dark@2x.webp
Normal file
|
After Width: | Height: | Size: 35 KiB |
BIN
docs/images/webp/menu_light.webp
Normal file
|
After Width: | Height: | Size: 14 KiB |
BIN
docs/images/webp/menu_light@2x.webp
Normal file
|
After Width: | Height: | Size: 33 KiB |
BIN
docs/images/webp/preview-bg.webp
Normal file
|
After Width: | Height: | Size: 43 KiB |
BIN
docs/images/webp/preview-bg@2x.webp
Normal file
|
After Width: | Height: | Size: 114 KiB |
BIN
docs/images/webp/preview-fg_dark.webp
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
docs/images/webp/preview-fg_dark@2x.webp
Normal file
|
After Width: | Height: | Size: 53 KiB |
BIN
docs/images/webp/preview-fg_light.webp
Normal file
|
After Width: | Height: | Size: 18 KiB |
BIN
docs/images/webp/preview-fg_light@2x.webp
Normal file
|
After Width: | Height: | Size: 49 KiB |
@@ -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_macOS_dark@2x.png"],
|
||||
.preview--fg[src="images/preview-fg_macOS_light.png"],
|
||||
.preview--fg[src="images/preview-fg_macOS_light@2x.png"] {
|
||||
.preview--fg[src="images/preview-fg_dark.png"],
|
||||
.preview--fg[src="images/preview-fg_dark@2x.png"],
|
||||
.preview--fg[src="images/preview-fg_light.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;
|
||||
word-break: break-all;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -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"
|
||||
src="images/menu_dark.png"
|
||||
srcset="images/menu_dark.png,
|
||||
images/menu_dark@2x.png 2x">
|
||||
<source type="image/png"
|
||||
srcset="images/menu_dark.png,
|
||||
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"
|
||||
alt="Screenshot preview, background"
|
||||
src="images/preview-bg.png"
|
||||
srcset="images/preview-bg.png,
|
||||
images/preview-bg@2x.png 2x">
|
||||
<picture style="display: contents">
|
||||
<source type="image/webp"
|
||||
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"
|
||||
srcset="images/preview-fg_macOS_light.png,
|
||||
images/preview-fg_macOS_light@2x.png 2x"
|
||||
<source type="image/webp"
|
||||
srcset="images/webp/preview-fg_light.webp,
|
||||
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"
|
||||
srcset="images/preview-fg_macOS_dark.png,
|
||||
images/preview-fg_macOS_dark@2x.png 2x">
|
||||
src="images/preview-fg_dark.png">
|
||||
</picture>
|
||||
|
||||
<footer class="footer">
|
||||
|
||||