Add website to docs directory

docs/fonts/stylesheet.css

@@ -0,0 +1,95 @@
+@font-face {
+    font-family: 'SF Mono';
+    src: url('SFMono-Light.woff2') format('woff2'),
+        url('SFMono-Light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'SF Mono';
+    src: url('SFMono-Bold.woff2') format('woff2'),
+        url('SFMono-Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'SF Mono';
+    src: url('SFMono-Heavy.woff2') format('woff2'),
+        url('SFMono-Heavy.woff') format('woff');
+    font-weight: 900;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'SF Mono';
+    src: url('SFMono-BoldItalic.woff2') format('woff2'),
+        url('SFMono-BoldItalic.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'SF Mono';
+    src: url('SFMono-Semibold.woff2') format('woff2'),
+        url('SFMono-Semibold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'SF Mono';
+    src: url('SFMono-HeavyItalic.woff2') format('woff2'),
+        url('SFMono-HeavyItalic.woff') format('woff');
+    font-weight: 900;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'SF Mono';
+    src: url('SFMono-LightItalic.woff2') format('woff2'),
+        url('SFMono-LightItalic.woff') format('woff');
+    font-weight: 300;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'SF Mono';
+    src: url('SFMono-RegularItalic.woff2') format('woff2'),
+        url('SFMono-RegularItalic.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'SF Mono';
+    src: url('SFMono-MediumItalic.woff2') format('woff2'),
+        url('SFMono-MediumItalic.woff') format('woff');
+    font-weight: 500;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'SF Mono';
+    src: url('SFMono-Regular.woff2') format('woff2'),
+        url('SFMono-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'SF Mono';
+    src: url('SFMono-SemiboldItalic.woff2') format('woff2'),
+        url('SFMono-SemiboldItalic.woff') format('woff');
+    font-weight: 600;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'SF Mono';
+    src: url('SFMono-Medium.woff2') format('woff2'),
+        url('SFMono-Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+}

docs/icons/arrow_down_dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="rgba(12, 12, 13, .8)" d="M8 12a1 1 0 0 1-.707-.293l-5-5a1 1 0 0 1 1.414-1.414L8 9.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-5 5A1 1 0 0 1 8 12z"/></svg>

docs/icons/arrow_down_light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="rgba(249, 249, 250, .8)" d="M8 12a1 1 0 0 1-.707-.293l-5-5a1 1 0 0 1 1.414-1.414L8 9.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-5 5A1 1 0 0 1 8 12z"/></svg>

docs/icons/download_dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="rgba(12, 12, 13, .8)" d="M7.293 12.707a1 1 0 0 0 1.414 0l5-5a1 1 0 0 0-1.414-1.414L9 9.586V1a1 1 0 1 0-2 0v8.586L3.707 6.293a1 1 0 0 0-1.414 1.414zM13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/></svg>

docs/icons/download_light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="rgba(249, 249, 250, .8)" d="M7.293 12.707a1 1 0 0 0 1.414 0l5-5a1 1 0 0 0-1.414-1.414L9 9.586V1a1 1 0 1 0-2 0v8.586L3.707 6.293a1 1 0 0 0-1.414 1.414zM13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/></svg>

docs/icons/extension_dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="rgba(12, 12, 13, .8)" d="M14.5 8c-.971 0-1 1-1.75 1a.765.765 0 0 1-.75-.75V5a1 1 0 0 0-1-1H7.75A.765.765 0 0 1 7 3.25c0-.75 1-.779 1-1.75C8 .635 7.1 0 6 0S4 .635 4 1.5c0 .971 1 1 1 1.75a.765.765 0 0 1-.75.75H1a1 1 0 0 0-1 1v2.25A.765.765 0 0 0 .75 8c.75 0 .779-1 1.75-1C3.365 7 4 7.9 4 9s-.635 2-1.5 2c-.971 0-1-1-1.75-1a.765.765 0 0 0-.75.75V15a1 1 0 0 0 1 1h3.25a.765.765 0 0 0 .75-.75c0-.75-1-.779-1-1.75 0-.865.9-1.5 2-1.5s2 .635 2 1.5c0 .971-1 1-1 1.75a.765.765 0 0 0 .75.75H11a1 1 0 0 0 1-1v-3.25a.765.765 0 0 1 .75-.75c.75 0 .779 1 1.75 1 .865 0 1.5-.9 1.5-2s-.635-2-1.5-2z"/></svg>

docs/icons/extension_light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="rgba(249, 249, 250, .8)" d="M14.5 8c-.971 0-1 1-1.75 1a.765.765 0 0 1-.75-.75V5a1 1 0 0 0-1-1H7.75A.765.765 0 0 1 7 3.25c0-.75 1-.779 1-1.75C8 .635 7.1 0 6 0S4 .635 4 1.5c0 .971 1 1 1 1.75a.765.765 0 0 1-.75.75H1a1 1 0 0 0-1 1v2.25A.765.765 0 0 0 .75 8c.75 0 .779-1 1.75-1C3.365 7 4 7.9 4 9s-.635 2-1.5 2c-.971 0-1-1-1.75-1a.765.765 0 0 0-.75.75V15a1 1 0 0 0 1 1h3.25a.765.765 0 0 0 .75-.75c0-.75-1-.779-1-1.75 0-.865.9-1.5 2-1.5s2 .635 2 1.5c0 .971-1 1-1 1.75a.765.765 0 0 0 .75.75H11a1 1 0 0 0 1-1v-3.25a.765.765 0 0 1 .75-.75c.75 0 .779 1 1.75 1 .865 0 1.5-.9 1.5-2s-.635-2-1.5-2z"/></svg>

docs/index.css

@@ -0,0 +1,170 @@
+
+:root.theme-light {
+    --page-color: white;
+    --text-color-primary: var(--grey-90);
+    --text-color-secondary: var(--grey-50);
+}
+:root.theme-dark {
+    --page-color: var(--grey-70);
+    --text-color-primary: var(--white-100);
+    --text-color-secondary: var(--grey-40);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+    margin: initial;
+    font-weight: unset;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+html,
+body {
+    height: 100%;
+    width: 100%;
+}
+
+:root {
+    background-color: var(--page-color);
+    color: var(--text-color-primary);
+    font-family: "SF Mono";
+    font-size: 10px;
+    font-weight: lighter;
+}
+
+body {
+    display: flex;
+    margin: initial;
+}
+
+.container {
+    min-width: 480px;
+    margin: auto;
+    display: grid;
+    font-size: 13px;
+    grid-gap: 3rem;
+    grid-column-gap: 6rem;
+    grid-template-columns: min-content min-content;
+    grid-template-rows: min-content min-content;
+    grid-template-areas:
+        "main preview"
+        "footer preview";
+    overflow-x: hidden;
+    padding: 2rem 6rem;
+}
+
+.main {
+    min-width: inherit;
+    align-items: flex-end;
+    flex-direction: column;
+    display: flex;
+    justify-content: center;
+    grid-area: main;
+}
+
+.main-header,
+.main-content {
+    display: contents;
+}
+
+.main-content > * {
+    margin: 2rem 0;
+}
+
+.main-title {
+    font-size: 5rem;
+    font-weight: 400;
+    margin-bottom: 0.5rem;
+}
+.main-subtitle {
+    background-color: var(--text-color-secondary);
+    color: var(--page-color);
+    font-size: 2.75rem;
+    padding: 0.25rem 1rem;
+    margin-inline-end: -1rem;
+}
+
+.description {
+    width: 45ch;
+    font-size: 1.75rem;
+    text-align: right;
+}
+.discription__disclaimer {
+    font-size: 0.8em;
+    color: var(--text-color-secondary);
+}
+
+.description p {
+    margin: 1rem 0;
+}
+
+.download {
+    align-items: flex-end;
+    display: flex;
+    flex-direction: column;
+    font-size: 2rem;
+    position: relative;
+}
+
+.download__ext,
+.download__app .app-list__app {
+    font-size: 0.85em;
+}
+
+.app-list {
+    align-items: center;
+    display: flex;
+    margin-top: 1rem;
+}
+.app-list__app {
+    cursor: pointer;
+}
+.app-list__app:not(:last-child) {
+    margin-inline-end: 0.5rem;
+}
+
+.app-list__label {
+    color: var(--text-color-secondary);
+    font-size: 1.75rem;
+    margin-inline-end: 1rem;
+}
+
+
+.preview {
+    grid-area: preview;
+}
+
+.preview--bg {
+    height: auto;
+    width: auto;
+    max-width: 912px;
+    max-height: 712px;
+}
+
+.preview--fg {
+    max-height: 281px;
+    max-width: 462px;
+    position: relative;
+    top: 115px;
+    margin-inline-start: -40px;
+}
+
+.footer {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    font-size: 1.5rem;
+    grid-area: footer;
+    justify-content: center;
+}
+
+:root.theme-dark .links__github {
+    filter: invert(1);
+}

docs/index.html

@@ -0,0 +1,67 @@
+<html class="theme-dark">
+    <head>
+        <meta charset="utf-8">
+        <title>fx_cast</title>
+
+        <link rel="stylesheet" href="fonts/stylesheet.css">
+        <link rel="stylesheet" href="photon-colors.css">
+        <link rel="stylesheet" href="photon.css">
+        <link rel="stylesheet" href="index.css">
+    </head>
+    <body>
+        <div class="container">
+            <div class="main">
+                <header class="main-header">
+                    <h1 class="main-title">fx_cast</h1>
+                    <h2 class="main-subtitle">chromecast for firefox</h2>
+                </header>
+                <main class="main-content">
+                    <section class="description">
+                        <p>
+                            Enables Chromecast support for casting web apps (like Netflix, YouTube or BBC iPlayer), HTML5 video and screen/tab sharing.
+                        </p>
+                        <p class="discription__disclaimer">
+                            Requires a native bridge app to connect with receiver devices. Currently supported on Windows, macOS and Linux.
+                            <br><br>
+                            <strong>No public full release yet!</strong>
+                        </p>
+                    </section>
+                    <section class="download">
+                        <a class="download__ext btn btn--puffy btn--primary" href="#" disabled>
+                            <img class="btn__icon" src="icons/extension_light.svg" alt="">
+                            Firefox Extension
+                        </a>
+                        <div class="download__app">
+                            <div class="app-list">
+                                <div class="app-list__label">Bridge:</div>
+                                <a class="app-list__app btn btn--puffy" href="#" disabled>
+                                    macOS
+                                </a>
+                                <a class="app-list__app btn btn--puffy" href="#" disabled>
+                                    Linux
+                                </a>
+                                <a class="app-list__app btn btn--puffy" href="#" disabled>
+                                    Windows
+                                </a>
+                            </div>
+                        </div>
+                    </section>
+                </main>
+            </div>
+
+            <img width="884" height="684" src="images/preview_bg_dark_unfocused.png" class="preview preview--bg dark">
+            <img width="462" height="281" src="images/preview_fg.png" class="preview preview--fg dark">
+
+            <footer class="footer">
+                <div class="links">
+                    <a class="links__github" href="https://github.com/hensm/fx_cast">
+                        <img src="icons/GitHub-Mark-32px.png"
+                             srcset="icons/GitHub-Mark-32px.png,
+                                     icons/GitHub-Mark-64px.png 2x,
+                                     icons/GitHub-Mark-120px-plus.png 3x">
+                    </a>
+                </div>
+            </footer>
+        </div>
+    </body>
+</html>

docs/photon-colors.css

@@ -0,0 +1,91 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* Photon Colors CSS Variables v3.2.0 */
+
+:root {
+  --magenta-50: #ff1ad9;
+  --magenta-60: #ed00b5;
+  --magenta-70: #b5007f;
+  --magenta-80: #7d004f;
+  --magenta-90: #440027;
+
+  --purple-30: #c069ff;
+  --purple-40: #ad3bff;
+  --purple-50: #9400ff;
+  --purple-60: #8000d7;
+  --purple-70: #6200a4;
+  --purple-80: #440071;
+  --purple-90: #25003e;
+
+  --blue-40: #45a1ff;
+  --blue-50: #0a84ff;
+  --blue-50-a30: rgba(10, 132, 255, 0.3);
+  --blue-60: #0060df;
+  --blue-70: #003eaa;
+  --blue-80: #002275;
+  --blue-90: #000f40;
+
+  --teal-50: #00feff;
+  --teal-60: #00c8d7;
+  --teal-70: #008ea4;
+  --teal-80: #005a71;
+  --teal-90: #002d3e;
+
+  --green-50: #30e60b;
+  --green-60: #12bc00;
+  --green-70: #058b00;
+  --green-80: #006504;
+  --green-90: #003706;
+
+  --yellow-50: #ffe900;
+  --yellow-60: #d7b600;
+  --yellow-70: #a47f00;
+  --yellow-80: #715100;
+  --yellow-90: #3e2800;
+
+  --red-50: #ff0039;
+  --red-60: #d70022;
+  --red-70: #a4000f;
+  --red-80: #5a0002;
+  --red-90: #3e0200;
+
+  --orange-50: #ff9400;
+  --orange-60: #d76e00;
+  --orange-70: #a44900;
+  --orange-80: #712b00;
+  --orange-90: #3e1300;
+
+  --grey-10: #f9f9fa;
+  --grey-10-a10: rgba(249, 249, 250, 0.1);
+  --grey-10-a20: rgba(249, 249, 250, 0.2);
+  --grey-10-a40: rgba(249, 249, 250, 0.4);
+  --grey-10-a60: rgba(249, 249, 250, 0.6);
+  --grey-10-a80: rgba(249, 249, 250, 0.8);
+  --grey-20: #ededf0;
+  --grey-30: #d7d7db;
+  --grey-40: #b1b1b3;
+  --grey-50: #737373;
+  --grey-60: #4a4a4f;
+  --grey-70: #38383d;
+  --grey-80: #2a2a2e;
+  --grey-90: #0c0c0d;
+  --grey-90-a05: rgba(12, 12, 13, 0.05);
+  --grey-90-a10: rgba(12, 12, 13, 0.1);
+  --grey-90-a20: rgba(12, 12, 13, 0.2);
+  --grey-90-a30: rgba(12, 12, 13, 0.3);
+  --grey-90-a40: rgba(12, 12, 13, 0.4);
+  --grey-90-a50: rgba(12, 12, 13, 0.5);
+  --grey-90-a60: rgba(12, 12, 13, 0.6);
+  --grey-90-a70: rgba(12, 12, 13, 0.7);
+  --grey-90-a80: rgba(12, 12, 13, 0.8);
+  --grey-90-a90: rgba(12, 12, 13, 0.9);
+
+  --ink-70: #363959;
+  --ink-80: #202340;
+  --ink-90: #0f1126;
+
+  --white-100: #ffffff;
+
+}

docs/photon.css

@@ -0,0 +1,167 @@
+
+/* ------------------------ */
+/* -------- Buttons ------- */
+/* ------------------------ */
+
+a.btn {
+    text-decoration: initial;
+}
+button.btn,
+select.btn {
+    border: initial;
+    font: inherit;
+}
+
+select.btn {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-repeat: no-repeat;
+    background-position: right 12px center;
+    padding-inline-end: 40px;
+}
+
+select.btn {
+    background-image: url("icons/arrow_down_dark.svg");
+}
+select.btn.btn--primary {
+    background-image: url("icons/arrow_down_light.svg");
+}
+
+select.btn:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 var(--btn-color);
+}
+
+.btn {
+    --btn-bg: var(--grey-90-a10);
+    --btn-bg-hover: var(--grey-90-a20);
+    --btn-bg-active: var(--grey-90-a30);
+    --btn-color: var(--grey-90);
+    --btn-padding: 8px;
+    --btn-height: 32px;
+
+    align-items: center;
+    background-color: var(--btn-bg);
+    border-radius: 2px;
+    color: var(--btn-color);
+    display: inline-flex;
+    font-size: 13px;
+    font-weight: 400;
+    height: var(--btn-height);
+    justify-content: center;
+    padding: 0 var(--btn-padding);
+}
+
+.btn--primary {
+    --btn-bg: var(--blue-60);
+    --btn-bg-hover: var(--blue-70);
+    --btn-bg-active: var(--blue-80);
+    --btn-color: var(--white-100);
+}
+
+.btn:hover  { background-color: var(--btn-bg-hover); }
+.btn:active { background-color: var(--btn-bg-active); }
+
+.btn:focus {
+    box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff
+              , 0 0 0 4px rgba(10, 132, 255, 0.3);
+}
+
+.btn:disabled,
+.btn[disabled] {
+    background-color: var(--btn-bg) !important;
+    box-shadow: initial;
+    opacity: 0.4;
+}
+
+.btn::-moz-focus-inner {
+    border: 0;
+}
+
+.btn--micro {
+    font-size: 11px;
+    height: 24px;
+}
+
+.btn--puffy {
+    --btn-padding: 16px;
+    --btn-height: 48px;
+
+    border-radius: 4px;
+    font-size: 15px;
+}
+
+.btn > a {
+    text-decoration: initial;
+}
+.btn > a:visited {
+    color: inherit;
+}
+
+.btn__icon {
+    height: 20px;
+    margin-inline-end: 8px;
+    width: 20px;
+}
+
+
+:root.theme-dark .btn:not(.btn--primary) {
+    --btn-bg: var(--grey-10-a10);
+    --btn-bg-hover: var(--grey-10-a20);
+    --btn-bg-active: var(--grey-10-a30);
+    --btn-color: var(--grey-10);
+}
+:root.theme-dark .btn__dropdown-arrow::before {
+    content: url("icons/arrow_down_light.svg");
+}
+
+
+
+/* ------------------------ */
+/* ------ Typography ------ */
+/* ------------------------ */
+
+.display {}
+.display--20 {
+    font-size: 36px;
+    font-weight: 200;
+}
+
+
+.title {}
+.title--40,
+.title--30 {
+    font-weight: 300;
+}
+
+.title--20,
+.title--10 {
+    font-weight: 500;
+}
+
+.title--40 { font-size: 28px; }
+.title--30 { font-size: 22px; }
+.title--20 { font-size: 17px; }
+.title--10 { font-size: 13px; }
+
+
+.body      { font-weight: 400; }
+.body > em { font-weight: 700; }
+
+.body--30 { font-size: 17px; }
+.body--20 { font-size: 15px; }
+.body--10 { font-size: 13px; }
+
+
+.caption {
+    color: GrayText;
+    font-weight: 400;
+}
+.caption > em {
+    font-weight: 700;
+}
+
+.caption--30 { font-size: 15px; }
+.caption--20 { font-size: 13px; }
+.caption--10 { font-size: 11px; }
+