mirror of
https://github.com/rsms/inter.git
synced 2024-11-26 23:56:59 +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 {
|
.row.with-sidebar {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -89,8 +89,12 @@ endfor
|
|||||||
<option value="italic">Italic</option>
|
<option value="italic">Italic</option>
|
||||||
<option value="medium" default>Medium</option>
|
<option value="medium" default>Medium</option>
|
||||||
<option value="medium-italic">Medium Italic</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" default>Bold</option>
|
||||||
<option value="bold-italic">Bold Italic</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" default>Black</option>
|
||||||
<option value="black-italic">Black Italic</option>
|
<option value="black-italic">Black Italic</option>
|
||||||
</select>
|
</select>
|
||||||
@ -183,62 +187,26 @@ function parseValues(s) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
setIdealValues({
|
setIdealValues({
|
||||||
// set-2018-02-20
|
// 2018-09-28
|
||||||
6: 0.055,
|
6: 0.054,
|
||||||
7: 0.044,
|
7: 0.042,
|
||||||
8: 0.034,
|
8: 0.033,
|
||||||
9: 0.024,
|
9: 0.025,
|
||||||
10: 0.018,
|
10: 0.018,
|
||||||
11: 0.012,
|
11: 0.012,
|
||||||
12: 0.007,
|
12: 0.008,
|
||||||
13: 0.003,
|
13: 0.004,
|
||||||
14: 0.001,
|
14: 0,
|
||||||
15: -0.002,
|
15: -0.002,
|
||||||
16: -0.004,
|
16: -0.005,
|
||||||
17: -0.006,
|
17: -0.007,
|
||||||
18: -0.008,
|
18: -0.008,
|
||||||
20: -0.01,
|
20: -0.011,
|
||||||
24: -0.013,
|
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
|
// 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.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.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.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
|
var l = 1.4
|
||||||
|
|
||||||
@ -567,8 +536,12 @@ bindings.configure('style', null, null, function (style) {
|
|||||||
cl.remove('font-style-italic')
|
cl.remove('font-style-italic')
|
||||||
cl.remove('font-style-medium')
|
cl.remove('font-style-medium')
|
||||||
cl.remove('font-style-medium-italic')
|
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')
|
||||||
cl.remove('font-style-bold-italic')
|
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')
|
||||||
cl.remove('font-style-black-italic')
|
cl.remove('font-style-black-italic')
|
||||||
cl.add('font-style-' + style)
|
cl.add('font-style-' + style)
|
||||||
@ -590,6 +563,20 @@ $('input[type="range"][data-binding="base-tracking"]').addEventListener(
|
|||||||
function(ev) { bindings.setValue('base-tracking', 0) }
|
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
|
// allow editing of ideal values
|
||||||
idealValuesTextArea.addEventListener('input', function(ev) {
|
idealValuesTextArea.addEventListener('input', function(ev) {
|
||||||
setIdealValues(parseValues(idealValuesTextArea.value))
|
setIdealValues(parseValues(idealValuesTextArea.value))
|
||||||
|
|||||||
@ -107,6 +107,11 @@ num { /* number */
|
|||||||
white-space: pre;
|
white-space: pre;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
em, i, .italic {
|
||||||
|
font-style: italic;
|
||||||
|
font-variation-settings: 'ital' 100;
|
||||||
|
}
|
||||||
|
|
||||||
small {
|
small {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
letter-spacing: 0.013em;
|
letter-spacing: 0.013em;
|
||||||
@ -177,6 +182,20 @@ h1 > a, h2 > a, h3 > a {
|
|||||||
background: none;
|
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 {
|
.row {
|
||||||
padding: 50px;
|
padding: 50px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@ -82,7 +82,8 @@ var HUDNotification = {
|
|||||||
//
|
//
|
||||||
function InterUIDynamicTracking(fontSize) {
|
function InterUIDynamicTracking(fontSize) {
|
||||||
// tracking = a + b * e ^ (c * 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;
|
padding-left: 16px;
|
||||||
letter-spacing: -0.015em;
|
letter-spacing: -0.015em;
|
||||||
font-size: 5em;
|
font-size: 5em;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 0.3em;
|
margin-bottom: 0.3em;
|
||||||
@ -65,19 +65,6 @@ livesample.col2 {
|
|||||||
column-count: 2;
|
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 {
|
div.live {
|
||||||
margin-top:1em;
|
margin-top:1em;
|
||||||
margin-bottom:100px;
|
margin-bottom:100px;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user