ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP on docs example

Browse Source
This commit is contained in:
Sam Potts
2017-11-20 21:23:49 +11:00
parent 2d4a166218
commit da1e987444
27 changed files with 121 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
demo/src/less/components/buttons.less
View File

@ -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: '';

1
demo/src/less/components/header.less
View File

@ -8,7 +8,6 @@ header {
p {
margin-bottom: (@spacing-base * 1.5);
.font-size(@font-size-large);
}
.action {

4
demo/src/less/components/icons.less
View File

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

2
demo/src/less/components/players.less
View File

@ -33,7 +33,7 @@ video {
margin-top: @spacing-base;
.icon {
margin-right: (@spacing-base / 4);
margin-right: ceil(@spacing-base / 6);
}
}

40
demo/src/less/lib/fontface.less
View File

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

16
demo/src/less/settings/type.less
View File

@ -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;

3
demo/src/less/type/base.less
View File

@ -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,

2
demo/src/less/type/headings.less
View File

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