website update

37 files changed, 650 insertions, 0 deletions

diff --git a/docs/samples/bindings.js b/docs/samples/bindings.js
new file mode 100644
index 000000000..cac29e417
--- /dev/null
+++ b/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
+  }
+}
diff --git a/docs/samples/icons/font-size.svg b/docs/samples/icons/font-size.svg
new file mode 100755
index 000000000..515e52a97
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/docs/samples/icons/letter-spacing.svg b/docs/samples/icons/letter-spacing.svg
new file mode 100755
index 000000000..ece72a484
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/docs/samples/icons/style.svg b/docs/samples/icons/style.svg
new file mode 100755
index 000000000..f199b80d0
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/docs/samples/img/01.png b/docs/samples/img/01.png
new file mode 100644
index 000000000..cbe2341d5
--- /dev/null
+++ b/docs/samples/img/01.png
diff --git a/docs/samples/img/01@2x.png b/docs/samples/img/01@2x.png
new file mode 100644
index 000000000..f5b12f4f7
--- /dev/null
+++ b/docs/samples/img/01@2x.png
diff --git a/docs/samples/img/02.png b/docs/samples/img/02.png
new file mode 100644
index 000000000..f9937518e
--- /dev/null
+++ b/docs/samples/img/02.png
diff --git a/docs/samples/img/02@2x.png b/docs/samples/img/02@2x.png
new file mode 100644
index 000000000..dda316e90
--- /dev/null
+++ b/docs/samples/img/02@2x.png
diff --git a/docs/samples/img/03.png b/docs/samples/img/03.png
new file mode 100644
index 000000000..dcc0d1262
--- /dev/null
+++ b/docs/samples/img/03.png
diff --git a/docs/samples/img/03@2x.png b/docs/samples/img/03@2x.png
new file mode 100644
index 000000000..e3de1d31e
--- /dev/null
+++ b/docs/samples/img/03@2x.png
diff --git a/docs/samples/img/04.png b/docs/samples/img/04.png
new file mode 100644
index 000000000..7aa6ec833
--- /dev/null
+++ b/docs/samples/img/04.png
diff --git a/docs/samples/img/04@2x.png b/docs/samples/img/04@2x.png
new file mode 100644
index 000000000..9fcf20ced
--- /dev/null
+++ b/docs/samples/img/04@2x.png
diff --git a/docs/samples/img/05.png b/docs/samples/img/05.png
new file mode 100644
index 000000000..ec501fd74
--- /dev/null
+++ b/docs/samples/img/05.png
diff --git a/docs/samples/img/05@2x.png b/docs/samples/img/05@2x.png
new file mode 100644
index 000000000..31a8a2843
--- /dev/null
+++ b/docs/samples/img/05@2x.png
diff --git a/docs/samples/img/06.png b/docs/samples/img/06.png
new file mode 100644
index 000000000..eb290e43e
--- /dev/null
+++ b/docs/samples/img/06.png
diff --git a/docs/samples/img/06@2x.png b/docs/samples/img/06@2x.png
new file mode 100644
index 000000000..c0150fe3b
--- /dev/null
+++ b/docs/samples/img/06@2x.png
diff --git a/docs/samples/img/07.png b/docs/samples/img/07.png
new file mode 100644
index 000000000..6414b3255
--- /dev/null
+++ b/docs/samples/img/07.png
diff --git a/docs/samples/img/07@2x.png b/docs/samples/img/07@2x.png
new file mode 100644
index 000000000..c6093d21c
--- /dev/null
+++ b/docs/samples/img/07@2x.png
diff --git a/docs/samples/img/08.png b/docs/samples/img/08.png
new file mode 100644
index 000000000..aef9dafab
--- /dev/null
+++ b/docs/samples/img/08.png
diff --git a/docs/samples/img/08@2x.png b/docs/samples/img/08@2x.png
new file mode 100644
index 000000000..a53902172
--- /dev/null
+++ b/docs/samples/img/08@2x.png
diff --git a/docs/samples/img/09.png b/docs/samples/img/09.png
new file mode 100644
index 000000000..4527ed029
--- /dev/null
+++ b/docs/samples/img/09.png
diff --git a/docs/samples/img/09@2x.png b/docs/samples/img/09@2x.png
new file mode 100644
index 000000000..d6f255ae0
--- /dev/null
+++ b/docs/samples/img/09@2x.png
diff --git a/docs/samples/img/10.png b/docs/samples/img/10.png
new file mode 100644
index 000000000..091480854
--- /dev/null
+++ b/docs/samples/img/10.png
diff --git a/docs/samples/img/10@2x.png b/docs/samples/img/10@2x.png
new file mode 100644
index 000000000..6c1177e42
--- /dev/null
+++ b/docs/samples/img/10@2x.png
diff --git a/docs/samples/img/11.png b/docs/samples/img/11.png
new file mode 100644
index 000000000..485248dfe
--- /dev/null
+++ b/docs/samples/img/11.png
diff --git a/docs/samples/img/11@2x.png b/docs/samples/img/11@2x.png
new file mode 100644
index 000000000..55e91d951
--- /dev/null
+++ b/docs/samples/img/11@2x.png
diff --git a/docs/samples/img/12.png b/docs/samples/img/12.png
new file mode 100644
index 000000000..c55fc5306
--- /dev/null
+++ b/docs/samples/img/12.png
diff --git a/docs/samples/img/12@2x.png b/docs/samples/img/12@2x.png
new file mode 100644
index 000000000..a89353532
--- /dev/null
+++ b/docs/samples/img/12@2x.png
diff --git a/docs/samples/img/13.png b/docs/samples/img/13.png
new file mode 100644
index 000000000..8ec89ddd5
--- /dev/null
+++ b/docs/samples/img/13.png
diff --git a/docs/samples/img/13@2x.png b/docs/samples/img/13@2x.png
new file mode 100644
index 000000000..881434123
--- /dev/null
+++ b/docs/samples/img/13@2x.png
diff --git a/docs/samples/img/14.png b/docs/samples/img/14.png
new file mode 100644
index 000000000..7fe704743
--- /dev/null
+++ b/docs/samples/img/14.png
diff --git a/docs/samples/img/14@2x.png b/docs/samples/img/14@2x.png
new file mode 100644
index 000000000..eec32064c
--- /dev/null
+++ b/docs/samples/img/14@2x.png
diff --git a/docs/samples/img/15.png b/docs/samples/img/15.png
new file mode 100644
index 000000000..387ed25a2
--- /dev/null
+++ b/docs/samples/img/15.png
diff --git a/docs/samples/img/15@2x.png b/docs/samples/img/15@2x.png
new file mode 100644
index 000000000..39b73926b
--- /dev/null
+++ b/docs/samples/img/15@2x.png
diff --git a/docs/samples/img/dark-phone.jpg b/docs/samples/img/dark-phone.jpg
new file mode 100755
index 000000000..287429253
--- /dev/null
+++ b/docs/samples/img/dark-phone.jpg
diff --git a/docs/samples/img/dark-phone@2x.jpg b/docs/samples/img/dark-phone@2x.jpg
new file mode 100755
index 000000000..480a539ae
--- /dev/null
+++ b/docs/samples/img/dark-phone@2x.jpg
diff --git a/docs/samples/index.html b/docs/samples/index.html
new file mode 100644
index 000000000..bd30c0c6e
--- /dev/null
+++ b/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>