aboutsummaryrefslogtreecommitdiffstats
path: root/demo/src
diff options
context:
space:
mode:
authorSam Potts <me@sampotts.me>2017-11-20 21:23:49 +1100
committerSam Potts <me@sampotts.me>2017-11-20 21:23:49 +1100
commitda1e987444bce4925020770f906ef915644ebd83 (patch)
treea6ed67ae12e57dacd501299b52679c05a6faa3ae /demo/src
parent2d4a166218913308f069c43bcb184070bd449c9c (diff)
downloadplyr-da1e987444bce4925020770f906ef915644ebd83.tar.lz
plyr-da1e987444bce4925020770f906ef915644ebd83.tar.xz
plyr-da1e987444bce4925020770f906ef915644ebd83.zip
WIP on docs example
Diffstat (limited to 'demo/src')
-rw-r--r--demo/src/less/components/buttons.less5
-rw-r--r--demo/src/less/components/header.less1
-rw-r--r--demo/src/less/components/icons.less4
-rw-r--r--demo/src/less/components/players.less2
-rw-r--r--demo/src/less/lib/fontface.less40
-rw-r--r--demo/src/less/settings/type.less16
-rw-r--r--demo/src/less/type/base.less3
-rw-r--r--demo/src/less/type/headings.less2
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);
}