diff options
author | Rasmus Andersson <rasmus@notion.se> | 2018-09-19 19:28:47 +0300 |
---|---|---|
committer | Rasmus Andersson <rasmus@notion.se> | 2018-10-11 09:37:53 +0300 |
commit | c5d6a6ef836be3cba8d78392bd8c0495841c43b5 (patch) | |
tree | 90a122ca33d28e9d420661b30b51cec393ef79c6 | |
parent | 724caef757f943e6350331b5371b2d13beefc2a8 (diff) | |
download | inter-c5d6a6ef836be3cba8d78392bd8c0495841c43b5.tar.xz |
website
-rw-r--r-- | docs/inter-ui.css | 52 | ||||
-rwxr-xr-x | docs/lab/favicon.png | bin | 0 -> 1484 bytes | |||
-rw-r--r-- | docs/lab/index.html | 23 | ||||
-rw-r--r-- | docs/samples/index.css | 18 | ||||
-rw-r--r-- | docs/samples/index.html | 14 |
5 files changed, 65 insertions, 42 deletions
diff --git a/docs/inter-ui.css b/docs/inter-ui.css index 542b6fd5d..982a6a71f 100644 --- a/docs/inter-ui.css +++ b/docs/inter-ui.css @@ -2,68 +2,68 @@ font-family: 'Inter UI'; font-style: normal; font-weight: 400; - src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"), - url("font-files/Inter-UI-Regular.woff2?v=2.5") format("woff2"), - url("font-files/Inter-UI-Regular.woff?v=2.5") format("woff"); + src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"), + url("font-files/Inter-UI-Regular.woff2?v=3.0") format("woff2"), + url("font-files/Inter-UI-Regular.woff?v=3.0") format("woff"); } @font-face { font-family: 'Inter UI'; font-style: italic; font-weight: 400; - src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"), - url("font-files/Inter-UI-Italic.woff2?v=2.5") format("woff2"), - url("font-files/Inter-UI-Italic.woff?v=2.5") format("woff"); + src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"), + url("font-files/Inter-UI-Italic.woff2?v=3.0") format("woff2"), + url("font-files/Inter-UI-Italic.woff?v=3.0") format("woff"); } @font-face { font-family: 'Inter UI'; font-style: normal; font-weight: 500; - src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"), - url("font-files/Inter-UI-Medium.woff2?v=2.5") format("woff2"), - url("font-files/Inter-UI-Medium.woff?v=2.5") format("woff"); + src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"), + url("font-files/Inter-UI-Medium.woff2?v=3.0") format("woff2"), + url("font-files/Inter-UI-Medium.woff?v=3.0") format("woff"); } @font-face { font-family: 'Inter UI'; font-style: italic; font-weight: 500; - src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"), - url("font-files/Inter-UI-MediumItalic.woff2?v=2.5") format("woff2"), - url("font-files/Inter-UI-MediumItalic.woff?v=2.5") format("woff"); + src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"), + url("font-files/Inter-UI-MediumItalic.woff2?v=3.0") format("woff2"), + url("font-files/Inter-UI-MediumItalic.woff?v=3.0") format("woff"); } @font-face { font-family: 'Inter UI'; font-style: normal; font-weight: 700; - src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"), - url("font-files/Inter-UI-Bold.woff2?v=2.5") format("woff2"), - url("font-files/Inter-UI-Bold.woff?v=2.5") format("woff"); + src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"), + url("font-files/Inter-UI-Bold.woff2?v=3.0") format("woff2"), + url("font-files/Inter-UI-Bold.woff?v=3.0") format("woff"); } @font-face { font-family: 'Inter UI'; font-style: italic; font-weight: 700; - src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"), - url("font-files/Inter-UI-BoldItalic.woff2?v=2.5") format("woff2"), - url("font-files/Inter-UI-BoldItalic.woff?v=2.5") format("woff"); + src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"), + url("font-files/Inter-UI-BoldItalic.woff2?v=3.0") format("woff2"), + url("font-files/Inter-UI-BoldItalic.woff?v=3.0") format("woff"); } @font-face { font-family: 'Inter UI'; font-style: normal; font-weight: 900; - src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"), - url("font-files/Inter-UI-Black.woff2?v=2.5") format("woff2"), - url("font-files/Inter-UI-Black.woff?v=2.5") format("woff"); + src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"), + url("font-files/Inter-UI-Black.woff2?v=3.0") format("woff2"), + url("font-files/Inter-UI-Black.woff?v=3.0") format("woff"); } @font-face { font-family: 'Inter UI'; font-style: italic; font-weight: 900; - src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"), - url("font-files/Inter-UI-BlackItalic.woff2?v=2.5") format("woff2"), - url("font-files/Inter-UI-BlackItalic.woff?v=2.5") format("woff"); + src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"), + url("font-files/Inter-UI-BlackItalic.woff2?v=3.0") format("woff2"), + url("font-files/Inter-UI-BlackItalic.woff?v=3.0") format("woff"); } /* @@ -84,6 +84,6 @@ html { @font-face { font-family: 'Inter UI var'; font-weight: 400 900; /* safe weight range */ - src: url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2-variations"), - url('font-files/Inter-UI.var.woff2?v=2.6') format("woff2"); + src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"), + url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2"); } diff --git a/docs/lab/favicon.png b/docs/lab/favicon.png Binary files differnew file mode 100755 index 000000000..8a731f3cc --- /dev/null +++ b/docs/lab/favicon.png diff --git a/docs/lab/index.html b/docs/lab/index.html index a7468f8fc..0c9ccb0a9 100644 --- a/docs/lab/index.html +++ b/docs/lab/index.html @@ -2,7 +2,8 @@ <html lang="en"> <head> <meta charset="utf-8"> - <link rel="icon" type="image/png" href="../favicon.png" /> + <title>lab</title> + <link rel="icon" type="image/png" href="favicon.png" /> <link href="../inter-ui.css" rel="stylesheet"> <script type="text/javascript"> @@ -743,8 +744,6 @@ for (const ch of uniqueChars) { // end of samples </script> - <meta charset="utf-8"> - <title>👀</title> <style id="font-css" type="text/css-template"> /* Roboto for comparison */ @import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese'); @@ -1295,6 +1294,15 @@ function main() { const repertoireControl = document.querySelector('.repertoireControl') const samplesElement = document.querySelector('samples') + // filter paste to match style + ;[].slice.call(document.querySelectorAll('[contenteditable]')).forEach(el => { + el.addEventListener('paste', ev => { + ev.preventDefault() + let text = ev.clipboardData.getData("text/plain") + document.execCommand("insertHTML", false, text) + }, {capture:true,passive:false}) + }) + let sizeVar = null function forEachGlyphlist(fn) { @@ -1513,10 +1521,6 @@ function main() { return e.valueAsNumber !== undefined ? e.valueAsNumber : e.value }) - vars.bind('varItalic', (e, v) => { - console.log('varItalic', v) - }) - // compare let secondarySampleClassNameAddition = null @@ -1709,6 +1713,9 @@ function main() { </body> <script type="text/javascript"> main(); - document.title += ' ' + (new Date()).toTimeString().split(':').slice(0,2).join(':'); + document.title = ( + (new Date()).toTimeString().split(':').slice(0,2).join(':') + + ' — ' + (new Date()).toDateString() + ); </script> </html> diff --git a/docs/samples/index.css b/docs/samples/index.css index 4711dff69..8ce2be780 100644 --- a/docs/samples/index.css +++ b/docs/samples/index.css @@ -65,14 +65,16 @@ livesample.col2 { column-count: 2; } -.font-style-regular { font-weight:400 !important; font-style:normal !important; } -.font-style-italic { font-weight:400 !important; font-style:italic !important; } -.font-style-medium { font-weight:500 !important; font-style:normal !important; } -.font-style-medium-italic { font-weight:500 !important; font-style:italic !important; } -.font-style-bold { font-weight:700 !important; font-style:normal !important; } -.font-style-bold-italic { font-weight:700 !important; font-style:italic !important; } -.font-style-black { font-weight:900 !important; font-style:normal !important; } -.font-style-black-italic { font-weight:900 !important; font-style:italic !important; } +.font-style-regular { font-variation-settings: "wght" 400, "ital" 0 !important; font-weight:400 !important; font-style:normal !important; } +.font-style-italic { font-variation-settings: "wght" 400, "ital" 100 !important; font-weight:400 !important; font-style:italic !important; } +.font-style-medium { font-variation-settings: "wght" 500, "ital" 0 !important; font-weight:500 !important; font-style:normal !important; } +.font-style-medium-italic { font-variation-settings: "wght" 500, "ital" 100 !important; font-weight:500 !important; font-style:italic !important; } +.font-style-bold { font-variation-settings: "wght" 700, "ital" 0 !important; font-weight:700 !important; font-style:normal !important; } +.font-style-bold-italic { font-variation-settings: "wght" 700, "ital" 100 !important; font-weight:700 !important; font-style:italic !important; } +.font-style-extra-bold { font-variation-settings: "wght" 800, "ital" 0 !important; font-weight:800 !important; font-style:normal !important; } +.font-style-extra-bold-italic { font-variation-settings: "wght" 800, "ital" 100 !important; font-weight:800 !important; font-style:italic !important; } +.font-style-black { font-variation-settings: "wght" 900, "ital" 0 !important; font-weight:900 !important; font-style:normal !important; } +.font-style-black-italic { font-variation-settings: "wght" 900, "ital" 100 !important; font-weight:900 !important; font-style:italic !important; } div.live { margin-top:1em; diff --git a/docs/samples/index.html b/docs/samples/index.html index 69ed90095..7e656f0c1 100644 --- a/docs/samples/index.html +++ b/docs/samples/index.html @@ -38,6 +38,8 @@ endfor <option value="medium-italic">Medium Italic</option> <option value="bold" default>Bold</option> <option value="bold-italic">Bold Italic</option> + <option value="extra-bold" default>Extra Bold</option> + <option value="extra-bold-italic">Extra Bold Italic</option> <option value="black" default>Black</option> <option value="black-italic">Black Italic</option> </select> @@ -184,6 +186,16 @@ graph.setOrigin(-0.2, 0.8) graph.setScale(0.049, 5) var s2 = $('livesample.s2') +var samples = $$('livesample') + +// filter paste to match style +samples.forEach(sample => { + sample.addEventListener('paste', ev => { + ev.preventDefault() + let text = ev.clipboardData.getData("text/plain") + document.execCommand("insertHTML", false, text) + }, {capture:true,passive:false}) +}) function updateWidth() { var fontSize = bindings.value('font-size', 0) @@ -235,6 +247,8 @@ bindings.configure('style', null, null, function (style) { cl.remove('font-style-medium-italic') cl.remove('font-style-bold') cl.remove('font-style-bold-italic') + cl.remove('font-style-extra-bold') + cl.remove('font-style-extra-bold-italic') cl.remove('font-style-black') cl.remove('font-style-black-italic') cl.add('font-style-' + style) |