From 65ce56b9527ce698214f24db779b7a8a2a4783a1 Mon Sep 17 00:00:00 2001 From: Rasmus Andersson Date: Wed, 6 Feb 2019 11:49:18 -0800 Subject: [PATCH] website --- docs/_data/feature_samples.yml | 126 +++++++++++ docs/_includes/ctxedit.html | 7 +- docs/_includes/preload-font-files.html | 7 +- docs/_layouts/default.html | 11 +- docs/dynmetrics/icons/letter-spacing.svg | 1 + docs/dynmetrics/icons/line-height.svg | 1 + docs/dynmetrics/icons/style.svg | 1 + docs/dynmetrics/index.html | 136 +++++++---- docs/glyphs/index.html | 7 +- docs/index.css | 15 +- docs/index.html | 274 ++++++----------------- docs/res/base.css | 227 +++++++++++++++---- docs/res/base.js | 2 +- docs/samples/index.html | 7 +- 14 files changed, 509 insertions(+), 313 deletions(-) create mode 100644 docs/_data/feature_samples.yml create mode 100755 docs/dynmetrics/icons/letter-spacing.svg create mode 100755 docs/dynmetrics/icons/line-height.svg create mode 100755 docs/dynmetrics/icons/style.svg diff --git a/docs/_data/feature_samples.yml b/docs/_data/feature_samples.yml new file mode 100644 index 000000000..b92da1030 --- /dev/null +++ b/docs/_data/feature_samples.yml @@ -0,0 +1,126 @@ +- title: Contextual alternates + tag: calt + description: + This feature is enabled by default and causes certain characters to adjust + themselves or be replaced depending on the surrounding context. + footer: + There are many more contextual alternates. + samples: + - "12›:‹34, FE›—‹X" + - "4›.‹2" + - "›(‹SEMI›)‹PERMANENT" + - "SFO ›->‹ STO" + - "IIA ›—>‹ OGG" + - "ARN ›<-->‹ OGG" + - "M›@‹N m@n" + - "Smile ›:-)‹" + +- title: Tabular numbers + tag: tnum + description: + Fixed-width numbers are useful for tabular data, where comparing + columns across rows is desired. + samples: + - "1234567890" + - "1131711› ‹" + - "0040900› ‹" + - "11:31,711› ‹" + - "00:40.900› ‹" + - "0.45, 0.91, +0.08› ‹" + - "1.00, 9.44, −0.13› ‹" + - "0.00, 1.13, ~7.12› ‹" + +- title: Numerators + tag: numr + samples: + - "Hello ›0123‹" + +- title: Denominators + tag: dnom + samples: + - "Hello ›0123‹" + +- title: Superscript + tag: sups + samples: + - "X›0123 (+)-[=]‹" + - "X›abcdefghijklmnopqrstuvwxyz‹" + +- title: Subscript + tag: subs + samples: + - "H›0123 (+)-[=]‹" + - "X›abcdefghijklmnopqrstuvwxyz‹" + +- title: Fractions + tag: frac + description: + This feature is contextually sensitive and will convert "words" of + numbers separated by forward slash into proper fractions. + This feature is dynamic and allows for any fractions. + Note that the digits used for fractions are custom-made for their + small size, and are even made separately from the slightly larger + Superscript and Subscript numbers. + samples: + - "›1/3‹  ›3/4‹  ›1/5‹  ›1337/5910‹" + +- title: Case alternates + tag: case + description: + Switches out some glyphs to work better with capital letters and numbers. + samples: + - "›(‹Hello›)‹ ›[‹World›]‹ ›{‹9000›}‹" + - "SCHOOL ›@‹ RUN" + - "3 ›+‹ 9 ›=‹ 12 ›*‹ 1" + - "›*+÷±×=≠≈•~<>≤≥‹" + - "›→‹ ›←‹ ›⟶‹ ›⟵‹ ›−‹ ›-‹ ›–‹ ›—‹ ›:‹" + +- title: "Stylistic set 1: Alternate digits" + tag: ss01 + description: + An alternate style of digits. + Note that individual digit styles can be cherry-picked using the cvXX + features. + samples: + - "›1‹2›34‹5›6‹78›9‹0" + - "›13469‹" + +- title: "Stylistic set 2: Disambiguation" + tag: ss02 + description: + Alternate glyph set that increases visual difference between + similar-looking characters. + samples: + - "WP›0‹ACO9XS›I‹1›0‹12O9" + - "›Ill‹ega›l‹" + - "βeta ›ß‹eta Busine›ß‹" + +- title: Discretionary ligatures + tag: dlig + description: + Alternate glyph set that increases visual difference between + similar-looking characters. + samples: + - "›¡¿‹What›?!‹" + - "›¿¡‹What›!?‹" + +- title: Slashed zero + tag: zero + samples: + - "O›0‹123" + +- title: Character variants + tag: cvXX + description: "Allows cherry-picking alternate characters." + samples: + - {feat: cv01, alt: "Alternate one", sample: "1"} + - {feat: cv02, alt: "Open four", sample: "4"} + - {feat: cv03, alt: "Open six", sample: "6"} + - {feat: cv04, alt: "Open nine", sample: "9"} + - {feat: cv05, alt: "Lower case L with tail", sample: "l ł ƚ ɫ ɬ ŀ ĺ ļ ľ ḷ ḹ ḻ ḽ"} + - {feat: cv06, alt: "Lower case R with straight tail", sample: "r ɽ ɍ ɼ ŕ ŗ ř ȑ ȓ ṙ ṛ ṝ ṟ"} + - {feat: cv07, alt: "Alternate German double-s", sample: "ß"} + - {feat: cv08, alt: "Upper-case i with serif", sample: "I Ï Ḯ Ɨ Ḭ Ì Í Î Ĩ Ī Ĭ Į İ Ǐ Ȉ Ȋ Ỉ Ị Ι Ί Ϊ Ἰ Ἱ Ἲ"} + - {feat: cv09, alt: "Flat top three", sample: "3"} + - {feat: cv10, alt: "Capital G with spur", sample: "G Ǥ Ɠ Ĝ Ğ Ġ Ģ Ǧ Ǵ Ḡ"} + diff --git a/docs/_includes/ctxedit.html b/docs/_includes/ctxedit.html index 64dea24e6..791a0739c 100644 --- a/docs/_includes/ctxedit.html +++ b/docs/_includes/ctxedit.html @@ -1,9 +1,8 @@ {% -capture url_root - %}{% if site.safe == false %}/{% else %}/inter/{% endif -%}{% -endcapture %}{% +if site.safe == false %}{% +assign url_root = "/" %}{% else %}{% +assign url_root = "/inter/" %}{% endif %}{% for file in site.static_files %}{% assign _path = file.path | remove_first: "/inter" %}{% diff --git a/docs/_includes/preload-font-files.html b/docs/_includes/preload-font-files.html index f744690f6..f6bf15651 100644 --- a/docs/_includes/preload-font-files.html +++ b/docs/_includes/preload-font-files.html @@ -1,9 +1,8 @@ {% -capture url_root - %}{% if site.safe == false %}/{% else %}/inter/{% endif -%}{% -endcapture %}{% +if site.safe == false %}{% +assign url_root = "/" %}{% else %}{% +assign url_root = "/inter/" %}{% endif %}{% for file in site.static_files %}{% assign _path = file.path | remove_first: "/inter" %}{% diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index abcb16aa5..c1300b70e 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -2,14 +2,11 @@ assign build_version = site.time | date: "%Y%m%d%H%M%S" %}{% assign description = "Inter is a typeface optimized for computer-user interfaces" %}{% -capture url_root - %}{% if site.safe == false %}/{% else %}/inter/{% endif -%}{% -endcapture %}{% +if site.safe == false %}{% +assign url_root = "/" %}{% else %}{% +assign url_root = "/inter/" %}{% endif %}{% -capture release_version - %}{{ site.data.fontinfo[0].version }}{% -endcapture %}{% +assign release_version = site.data.fontinfo[0].version %}{% capture download_url %}https://github.com/rsms/inter/releases/download/v{{ release_version }}/Inter-{{ release_version }}.zip{% diff --git a/docs/dynmetrics/icons/letter-spacing.svg b/docs/dynmetrics/icons/letter-spacing.svg new file mode 100755 index 000000000..267c0ac62 --- /dev/null +++ b/docs/dynmetrics/icons/letter-spacing.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/dynmetrics/icons/line-height.svg b/docs/dynmetrics/icons/line-height.svg new file mode 100755 index 000000000..04c1e66a9 --- /dev/null +++ b/docs/dynmetrics/icons/line-height.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/dynmetrics/icons/style.svg b/docs/dynmetrics/icons/style.svg new file mode 100755 index 000000000..0dd668a3d --- /dev/null +++ b/docs/dynmetrics/icons/style.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/dynmetrics/index.html b/docs/dynmetrics/index.html index e43be7c9c..d6cbbc49a 100644 --- a/docs/dynmetrics/index.html +++ b/docs/dynmetrics/index.html @@ -4,10 +4,9 @@ title: Dynamic Metrics --- {% -capture url_root - %}{% if site.safe == false %}/{% else %}/inter/{% endif -%}{% -endcapture %}{% +if site.safe == false %}{% +assign url_root = "/" %}{% else %}{% +assign url_root = "/inter/" %}{% endif %}{% for file in site.static_files %}{% assign _path = file.path | remove_first: "/inter" %}{% @@ -41,13 +40,13 @@ endfor a + b × e(c × z) - + - a = -0.02    - b = 0.205    - c = -0.175    + a = -0.038    + b = 0.161    + c = -0.12    z = font size

@@ -76,14 +75,9 @@ endfor
+
- - - - -
-
- +
- +
+
+ + + +
+
+
@@ -127,15 +128,20 @@ endfor
-
-
- - - -
-
- Canvas not Supported +
+ +
+ + + + +
+ +
+ + Canvas not Supported +

CSS

@@ -194,24 +200,65 @@ function parseValues(s) { } setIdealValues({ - 6: 0.021, - 7: 0.017, - 8: 0.013, - 9: 0.01, - 10: 0.007, - 11: 0.005, - 12: 0.002, - 13: 0, - 14: -0.002, - 15: -0.004, - 16: -0.005, - 17: -0.007, - 18: -0.008, - 20: -0.01, - 24: -0.013, - 30: -0.016, - 40: -0.02, - 80: -0.02, + // // 2018 + // 6: 0.021, + // 7: 0.017, + // 8: 0.013, + // 9: 0.01, + // 10: 0.007, + // 11: 0.005, + // 12: 0.002, + // 13: 0, + // 14: -0.002, + // 15: -0.004, + // 16: -0.005, + // 17: -0.007, + // 18: -0.008, + // 20: -0.01, + // 24: -0.013, + // 30: -0.016, + // 40: -0.02, + // 80: -0.02, + + // 2019-02-02 + // 6: 0.066, + // 7: 0.05, + // 8: 0.036, + // 9: 0.025, + // 10: 0.015, + // 11: 0.007, + // 12: 0, + // 13: -0.005, + // 14: -0.01, + // 15: -0.014, + // 16: -0.017, + // 17: -0.02, + // 18: -0.022, + // 20: -0.026, + // 24: -0.03, + // 30: -0.033, + // 40: -0.034, + // 80: -0.034, + + // 2019-02-06 + 6: 0.04, + 7: 0.032, + 8: 0.024, + 9: 0.017, + 10: 0.01, + 11: 0.005, + 12: 0, + 13: -0.004, + 14: -0.008, + 15: -0.011, + 16: -0.014, + 17: -0.017, + 18: -0.019, + 20: -0.023, + 24: -0.029, + 30: -0.034, + 40: -0.037, + 80: -0.038, }) @@ -223,7 +270,8 @@ setIdealValues({ // var a = -0.0149, b = 0.298, c = -0.23; // di=0.000484 on set-2018-02-19 // 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; // 2018-09-28 -var a = -0.02, b = 0.0755, c = -0.102 // 2019-02-02 +// var a = -0.02, b = 0.0755, c = -0.102 // 2019-02-02 +var a = -0.038, b = 0.161, c = -0.12 // 2019-02-06 var l = 1.4 diff --git a/docs/glyphs/index.html b/docs/glyphs/index.html index 7d9fb09eb..438118da1 100644 --- a/docs/glyphs/index.html +++ b/docs/glyphs/index.html @@ -4,10 +4,9 @@ title: Glyphs --- {% -capture url_root - %}{% if site.safe == false %}/{% else %}/inter/{% endif -%}{% -endcapture %}{% +if site.safe == false %}{% +assign url_root = "/" %}{% else %}{% +assign url_root = "/inter/" %}{% endif %}{% for file in site.static_files %}{% assign _path = file.path | remove_first: "/inter" %}{% diff --git a/docs/index.css b/docs/index.css index 274884322..261643d88 100644 --- a/docs/index.css +++ b/docs/index.css @@ -101,9 +101,7 @@ tablex in, tablex to, tablex out { white-space: pre; padding-bottom:0.5em; } -/*tablex to { - width:0; -}*/ + tablex to::after { -moz-font-feature-settings: 'calt' 1, 'case' 1; -ms-font-feature-settings: 'calt' 1, 'case' 1; @@ -297,3 +295,14 @@ tablex out.cv10 { boxes.features box h3 + p { margin-top:0.5em; } + +boxes.features grid .sample { + word-break: break-word; + word-wrap: break-word; +} + +boxes.features grid .sample em { + font-style: inherit; + background: #e4fdef; + color: black; +} diff --git a/docs/index.html b/docs/index.html index fb6e376a7..bd559d96d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -3,11 +3,6 @@ layout: default --- {% -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 == "/index.css" %}{% @@ -69,10 +64,10 @@ html { font-family: 'Inter', sans-serif; }

 

-

Dynamic Metrics

+

Dynamic Metrics

Size - dp = spacing @@ -83,7 +78,7 @@ html { font-family: 'Inter', sans-serif; } There's of course no absolute right or wrong when it comes to expressing yourself with typography, but Inter Dynamic Metrics provides guidelines for good typography. You simply provide the optical font size, and the tracking and leading is calculated for you to produce the best results.

- Learn more… + Learn more…

 

@@ -175,7 +170,7 @@ html { font-family: 'Inter', sans-serif; } -
+

Features

Inter comes with many OpenType features that can be used to @@ -184,211 +179,82 @@ html { font-family: 'Inter', sans-serif; } alternative variations.

+ {% for f in site.data.feature_samples %} -

Contextual alternates calt

-

- This feature is enabled by default and causes certain characters to - adjust themselves or be replaced depending on the surrounding context. -

- - DisabledEnabled - 12:34, FE—X12:34, FE—X - 4.24.2 - (SEMI)PERMANENT(SEMI)PERMANENT - SFO -> STOSFO -> STO - IIA —> OGGIIA —> OGG - ARN <--> OGGARN <--> OGG - M@N m@nM@N m@n - Smile :-)Smile :-) - -

- There are many more contextual alternates. +

{{f.title}} {{f.tag}}

+ {% + + if f.description %} +

{{f.description}}

+ {% endif %}{% + + assign feat_tag = f.tag %}{% + assign has_feature_col = false %}{% + for s in f.samples %}{% + if s.feat %}{% + assign has_feature_col = true %}{% + break %}{% + endif %}{% + endfor + + %} + {% if has_feature_col %} + + Feature + Disabled + → + Enabled + {% else %} + + Disabled + → + Enabled + {% endif %} + {% for s in f.samples %} + {% + + if has_feature_col %}{% + assign sample = s.sample %}{% + assign feat_tag = s.feat %}{% + else %}{% + assign sample = s %}{% + endif %}{% + + assign sample_in = sample | replace: "›", "" | replace: "‹", "" %}{% + assign sample_out = sample | remove: "›" | remove: "‹" + + %} {% if has_feature_col %} + {{feat_tag}} + {{sample_in}} + → + {{sample_out}} + {% else %} + {{sample_in}} + → + {{sample_out}} + {% endif %} + {% endfor %} + +

+ font-feature-settings: '{{feat_tag}}' 1

+ {% if f.footer %} +

{{f.footer}}

+ {% endif %} - - -

Tabular numbers tnum

-

- Fixed-width numbers are useful for tabular data, where comparing - columns across rows is desired. -

- - DisabledEnabled - 12345678901234567890 - 1131711 1131711  - 0040900 0040900  - 11:31,711 11:31,711  - 00:40.900 00:40.900  - 0.45, 0.91, +0.08 0.45, 0.91, +0.08  - 1.00, 9.44, −0.13 1.00, 9.44, −0.13  - 0.00, 1.13, ~7.12 0.00, 1.13, ~7.12  - - - - -

Numerators numr

- - DisabledEnabled - Hello 0123Hello 0123 - - - - -

Denominators dnom

- - DisabledEnabled - Hello 0123Hello 0123 - - - - -

Superscript sups

- - DisabledEnabled - Hello 0123Hello 0123 - abcdefghijklmabcdefghijklm - nopqrstuvwxyznopqrstuvwxyz - - - - -

Subscript subs

- - DisabledEnabled - Hello 0123Hello 0123 - abcdefghijklmabcdefghijklm - nopqrstuvwxyznopqrstuvwxyz - - - - -

Fractions frac

-

- This feature is contextually sensitive and will convert "words" of - numbers separated by forward slash into proper fractions. - This feature is dynamic and allows for any fractions. - Note that the digits used for fractions are custom-made for their - small size, and are even made separately from the slightly larger - Superscript and Subscript numbers. -

- - DisabledEnabled - - 1/3 3/4 1/5 1337/5910 - 1/3 3/4 1/5 1337/5910 - - - - - -

Case alternates case

-

- Switches out some glyphs to work better with capital letters and numbers. -

- - DisabledEnabled - - (Hello) [World] {9000} - (Hello) [World] {9000} - - SCHOOL @ RUNSCHOOL @ RUN - 3 + 9 = 12 * 13 + 9 = 12 * 1 - *+÷±×=≠≈•~<>≤≥*+÷±×=≠≈•~<>≤≥ - → ← ⟶ ⟵ − - – — :→ ← ⟶ ⟵ − - – — : - - - - -

Stylistic set 1: Alternate digits ss01

-

- An alternate style of digits. - Note that individual digit styles can be cherry-picked using the cvXX - features. -

- - DisabledEnabled - - 1234567890 - 1234567890 - - 1346913469 - - - - -

Stylistic set 2: Disambiguation ss02

-

- Alternate glyph set that increases visual difference between similar-looking characters. -

- - DisabledEnabled - WP0AC2A9XSI1012O9WP0AC2A9XSI1012O9 - IllegalIllegal - βeta ßeta Busineßβeta ßeta Busineß - - - - -

Discretionary ligatures dlig

- - DisabledEnabled - ¡¿What?!¡¿What?! - ¿¡What!?¿¡What!? - - - - -

Slashed zero zero

- - DisabledEnabled - 01230123 - - - - -

Character variants cvXX

-

- Allows cherry-picking alternate characters. -

- - Feature  DisabledEnabled - cv0111 - cv0244 - cv0366 - cv0499 - cv05l ł ƚ ɫ ɬ ŀ ĺ ļ ľ ḷ ḹ ḻ ḽl ł ƚ ɫ ɬ ŀ ĺ ļ ľ ḷ ḹ ḻ ḽ - cv06r ɽ ɍ ɼ ŕ ŗ ř ȑ ȓ ṙ ṛ ṝ ṟr ɽ ɍ ɼ ŕ ŗ ř ȑ ȓ ṙ ṛ ṝ ṟ - cv07ßß - cv08I Ï Ḯ Ɨ Ḭ Ì Í Î Ĩ Ī Ĭ
Į İ Ǐ Ȉ Ȋ Ỉ Ị Ι Ί Ϊ Ἰ Ἱ Ἲ
Ἳ Ἴ Ἵ Ἶ Ἷ Ῐ Ῑ Ὶ Ί І ЇI Ï Ḯ Ɨ Ḭ Ì Í Î Ĩ Ī Ĭ
Į İ Ǐ Ȉ Ȋ Ỉ Ị Ι Ί Ϊ Ἰ Ἱ Ἲ
Ἳ Ἴ Ἵ Ἶ Ἷ Ῐ Ῑ Ὶ Ί І Ї - cv0933 - cv10G Ǥ Ɠ Ĝ Ğ Ġ Ģ Ǧ Ǵ ḠG Ǥ Ɠ Ĝ Ğ Ġ Ģ Ǧ Ǵ Ḡ - - - - -

Capital Spacing cpsp

-

- Slightly increases letter spacing for increased legibility of - capital letters. Note: It's usually better to set letter-spacing - (aka tracking) manually instead of using this feature. It's here - mainly for completeness. -

- - DisabledEnabled - FOREVER IMMATERIALFOREVER IMMATERIAL - TORSCHLUẞPANIKTORSCHLUẞPANIK - - - + {% endfor %}

Additional features, not highlighted above: locl, + salt, aalt, ccmp, - ordn and - salt, + cpsp and + ordn. +
+ You can explore features in the interactive lab.

 

diff --git a/docs/res/base.css b/docs/res/base.css index bee1d0dd6..b4254200d 100644 --- a/docs/res/base.css +++ b/docs/res/base.css @@ -7,7 +7,7 @@ body { font-size: 15px; line-height: 1.5; - letter-spacing: -0.002em; + letter-spacing: -0.004em; font-weight: 400; padding-bottom: 30px; @@ -24,11 +24,11 @@ body { -moz-font-kerning: normal; -o-font-kerning: normal; - font-variant-ligatures: contextual common-ligatures discretionary-ligatures; - -webkit-font-variant-ligatures: contextual common-ligatures discretionary-ligatures; - -ms-font-variant-ligatures: contextual common-ligatures discretionary-ligatures; - -moz-font-variant-ligatures: contextual common-ligatures discretionary-ligatures; - -o-font-variant-ligatures: contextual common-ligatures discretionary-ligatures; + font-variant-ligatures: contextual common-ligatures; + -webkit-font-variant-ligatures: contextual common-ligatures; + -ms-font-variant-ligatures: contextual common-ligatures; + -moz-font-variant-ligatures: contextual common-ligatures; + -o-font-variant-ligatures: contextual common-ligatures; } /* Font style classifiers used by samples and dynmetrics */ @@ -157,7 +157,7 @@ h1, h2, h3 { h1 { color: #222; font-size: 55px; - letter-spacing: -0.03em; + letter-spacing: -0.038em; line-height: 1.1em; text-indent: -2px; margin-bottom: 30px; @@ -167,11 +167,15 @@ h1 { h2 { font-size: 30px; font-weight: 600; - letter-spacing: -0.015em; + letter-spacing: -0.025em; line-height: 30px; margin-bottom: 25px; margin-top: 10px; } +.row.dark h2, +.row.black h2 { + letter-spacing: -0.014em; +} h2.back { color:rgba(0,0,0,0.2); font-size: inherit; @@ -207,6 +211,11 @@ h2.banner { h3 { font-size: 20px; font-weight: 600; + letter-spacing: -0.02em; +} +.row.dark h3, +.row.black h3 { + letter-spacing: -0.012em; } h3 q { font-weight: 400; @@ -333,13 +342,18 @@ h1 > a, h2 > a, h3 > a { color: #3B414A; } -ul { - margin-left:1.1em; -} +/* --------------------------------------------------------------------- */ -a > img { - display: block; -} +ul { margin-left:1.1em; } +a > img { display: block; } + +/* --------------------------------------------------------------------- */ +/* generic helpers */ + +.low-contrast { opacity: 0.4; } +.center-text { text-align: center; } + +/* --------------------------------------------------------------------- */ #repertoire-image { display:block; @@ -358,6 +372,7 @@ a > img { width: 100%; } +/* --------------------------------------------------------------------- */ tablex { display: flex; @@ -380,6 +395,131 @@ tablex { display: table-row; } +/* --------------------------------------------------------------------- */ +/* +grid with 4 major columns subdivided twice + +| | | | | +| 1 | 2 | 3 | 4 | +| | | | | +| | | | | +| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | +| | | | | | | | | +| | | | | | | | | +| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | +| | | | | | | | | | | | | | | | | +| | | | | | | | | | | | | | | | | + + +*/ + +.row.features { display:none; } +@supports (display: grid) { + .row.features { display:flex; } +} +.row.features p.example { margin-top:2rem; opacity:0.4; } + +grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-column-gap: 1rem; + grid-row-gap: 1rem; +} +grid.c4 { grid-template-columns: repeat(4, 1fr); } +grid.c8 { grid-template-columns: repeat(8, 1fr); } +grid.c9 { grid-template-columns: repeat(9, 1fr); } +grid.c16 { grid-template-columns: repeat(16, 1fr); } +/*grid, grid4 { + grid-template-columns: repeat(4, 1fr); +}*/ +c { + display: block; + grid-column-end: span 1; +} +c[start="1"] { grid-column-start: 1; } +c[start="2"] { grid-column-start: 2; } +c[start="3"] { grid-column-start: 3; } +c[start="4"] { grid-column-start: 4; } +c[start="5"] { grid-column-start: 5; } +c[start="6"] { grid-column-start: 6; } +c[start="7"] { grid-column-start: 7; } +c[start="8"] { grid-column-start: 8; } +c[start="9"] { grid-column-start: 9; } + +c[span="1"] { grid-column-end: span 1; } +c[span="2"] { grid-column-end: span 2; } +c[span="3"] { grid-column-end: span 3; } +c[span="4"] { grid-column-end: span 4; } +c[span="5"] { grid-column-end: span 5; } +c[span="6"] { grid-column-end: span 6; } +c[span="7"] { grid-column-end: span 7; } +c[span="8"] { grid-column-end: span 8; } +c[span="9"] { grid-column-end: span 9; } + +c[span="1-1"] { grid-column: 1 / 1; } +c[span="2-5"] { grid-column: 2 / 5; } +c[span="2-4"] { grid-column: 2 / 4; } + +grid.c4 c[span="2..."], c[span="2.."] { grid-column: 2 / 5; } +grid.c8 c[span="2..."], c[span="2.."] { grid-column: 2 / 9; } + +/* .debug can be added to a grid to visualize its effective cells. + .debug-color applies alternating colors. */ +grid.debug > *, grid.debug-color > * { + --color: rgba(250, 230, 0, 0.2); + background-image: linear-gradient(to bottom, var(--color) 0%, var(--color) 100%); +} +grid.debug > :nth-child(4n+2) { --color: rgba(250, 0, 0, 0.1); } +grid.debug > :nth-child(4n+3) { --color: rgba(40, 120, 255, 0.1); } +grid.debug > :nth-child(4n+4) { --color: rgba(0, 230, 80, 0.17); } + +.col-all { grid-column: 1 / span 16; } + +.col-1 { grid-column: 1 / span 2; } +.col-1-2 { grid-column: 1 / span 4; } +.col-1-3 { grid-column: 1 / span 6; } +.col-1-4 { grid-column: 1 / span 8; } +.col-1-5 { grid-column: 1 / span 10; } +.col-1-6 { grid-column: 1 / span 12; } +.col-1-7 { grid-column: 1 / span 14; } +.col-1-8 { grid-column: 1 / span 16; } + +.col-2 { grid-column: 2 / span 2; } +.col-2-2 { grid-column: 2 / span 4; } +.col-2-3 { grid-column: 2 / span 6; } +.col-2-4 { grid-column: 2 / span 8; } +.col-2-5 { grid-column: 2 / span 10; } +.col-2-6 { grid-column: 2 / span 12; } +.col-2-7 { grid-column: 2 / span 14; } + +.col-3 { grid-column: 3 / span 2; } +.col-3-2 { grid-column: 3 / span 4; } +.col-3-3 { grid-column: 3 / span 6; } +.col-3-4 { grid-column: 3 / span 8; } +.col-3-5 { grid-column: 3 / span 10; } +.col-3-6 { grid-column: 3 / span 12; } + +.col-4 { grid-column: 4 / span 2; } +.col-4-2 { grid-column: 4 / span 4; } +.col-4-3 { grid-column: 4 / span 6; } +.col-4-4 { grid-column: 4 / span 8; } +.col-4-5 { grid-column: 4 / span 10; } + +.col-5 { grid-column: 5 / span 2; } +.col-5-2 { grid-column: 5 / span 4; } +.col-5-3 { grid-column: 5 / span 6; } +.col-5-4 { grid-column: 5 / span 8; } + +.col-6 { grid-column: 6 / span 2; } +.col-6-2 { grid-column: 6 / span 4; } +.col-6-3 { grid-column: 6 / span 6; } + +.col-7 { grid-column: 7 / span 2; } +.col-7-2 { grid-column: 7 / span 4; } + +.col-8 { grid-column: 8 / span 2; } + +/* --------------------------------------------------------------------- */ boxes { display: flex; @@ -411,6 +551,16 @@ box h3 { margin-bottom:0.8em; } +box.large tablex r { + line-height: 1.5; +} +box.large tablex r in, +box.large tablex r to, +box.large tablex r out { + font-size: 2rem; + padding-bottom: 0; +} + #hud-notification { position: fixed; bottom: 20px; @@ -536,30 +686,31 @@ instead. */ -.ff-dlig { font-feature-settings: 'dlig' 1; } -.ff-numr { font-feature-settings: 'numr' 1; } -.ff-dnom { font-feature-settings: 'dnom' 1; } -.ff-tnum { font-feature-settings: 'tnum' 1; } -.ff-case { font-feature-settings: 'case' 1; } -.ff-zero { font-feature-settings: 'zero' 1; } -.ff-frac { font-feature-settings: 'frac' 1; } -.ff-sups { font-feature-settings: 'sups' 1; } -.ff-subs { font-feature-settings: 'subs' 1; } -.ff-cpsp { font-feature-settings: 'cpsp' 1; } -.ff-salt { font-feature-settings: 'salt' 1; } +.ff-none { font-feature-settings: 'calt' 0, 'liga' 0; -webkit-font-feature-settings: 'calt' 0, 'liga' 0; -ms-font-feature-settings: 'calt' 0, 'liga' 0; -moz-font-feature-settings: 'calt' 0, 'liga' 0; } + +.ff-dlig { font-feature-settings: 'dlig' 1; -webkit-font-feature-settings: 'dlig' 1; -ms-font-feature-settings: 'dlig' 1; -moz-font-feature-settings: 'dlig' 1; } +.ff-numr { font-feature-settings: 'numr' 1; -webkit-font-feature-settings: 'numr' 1; -ms-font-feature-settings: 'numr' 1; -moz-font-feature-settings: 'numr' 1; } +.ff-dnom { font-feature-settings: 'dnom' 1; -webkit-font-feature-settings: 'dnom' 1; -ms-font-feature-settings: 'dnom' 1; -moz-font-feature-settings: 'dnom' 1; } +.ff-tnum { font-feature-settings: 'tnum' 1; -webkit-font-feature-settings: 'tnum' 1; -ms-font-feature-settings: 'tnum' 1; -moz-font-feature-settings: 'tnum' 1; } +.ff-case { font-feature-settings: 'case' 1; -webkit-font-feature-settings: 'case' 1; -ms-font-feature-settings: 'case' 1; -moz-font-feature-settings: 'case' 1; } +.ff-zero { font-feature-settings: 'zero' 1; -webkit-font-feature-settings: 'zero' 1; -ms-font-feature-settings: 'zero' 1; -moz-font-feature-settings: 'zero' 1; } +.ff-frac { font-feature-settings: 'frac' 1; -webkit-font-feature-settings: 'frac' 1; -ms-font-feature-settings: 'frac' 1; -moz-font-feature-settings: 'frac' 1; } +.ff-sups { font-feature-settings: 'sups' 1; -webkit-font-feature-settings: 'sups' 1; -ms-font-feature-settings: 'sups' 1; -moz-font-feature-settings: 'sups' 1; } +.ff-subs { font-feature-settings: 'subs' 1; -webkit-font-feature-settings: 'subs' 1; -ms-font-feature-settings: 'subs' 1; -moz-font-feature-settings: 'subs' 1; } +.ff-cpsp { font-feature-settings: 'cpsp' 1; -webkit-font-feature-settings: 'cpsp' 1; -ms-font-feature-settings: 'cpsp' 1; -moz-font-feature-settings: 'cpsp' 1; } +.ff-salt { font-feature-settings: 'salt' 1; -webkit-font-feature-settings: 'salt' 1; -ms-font-feature-settings: 'salt' 1; -moz-font-feature-settings: 'salt' 1; } .ff-salt-zero { font-feature-settings: 'salt' 1, 'zero' 1; } .ff-cv07-salt-zero { font-feature-settings: 'cv07' 1, 'salt' 1, 'zero' 1; } -.ff-ss01 { font-feature-settings: 'ss01' 1; } -.ff-ss02 { font-feature-settings: 'ss02' 1; } - -.ff-cv01 { font-feature-settings: 'cv01' 1; } -.ff-cv02 { font-feature-settings: 'cv02' 1; } -.ff-cv03 { font-feature-settings: 'cv03' 1; } -.ff-cv04 { font-feature-settings: 'cv04' 1; } -.ff-cv05 { font-feature-settings: 'cv05' 1; } -.ff-cv06 { font-feature-settings: 'cv06' 1; } -.ff-cv07 { font-feature-settings: 'cv07' 1; } -.ff-cv08 { font-feature-settings: 'cv08' 1; } -.ff-cv09 { font-feature-settings: 'cv09' 1; } -.ff-cv10 { font-feature-settings: 'cv10' 1; } +.ff-ss01 { font-feature-settings: 'ss01' 1; -webkit-font-feature-settings: 'ss01' 1; -ms-font-feature-settings: 'ss01' 1; -moz-font-feature-settings: 'ss01' 1; } +.ff-ss02 { font-feature-settings: 'ss02' 1; -webkit-font-feature-settings: 'ss02' 1; -ms-font-feature-settings: 'ss02' 1; -moz-font-feature-settings: 'ss02' 1; } +.ff-cv01 { font-feature-settings: 'cv01' 1; -webkit-font-feature-settings: 'cv01' 1; -ms-font-feature-settings: 'cv01' 1; -moz-font-feature-settings: 'cv01' 1; } +.ff-cv02 { font-feature-settings: 'cv02' 1; -webkit-font-feature-settings: 'cv02' 1; -ms-font-feature-settings: 'cv02' 1; -moz-font-feature-settings: 'cv02' 1; } +.ff-cv03 { font-feature-settings: 'cv03' 1; -webkit-font-feature-settings: 'cv03' 1; -ms-font-feature-settings: 'cv03' 1; -moz-font-feature-settings: 'cv03' 1; } +.ff-cv04 { font-feature-settings: 'cv04' 1; -webkit-font-feature-settings: 'cv04' 1; -ms-font-feature-settings: 'cv04' 1; -moz-font-feature-settings: 'cv04' 1; } +.ff-cv05 { font-feature-settings: 'cv05' 1; -webkit-font-feature-settings: 'cv05' 1; -ms-font-feature-settings: 'cv05' 1; -moz-font-feature-settings: 'cv05' 1; } +.ff-cv06 { font-feature-settings: 'cv06' 1; -webkit-font-feature-settings: 'cv06' 1; -ms-font-feature-settings: 'cv06' 1; -moz-font-feature-settings: 'cv06' 1; } +.ff-cv07 { font-feature-settings: 'cv07' 1; -webkit-font-feature-settings: 'cv07' 1; -ms-font-feature-settings: 'cv07' 1; -moz-font-feature-settings: 'cv07' 1; } +.ff-cv08 { font-feature-settings: 'cv08' 1; -webkit-font-feature-settings: 'cv08' 1; -ms-font-feature-settings: 'cv08' 1; -moz-font-feature-settings: 'cv08' 1; } +.ff-cv09 { font-feature-settings: 'cv09' 1; -webkit-font-feature-settings: 'cv09' 1; -ms-font-feature-settings: 'cv09' 1; -moz-font-feature-settings: 'cv09' 1; } +.ff-cv10 { font-feature-settings: 'cv10' 1; -webkit-font-feature-settings: 'cv10' 1; -ms-font-feature-settings: 'cv10' 1; -moz-font-feature-settings: 'cv10' 1; } diff --git a/docs/res/base.js b/docs/res/base.js index 40188360e..05e98a7ff 100644 --- a/docs/res/base.js +++ b/docs/res/base.js @@ -81,7 +81,7 @@ var HUDNotification = { // the compensating tracking in EM. // function InterDynamicTracking(fontSize) { - var a = -0.02, b = 0.0755, c = -0.102; + var a = -0.038, b = 0.161, c = -0.12; // tracking = a + b * e ^ (c * fontSize) return a + b * Math.pow(Math.E, c * fontSize) } diff --git a/docs/samples/index.html b/docs/samples/index.html index 3143df37e..b3763ebab 100644 --- a/docs/samples/index.html +++ b/docs/samples/index.html @@ -4,10 +4,9 @@ title: Samples --- {% -capture url_root - %}{% if site.safe == false %}/{% else %}/inter/{% endif -%}{% -endcapture %}{% +if site.safe == false %}{% +assign url_root = "/" %}{% else %}{% +assign url_root = "/inter/" %}{% endif %}{% for file in site.static_files %}{% assign _path = file.path | remove_first: "/inter" %}{%