mirror of
https://github.com/rsms/inter.git
synced 2024-11-26 02:43:38 +03:00
276 lines
10 KiB
HTML
276 lines
10 KiB
HTML
---
|
||
layout: default
|
||
title: Samples
|
||
---
|
||
{%
|
||
|
||
capture url_root
|
||
%}{% if site.safe == false %}/{% else %}/inter/{% endif
|
||
%}{%
|
||
endcapture %}{%
|
||
|
||
for file in site.static_files %}{%
|
||
assign _path = file.path | remove_first: "/inter" %}{%
|
||
if _path == "/samples/index.css" %}{%
|
||
assign index_css_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||
elsif _path == "/res/bindings.js" %}{%
|
||
assign bindings_js_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||
elsif _path == "/res/graphplot.js" %}{%
|
||
assign graphplot_js_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||
endif %}{%
|
||
endfor
|
||
|
||
%}
|
||
<link rel="stylesheet" href="index.css?v={{ index_css_v }}">
|
||
<script src="{{url_root}}res/bindings.js?v={{ bindings_js_v }}"></script>
|
||
<script src="{{url_root}}res/graphplot.js?v={{ graphplot_js_v }}"></script>
|
||
|
||
<div class="row"><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="semi-bold" default>Extra Bold</option>
|
||
<option value="semi-bold-italic">Extra Bold 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>
|
||
</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.05" max="0.06" step="0.001" data-binding="letter-spacing">
|
||
<input type="number" min="-0.15" max="1" step="0.001" data-binding="letter-spacing">
|
||
</div>
|
||
<canvas class="graphplot">Canvas not Supported</canvas>
|
||
<div class="control info">
|
||
<a href="{{url_root}}dynmetrics/">Learn about Dynamic Metrics</a>
|
||
</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>
|
||
</livesample>
|
||
<p class="learn-more">
|
||
|
||
<!-- <a href="{{url_root}}dynmetrics/">Learn about Dynamic Metrics</a> -->
|
||
</p>
|
||
</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 type="text/javascript">(function(){
|
||
|
||
|
||
|
||
// InterUIDynamicTracking produces tracking in EM for the given font size
|
||
//
|
||
function InterUIDynamicTracking(fontSize, weightClass) {
|
||
// Note: weightClass is currently unused
|
||
//
|
||
var a = -0.016, b = 0.21, c = -0.18;
|
||
return a + b * Math.pow(Math.E, (c * fontSize))
|
||
}
|
||
|
||
// InterUIDynamicLineHeight produces the line height for the given font size
|
||
//
|
||
function InterUIDynamicLineHeight(fontSize, weightClass) {
|
||
var l = 1.4
|
||
return Math.round(fontSize * l)
|
||
}
|
||
|
||
|
||
var bindings = new Bindings()
|
||
var graph = new GraphPlot($('canvas.graphplot'))
|
||
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)
|
||
var letterSpacing = bindings.value('letter-spacing', 0)
|
||
var w = fontSize * (letterSpacing + 1) * 25
|
||
s2.style.maxWidth = Math.round(w) + 'px'
|
||
}
|
||
|
||
function updateTracking() {
|
||
var fontSize = bindings.value('font-size', 0)
|
||
var letterSpacing = InterUIDynamicTracking(fontSize, 400)
|
||
bindings.setValue('letter-spacing', letterSpacing)
|
||
}
|
||
|
||
function updateGraph() {
|
||
graph.clear()
|
||
var fontSize = bindings.value('font-size', 0)
|
||
var letterSpacing = bindings.value('letter-spacing')
|
||
graph.plotf(function(x) {
|
||
return InterUIDynamicTracking(x, 400)
|
||
})
|
||
var graphedFontSize = Math.min(24, fontSize) // clamp to [-inf,24]
|
||
graph.plotPoints([[graphedFontSize, letterSpacing]], '#000')
|
||
}
|
||
|
||
bindings.configure('letter-spacing', 0, 'float', function (letterSpacing) {
|
||
s2.style.letterSpacing = letterSpacing + 'em'
|
||
updateWidth()
|
||
updateGraph()
|
||
})
|
||
bindings.setFormatter('letter-spacing', function(v) {
|
||
return v.toFixed(3)
|
||
})
|
||
|
||
bindings.configure('font-size', 16, 'float', function(fontSize, prevval) {
|
||
s2.style.fontSize = fontSize + 'px'
|
||
updateWidth()
|
||
updateTracking()
|
||
|
||
var lineHeight = InterUIDynamicLineHeight(fontSize, 400)
|
||
s2.style.lineHeight = lineHeight + 'px'
|
||
})
|
||
|
||
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-semi-bold')
|
||
cl.remove('font-style-semi-bold-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)
|
||
})
|
||
|
||
|
||
bindings.bindAllInputs('div.live .control input')
|
||
bindings.bindAllInputs('div.live .control select')
|
||
|
||
// resize canvas when window resizes
|
||
var resizeDebounceTimer = null
|
||
window.addEventListener('resize', function(){
|
||
clearTimeout(resizeDebounceTimer)
|
||
resizeDebounceTimer = setTimeout(function(){
|
||
graph.autosize()
|
||
updateGraph()
|
||
}, 500)
|
||
}, {passive:true, capture:false})
|
||
|
||
})();</script>
|