mirror of
https://github.com/rsms/inter.git
synced 2024-11-23 03:26:15 +03:00
web: update dynamic metrics
This commit is contained in:
Rasmus Andersson
parent
9dc29342aa
commit
92d6ad5724
@ -119,15 +119,6 @@ formula.code {
|
||||
}
|
||||
|
||||
|
||||
.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; }
|
||||
|
||||
.row.with-sidebar {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@ -89,8 +89,12 @@ endfor
|
||||
<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>
|
||||
@ -183,62 +187,26 @@ function parseValues(s) {
|
||||
}
|
||||
|
||||
setIdealValues({
|
||||
// set-2018-02-20
|
||||
6: 0.055,
|
||||
7: 0.044,
|
||||
8: 0.034,
|
||||
9: 0.024,
|
||||
10: 0.018,
|
||||
11: 0.012,
|
||||
12: 0.007,
|
||||
13: 0.003,
|
||||
14: 0.001,
|
||||
15: -0.002,
|
||||
16: -0.004,
|
||||
17: -0.006,
|
||||
18: -0.008,
|
||||
20: -0.01,
|
||||
24: -0.013,
|
||||
// 2018-09-28
|
||||
6: 0.054,
|
||||
7: 0.042,
|
||||
8: 0.033,
|
||||
9: 0.025,
|
||||
10: 0.018,
|
||||
11: 0.012,
|
||||
12: 0.008,
|
||||
13: 0.004,
|
||||
14: 0,
|
||||
15: -0.002,
|
||||
16: -0.005,
|
||||
17: -0.007,
|
||||
18: -0.008,
|
||||
20: -0.011,
|
||||
24: -0.014,
|
||||
30: -0.016,
|
||||
40: -0.017,
|
||||
})
|
||||
|
||||
// setIdealValues({
|
||||
// // set-2018-02-19
|
||||
// 6: 0.059,
|
||||
// 7: 0.043,
|
||||
// 8: 0.032,
|
||||
// 9: 0.022,
|
||||
// 10: 0.014,
|
||||
// 11: 0.009,
|
||||
// 12: 0.004,
|
||||
// 13: 0,
|
||||
// 14: -0.003,
|
||||
// 15: -0.005,
|
||||
// 16: -0.0075,
|
||||
// 17: -0.0084,
|
||||
// 18: -0.0095,
|
||||
// 20: -0.012,
|
||||
// 24: -0.014,
|
||||
// })
|
||||
|
||||
// setIdealValues({
|
||||
// // set-2018-02-18
|
||||
// 6: 0.06,
|
||||
// 7: 0.04,
|
||||
// 8: 0.03,
|
||||
// 9: 0.02,
|
||||
// 10: 0.01,
|
||||
// 11: 0.005,
|
||||
// 12: 0.002,
|
||||
// 13: 0.001,
|
||||
// 14: 0,
|
||||
// 15: -0.002,
|
||||
// 16: -0.005,
|
||||
// 17: -0.007,
|
||||
// 18: -0.009,
|
||||
// 20: -0.011,
|
||||
// 24: -0.011,
|
||||
// })
|
||||
|
||||
|
||||
// Variables for constants involved in Dynamic Metrics
|
||||
|
||||
@ -246,7 +214,8 @@ setIdealValues({
|
||||
// var a = -0.013, b = 0.251, c = -0.222 // di=0.001742 on set-2018-02-18
|
||||
// var a = -0.015, b = 0.283, c = -0.23; // di=0.00221 on set-2018-02-18
|
||||
// var a = -0.0149, b = 0.298, c = -0.23; // di=0.000484 on set-2018-02-19
|
||||
var a = -0.016, b = 0.21, c = -0.18; // di=0.000532 on set-2018-02-20
|
||||
// var a = -0.018, b = 0.21, c = -0.18; // di=0.000532 on set-2018-02-20
|
||||
var a = -0.017, b = 0.202, c = -0.175; // di=0.000247 on 2018-09-28
|
||||
|
||||
var l = 1.4
|
||||
|
||||
@ -567,8 +536,12 @@ bindings.configure('style', null, null, function (style) {
|
||||
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)
|
||||
@ -590,6 +563,20 @@ $('input[type="range"][data-binding="base-tracking"]').addEventListener(
|
||||
function(ev) { bindings.setValue('base-tracking', 0) }
|
||||
)
|
||||
|
||||
;[
|
||||
['var-a',a],
|
||||
['var-b',b],
|
||||
['var-c',c],
|
||||
['var-l',l],
|
||||
['base-tracking', 0]
|
||||
].forEach(p => {
|
||||
let bindname = p[0], defval = p[1]
|
||||
$$('input[type="range"][data-binding="'+bindname+'"]').forEach(e => {
|
||||
e.addEventListener('dblclick', ev =>
|
||||
bindings.setValue(bindname, defval))
|
||||
})
|
||||
})
|
||||
|
||||
// allow editing of ideal values
|
||||
idealValuesTextArea.addEventListener('input', function(ev) {
|
||||
setIdealValues(parseValues(idealValuesTextArea.value))
|
||||
|
||||
@ -107,6 +107,11 @@ num { /* number */
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
em, i, .italic {
|
||||
font-style: italic;
|
||||
font-variation-settings: 'ital' 100;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.013em;
|
||||
@ -177,6 +182,20 @@ h1 > a, h2 > a, h3 > a {
|
||||
background: none;
|
||||
}
|
||||
|
||||
/* font style classifiers used by samples and dynmetrics */
|
||||
.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-semi-bold { font-variation-settings: "wght" 600, "ital" 0 !important; font-weight:800 !important; font-style:normal !important; }
|
||||
.font-style-semi-bold-italic { font-variation-settings: "wght" 600, "ital" 100 !important; font-weight:800 !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; }
|
||||
|
||||
.row {
|
||||
padding: 50px;
|
||||
display: flex;
|
||||
|
||||
@ -82,7 +82,8 @@ var HUDNotification = {
|
||||
//
|
||||
function InterUIDynamicTracking(fontSize) {
|
||||
// tracking = a + b * e ^ (c * fontSize)
|
||||
return -0.016 + 0.21 * Math.pow(Math.E, -0.18 * fontSize)
|
||||
var a = -0.017, b = 0.202, c = -0.175;
|
||||
return a + b * Math.pow(Math.E, c * fontSize)
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -31,7 +31,7 @@ livesample.s1 {
|
||||
padding-left: 16px;
|
||||
letter-spacing: -0.015em;
|
||||
font-size: 5em;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.3em;
|
||||
@ -65,19 +65,6 @@ livesample.col2 {
|
||||
column-count: 2;
|
||||
}
|
||||
|
||||
.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-semi-bold { font-variation-settings: "wght" 600, "ital" 0 !important; font-weight:800 !important; font-style:normal !important; }
|
||||
.font-style-semi-bold-italic { font-variation-settings: "wght" 600, "ital" 100 !important; font-weight:800 !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;
|
||||
margin-bottom:100px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user