mirror of
https://github.com/hensm/fx_cast.git
synced 2026-06-08 08:39:59 +00:00
Improve site accessibility + add favicon
This commit is contained in:
hensm
BIN
docs/favicon-16.png
Normal file
BIN
docs/favicon-16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
docs/favicon-32.png
Normal file
BIN
docs/favicon-32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
5
docs/favicon.svg
Normal file
5
docs/favicon.svg
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#0a84ff">
|
||||||
|
<path d="M12 1H4a3 3 0 0 0-3 3v2h2V4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2v2h2a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3z"/>
|
||||||
|
<path d="M1 15v-2a2 2 0 0 1 2 2H1zM7 15h2a8 8 0 0 0-8-8v2a6 6 0 0 1 6 6z"/>
|
||||||
|
<path d="M1 12a3 3 0 0 1 3 3h2a5 5 0 0 0-5-5z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 344 B |
BIN
docs/images/paypal.png
Normal file
BIN
docs/images/paypal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
@@ -20,9 +20,14 @@ body {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6, p {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin: initial;
|
||||||
|
font-size: inherit;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
margin: initial;
|
margin: initial;
|
||||||
font-weight: unset;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
@@ -63,6 +68,14 @@ body {
|
|||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.container h1 { font-size: 2.2rem ;}
|
||||||
|
.container h2 { font-size: 2.0rem ;}
|
||||||
|
.container h3 { font-size: 1.8rem ;}
|
||||||
|
.container h4 { font-size: 1.6rem ;}
|
||||||
|
.container h5,
|
||||||
|
.container h6 { font-size: 1.5rem ;}
|
||||||
|
|
||||||
|
|
||||||
.site-header {
|
.site-header {
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
@@ -75,7 +88,7 @@ body {
|
|||||||
height: 105px;
|
height: 105px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-header__title {
|
h1.site-header__title {
|
||||||
font-size: 5rem;
|
font-size: 5rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
@@ -83,9 +96,10 @@ body {
|
|||||||
.site-header__subtitle {
|
.site-header__subtitle {
|
||||||
background-color: var(--text-color-secondary);
|
background-color: var(--text-color-secondary);
|
||||||
color: var(--page-color);
|
color: var(--page-color);
|
||||||
font-size: 2.5rem;
|
font-size: 2.2rem;
|
||||||
padding: 0.25rem 1rem;
|
|
||||||
margin-right: -1rem;
|
margin-right: -1rem;
|
||||||
|
padding: 0.25rem 1rem;
|
||||||
|
text-transform: lowercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-content {
|
.site-content {
|
||||||
@@ -95,9 +109,9 @@ body {
|
|||||||
.description {
|
.description {
|
||||||
font-size: 1.75rem;
|
font-size: 1.75rem;
|
||||||
grid-area: description;
|
grid-area: description;
|
||||||
|
max-width: 45rem;
|
||||||
padding-right: 4rem;
|
padding-right: 4rem;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
max-width: 45rem;
|
|
||||||
}
|
}
|
||||||
.description__disclaimer {
|
.description__disclaimer {
|
||||||
color: var(--text-color-secondary);
|
color: var(--text-color-secondary);
|
||||||
@@ -147,6 +161,11 @@ body {
|
|||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.download__app-other > summary > h3 {
|
||||||
|
display: inline;
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.app-list {
|
.app-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -257,6 +276,7 @@ body {
|
|||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.faqs__list {
|
.faqs__list {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
@@ -277,13 +297,16 @@ body {
|
|||||||
.faq__summary {
|
.faq__summary {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
font-weight: 600;
|
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.faq__summary > h3 {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
.faq__content {
|
.faq__content {
|
||||||
max-width: 80rem;
|
max-width: 80rem;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
@@ -297,9 +320,6 @@ body {
|
|||||||
.faq__content ul {
|
.faq__content ul {
|
||||||
padding-left: 2rem;
|
padding-left: 2rem;
|
||||||
}
|
}
|
||||||
.faq__content h3, h4 {
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.faq__content code {
|
.faq__content code {
|
||||||
background-color: var(--grey-90-a10);
|
background-color: var(--grey-90-a10);
|
||||||
|
|||||||
@@ -1,27 +1,34 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html class="theme-dark">
|
<html lang="en" class="theme-dark">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
<meta name="description" content="A browser extension that enables Chromecast support for casting web apps (like YouTube, Netflix or BBC iPlayer).">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>fx_cast</title>
|
|
||||||
|
<title>fx_cast: Chromecast for Firefox</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="fonts/stylesheet.css">
|
<link rel="stylesheet" href="fonts/stylesheet.css">
|
||||||
<link rel="stylesheet" href="photon-colors.css">
|
<link rel="stylesheet" href="photon-colors.css">
|
||||||
<link rel="stylesheet" href="photon.css">
|
<link rel="stylesheet" href="photon.css">
|
||||||
<link rel="stylesheet" href="index.css">
|
<link rel="stylesheet" href="index.css">
|
||||||
|
|
||||||
|
<link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any">
|
||||||
|
<link rel="icon" type="image/png" href="favicon-16.png" sizes="16x16">
|
||||||
|
<link rel="icon" type="image/png" href="favicon-32.png" sizes="32x32">
|
||||||
|
|
||||||
<script src="index.js" defer></script>
|
<script src="index.js" defer></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<header class="site-header">
|
<header class="site-header">
|
||||||
<h1 class="site-header__title">fx_cast</h1>
|
<h1 class="site-header__title">fx_cast</h1>
|
||||||
<p class="site-header__subtitle">chromecast <nobr>for firefox</nobr></p>
|
<p class="site-header__subtitle">Chromecast <nobr>for Firefox</nobr></p>
|
||||||
</header>
|
</header>
|
||||||
<main class="site-content">
|
<main class="site-content">
|
||||||
<section class="description">
|
<section class="description">
|
||||||
|
<h2 hidden>Description</h2>
|
||||||
<p>
|
<p>
|
||||||
Enables Chromecast support for casting web apps (like Netflix or BBC iPlayer), HTML5 video and screen/tab sharing.
|
A browser extension that enables Chromecast support for casting web apps (like YouTube, Netflix or BBC iPlayer), HTML5 media and <nobr>screen/tab sharing</nobr>.
|
||||||
</p>
|
</p>
|
||||||
<p class="description__disclaimer">
|
<p class="description__disclaimer">
|
||||||
Requires a native bridge app to connect with receiver devices. Currently supported on Windows, macOS and Linux.
|
Requires a native bridge app to connect with receiver devices. Currently supported on Windows, macOS and Linux.
|
||||||
@@ -31,26 +38,44 @@
|
|||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
<section class="download">
|
<section class="download">
|
||||||
<a class="download__ext button button--puffy button--primary" disabled title="No available download found">
|
<h2 hidden>Downloads</h2>
|
||||||
<img class="button__icon" src="icons/extension_light.svg" alt="">
|
<a class="download__ext button button--puffy button--primary"
|
||||||
|
title="No available download found"
|
||||||
|
disabled>
|
||||||
|
<img class="button__icon"
|
||||||
|
src="icons/extension_light.svg"
|
||||||
|
alt="Extension symbol (puzzle) icon">
|
||||||
Firefox Extension
|
Firefox Extension
|
||||||
</a>
|
</a>
|
||||||
<a class="download__app button button--puffy" disabled title="No available download found"></a>
|
<a class="download__app button button--puffy"
|
||||||
|
title="No available download found"
|
||||||
|
disabled>
|
||||||
|
</a>
|
||||||
<details class="download__app-other">
|
<details class="download__app-other">
|
||||||
<summary>Other bridge downloads</summary>
|
<summary>
|
||||||
|
<h3>Other bridge downloads</h3>
|
||||||
|
</summary>
|
||||||
<div class="app-list">
|
<div class="app-list">
|
||||||
<a class="app-list__app app-list__win" disabled title="No available download found">
|
<a class="app-list__app app-list__win"
|
||||||
|
title="No available download found"
|
||||||
|
disabled>
|
||||||
Windows
|
Windows
|
||||||
</a>
|
</a>
|
||||||
<a class="app-list__app app-list__mac" disabled title="No available download found">
|
<a class="app-list__app app-list__mac"
|
||||||
|
title="No available download found"
|
||||||
|
disabled>
|
||||||
macOS
|
macOS
|
||||||
</a>
|
</a>
|
||||||
<div class="app-list__platform">
|
<div class="app-list__platform">
|
||||||
<a class="app-list__app app-list__deb" disabled title="No available download found">
|
<a class="app-list__app app-list__deb"
|
||||||
|
title="No available download found"
|
||||||
|
disabled>
|
||||||
Linux
|
Linux
|
||||||
<span class="app-list__app-label">DEB</span>
|
<span class="app-list__app-label">DEB</span>
|
||||||
</a>
|
</a>
|
||||||
<a class="app-list__app app-list__rpm" disabled title="No available download found">
|
<a class="app-list__app app-list__rpm"
|
||||||
|
title="No available download found"
|
||||||
|
disabled>
|
||||||
Linux
|
Linux
|
||||||
<span class="app-list__app-label">RPM</span>
|
<span class="app-list__app-label">RPM</span>
|
||||||
</a>
|
</a>
|
||||||
@@ -59,11 +84,13 @@
|
|||||||
</details>
|
</details>
|
||||||
</section>
|
</section>
|
||||||
<section class="faqs">
|
<section class="faqs">
|
||||||
<h1>FAQs</h1>
|
<h2>FAQs</h2>
|
||||||
<ul class="faqs__list">
|
<ul class="faqs__list">
|
||||||
<li class="faqs__list-item">
|
<li class="faqs__list-item">
|
||||||
<details class="faq card" open>
|
<details class="faq card" open>
|
||||||
<summary class="faq__summary">How do I cast something?</summary>
|
<summary class="faq__summary">
|
||||||
|
<h3>How do I cast something?</h3>
|
||||||
|
</summary>
|
||||||
<div class="faq__content">
|
<div class="faq__content">
|
||||||
<picture style="float: right">
|
<picture style="float: right">
|
||||||
<source type="image/webp"
|
<source type="image/webp"
|
||||||
@@ -104,7 +131,9 @@
|
|||||||
</li>
|
</li>
|
||||||
<li class="faqs__list-item">
|
<li class="faqs__list-item">
|
||||||
<details class="faq card">
|
<details class="faq card">
|
||||||
<summary class="faq__summary">Why do I need the bridge?</summary>
|
<summary class="faq__summary">
|
||||||
|
<h3>Why do I need the bridge?</h3>
|
||||||
|
</summary>
|
||||||
<div class="faq__content">
|
<div class="faq__content">
|
||||||
<p>
|
<p>
|
||||||
Access to TCP/UDP sockets.
|
Access to TCP/UDP sockets.
|
||||||
@@ -128,11 +157,13 @@
|
|||||||
</li>
|
</li>
|
||||||
<li class="faqs__list-item">
|
<li class="faqs__list-item">
|
||||||
<details class="faq card">
|
<details class="faq card">
|
||||||
<summary class="faq__summary">How do I completely remove the bridge?</summary>
|
<summary class="faq__summary">
|
||||||
|
<h3>How do I completely remove the bridge?</h3>
|
||||||
|
</summary>
|
||||||
<div class="faq__content">
|
<div class="faq__content">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<h3>Windows</h3>
|
<h4>Windows</h4>
|
||||||
<p>
|
<p>
|
||||||
Removing the bridge on Windows should be as easy as running the uninstaller (<code>C:\Program Files\fx_cast\uninstaller.exe</code>) found in the control panel or settings application.
|
Removing the bridge on Windows should be as easy as running the uninstaller (<code>C:\Program Files\fx_cast\uninstaller.exe</code>) found in the control panel or settings application.
|
||||||
</p>
|
</p>
|
||||||
@@ -153,7 +184,7 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<h3>macOS</h3>
|
<h4>macOS</h4>
|
||||||
<p>
|
<p>
|
||||||
Remove the following files/folders:
|
Remove the following files/folders:
|
||||||
</p>
|
</p>
|
||||||
@@ -167,7 +198,7 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<h3>Linux</h3>
|
<h4>Linux</h4>
|
||||||
<p>
|
<p>
|
||||||
On Debian-based systems, remove the <code>fx-cast-bridge</code> package, otherwise remove the <code>fx_cast_bridge</code> package.
|
On Debian-based systems, remove the <code>fx-cast-bridge</code> package, otherwise remove the <code>fx_cast_bridge</code> package.
|
||||||
</p>
|
</p>
|
||||||
@@ -192,7 +223,9 @@
|
|||||||
</li>
|
</li>
|
||||||
<li class="faqs__list-item">
|
<li class="faqs__list-item">
|
||||||
<details class="faq card">
|
<details class="faq card">
|
||||||
<summary class="faq__summary">Why is there no sound when casting a screen or tab?</summary>
|
<summary class="faq__summary">
|
||||||
|
<h3>Why is there no sound when casting a screen or tab?</h3>
|
||||||
|
</summary>
|
||||||
<div class="faq__content">
|
<div class="faq__content">
|
||||||
<p>
|
<p>
|
||||||
API limitations. There's no method of obtaining the audio streams. Merging of audio streams from remote media is also not possible due to cross-origin issues.
|
API limitations. There's no method of obtaining the audio streams. Merging of audio streams from remote media is also not possible due to cross-origin issues.
|
||||||
@@ -210,7 +243,9 @@
|
|||||||
</li>
|
</li>
|
||||||
<li class="faqs__list-item">
|
<li class="faqs__list-item">
|
||||||
<details class="faq card">
|
<details class="faq card">
|
||||||
<summary class="faq__summary">Why doesn't 𝑥 site work?</summary>
|
<summary class="faq__summary">
|
||||||
|
<h3>Why doesn't 𝑥 site work?</h3>
|
||||||
|
</summary>
|
||||||
<div class="faq__content">
|
<div class="faq__content">
|
||||||
<p>
|
<p>
|
||||||
Compatibility with Chrome is far from perfect. Most sites will only enable their cast support if the browser reports itself as Chrome. Ensure that you've added the site to the whitelist. Some sites may not test their Chrome-specific code with Firefox, so it's possible that they're using incompatible/non-standard APIs.
|
Compatibility with Chrome is far from perfect. Most sites will only enable their cast support if the browser reports itself as Chrome. Ensure that you've added the site to the whitelist. Some sites may not test their Chrome-specific code with Firefox, so it's possible that they're using incompatible/non-standard APIs.
|
||||||
@@ -226,7 +261,9 @@
|
|||||||
</li>
|
</li>
|
||||||
<li class="faqs__list-item">
|
<li class="faqs__list-item">
|
||||||
<details class="faq card">
|
<details class="faq card">
|
||||||
<summary class="faq__summary">Why can't I cast DRM-encumbered media?</summary>
|
<summary class="faq__summary">
|
||||||
|
<h3>Why can't I cast DRM-encumbered media?</h3>
|
||||||
|
</summary>
|
||||||
<div class="faq__content">
|
<div class="faq__content">
|
||||||
<p>
|
<p>
|
||||||
Unforunately, for DRM-encumbered media, there's no network-accessible URL to provide to the Chromecast and no means of accessing the media streams. The only way to cast on sites like this is via built-in Chromecast support (look for a cast button), which may not always be available.
|
Unforunately, for DRM-encumbered media, there's no network-accessible URL to provide to the Chromecast and no means of accessing the media streams. The only way to cast on sites like this is via built-in Chromecast support (look for a cast button), which may not always be available.
|
||||||
@@ -236,7 +273,9 @@
|
|||||||
</li>
|
</li>
|
||||||
<li class="faqs__list-item">
|
<li class="faqs__list-item">
|
||||||
<details class="faq card">
|
<details class="faq card">
|
||||||
<summary class="faq__summary">Why is it taking so long for a full release?</summary>
|
<summary class="faq__summary">
|
||||||
|
<h3>Why is it taking so long for a full release?</h3>
|
||||||
|
</summary>
|
||||||
<div class="faq__content">
|
<div class="faq__content">
|
||||||
<p>
|
<p>
|
||||||
Though I do enjoy working on this, it's (obviously) not a full-time thing. It's just a hobby project. You can help speed up development by contributing (see below).
|
Though I do enjoy working on this, it's (obviously) not a full-time thing. It's just a hobby project. You can help speed up development by contributing (see below).
|
||||||
@@ -246,7 +285,9 @@
|
|||||||
</li>
|
</li>
|
||||||
<li class="faqs__list-item">
|
<li class="faqs__list-item">
|
||||||
<details class="faq card">
|
<details class="faq card">
|
||||||
<summary class="faq__summary">How can I support development?</summary>
|
<summary class="faq__summary">
|
||||||
|
<h3>How can I support development?</h3>
|
||||||
|
</summary>
|
||||||
<div class="faq__content">
|
<div class="faq__content">
|
||||||
<p>
|
<p>
|
||||||
Contributing code, translations, compatibility reports, or even reporting bugs is very helpful. See the <a href="https://github.com/hensm/fx_cast/blob/master/CONTRIBUTING.md">contributing guide</a> for more information.
|
Contributing code, translations, compatibility reports, or even reporting bugs is very helpful. See the <a href="https://github.com/hensm/fx_cast/blob/master/CONTRIBUTING.md">contributing guide</a> for more information.
|
||||||
@@ -257,7 +298,7 @@
|
|||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=3Z2FTMSG976WN&source=url">
|
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=3Z2FTMSG976WN&source=url">
|
||||||
<img src="https://camo.githubusercontent.com/fb9813996f164bbcc88900197f61c0d22935ce24/68747470733a2f2f7777772e70617970616c2e636f6d2f656e5f55532f692f62746e2f62746e5f646f6e61746543435f4c472e676966" alt="Donate with PayPal button">
|
<img src="images/paypal.png" alt="Donate with PayPal button">
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -306,11 +347,14 @@
|
|||||||
|
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<div class="links">
|
<div class="links">
|
||||||
<a class="links__link links__link-github" href="https://github.com/hensm/fx_cast">
|
<a class="links__link links__link-github"
|
||||||
|
href="https://github.com/hensm/fx_cast"
|
||||||
|
title="Visit GitHub repository">
|
||||||
<img src="icons/GitHub-Mark-32px.png"
|
<img src="icons/GitHub-Mark-32px.png"
|
||||||
srcset="icons/GitHub-Mark-32px.png,
|
srcset="icons/GitHub-Mark-32px.png,
|
||||||
icons/GitHub-Mark-64px.png 2x,
|
icons/GitHub-Mark-64px.png 2x,
|
||||||
icons/GitHub-Mark-120px-plus.png 3x">
|
icons/GitHub-Mark-120px-plus.png 3x"
|
||||||
|
alt="GitHub logo">
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|||||||
Reference in New Issue
Block a user