diff options
Diffstat (limited to 'demo/src')
| -rw-r--r-- | demo/src/less/components/type.less | 4 | ||||
| -rw-r--r-- | demo/src/less/lib/fontface.less | 20 | ||||
| -rw-r--r-- | demo/src/less/variables.less | 52 |
3 files changed, 39 insertions, 37 deletions
diff --git a/demo/src/less/components/type.less b/demo/src/less/components/type.less index 951be36d..8e621700 100644 --- a/demo/src/less/components/type.less +++ b/demo/src/less/components/type.less @@ -52,12 +52,12 @@ a { text-decoration: none; color: @link-color; border-bottom: 1px dotted currentColor; - transition: background .3s ease, color .3s ease, border .3s ease; + transition: background 0.3s ease, color 0.3s ease, border 0.3s ease; &:hover, &:focus { color: @gray-dark; - border-bottom-color: rgba(0,0,0,0); + border-bottom-color: rgba(0, 0, 0, 0); } &:focus { .tab-focus(); diff --git a/demo/src/less/lib/fontface.less b/demo/src/less/lib/fontface.less index 5230f822..b3316f9c 100644 --- a/demo/src/less/lib/fontface.less +++ b/demo/src/less/lib/fontface.less @@ -4,16 +4,18 @@ @font-face { font-family: "Avenir"; - src: url("https://cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"), - url("https://cdn.plyr.io/fonts/avenir-medium.woff") format("woff"); - font-style: normal; - font-weight: @font-weight-base; + src: url("https://cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"), + url("https://cdn.plyr.io/fonts/avenir-medium.woff") format("woff"); + font-style: normal; + font-weight: @font-weight-base; + font-display: swap; } @font-face { font-family: "Avenir"; - src: url("https://cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"), - url("https://cdn.plyr.io/fonts/avenir-bold.woff") format("woff"); - font-style: normal; - font-weight: @font-weight-bold; -}
\ No newline at end of file + src: url("https://cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"), + url("https://cdn.plyr.io/fonts/avenir-bold.woff") format("woff"); + font-style: normal; + font-weight: @font-weight-bold; + font-display: swap; +} diff --git a/demo/src/less/variables.less b/demo/src/less/variables.less index 4768cdd6..939232e5 100644 --- a/demo/src/less/variables.less +++ b/demo/src/less/variables.less @@ -3,46 +3,46 @@ // ========================================================================== // Colors -@gray-dark: #343f4a; -@gray: #55646b; -@gray-light: #cbd0d3; -@gray-lighter: #dbe3e8; -@off-white: #f2f5f7; +@gray-dark: #343f4a; +@gray: #55646b; +@gray-light: #cbd0d3; +@gray-lighter: #dbe3e8; +@off-white: #f2f5f7; -@brand-primary: #3498db; -@brand-secondary: #02BD9B; +@brand-primary: #3498db; +@brand-secondary: #02bd9b; // Brands -@color-twitter: #4BAAF4; -@color-youtube: #cc181e; -@color-vimeo: #19b7ed; +@color-twitter: #4baaf4; +@color-youtube: #cc181e; +@color-vimeo: #19b7ed; // Base -@body-background: @off-white; //linear-gradient(to left top, @brand-secondary, @brand-primary); +@body-background: @off-white; //linear-gradient(to left top, @brand-secondary, @brand-primary); // Type -@font-size-base: 16; -@font-size-small: 14; -@font-size-h1: 64; -@font-weight-base: 500; -@font-weight-bold: 700; +@font-size-base: 16; +@font-size-small: 14; +@font-size-h1: 64; +@font-weight-base: 500; +@font-weight-bold: 700; // Elements -@link-color: @brand-primary; -@padding-base: 20px; -@arrow-size: 8px; +@link-color: @brand-primary; +@padding-base: 20px; +@arrow-size: 8px; // Icons -@icon-size: 18px; +@icon-size: 18px; // Breakpoints -@screen-sm: 480px; -@screen-md: 768px; +@screen-sm: 480px; +@screen-md: 768px; // Radii -@border-radius-base: 4px; -@border-radius-large: 6px; +@border-radius-base: 4px; +@border-radius-large: 6px; // Examples -@example-width-audio: 520px; -@example-width-video: 1200px; +@example-width-audio: 520px; +@example-width-video: 1200px; |