diff options
author | Sam Potts <me@sampotts.me> | 2017-11-20 21:23:49 +1100 |
---|---|---|
committer | Sam Potts <me@sampotts.me> | 2017-11-20 21:23:49 +1100 |
commit | da1e987444bce4925020770f906ef915644ebd83 (patch) | |
tree | a6ed67ae12e57dacd501299b52679c05a6faa3ae /demo/src | |
parent | 2d4a166218913308f069c43bcb184070bd449c9c (diff) | |
download | plyr-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.less | 5 | ||||
-rw-r--r-- | demo/src/less/components/header.less | 1 | ||||
-rw-r--r-- | demo/src/less/components/icons.less | 4 | ||||
-rw-r--r-- | demo/src/less/components/players.less | 2 | ||||
-rw-r--r-- | demo/src/less/lib/fontface.less | 40 | ||||
-rw-r--r-- | demo/src/less/settings/type.less | 16 | ||||
-rw-r--r-- | demo/src/less/type/base.less | 3 | ||||
-rw-r--r-- | demo/src/less/type/headings.less | 2 |
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); } |