From c5d6a6ef836be3cba8d78392bd8c0495841c43b5 Mon Sep 17 00:00:00 2001
From: Rasmus Andersson <rasmus@notion.se>
Date: Wed, 19 Sep 2018 09:28:47 -0700
Subject: [PATCH] website

---
 docs/inter-ui.css       |  52 ++++++++++++++++++++--------------------
 docs/lab/favicon.png    | Bin 0 -> 1484 bytes
 docs/lab/index.html     |  23 +++++++++++-------
 docs/samples/index.css  |  18 +++++++-------
 docs/samples/index.html |  14 +++++++++++
 5 files changed, 65 insertions(+), 42 deletions(-)
 create mode 100755 docs/lab/favicon.png

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
new file mode 100755
index 0000000000000000000000000000000000000000..8a731f3cc609a71ba259995e1f6b6cc89bd18646
GIT binary patch
literal 1484
zcmV;-1vC1IP)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00009a7bBm001mY
z001mY0i`{bsQ>@~0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1z|}<K~#7F)myJ~
z8%Gp=vWRRX8JSfnDyxdzc06OHD6EDl^8~fXF>(`Pxu`0sQq-c<tU<Mzi*f><X;7TM
zzzPhpF32*m@_q8HMv`@R`{RCoGdHUrdvp7J`}V!P-M1A<8TER-iK4x-veFul$DiRd
zzt@9u76V*9OVoRZ@`9J|`vXZ46-fagO~N}M^1a+AYKlRnQt@tYZ;v5{CkZ1l0YJJA
z(t9BNRPK5>4bVC|DEmoShO+<}5nqH4tLOz*F%Sn-#R1^HhlZTs<0D)($qsy08_(XU
z)oT7|G<qkNu(AL;Haz?#8zIF2hsHx2YcRHepx6Jw$1kKfsH080u!b90!~Z5X8VRtz
zzWzIkj$~`@x~M^fM{8?qa(#W>*S$$w0FZwPGy74Bk2XYTLWEPD%3404(P+Fy(UNk(
z8xDsL<0`GhRbbCc`N$LPpzV=}90G87hbW#(dC|gfsAD+%7gixufWX`TDmmid;6S#v
zw&eW$TpaK<qQl3q=&)3PAkH(?<>u{4UI{?BhyX4W;T1&i7ynx-!0PHMo!*Az1VvsU
z0TCD?TM*!Q@sE1~p!at<sgRtoNM0cU5t_?}!khpzQ{1dxYUU6|Ucps_U?}_r5k~5_
zxiHALI&pu0w*uQV)2>j&i4+6Axz0tksRaZpH-AbFj*r9<s>Jg=_L8*Q?a2C$me88D
zf~f%baR(27EE$8nxw*M1{r=tbJp&PHu!0*1?(xf10C@g?CF8NL%vq7mPy|MVE<a2J
z;2IttnCXmfaV%#n0t~*^hX{j-0GKXzB*XcBm?O(l1Pp_Z7zSq(0iXuo^D{C3I4_=|
z2ph0~7u6v4cO(PohA>+ZNZvqzIy(NC^MFiDUpLMxbUGb5JUpC!$6`!m{cg8AxeU>+
zLWRdrw=F5cG|o?37t~`(LBe23o_^qc72%Jwztk2uZR5NG>qXVIB~QSrK2U(4C8ak%
z*Ek;s7xDz!Fj4{}9s!by^I>o$A7COtPZCDbaefgAktgaDpd$$)tvIicAo&Rr6(H?6
zpEP+Qc3E5(1&#BupatxTqZ2G@oY%lW31A%tiyY@QFcE-z`&JX7qR06-VA#FkRQMY%
z7K$NC66fRaiUMpf)57Gg62<vA^eBLDvKmyjI3I&&Rc;rVL;@~6sKtjc6e-R}VBq`y
zky;UYpz8<Jf`h3D+uPfDdi#5T13W?JpDF=HCfi}ABIFq7qp;6K(P@TAqtO_O;e^O>
zmu7;T$X^bJ!_WC)c4K7KbY)1_62g!Zd7A&e$}OA~-~s|L3Cd_|%vOZF$je<q_A`|$
zFcpA%Wj0non2L}ic}Aly%>P7vpW7a{wE{v{ggnUumx1|DGezbE2&~|S35Q~VI1zFt
zKN<Uo{c}l__cBD7K>-oCSJ)H_go%(hdEgS{pDg~kG)IUVhrztSDpz1pgaVKsqW8bm
zPLg6pm!Uu?5m@F-9^A*z(feo1{)|kO#lB$=BJ4?tf%YF=U0rp;{*TNQg(aL}>->R~
zGgX%4{|5Q}$U35dGA2vI>|ev|zl*D<wJMB>!&gxASV{u+ybgIn`@8^FeNW&RD{1c}
zJ7SFXy@1*Oq<e$Wi4ph&kJ*;N+CkAyjWE<bhqWG=+~jg->b2yQRJj0#IS=I%n?qAh
z=LUnkVs7s=C3|oy$p`sgK-_wR*Xi6KhQtMi1kdKsH*jwui(#RN|Az7h*W<KF9-VE<
z-C@SGEJ6|g17#1yeMtbR9iB$P;ju0DVyN9x9*U%uofi7=bQl85Xa(1oxadHa9-jwM
mu1gMZy~o8RD=+Qi^Pd2OgD1n_kG}f=0000<MNUMnLSTZp-Kt0c

literal 0
HcmV?d00001

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)