WIP on docs example

8 files changed, 47 insertions, 26 deletions

diff --git a/demo/src/less/components/buttons.less b/demo/src/less/components/buttons.less
index 530addc2..e7e5bac3 100644
--- a/demo/src/less/components/buttons.less
+++ b/demo/src/less/components/buttons.less
@@ -14,10 +14,9 @@
     box-shadow: 0 1px 1px fade(#000, 10%);
     background: #fff;
     border: 0;
-    color: @gray;
     user-select: none;
-    font-weight: @font-weight-bold;
     text-shadow: none;
+    color: @gray;
 }
 
 // Buttons
@@ -25,6 +24,7 @@
     padding-left: @spacing-base;
     padding-right: @spacing-base;
     transition: all 0.2s ease;
+    font-weight: @font-weight-bold;
 
     &:hover,
     &:focus {
@@ -45,6 +45,7 @@
 .button__count {
     margin-left: (@spacing-base / 2);
     animation: fadein 0.2s ease;
+    font-weight: @font-weight-medium;
 
     &::before {
         content: '';
diff --git a/demo/src/less/components/header.less b/demo/src/less/components/header.less
index 83ba6c5d..5842bf92 100644
--- a/demo/src/less/components/header.less
+++ b/demo/src/less/components/header.less
@@ -8,7 +8,6 @@ header {
 
     p {
         margin-bottom: (@spacing-base * 1.5);
-        .font-size(@font-size-large);
     }
 
     .action {
diff --git a/demo/src/less/components/icons.less b/demo/src/less/components/icons.less
index 9180e4b3..92b0567e 100644
--- a/demo/src/less/components/icons.less
+++ b/demo/src/less/components/icons.less
@@ -7,7 +7,7 @@
     fill: currentColor;
     width: @icon-size;
     height: @icon-size;
-    vertical-align: -0.15em;
+    vertical-align: -3px;
 }
 
 // Within elements
@@ -19,5 +19,5 @@ label svg {
 
 a .icon,
 .btn .icon {
-    margin-right: (@spacing-base / 4);
+    margin-right: floor(@spacing-base / 3);
 }
diff --git a/demo/src/less/components/players.less b/demo/src/less/components/players.less
index c7cc0839..8dfdcfe3 100644
--- a/demo/src/less/components/players.less
+++ b/demo/src/less/components/players.less
@@ -33,7 +33,7 @@ video {
     margin-top: @spacing-base;
 
     .icon {
-        margin-right: (@spacing-base / 4);
+        margin-right: ceil(@spacing-base / 6);
     }
 }
 
diff --git a/demo/src/less/lib/fontface.less b/demo/src/less/lib/fontface.less
index 2ae6e8f4..0056e36d 100644
--- a/demo/src/less/lib/fontface.less
+++ b/demo/src/less/lib/fontface.less
@@ -3,28 +3,46 @@
 // ==========================================================================
 
 @font-face {
-    font-family: 'Avenir';
-    src: local('Avenir-Medium'), url('https://cdn.plyr.io/static/fonts/avenir-medium.woff2') format('woff2'),
-        url('https://cdn.plyr.io/static/fonts/avenir-medium.woff') format('woff');
+    font-family: 'Gordita';
+    src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'),
+        url('https://cdn.plyr.io/static/fonts/gordita-light.woff') format('woff2');
+    font-weight: @font-weight-light;
     font-style: normal;
-    font-weight: @font-weight-base;
     font-display: swap;
 }
 
 @font-face {
-    font-family: 'Avenir';
-    src: local('Avenir-Heavy'), url('https://cdn.plyr.io/static/fonts/avenir-bold.woff2') format('woff2'),
-        url('https://cdn.plyr.io/static/fonts/avenir-bold.woff') format('woff');
+    font-family: 'Gordita';
+    src: url('https://cdn.plyr.io/static/fonts/gordita-regular.woff2') format('woff2'),
+        url('https://cdn.plyr.io/static/fonts/gordita-regular.woff') format('woff2');
+    font-weight: @font-weight-regular;
     font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Gordita';
+    src: url('https://cdn.plyr.io/static/fonts/gordita-medium.woff2') format('woff2'),
+        url('https://cdn.plyr.io/static/fonts/gordita-medium.woff') format('woff2');
+    font-weight: @font-weight-medium;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Gordita';
+    src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'),
+        url('https://cdn.plyr.io/static/fonts/gordita-bold.woff') format('woff2');
     font-weight: @font-weight-bold;
+    font-style: normal;
     font-display: swap;
 }
 
 @font-face {
-    font-family: 'Avenir';
-    src: local('Avenir-Black'), url('https://cdn.plyr.io/static/fonts/avenir-black.woff2?v=3') format('woff2'),
-        url('https://cdn.plyr.io/static/fonts/avenir-black.woff?v=3') format('woff');
+    font-family: 'Gordita';
+    src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'),
+        url('https://cdn.plyr.io/static/fonts/gordita-black.woff') format('woff2');
+    font-weight: @font-weight-black;
     font-style: normal;
-    font-weight: @font-weight-heavy;
     font-display: swap;
 }
diff --git a/demo/src/less/settings/type.less b/demo/src/less/settings/type.less
index 8375858d..dc6dbce1 100644
--- a/demo/src/less/settings/type.less
+++ b/demo/src/less/settings/type.less
@@ -2,17 +2,19 @@
 // Typography
 // ==========================================================================
 
-@font-sans-serif: 'Avenir', 'Helvetica Neue', sans-serif;
+@font-sans-serif: 'Gordita', 'Avenir', 'Helvetica Neue', sans-serif;
 
-@font-size-base: 16;
-@font-size-small: 14;
+@font-size-base: 15;
+@font-size-small: 13;
 @font-size-large: 18;
 @font-size-h1: 64;
 
-@font-weight-base: 500;
-@font-weight-bold: 700;
-@font-weight-heavy: 900;
+@font-weight-light: 300;
+@font-weight-regular: 400;
+@font-weight-medium: 500;
+@font-weight-bold: 600;
+@font-weight-black: 900;
 
-@line-height-base: 1.5;
+@line-height-base: 1.75;
 
 @letter-spacing-headings: -0.025em;
diff --git a/demo/src/less/type/base.less b/demo/src/less/type/base.less
index f65fb634..70eddcb4 100644
--- a/demo/src/less/type/base.less
+++ b/demo/src/less/type/base.less
@@ -11,9 +11,10 @@ body {
     font-family: @font-sans-serif;
     line-height: @line-height-base;
     color: @color-text;
-    font-weight: @font-weight-base;
+    font-weight: @font-weight-medium;
     text-shadow: 0 1px 1px fade(#000, 15%);
     .font-smoothing();
+    .font-size(@font-size-base);
 }
 
 button,
diff --git a/demo/src/less/type/headings.less b/demo/src/less/type/headings.less
index ee289ae0..5e46bf34 100644
--- a/demo/src/less/type/headings.less
+++ b/demo/src/less/type/headings.less
@@ -4,7 +4,7 @@
 
 h1 {
     margin: 0 0 (@spacing-base / 2);
-    font-weight: @font-weight-heavy;
+    font-weight: @font-weight-bold;
     letter-spacing: @letter-spacing-headings;
     .font-size(@font-size-h1);
 }