Demo tweaks

6 files changed, 34 insertions, 17 deletions

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);
 }