From 556e0c9f7d97df94ff43c0155d740c719c22741a Mon Sep 17 00:00:00 2001
From: hensm <m+github@matt.tf>
Date: Sun, 13 Jan 2019 09:28:37 +0000
Subject: [PATCH] Site WebKit compatibility

---
 docs/index.css  |  11 +-
 docs/photon.css | 334 ++++++++++++++++++++++++------------------------
 2 files changed, 173 insertions(+), 172 deletions(-)

diff --git a/docs/index.css b/docs/index.css
index 3eee888..a00856a 100755
--- a/docs/index.css
+++ b/docs/index.css
@@ -90,12 +90,12 @@ body {
     color: var(--page-color);
     font-size: 2.75rem;
     padding: 0.25rem 1rem;
-    margin-inline-end: -1rem;
+    margin-right: -1rem;
 }
 
 .description {
     font-size: 1.75rem;
-    padding-inline-end: 40px;
+    padding-right: 40px;
     text-align: right;
     width: 45ch;
     z-index: 1;
@@ -131,13 +131,13 @@ body {
     cursor: pointer;
 }
 .app-list__app:not(:last-child) {
-    margin-inline-end: 0.5rem;
+    margin-right: 0.5rem;
 }
 
 .app-list__label {
     color: var(--text-color-secondary);
     font-size: 1.75rem;
-    margin-inline-end: 1rem;
+    margin-right: 1rem;
 }
 
 
@@ -146,6 +146,7 @@ body {
 }
 
 .preview--bg {
+    -webkit-mask-image: linear-gradient(to right, black, transparent);
     mask-image: linear-gradient(to right, black, transparent);
     max-height: 712px;
     max-width: 912px;
@@ -156,7 +157,7 @@ body {
 }
 
 .preview--fg {
-    margin-inline-start: -60px;
+    margin-left: -60px;
     max-height: 281px;
     max-width: 462px;
     position: relative;
diff --git a/docs/photon.css b/docs/photon.css
index 8160af4..e766a8a 100755
--- a/docs/photon.css
+++ b/docs/photon.css
@@ -1,167 +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; }
-
+
+/* ------------------------ */
+/* -------- 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-right: 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-right: 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; }
+