website update

docs/index.css

@@ -43,7 +43,7 @@ a.fat {
   color: #333;
 }
 a:hover {
-  color: rgba(3, 102, 214, 1);
+  color: rgb(3, 102, 214);
   text-decoration: underline rgba(3, 102, 214, 0.6);
 }
 a.plain, a.fat {
@@ -83,6 +83,10 @@ q:after {
   content: "";
 }
 kbd {
+  -moz-font-feature-settings: 'kern' 1, 'case' 1;
+  -ms-font-feature-settings: 'kern' 1, 'case' 1;
+  -o-font-feature-settings: 'kern' 1, 'case' 1;
+  -webkit-font-feature-settings: 'kern' 1, 'case' 1;
   font-feature-settings: 'kern' 1, 'case' 1;
   border: 1px solid rgba(0,0,0,0.18);
   border-radius: 3px;
@@ -94,6 +98,10 @@ dem { /* de-emphasize */
   opacity: 0.7;
 }
 num { /* number */
+  -moz-font-feature-settings: 'calt' 1, 'ss01' 1;
+  -ms-font-feature-settings: 'calt' 1, 'ss01' 1;
+  -o-font-feature-settings: 'calt' 1, 'ss01' 1;
+  -webkit-font-feature-settings: 'calt' 1, 'ss01' 1;
   font-feature-settings: 'calt' 1, 'ss01' 1;
   white-space: pre;
 }
@@ -135,6 +143,23 @@ h2.back a:hover {
 h2.back a:hover::before {
   content: "<- ";
 }
+h2.banner {
+  text-align: center;
+  display: flex;
+  justify-content: center;
+}
+  h2.banner > * {
+    flex: 0 1 auto;
+    padding: 0.8em 1.2em;
+    border-radius: 4em;
+    display: block;
+    background: white;
+  }
+  h2.banner > a:hover {
+    color: black;
+    background: rgba(0,0,0,0.1);
+  }
+
 h3 {
   font-size: inherit;
 }
@@ -143,7 +168,7 @@ h1 > a, h2 > a, h3 > a {
   color: inherit;
   text-decoration: none !important;
   text-shadow: none;
-  background: none !important;
+  background: none;
 }
 
 .row {
@@ -192,14 +217,19 @@ h1 > a, h2 > a, h3 > a {
       transition: 300ms opacity cubic-bezier(0.25, 0.47, 0.44, 0.93);
       border-bottom: 3px solid transparent;
     }
-    .row.menu ul li > a:hover {
+    .row.menu ul li > a:hover, .row.menu ul li > a.active {
       color: black;
       border-bottom-color: black;
       opacity: 1;
     } 
+  .row.menu ul li.home > a {
+    font-weight: 500;
+    color: black;
+    opacity: 1;
+  }
 
 /* narrow windows */
-@media only screen and (max-width: 500px) {
+@media only screen and (max-width: 565px) {
   .row.menu ul {
     justify-content: space-between;
   }
@@ -209,7 +239,28 @@ h1 > a, h2 > a, h3 > a {
     .row.menu ul li:last-child {
       margin-right: 0;
     }
+  .row.menu ul li.home {
+    /*color: red;
+    clear: both;*/
+    /*display: block;*/
+    text-align:center;
+    margin:0 0 -12px 0;
+    width: 100%;
+  }
+  .row.menu ul li.home > a {
+    border-bottom: none;
+    padding: 0 1em;
+    margin: 0.5em 0;
+    line-height:34px;
+    border-radius: 90px;
 
+    /*color: white;
+    background-color: rgba(3, 102, 214, 1);*/
+  }
+  .row.menu ul li.home > a:hover {
+    color: white;
+    background-color: #222;
+  }
 }
 
 /* small devices (<= iPhone 6+) */
@@ -294,6 +345,16 @@ a > img {
   background-color: #f4f4f4;
 }
 
+.sample-images {}
+  .sample-images > img, .sample-images > svg {
+    display: block;
+    margin:100px 0;
+    width:100%;
+  }
+  .sample-images > img:first-child, .sample-images > svg:first-child {
+    margin-top:50px;
+  }
+
 
 /* FAQ */
 ul.faq {
@@ -357,6 +418,10 @@ tablex {
     width:0;
   }*/
   tablex to::after {
+    -moz-font-feature-settings: 'calt' 1, 'case' 1;
+    -ms-font-feature-settings: 'calt' 1, 'case' 1;
+    -o-font-feature-settings: 'calt' 1, 'case' 1;
+    -webkit-font-feature-settings: 'calt' 1, 'case' 1;
     font-feature-settings: 'calt' 1, 'case' 1;
     content: "   →   ";
     color: rgba(0,0,0,0.2);
@@ -365,16 +430,54 @@ tablex {
     color: rgba(0,0,0,0.8);
   }
   tablex in {
+    -moz-font-feature-settings: 'calt' 0;
+    -ms-font-feature-settings: 'calt' 0;
+    -o-font-feature-settings: 'calt' 0;
+    -webkit-font-feature-settings: 'calt' 0;
     font-feature-settings: 'calt' 0;
   }
   tablex out {
+    -moz-font-feature-settings: 'calt' 1;
+    -ms-font-feature-settings: 'calt' 1;
+    -o-font-feature-settings: 'calt' 1;
+    -webkit-font-feature-settings: 'calt' 1;
     font-feature-settings: 'calt' 1;
   }
-  tablex out.zero { font-feature-settings: 'calt' 1, 'zero' 1; }
-  tablex out.tnum { font-feature-settings: 'calt' 1, 'tnum' 1; }
-  tablex out.case { font-feature-settings: 'calt' 1, 'case' 1; }
-  tablex out.frac { font-feature-settings: 'calt' 1, 'frac' 1; }
-  tablex out.ss01 { font-feature-settings: 'calt' 1, 'ss01' 1; }
+  tablex out.zero {
+    -moz-font-feature-settings: 'calt' 1, 'zero' 1;
+    -ms-font-feature-settings: 'calt' 1, 'zero' 1;
+    -o-font-feature-settings: 'calt' 1, 'zero' 1;
+    -webkit-font-feature-settings: 'calt' 1, 'zero' 1;
+    font-feature-settings: 'calt' 1, 'zero' 1;
+  }
+  tablex out.tnum {
+    -moz-font-feature-settings: 'calt' 1, 'tnum' 1;
+    -ms-font-feature-settings: 'calt' 1, 'tnum' 1;
+    -o-font-feature-settings: 'calt' 1, 'tnum' 1;
+    -webkit-font-feature-settings: 'calt' 1, 'tnum' 1;
+    font-feature-settings: 'calt' 1, 'tnum' 1;
+  }
+  tablex out.case {
+    -moz-font-feature-settings: 'calt' 1, 'case' 1;
+    -ms-font-feature-settings: 'calt' 1, 'case' 1;
+    -o-font-feature-settings: 'calt' 1, 'case' 1;
+    -webkit-font-feature-settings: 'calt' 1, 'case' 1;
+    font-feature-settings: 'calt' 1, 'case' 1;
+  }
+  tablex out.frac {
+    -moz-font-feature-settings: 'calt' 1, 'frac' 1;
+    -ms-font-feature-settings: 'calt' 1, 'frac' 1;
+    -o-font-feature-settings: 'calt' 1, 'frac' 1;
+    -webkit-font-feature-settings: 'calt' 1, 'frac' 1;
+    font-feature-settings: 'calt' 1, 'frac' 1;
+  }
+  tablex out.ss01 {
+    -moz-font-feature-settings: 'calt' 1, 'ss01' 1;
+    -ms-font-feature-settings: 'calt' 1, 'ss01' 1;
+    -o-font-feature-settings: 'calt' 1, 'ss01' 1;
+    -webkit-font-feature-settings: 'calt' 1, 'ss01' 1;
+    font-feature-settings: 'calt' 1, 'ss01' 1;
+  }
   tablex em {
     font-style: inherit;
     background: #FBE9A3;
@@ -411,153 +514,3 @@ box:first-child {
 box h3 {
   margin-bottom:0.8em;
 }
-
-.glyph-repertoire {
-  position: relative;
-  background: white;
-  margin-bottom:0;
-  border-top-left-radius:3px;
-  border-top-right-radius:3px;
-  padding-top:3px;
-}
-.glyph-repertoire-link {
-  margin-top:0;
-  background: white;
-  border-bottom-left-radius:3px;
-  border-bottom-right-radius:3px;
-}
-  .glyph-repertoire-link a {
-    display: block;
-    padding: 2em;
-    text-align: center;
-  }
-.glyph-repertoire .fade {
-  position: absolute;
-  display: block;
-  left:0; bottom:0; right:0;
-  height:50px;
-  pointer-events: none;
-
-  background-image:
-    linear-gradient(to bottom,
-      rgba(255,255,255,0) 0%,
-      rgba(255,255,255,1) 100%);
-  background-repeat: repeat-x;
-  background-size: 2px 50px;
-  background-position: 0 0;
-}
-.glyph-repertoire a {
-  display: block;
-  font-feature-settings: 'case' 1;
-}
-  .glyph-repertoire iframe {
-    pointer-events: none;
-
-    /*width: 100%;
-    height: 100px;*/
-    /*height: 0.5vh;*/
-    height: 330px;
-
-    width: 1px;
-    min-width: 100%;
-    *width: 100%;
-  }
-
-
-.carousel, .carousel * {
-  user-select: none;
-  cursor: default;
-}
-
-.carousel .header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  line-height: 40px;
-  height: 40px;
-  /*background:#eee;*/
-}
-  .carousel .header h2 {
-    margin: 0 0 1px 0;
-  }
-  .carousel .dots {
-    display: flex;
-    align-items: stretch;
-    /*background:salmon;*/
-    height: 40px;
-  }
-    .carousel .dots > .dot {
-      width:  14px;
-      margin: 0;
-      display: flex;
-      align-items: center;
-    }
-      .carousel .dot > .graphic {
-        box-sizing: border-box;
-        border-radius: 100%;
-        width:  10px;
-        height: 10px;
-        border: 1px solid #ccc;
-      }
-      .carousel .dots > .dot:hover > .graphic {
-        border-color:#111;
-      }
-      .carousel .dots > .dot.active > .graphic {
-        background: #222;
-        border: none;
-      }
-
-  .carousel .preload {
-    visibility: hidden;
-    pointer-events: none;
-    position: fixed;
-  }
-
-  .carousel .items {
-    margin-bottom: 0;
-    overflow-x: scroll;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
-    height:780px;
-    /*width: 100vw;*/
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-    .carousel .items > * {
-      flex: 1 0 auto;
-      margin-right: 20vw;
-      width: 80vw;
-      max-width: 888px;
-      cursor: e-resize;
-      transition: all 200ms ease-out;
-    }
-    .carousel .items > .loading {
-      opacity: 0.6;
-      -webkit-filter: url('#blur');
-      filter: url('#blur');
-      -webkit-filter: blur(20px);
-      filter: blur(20px);
-    }
-
-
-@media only screen and (max-device-width: 780px) and (orientation: portrait) {
-  .carousel .items {
-    height: auto !important;
-    max-height: 90vw;
-  }
-  .carousel .items img {
-    max-height: 90vw;
-  }
-}
-@media only screen and (max-device-width: 780px) and (orientation: landscape) {
-  .carousel .items {
-    height: auto !important;
-    width: 90vh;
-    margin: 0 auto;
-  }
-  .carousel .items > * {
-    width: 90vh;
-    max-height: 90vh;
-  }
-}

docs/index.html

@@ -23,18 +23,19 @@
     <meta name="format-detection" content="telephone=no">
     <link rel="icon" type="image/png" href="favicon.png" />
     <link href="inter-ui.css?v=2.5" rel="stylesheet">
-    <link href="index.css?v=4" rel="stylesheet">
+    <link href="index.css?v=5" rel="stylesheet">
   </head>
   <body>
 
     <div class="row menu">
       <ul class="menu">
+        <li class="home"><a href="../">Inter UI</a></li>
         <li><a class="download-link"
           href="https://github.com/rsms/inter/releases/latest/"
         >Download</a></li>
+        <li><a href="samples/">Samples</a></li>
         <li><a href="lab/">Playground</a></li>
         <li><a href="https://github.com/rsms/inter/">Source</a></li>
-        <li><a href="https://github.com/rsms/inter/releases/">Changelog</a></li>
       </ul>
     </div>
 
@@ -53,35 +54,15 @@
       </p>
     </div></div>
 
-    <div class="row white" style="padding-bottom:0">
-      <div class="carousel">
-        <div class="header">
-          <h2><a id="sample" href="#samples">Samples</a></h2>
-          <div class="dots"></div>
-        </div>
+    <div class="row white" style="padding-bottom:0"><div>
       <p id="samples" class="samples items">
-          <img src="res/sample/01.png" srcset="res/sample/01@2x.png 2x" width="888">
-          <img src="res/sample/02.png" srcset="res/sample/02@2x.png 2x" width="888">
-          <img src="res/sample/03.png" srcset="res/sample/03@2x.png 2x" width="888">
-          <img src="res/sample/04.png" srcset="res/sample/04@2x.png 2x" width="888">
-          <img src="res/sample/05.png" srcset="res/sample/05@2x.png 2x" width="888">
-          <img src="res/sample/06.png" srcset="res/sample/06@2x.png 2x" width="888">
-          <img src="res/sample/07.png" srcset="res/sample/07@2x.png 2x" width="888">
-          <img src="res/sample/08.png" srcset="res/sample/08@2x.png 2x" width="888">
-          <img src="res/sample/09.png" srcset="res/sample/09@2x.png 2x" width="888">
-          <img src="res/sample/10.png" srcset="res/sample/10@2x.png 2x" width="888">
-          <img src="res/sample/11.png" srcset="res/sample/11@2x.png 2x" width="888">
-          <img src="res/sample/12.png" srcset="res/sample/12@2x.png 2x" width="888">
-          <img src="res/sample/13.png" srcset="res/sample/13@2x.png 2x" width="888">
-          <img src="res/sample/14.png" srcset="res/sample/14@2x.png 2x" width="888">
-          <img src="res/sample/15.png" srcset="res/sample/15@2x.png 2x" width="888">
+        <a href="samples/" class="plain"><img src="samples/img/01.png" srcset="samples/img/01@2x.png 2x" width="888"></a>
       </p>
       <p style="text-align:center">
-          <a href="https://www.figma.com/file/WmU5NWr52bnUcqv5os0V4sWi/" class="plain">Open these samples in Figma</a>
+        <a href="samples/" class="plain">More samples -></a>
         <br><br>
       </p>
-      </div>
-    </div>
+    </div></div>
 
     <div class="row dark"><div>
 
@@ -122,7 +103,8 @@
             <h><in>Disabled</in><to></to><out>Enabled</out></h>
             <r><in>12<em>:</em>34,  FE<em>—</em>X</in><to></to><out>12:34,  FE—X</out></r>
             <r><in>4<em>.</em>2</in><to></to><out>4.2</out></r>
-            <r><in>SFO -> STO</in><to></to><out>SFO -> STO</out></r>
+            <r><in>SFO <em>-></em> STO</in><to></to><out>SFO -> STO</out></r>
+            <r><in>IIA <em>—></em> OGG</in><to></to><out>IIA —> OGG</out></r>
             <r><in>M<em>@</em>N m@n</in><to></to><out>M@N m@n</out></r>
           </t></tablex>
         </box>
@@ -134,6 +116,8 @@
             <r><in><em>1</em>23456<em>7</em>890</in><to></to><out class="tnum">1234567890</out></r>
             <r><in>1131711<em>&nbsp;</em></in><to></to><out class="tnum">1131711<em>&nbsp;</em></out></r>
             <r><in>0040900<em>&nbsp;</em></in><to></to><out class="tnum">0040900<em>&nbsp;</em></out></r>
+            <r><in>11:31,711<em>&nbsp;</em></in><to></to><out class="tnum">11:31,711<em>&nbsp;</em></out></r>
+            <r><in>00:40.900<em>&nbsp;</em></in><to></to><out class="tnum">00:40.900<em>&nbsp;</em></out></r>
           </t></tablex>
         </box>
 
@@ -157,13 +141,17 @@
         </box>
 
         <box>
-          <h3>Stylistic set #1: Open digits (<q title='OpenType feature ID'>ss01</q>)</h3>
+          <h3>Stylistic set 1: Alternate digits (<q title='OpenType feature ID'>ss01</q>)</h3>
           <tablex><t>
             <h><in>Disabled</in><to></to><out>Enabled</out></h>
             <r>
-              <in>123<em>4</em>5<em>6</em>78<em>9</em>0</in>
+              <in><em>1</em>23<em>4</em>5<em>6</em>78<em>9</em>0</in>
               <to></to><out class="ss01">1234567890</out>
             </r>
+            <r><in><em>1</em></in><to></to><out class="ss01">1</out></r>
+            <r><in><em>4</em></in><to></to><out class="ss01">4</out></r>
+            <r><in><em>6</em></in><to></to><out class="ss01">6</out></r>
+            <r><in><em>9</em></in><to></to><out class="ss01">9</out></r>
           </t></tablex>
         </box>
 
@@ -176,7 +164,7 @@
               <to></to><out class="case">(Hello) [World] {9000}</out>
             </r>
             <r><in>SCHOOL <em>@</em> RUN</in><to></to><out class="case">SCHOOL @ RUN</out></r>
-            <r><in>3 <em>+</em> 9 <em>=</em> 12*</in><to></to><out class="case">3 + 9 = 12*</out></r>
+            <r><in>3 <em>+</em> 9 <em>=</em> 12 <em>*</em> 1</in><to></to><out class="case">3 + 9 = 12 * 1</out></r>
             <r><in><em>*</em> <em>+</em> <em>÷</em> <em>±</em> <em>×</em> <em>=</em> <em>≠</em> <em>•</em></in><to></to><out class="case">* + ÷ ± × = ≠ •</out></r>
             <r><in><em>→</em> <em>←</em> <em>⟶</em> <em>⟵</em> <em>−</em> <em>-</em> <em>–</em> <em>—</em> <em>:</em></in><to></to><out class="case">→ ← ⟶ ⟵ − - – — :</out></r>
           </t></tablex>
@@ -193,16 +181,7 @@
 
       <p>&nbsp;</p>
 
-      <h2><a href="glyphs/">Glyph repertoire</a></h2>
-      <p class="glyph-repertoire">
-        <span class="fade"></span>
-        <a class="plain" href="glyphs/">
-          <iframe src="glyphs/?iframe" scrolling="no" frameborder="0"></iframe>
-        </a>
-      </p>
-      <p class="glyph-repertoire-link">
-        <a class="plain" href="glyphs/">Explore all glyphs &rarr;</a>
-      </p>
+      <h2 class="banner"><a href="glyphs/">Browse all glyphs -></a></h2>
     </div></div>
 
     <div class="row-divider"></div>
@@ -347,7 +326,7 @@
       — <a href="https://twitter.com/rsms" class="plain">@rsms</a>
     </div></div>
 
-    <script src="index.js"></script>
+    <script src="index.js?v=2"></script>
     <script>
       (function(){
 

docs/index.js

@@ -1,5 +1,13 @@
 var isMac = false
 
+function $$(query, el) {
+  return [].slice.call((el || document).querySelectorAll(query))
+}
+
+function $(query, el) {
+  return (el || document).querySelector(query)
+}
+
 // fetchjson(url string, cb (err Error, d Object)->nil)
 //
 var fetchjson = (

docs/optimize-resources.sh

@@ -2,6 +2,8 @@
 set -e
 cd "$(dirname "$0")"
 
+pushd res >/dev/null
+
 for f in *.svg; do
   svgo --multipass -q "$f" &
 done
@@ -11,7 +13,11 @@ for f in *.png; do
   (pngcrush -q "$f" "$TMPNAME" && mv -f "$TMPNAME" "$f") &
 done
 
-pushd sample >/dev/null
+popd >/dev/null
+
+
+pushd samples/img >/dev/null
+
 for f in *.png; do
   TMPNAME=.$f.tmp
   if (echo "$f" | grep -q 'thumb'); then
@@ -20,6 +26,18 @@ for f in *.png; do
     (pngcrush -q "$f" "$TMPNAME" && mv -f "$TMPNAME" "$f") &
   fi
 done
+
 popd >/dev/null
 
+
+
+pushd samples/icons >/dev/null
+
+for f in *.svg; do
+  svgo --multipass -q "$f" &
+done
+
+popd >/dev/null
+
+
 wait

docs/samples/bindings.js

@@ -0,0 +1,159 @@
+// requires index.js
+
+function Binding(name){
+  this.name = name
+  this.value = undefined
+  this.inputs = []
+  this.listeners = []
+  this.formatter = undefined
+}
+
+
+Binding.prototype.addInput = function(el) {
+  var binding = this
+  var _onInput = function(ev) {
+    binding.setValue(el.value, el)
+  }
+  var input = {
+    el: el,
+    _onInput: _onInput,
+  }
+  this.inputs.push(input)
+  if (this.value === undefined) {
+    this.value = el.value
+  } else {
+    input.el.value = this.value
+  }
+  el.addEventListener('input', _onInput, {passive:true})
+}
+
+
+// listener signature:
+//   function(nextval string, prevval string, b Binding)void
+//
+Binding.prototype.addListener = function(listener) {
+  this.listeners.push(listener)
+}
+
+
+Binding.prototype.setValue = function(nextval, origin) {
+  // console.log('Binding.setValue nextval:', nextval, {origin})
+  var prevval = this.value
+  if (this.formatter) {
+    nextval = this.formatter(nextval, prevval)
+  }
+  if (this.value === nextval) {
+    return
+  }
+  var binding = this
+  this.value = nextval
+  this.inputs.forEach(function(input) {
+    if (input.el !== origin) {
+      input.el.value = nextval
+    }
+  })
+  this.listeners.forEach(function(listener) {
+    listener(nextval, prevval, this)
+  })
+}
+
+
+function Bindings() {
+  this.bindings = {}
+}
+
+Bindings.prototype.getBinding = function(name, input) {
+  var binding = this.bindings[name]
+  if (!binding) {
+    binding = new Binding(name)
+    this.bindings[name] = binding
+  }
+  return binding
+}
+
+Bindings.prototype.bindInput = function(name, input) {
+  // console.log('bindInput', name, input)
+  var binding = this.getBinding(name)
+  binding.addInput(input)
+}
+
+Bindings.prototype.bindAllInputs = function(queryOrInputElementList) {
+  var bindings = this
+
+  var inputs = (
+    typeof queryOrInputElementList == 'string' ? $$(queryOrInputElementList) :
+    queryOrInputElementList
+  )
+
+  inputs.forEach(function(input) {
+    var bindingName = input.dataset.binding
+    if (bindingName) {
+      bindings.bindInput(bindingName, input)
+    }
+  })
+}
+
+// listener signature:
+//   function(nextval string, prevval string, b Binding)void
+//
+Bindings.prototype.addListener = function(name, listener) {
+  var binding = this.getBinding(name)
+  binding.addListener(listener)
+}
+
+Bindings.prototype.setValue = function(name, value) {
+  var binding = this.getBinding(name)
+  binding.setValue(value)
+}
+
+
+Bindings.prototype.value = function(name, defaultValue) {
+  var binding = this.bindings[name]
+  return binding && binding.value !== undefined ? binding.value : defaultValue
+}
+
+
+function fmt_float(nextval, prevval) {
+  var n = parseFloat(nextval)
+  return isNaN(n) ? 0 : n
+}
+
+function fmt_int(nextval, prevval) {
+  var n = parseInt(nextval)
+  return isNaN(n) ? 0 : n
+}
+
+
+// configure is convenience function for setting value, adding a
+// listener and associating a formatter with a binding.
+// If a listener and a value is provided, the value is set and the listener
+// is immediately invoked.
+//
+Bindings.prototype.configure = function(name, value, formatter, listener) {
+  var binding = this.getBinding(name)
+  if (listener) {
+    binding.addListener(listener)
+  }
+  if (value !== undefined && value !== null) {
+    binding.setValue(value)
+  }
+  if (formatter) {
+    if (typeof formatter == 'string') {
+      switch (formatter) {
+        case 'number':
+        case 'float':
+          formatter = fmt_float; break;
+        
+        case 'int':
+        case 'integer':
+          formatter = fmt_int; break;
+
+        default:
+          throw new Error('unknown formatter "' + formatter + '"')
+      }
+    } else if (typeof formatter != 'function') {
+      throw new Error('formatter should be a string or function')
+    }
+    binding.formatter = formatter
+  }
+}

docs/samples/icons/font-size.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>font-size</title><desc>Created using Figma</desc><use xlink:href="#a" transform="translate(1.191 6.91)"/><use xlink:href="#b" transform="translate(7.307 3.273)"/><defs><path id="a" d="M1.054 5.09l.37-1.083h1.95l.37 1.084h1.051L2.918 0H1.877L0 5.09h1.054zm1.315-3.852h.06l.67 1.964h-1.4l.671-1.964z"/><path id="b" d="M1.108 8.727l.822-2.335h3.64l.822 2.335H7.5L4.295 0h-1.09L0 8.727h1.108zm2.59-7.346h.103l1.436 4.074H2.263L3.699 1.38z"/></defs></svg>

docs/samples/icons/letter-spacing.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>letter-spacing</title><desc>Created using Figma</desc><use xlink:href="#a" transform="translate(4.307 3.273)"/><use xlink:href="#b" transform="rotate(90 -.5 1.5)"/><use xlink:href="#b" transform="rotate(90 7 9)"/><defs><path id="a" d="M1.108 8.727l.822-2.335h3.64l.822 2.335H7.5L4.295 0h-1.09L0 8.727h1.108zm2.59-7.346h.103l1.436 4.074H2.263L3.699 1.38z"/><path id="b" fill-rule="evenodd" d="M12 1H0V0h12v1z"/></defs></svg>

docs/samples/icons/style.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>style</title><desc>Created using Figma</desc><use xlink:href="#a" transform="rotate(90 -1 2)"/><use xlink:href="#b" transform="rotate(90 1 4)"/><use xlink:href="#c" transform="rotate(90 3.5 6.5)"/><use xlink:href="#d" transform="rotate(90 6.5 9.5)"/><defs><path id="a" fill-rule="evenodd" d="M10 1H0V0h10v1z"/><path id="b" fill-rule="evenodd" d="M10 2H0V0h10v2z"/><path id="c" fill-rule="evenodd" d="M10 3H0V0h10v3z"/><path id="d" fill-rule="evenodd" d="M10 4H0V0h10v4z"/></defs></svg>

docs/samples/index.html

@@ -0,0 +1,488 @@
+<!DOCTYPE HTML>
+<html lang="en" prefix="og: http://ogp.me/ns#">
+  <head>
+    <meta charset="utf-8">
+    <title>Inter UI font family</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta property="og:title" content="Inter UI font family">
+    <meta property="twitter:title" content="Inter UI font family">
+    <meta property="description" content="Inter UI is a new typeface optimized for computer user interfaces">
+    <meta property="og:description" content="Inter UI is a new typeface optimized for computer user interfaces">
+    <meta property="twitter:description" content="Inter UI is a new typeface optimized for computer user interfaces">
+    <meta property="twitter:card" content="summary">
+    <meta property="twitter:site" content="@rsms">
+    <meta property="twitter:creator" content="@rsms">
+    <meta property="og:image" content="https://rsms.me/inter/res/poster.png">
+    <meta property="twitter:image" content="https://rsms.me/inter/res/poster.png">
+    <meta property="fb:app_id" content="38027689216">
+    <meta property="og:url" content="https://rsms.me/inter/">
+    <meta property="og:site_name" content="rsms.me">
+    <meta property="og:type" content="product">
+    <meta property="og:locale" content="en_US" />
+    <meta name="format-detection" content="telephone=no">
+    <link rel="icon" type="image/png" href="../favicon.png" />
+    <link href="../inter-ui.css?v=2.5" rel="stylesheet">
+    <link href="../index.css?v=5" rel="stylesheet">
+    <style type="text/css">
+body {
+  padding-bottom: 0;
+  background: white;
+}
+
+.row.footer h2 {
+  margin:0;
+  text-align:center;
+}
+
+/*.row.menu {
+  background: white;
+}*/
+
+livesample {
+  display: block;
+  color: #111;
+  outline: none;
+  padding-left: 20px;
+  border-left: 2px solid transparent;
+  margin-left:-22px;
+  margin-top: 1em;
+  margin-bottom: 1.6em;
+}
+livesample:hover {
+  /*color: rgb(3, 102, 214);*/
+  border-left-color: rgb(3, 102, 214);
+}
+livesample:focus {
+  border-left-color: #eee;
+}
+livesample > p {
+  margin-top: 0;
+}
+livesample.s1 {
+  padding-left: 16px;
+  letter-spacing: -0.005em;
+  font-size: 5em;
+  font-weight: 600;
+  line-height: 1.1;
+  margin-top: 0;
+  margin-bottom: 0.3em;
+}
+livesample.s2 {
+  max-width: 400px;
+  font-size: 1em;
+}
+livesample.s3 {
+  font-size: 13px;
+  line-height: 18px;
+}
+  livesample.s3 b, livesample.s3 strong {
+    font-weight:500;
+    color: black;
+  }
+
+livesample.col3 {
+  -moz-column-width: 20em;
+  -moz-columns:      20em;
+  -webkit-columns:   20em;
+  columns:           20em;
+
+  -moz-column-gap:    2em;
+  -webkit-column-gap: 2em;
+  column-gap:         2em;
+}
+livesample.col2 {
+  -moz-column-count: 2;
+  -webkit-column-count: 2;
+  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; }
+
+div.live {
+  margin-top:1em;
+  margin-bottom:100px;
+  padding-bottom:100px;
+  border-bottom: 1px solid #ddd;
+}
+  div.controls {
+    position: absolute;
+    right: 0;
+    top: 150px;
+    width: 220px;
+    padding: 10px 16px;
+    /*background:#eee;*/
+    opacity:0.3;
+    border:1px solid #bbb;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    border-right:none;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  div.controls:hover {
+    opacity:1;
+    background:#f5f5f5;
+    border-color: transparent;
+  }
+  div.controls .control {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    overflow: hidden;
+    height:30px;
+  }
+  div.controls .control > * {
+    /*max-width: 50%;*/
+    flex: 1 1 auto;
+    margin:0;
+    margin-right: 16px;
+    box-sizing: border-box;
+  }
+  div.controls .control > :last-child {
+    margin-right: 0;
+  }
+  div.controls .control > select {
+    min-width: 6em;
+    align-items: center;
+    justify-content: center;
+  }
+  div.controls .control > input,
+  div.controls .control > select {
+    width: 0;
+    outline: none;
+  }
+  div.controls .control > input[type="number"],
+  div.controls .control > input[type="text"] {
+    background: none;
+    border: none;
+    padding: 4px 0;
+    font-size: 13px;
+    /*border-radius: 2px;*/
+  }
+  div.controls .control > input[type="number"] {
+    max-width: 60px;
+    text-align: right;
+    -moz-font-feature-settings:    'calt' 1, 'zero' 1, 'tnum' 1;
+    -ms-font-feature-settings:     'calt' 1, 'zero' 1, 'tnum' 1;
+    -o-font-feature-settings:      'calt' 1, 'zero' 1, 'tnum' 1;
+    -webkit-font-feature-settings: 'calt' 1, 'zero' 1, 'tnum' 1;
+    font-feature-settings:         'calt' 1, 'zero' 1, 'tnum' 1;
+  }
+  div.controls .control > input[type="range"] {
+    /*max-width: 80%;*/
+    flex: 1 1 auto;
+    display: block;
+  }
+  div.controls .control > img.icon {
+    width: 16px;
+    height: 16px;
+    flex: 0 0 auto;
+    margin-right: 16px;
+    opacity: 0.8;
+  }
+
+  /*div.controls .control > input.foo {
+    background-color: hotpink;
+    border:none;
+    border-radius: 90px;
+  }*/
+
+
+/* narrow windows */
+@media only screen and (max-width: 1200px) {
+  div.live div.controls {
+    width: 200px;
+  }
+}
+@media only screen and (max-width: 1024px) {
+  div.live div.controls {
+    width: 100px;
+  }
+  div.controls .control > input[type="range"] {
+    width: 0;
+    flex: 0 1 0%;
+    display: none;
+  }
+  div.controls .control > input[type="number"] {
+    max-width: 100%;
+    flex: 1 1 auto;
+  }
+}
+@media only screen and (max-width: 740px) {
+  livesample.s1 {
+    font-size:4.5em;
+  }
+  div.live div.controls {
+    display: none;
+  }
+}
+@media only screen and (max-width: 565px) {
+  livesample.s1 {
+    font-size:4em;
+  }
+}
+@media only screen and (max-width: 414px) {
+  livesample.s1 {
+    font-size:3.4em;
+  }
+}
+    </style>
+  </head>
+  <body>
+
+    <div class="row menu">
+      <ul class="menu">
+        <li class="home"><a href="../">Inter UI</a></li>
+        <li><a class="download-link"
+          href="https://github.com/rsms/inter/releases/latest/"
+        >Download</a></li>
+        <li><a href="/inter/samples/" class="active">Samples</a></li>
+        <li><a href="lab/">Playground</a></li>
+        <li><a href="https://github.com/rsms/inter/">Source</a></li>
+      </ul>
+    </div>
+
+    <div class="row white"><div>
+      <div class="live">
+
+        <div class="controls">
+          <div class="control">
+            <img title="Style" class="icon" src="icons/style.svg">
+            <select data-binding="style">
+              <option value="regular" default>Regular</option>
+              <option value="italic">Italic</option>
+              <option value="medium" default>Medium</option>
+              <option value="medium-italic">Medium Italic</option>
+              <option value="bold" default>Bold</option>
+              <option value="bold-italic">Bold Italic</option>
+              <option value="black" default>Black</option>
+              <option value="black-italic">Black Italic</option>
+            </select>
+          </div>
+          <div class="control">
+            <img title="Size" class="icon" src="icons/font-size.svg">
+            <input type="range" min="8" max="100" step="1" data-binding="font-size">
+            <input type="number" min="4" max="400" step="1" data-binding="font-size">
+          </div>
+          <div class="control">
+            <img title="Letter spacing in EM" class="icon" src="icons/letter-spacing.svg">
+            <input type="range" min="-0.1" max="0.1" step="0.001" data-binding="letter-spacing">
+            <input type="number" min="-0.15" max="1" step="0.001" data-binding="letter-spacing">
+          </div>
+          <!-- <div class="control">
+            <img class="icon" src="icons/font-size.svg">
+            <input type="text" class="foo" data-binding="foo">
+            <input type="text" class="foo" data-binding="foo">
+          </div> -->
+        </div>
+
+        <livesample contenteditable class="s1">
+          Fabulous typography encountering spring
+        </livesample>
+
+        <livesample contenteditable class="s2">
+          The user interface (UI), in the industrial design field of human-computer
+          interaction, is the space where interactions between humans and machines occur.
+        </livesample>
+
+        <livesample contenteditable class="s3 col3">
+<p><b>Fire Island Beach</b> is a barrier of sand, stretching for twenty miles
+along the south coast of Long Island, and separating the Great South Bay
+from the Atlantic ocean.
+</p><p>
+To reach it, you must make a sail of from three to seven miles, and once
+upon it, you find it a wild, desolate, solitary spot, wind-searched and
+surf-pounded.
+</p><p>
+Its inner shore is covered with a growth of tide-wet sedge, with here
+and there a spot where dry meadow comes down to make a landing-place.
+</p><p>
+The outline of this inner shore is most irregular, curving and bending
+in and out and back upon itself, making coves and points and creeks and
+channels, and often pushing out in flats with not water enough on them
+at low tide to wet your ankles.
+</p><p>
+A third of the distance across the Beach, the meadow ends and sand
+begins. This slopes gradually up for another third of the distance, to
+the foot of the sand hills, which seem tumbled into their places by some
+mighty power, sometimes three tiers of them deep, sometimes two, and
+sometimes only one.
+</p><p>
+These sand hills are the most striking features of the Beach. The
+biggest of them are not more than sixty feet high, yet so hard a feat is
+it to climb to the top, and so extended is the view below you—on one
+side the wide Bay, on the other, the ocean stretching its restless
+surface to the horizon—that you feel yourself upon an elevation tenfold
+as high.
+</p><p>
+Through these hills the wind makes a great galloping, whirling out deep
+bowl-shape hollows among them, and piling the shifting sand upon their
+summits. Now and then you will notice a hill with its shoulder knocked
+off by the wind, and a ton of sand gone no one can tell where. In every
+storm their contour changes, and yet their general formation is so
+similar at all times that the change is seldom thought of. A coarse
+spear-like grass finds a sparse growth upon them, and does what it can
+to hold the sand in place; but it has a hard time of it, as its blades
+buried to their tips or its naked roots often testify.
+</p><p>
+But there is one part of this Beach that is ever much the same. It is a
+broad, shelving strip of sand between the hills and the sea, where the
+tide rises and falls, pounding and grinding, year in and year out—the
+play-ground and the battle-ground of the surf.
+</p><p>
+On a summer’s day, I have seen this surf so low and quiet that one could
+launch a sharpie upon it, single-handed, and come ashore again without
+shipping a quart of water. At other times it is a terror to look at—a
+steady break of waves upon the outer bar, with row after row coming in,
+rearing and plunging as they strike the shore. In such a sea there is no
+launching yawl or surf-boat, and no coming ashore.
+</p><p>
+When the tide is on the right moon and the wind has blown a gale from
+the southeast, the strand is entirely submerged, and people upon the
+main shore three miles away can see the surf breaking over the Beach
+hills.
+</p><p>
+Such a riot of sea and wind strews the whole extent of beach with
+whatever has been lost or thrown overboard, or torn out of sunken ships.
+Many a man has made a good week’s work in a single day by what he has
+found while walking along the Beach when the surf was down.
+</p><p>
+“The Captain” knew all this and had patrolled that Beach scores of
+times.
+</p><p>
+Ten years had passed since the first time which laid the habit of
+wandering along the surf-shore apparently in search of whatever the sea
+had cast up. Sometimes a spar, sometimes sheets of copper torn from a
+wreck and carried by a high surf far along the strand, sometimes a
+vessel’s gilded name, at other times only scattered drift-wood were the
+rewards of these lonely walks.
+</p>
+        </livesample>
+      </div>
+
+      <p class="sample-images">
+        <img src="img/01.png" srcset="img/01@2x.png 2x" width="888">
+        <img src="img/02.png" srcset="img/02@2x.png 2x" width="888">
+        <!-- <img src="img/02.svg" width="888"> -->
+        <img src="img/03.png" srcset="img/03@2x.png 2x" width="888">
+        <img src="img/04.png" srcset="img/04@2x.png 2x" width="888">
+        <img src="img/05.png" srcset="img/05@2x.png 2x" width="888">
+        <img src="img/dark-phone.jpg" srcset="img/dark-phone@2x.jpg 2x" width="888">
+        <img src="img/06.png" srcset="img/06@2x.png 2x" width="888">
+        <img src="img/07.png" srcset="img/07@2x.png 2x" width="888">
+        <img src="img/08.png" srcset="img/08@2x.png 2x" width="888">
+        <img src="img/09.png" srcset="img/09@2x.png 2x" width="888">
+        <img src="img/10.png" srcset="img/10@2x.png 2x" width="888">
+        <img src="img/11.png" srcset="img/11@2x.png 2x" width="888">
+        <img src="img/12.png" srcset="img/12@2x.png 2x" width="888">
+        <img src="img/13.png" srcset="img/13@2x.png 2x" width="888">
+        <img src="img/14.png" srcset="img/14@2x.png 2x" width="888">
+        <img src="img/15.png" srcset="img/15@2x.png 2x" width="888">
+      </p>
+      <p style="text-align:center">
+        <a href="https://www.figma.com/file/WmU5NWr52bnUcqv5os0V4sWi/" class="plain">Open these samples in Figma</a>
+      </p>
+    </div></div>
+
+    <script src="../index.js?v=2"></script>
+    <script src="bindings.js"></script>
+    <script type="text/javascript">(function(){
+
+
+
+// InterUIDynamicTracking takes the font size in points or pixels and returns
+// the compensating tracking in EM.
+//
+function InterUIDynamicTracking(fontSize, weightClass) {
+  // if (!weightClass) { -- currently unused
+  //   weightClass = 400
+  // }
+  //
+  // y = -0.01021241 + 0.3720623 * e ^ (-0.2808687 * x)
+  // [6-35]  0.05877 .. -0.0101309  (13==0; stops growing around 30-35)
+  // See https://gist.github.com/rsms/8efdbca5f8145a584ed08a7c3d6e5788
+  //
+  return -0.01021241 + 0.3720623 * Math.pow(Math.E, (-0.2808687 * fontSize))
+
+  // y = 0.025 - (ln(x) * 0.01)
+  // return 0.025 - Math.log(fontSize) * 0.01
+}
+
+
+function InterUIDynamicLeading(fontSize, weightClass) {
+  var lineHeight = Math.round(fontSize * 1.4)
+  //
+  // TODO
+  //
+  // console.log(
+  //   'lineHeight:', lineHeight,
+  //   `(${Math.round(fontSize * 1.45)})`,
+  // )
+
+  return lineHeight
+}
+
+
+var bindings = new Bindings()
+
+var s2 = $('livesample.s2')
+
+function updateWidth() {
+  var fontSize = bindings.value('font-size', 0)
+  var letterSpacing = bindings.value('letter-spacing', 0)
+  var w = fontSize * (letterSpacing + 1) * 25
+  s2.style.maxWidth = Math.round(w) + 'px'
+}
+
+bindings.configure('letter-spacing', 0, 'float', function (letterSpacing) {
+  s2.style.letterSpacing = letterSpacing + 'em'
+  updateWidth()
+})
+
+bindings.configure('font-size', 18, 'int', function(fontSize, prevval) {
+  s2.style.fontSize = fontSize + 'px'
+  updateWidth()
+
+  var letterSpacing = InterUIDynamicTracking(fontSize, 400)
+  // if (letterSpacing < 0.001 && letterSpacing > -0.001) {
+  //   letterSpacing = 0
+  // }
+  // letterSpacing = parseFloat(letterSpacing.toFixed(3)) // lower precision
+
+  var lineHeight = InterUIDynamicLeading(fontSize, 400)
+  s2.style.lineHeight = lineHeight + 'px'
+
+  bindings.setValue('letter-spacing', letterSpacing)
+})
+
+bindings.configure('style', null, null, function (style) {
+  var cl = s2.classList
+  cl.remove('font-style-regular')
+  cl.remove('font-style-italic')
+  cl.remove('font-style-medium')
+  cl.remove('font-style-medium-italic')
+  cl.remove('font-style-bold')
+  cl.remove('font-style-bold-italic')
+  cl.remove('font-style-black')
+  cl.remove('font-style-black-italic')
+  cl.add('font-style-' + style)
+})
+
+
+bindings.bindAllInputs('div.live .control input')
+bindings.bindAllInputs('div.live .control select')
+
+
+
+    })();</script>
+  </body>
+</html>