From 93f5acbffd32fc016ca0b0b3679ba9184d12009f Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Sun, 2 Jun 2019 22:25:00 +1000
Subject: Fixed cite display

---
 demo/src/sass/components/players.scss | 14 --------------
 1 file changed, 14 deletions(-)

(limited to 'demo/src/sass')

diff --git a/demo/src/sass/components/players.scss b/demo/src/sass/components/players.scss
index d088a91d..966a6343 100644
--- a/demo/src/sass/components/players.scss
+++ b/demo/src/sass/components/players.scss
@@ -2,12 +2,6 @@
 // Examples
 // ==========================================================================
 
-// For non supported browsers
-video {
-    max-width: 100%;
-    vertical-align: middle;
-}
-
 // Example players
 .plyr {
     border-radius: $border-radius-base;
@@ -34,17 +28,9 @@ video {
 
 // Style full supported player
 .plyr__cite {
-    display: none;
     margin-top: $spacing-base;
 
     .icon {
         margin-right: ceil($spacing-base / 6);
     }
 }
-
-.plyr--video:not(.plyr--youtube):not(.plyr--vimeo) ~ ul .plyr__cite--video,
-.plyr--audio ~ ul .plyr__cite--audio,
-.plyr--youtube ~ ul .plyr__cite--youtube,
-.plyr--vimeo ~ ul .plyr__cite--vimeo {
-    display: block;
-}
-- 
cgit v1.2.3


From ac88e6e1909d306c797a6361c0ec953cb104f0ca Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Sun, 2 Jun 2019 23:16:29 +1000
Subject: Demo clean up

---
 demo/src/sass/components/header.scss  | 4 ++++
 demo/src/sass/components/icons.scss   | 2 +-
 demo/src/sass/components/players.scss | 8 ++------
 demo/src/sass/lib/mixins.scss         | 2 +-
 demo/src/sass/settings/spacing.scss   | 2 +-
 5 files changed, 9 insertions(+), 9 deletions(-)

(limited to 'demo/src/sass')

diff --git a/demo/src/sass/components/header.scss b/demo/src/sass/components/header.scss
index eab2214e..b2a04cb1 100644
--- a/demo/src/sass/components/header.scss
+++ b/demo/src/sass/components/header.scss
@@ -10,6 +10,10 @@ header {
         margin-top: ($spacing-base * 1.5);
     }
 
+    p:first-of-type {
+        @include font-size(16);
+    }
+
     @media only screen and (min-width: $screen-md) {
         margin-right: ($spacing-base * 3);
         max-width: 360px;
diff --git a/demo/src/sass/components/icons.scss b/demo/src/sass/components/icons.scss
index b2b353a6..ec9f8c5c 100644
--- a/demo/src/sass/components/icons.scss
+++ b/demo/src/sass/components/icons.scss
@@ -19,5 +19,5 @@ label svg {
 
 a .icon,
 .btn .icon {
-    margin-right: floor($spacing-base / 3);
+    margin-right: ($spacing-base / 2);
 }
diff --git a/demo/src/sass/components/players.scss b/demo/src/sass/components/players.scss
index 966a6343..2bdbb762 100644
--- a/demo/src/sass/components/players.scss
+++ b/demo/src/sass/components/players.scss
@@ -27,10 +27,6 @@
 }
 
 // Style full supported player
-.plyr__cite {
-    margin-top: $spacing-base;
-
-    .icon {
-        margin-right: ceil($spacing-base / 6);
-    }
+.plyr__cite .icon {
+    margin-right: ceil($spacing-base / 6);
 }
diff --git a/demo/src/sass/lib/mixins.scss b/demo/src/sass/lib/mixins.scss
index cdfcb87d..268157ae 100644
--- a/demo/src/sass/lib/mixins.scss
+++ b/demo/src/sass/lib/mixins.scss
@@ -36,7 +36,7 @@
     @return #{$rem}rem;
 }
 
-@mixin font-size($size: 16) {
+@mixin font-size($size: $font-size-base) {
     font-size: $size * 1px; // Fallback in px
     font-size: calculate-rem($size);
 }
diff --git a/demo/src/sass/settings/spacing.scss b/demo/src/sass/settings/spacing.scss
index a19b0a95..085838fd 100644
--- a/demo/src/sass/settings/spacing.scss
+++ b/demo/src/sass/settings/spacing.scss
@@ -2,4 +2,4 @@
 // Colors
 // ==========================================================================
 
-$spacing-base: 20px;
+$spacing-base: 16px;
-- 
cgit v1.2.3


From d9d2c4a219529df75557b2e105158d8a17d1c56f Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Mon, 3 Jun 2019 00:26:08 +1000
Subject: Demo tweaks

---
 demo/src/sass/components/buttons.scss |  8 ++++----
 demo/src/sass/components/header.scss  | 15 +++++++++++----
 demo/src/sass/lib/animation.scss      | 14 ++++++++++++++
 demo/src/sass/settings/colors.scss    |  8 ++------
 demo/src/sass/type/base.scss          |  2 +-
 demo/src/sass/type/headings.scss      |  4 ++--
 6 files changed, 34 insertions(+), 17 deletions(-)

(limited to 'demo/src/sass')

diff --git a/demo/src/sass/components/buttons.scss b/demo/src/sass/components/buttons.scss
index 5ff6fc12..6afe98d7 100644
--- a/demo/src/sass/components/buttons.scss
+++ b/demo/src/sass/components/buttons.scss
@@ -22,13 +22,13 @@
 // Buttons
 .button {
     font-weight: $font-weight-bold;
-    padding-left: $spacing-base;
-    padding-right: $spacing-base;
+    padding-left: ($spacing-base * 1.25);
+    padding-right: ($spacing-base * 1.25);
     transition: all 0.2s ease;
 
     &:hover,
     &:focus {
-        color: $gray-dark;
+        color: $color-button-text-hover;
 
         // Remove the underline/border
         &::after {
@@ -65,7 +65,7 @@
 // Count bubble
 .button__count {
     animation: fadein 0.2s ease;
-    margin-left: ($spacing-base / 2);
+    margin-left: ($spacing-base * 0.75);
 
     &::before {
         border: $arrow-size solid transparent;
diff --git a/demo/src/sass/components/header.scss b/demo/src/sass/components/header.scss
index b2a04cb1..3c2ba67e 100644
--- a/demo/src/sass/components/header.scss
+++ b/demo/src/sass/components/header.scss
@@ -6,12 +6,15 @@ header {
     padding-bottom: $spacing-base;
     text-align: center;
 
-    .call-to-action {
-        margin-top: ($spacing-base * 1.5);
+    h1 span {
+        animation: shrinkHide 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s forwards;
+        display: inline-block;
+        font-weight: $font-weight-light;
+        opacity: 0.5;
     }
 
-    p:first-of-type {
-        @include font-size(16);
+    .call-to-action {
+        margin-top: ($spacing-base * 1.5);
     }
 
     @media only screen and (min-width: $screen-md) {
@@ -19,5 +22,9 @@ header {
         max-width: 360px;
         padding-bottom: ($spacing-base * 2);
         text-align: left;
+
+        p:first-of-type {
+            @include font-size($font-size-large);
+        }
     }
 }
diff --git a/demo/src/sass/lib/animation.scss b/demo/src/sass/lib/animation.scss
index 3c14b0a7..64eb5595 100644
--- a/demo/src/sass/lib/animation.scss
+++ b/demo/src/sass/lib/animation.scss
@@ -11,3 +11,17 @@
         opacity: 1;
     }
 }
+
+@keyframes shrinkHide {
+    0% {
+        opacity: 0.5;
+        width: 38px;
+    }
+    20% {
+        width: 45px;
+    }
+    100% {
+        opacity: 0;
+        width: 0;
+    }
+}
diff --git a/demo/src/sass/settings/colors.scss b/demo/src/sass/settings/colors.scss
index 65d3f7b7..61363e67 100644
--- a/demo/src/sass/settings/colors.scss
+++ b/demo/src/sass/settings/colors.scss
@@ -5,20 +5,15 @@
 // Greyscale
 $gray-dark: #343f4a;
 $gray: #55646b;
-$gray-light: #cbd0d3;
-$gray-lighter: #dbe3e8;
-$off-white: #f2f5f7;
 
 // Text
 $color-text: #fff;
 
 // Plyr
-$color-brand-primary: #1aafff;
+$color-brand-primary: #1aafff; // #7bc47f
 
 // Brands
 $color-twitter: #4baaf4;
-$color-youtube: #cc181e;
-$color-vimeo: #19b7ed;
 
 // Elements
 $color-link: #fff;
@@ -27,6 +22,7 @@ $color-background: $color-brand-primary;
 // Buttons
 $color-button-background: #fff;
 $color-button-text: $gray;
+$color-button-text-hover: $gray-dark;
 
 // Focus
 $tab-focus-default-color: #fff;
diff --git a/demo/src/sass/type/base.scss b/demo/src/sass/type/base.scss
index 452298bd..4473cb81 100644
--- a/demo/src/sass/type/base.scss
+++ b/demo/src/sass/type/base.scss
@@ -26,7 +26,7 @@ textarea {
 
 p,
 small {
-    margin: 0 0 $spacing-base;
+    margin: 0 0 ($spacing-base * 1.5);
 }
 
 small {
diff --git a/demo/src/sass/type/headings.scss b/demo/src/sass/type/headings.scss
index 7039dd37..c7449efa 100644
--- a/demo/src/sass/type/headings.scss
+++ b/demo/src/sass/type/headings.scss
@@ -4,8 +4,8 @@
 
 h1 {
     @include font-size($font-size-h1);
-    font-weight: $font-weight-bold;
+    font-weight: $font-weight-medium;
     letter-spacing: $letter-spacing-headings;
     line-height: 1.2;
-    margin: 0 0 $spacing-base;
+    margin: 0 0 ($spacing-base * 1.5);
 }
-- 
cgit v1.2.3


From ab89e055decdb54ebbbe15ecea68cd5b521f46be Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Mon, 3 Jun 2019 20:11:31 +1000
Subject: Demo tweaks

---
 demo/src/sass/components/header.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'demo/src/sass')

diff --git a/demo/src/sass/components/header.scss b/demo/src/sass/components/header.scss
index 3c2ba67e..fd014ead 100644
--- a/demo/src/sass/components/header.scss
+++ b/demo/src/sass/components/header.scss
@@ -24,7 +24,7 @@ header {
         text-align: left;
 
         p:first-of-type {
-            @include font-size($font-size-large);
+            @include font-size($font-size-base + 1);
         }
     }
 }
-- 
cgit v1.2.3


From 2e40b91ec1aabf33e945cba66fbcdd9b7aa53ba7 Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Thu, 20 Jun 2019 23:50:46 +1000
Subject: Styling tweaks for demo

---
 demo/src/sass/components/buttons.scss | 10 +++++----
 demo/src/sass/components/links.scss   |  1 -
 demo/src/sass/components/players.scss | 10 ++++++---
 demo/src/sass/layout/core.scss        |  3 +--
 demo/src/sass/settings/colors.scss    | 38 ++++++++++++++++++++++++-----------
 demo/src/sass/settings/cosmetic.scss  |  2 +-
 demo/src/sass/settings/plyr.scss      |  3 +++
 demo/src/sass/type/base.scss          |  1 -
 demo/src/sass/type/headings.scss      |  3 ++-
 9 files changed, 46 insertions(+), 25 deletions(-)

(limited to 'demo/src/sass')

diff --git a/demo/src/sass/components/buttons.scss b/demo/src/sass/components/buttons.scss
index 6afe98d7..279007fb 100644
--- a/demo/src/sass/components/buttons.scss
+++ b/demo/src/sass/components/buttons.scss
@@ -6,11 +6,9 @@
 .button,
 .button__count {
     align-items: center;
-    background: $color-button-background;
     border: 0;
     border-radius: $border-radius-base;
     box-shadow: 0 1px 1px rgba(#000, 0.1);
-    color: $color-button-text;
     display: inline-flex;
     padding: ($spacing-base * 0.75);
     position: relative;
@@ -21,6 +19,8 @@
 
 // Buttons
 .button {
+    background: $color-button-background;
+    color: $color-button-text;
     font-weight: $font-weight-bold;
     padding-left: ($spacing-base * 1.25);
     padding-right: ($spacing-base * 1.25);
@@ -28,7 +28,7 @@
 
     &:hover,
     &:focus {
-        color: $color-button-text-hover;
+        background: $color-button-background-hover;
 
         // Remove the underline/border
         &::after {
@@ -65,12 +65,14 @@
 // Count bubble
 .button__count {
     animation: fadein 0.2s ease;
+    background: $color-button-count-background;
+    color: $color-button-count-text;
     margin-left: ($spacing-base * 0.75);
 
     &::before {
         border: $arrow-size solid transparent;
         border-left-width: 0;
-        border-right-color: $color-button-background;
+        border-right-color: $color-button-count-background;
         content: '';
         height: 0;
         position: absolute;
diff --git a/demo/src/sass/components/links.scss b/demo/src/sass/components/links.scss
index b2930862..1d49be3a 100644
--- a/demo/src/sass/components/links.scss
+++ b/demo/src/sass/components/links.scss
@@ -12,7 +12,6 @@ button.faux-link {
 a {
     border-bottom: 1px dotted currentColor;
     color: $color-link;
-    font-weight: $font-weight-bold;
     position: relative;
     text-decoration: none;
     transition: all 0.2s ease;
diff --git a/demo/src/sass/components/players.scss b/demo/src/sass/components/players.scss
index 2bdbb762..573b4cb0 100644
--- a/demo/src/sass/components/players.scss
+++ b/demo/src/sass/components/players.scss
@@ -5,7 +5,7 @@
 // Example players
 .plyr {
     border-radius: $border-radius-base;
-    box-shadow: 0 2px 5px rgba(#000, 0.2);
+    box-shadow: 0 2px 15px rgba(#000, 0.1);
     margin: $spacing-base auto;
 
     &.plyr--audio {
@@ -27,6 +27,10 @@
 }
 
 // Style full supported player
-.plyr__cite .icon {
-    margin-right: ceil($spacing-base / 6);
+.plyr__cite {
+    color: $color-gray-5;
+
+    .icon {
+        margin-right: ceil($spacing-base / 6);
+    }
 }
diff --git a/demo/src/sass/layout/core.scss b/demo/src/sass/layout/core.scss
index 0501c1df..b9b2d4d5 100644
--- a/demo/src/sass/layout/core.scss
+++ b/demo/src/sass/layout/core.scss
@@ -35,11 +35,10 @@ main {
 aside {
     align-items: center;
     background: #fff;
-    color: $gray;
     display: flex;
     flex-shrink: 0;
     justify-content: center;
-    padding: ($spacing-base * 0.75);
+    padding: $spacing-base;
     position: relative;
     text-align: center;
     text-shadow: none;
diff --git a/demo/src/sass/settings/colors.scss b/demo/src/sass/settings/colors.scss
index 61363e67..308e6757 100644
--- a/demo/src/sass/settings/colors.scss
+++ b/demo/src/sass/settings/colors.scss
@@ -2,27 +2,41 @@
 // Colors
 // ==========================================================================
 
-// Greyscale
-$gray-dark: #343f4a;
-$gray: #55646b;
+// Grayscale
+$color-gray-9: hsl(210, 15%, 16%);
+$color-gray-8: lighten($color-gray-9, 9%);
+$color-gray-7: lighten($color-gray-8, 9%);
+$color-gray-6: lighten($color-gray-7, 9%);
+$color-gray-5: lighten($color-gray-6, 9%);
+$color-gray-4: lighten($color-gray-5, 9%);
+$color-gray-3: lighten($color-gray-4, 9%);
+$color-gray-2: lighten($color-gray-3, 9%);
+$color-gray-1: lighten($color-gray-2, 9%);
+$color-gray-0: lighten($color-gray-1, 9%);
 
-// Text
-$color-text: #fff;
+// Branding
+$color-brand-primary: hsl(198, 100%, 50%);
 
-// Plyr
-$color-brand-primary: #1aafff; // #7bc47f
+// Text
+$color-text: $color-gray-7;
+$color-headings: $color-brand-primary;
 
 // Brands
 $color-twitter: #4baaf4;
 
 // Elements
-$color-link: #fff;
-$color-background: $color-brand-primary;
+$color-link: $color-brand-primary;
+
+// Background
+$color-background-from: hsl(198, 100%, 94%);
+$color-background-to: hsl(198, 100%, 98%);
 
 // Buttons
-$color-button-background: #fff;
-$color-button-text: $gray;
-$color-button-text-hover: $gray-dark;
+$color-button-background: $color-brand-primary;
+$color-button-text: #fff;
+$color-button-background-hover: hsl(198, 100%, 55%);
+$color-button-count-background: #fff;
+$color-button-count-text: $color-gray-6;
 
 // Focus
 $tab-focus-default-color: #fff;
diff --git a/demo/src/sass/settings/cosmetic.scss b/demo/src/sass/settings/cosmetic.scss
index d750efe2..84ff819f 100644
--- a/demo/src/sass/settings/cosmetic.scss
+++ b/demo/src/sass/settings/cosmetic.scss
@@ -9,4 +9,4 @@ $arrow-size: 5px;
 $border-radius-base: 4px;
 
 // Background
-$page-background: linear-gradient(to left top, lighten($color-background, 10%), darken($color-background, 20%));
+$page-background: linear-gradient(to left top, $color-background-from, $color-background-to);
diff --git a/demo/src/sass/settings/plyr.scss b/demo/src/sass/settings/plyr.scss
index ae6be636..edd917c4 100644
--- a/demo/src/sass/settings/plyr.scss
+++ b/demo/src/sass/settings/plyr.scss
@@ -14,6 +14,9 @@ $plyr-font-size-badges: 9px;
 // Other
 $plyr-font-smoothing: true;
 
+// Colors
+$plyr-color-main: $color-brand-primary;
+
 // Captions
 $plyr-font-size-captions-base: $plyr-font-size-base;
 $plyr-font-size-captions-small: $plyr-font-size-small;
diff --git a/demo/src/sass/type/base.scss b/demo/src/sass/type/base.scss
index 4473cb81..736d8e89 100644
--- a/demo/src/sass/type/base.scss
+++ b/demo/src/sass/type/base.scss
@@ -14,7 +14,6 @@ body {
     font-family: $font-sans-serif;
     font-weight: $font-weight-medium;
     line-height: $line-height-base;
-    text-shadow: 0 1px 1px rgba(#000, 0.15);
 }
 
 button,
diff --git a/demo/src/sass/type/headings.scss b/demo/src/sass/type/headings.scss
index c7449efa..670619e8 100644
--- a/demo/src/sass/type/headings.scss
+++ b/demo/src/sass/type/headings.scss
@@ -4,7 +4,8 @@
 
 h1 {
     @include font-size($font-size-h1);
-    font-weight: $font-weight-medium;
+    color: $color-headings;
+    font-weight: $font-weight-bold;
     letter-spacing: $letter-spacing-headings;
     line-height: 1.2;
     margin: 0 0 ($spacing-base * 1.5);
-- 
cgit v1.2.3