diff options
author | Rasmus Andersson <rasmus@figma.com> | 2019-02-04 06:15:12 +0300 |
---|---|---|
committer | Rasmus Andersson <rasmus@figma.com> | 2019-02-04 06:15:12 +0300 |
commit | 357497d43362892a073f2a2a1bcaef84ef57967c (patch) | |
tree | 80d24739caf4a001740f2bcc5778a3354b22dc4d /docs | |
parent | eb4608cb7a83f6c67887665d2eb8151f0695d9d4 (diff) | |
download | inter-357497d43362892a073f2a2a1bcaef84ef57967c.tar.xz |
website: misc updates with added samples
Diffstat (limited to 'docs')
-rw-r--r-- | docs/_includes/preload-font-files.html | 13 | ||||
-rw-r--r-- | docs/index.html | 2 | ||||
-rw-r--r-- | docs/inter.css | 113 | ||||
-rw-r--r-- | docs/res/base.css | 52 | ||||
-rw-r--r-- | docs/samples/index.css | 3 | ||||
-rw-r--r-- | docs/samples/index.html | 46 |
6 files changed, 160 insertions, 69 deletions
diff --git a/docs/_includes/preload-font-files.html b/docs/_includes/preload-font-files.html index 041624df6..d30007d12 100644 --- a/docs/_includes/preload-font-files.html +++ b/docs/_includes/preload-font-files.html @@ -3,7 +3,14 @@ capture url_root %}{% if site.safe == false %}/{% else %}/inter/{% endif %}{% -endcapture +endcapture %}{% -%}<link rel="preload" href="{{url_root}}font-files/Inter-upright.var.woff2?v=3.3" as="font" type="font/woff2" crossorigin> - <link rel="preload" href="{{url_root}}font-files/Inter-italic.var.woff2?v=3.3" as="font" type="font/woff2" crossorigin>
\ No newline at end of file +for file in site.static_files %}{% + assign _path = file.path | remove_first: "/inter" %}{% + if _path == "/font-files/Inter-Regular.woff2" %}{% + assign font_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{% + endif %}{% +endfor + +%}<link rel="preload" href="{{url_root}}font-files/Inter-upright.var.woff2?v={{font_v}}" as="font" type="font/woff2" crossorigin> + <link rel="preload" href="{{url_root}}font-files/Inter-italic.var.woff2?v={{font_v}}" as="font" type="font/woff2" crossorigin>
\ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 10c11672b..fb6e376a7 100644 --- a/docs/index.html +++ b/docs/index.html @@ -158,7 +158,7 @@ html { font-family: 'Inter', sans-serif; } </div> </div></div> <div class="row white variable-sample-row"> - <div class="variable-sample" contenteditable> + <div class="variable-sample" contenteditable spellcheck="false"> ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890 ?!()[]{}&*^%$#@~ </div> diff --git a/docs/inter.css b/docs/inter.css index 2087f688d..7467e6284 100644 --- a/docs/inter.css +++ b/docs/inter.css @@ -1,136 +1,149 @@ +--- +layout: none +--- +{% + +for file in site.static_files %}{% + assign _path = file.path | remove_first: "/inter" %}{% + if _path == "/font-files/Inter-Regular.woff2" %}{% + assign font_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{% + endif %}{% +endfor + +%} @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100; - src: url("font-files/Inter-Thin.woff2?v=3.3") format("woff2"), - url("font-files/Inter-Thin.woff?v=3.3") format("woff"); + src: url("font-files/Inter-Thin.woff2?v={{font_v}}") format("woff2"), + url("font-files/Inter-Thin.woff?v={{font_v}}") format("woff"); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 100; - src: url("font-files/Inter-ThinItalic.woff2?v=3.3") format("woff2"), - url("font-files/Inter-ThinItalic.woff?v=3.3") format("woff"); + src: url("font-files/Inter-ThinItalic.woff2?v={{font_v}}") format("woff2"), + url("font-files/Inter-ThinItalic.woff?v={{font_v}}") format("woff"); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 200; - src: url("font-files/Inter-ExtraLight.woff2?v=3.3") format("woff2"), - url("font-files/Inter-ExtraLight.woff?v=3.3") format("woff"); + src: url("font-files/Inter-ExtraLight.woff2?v={{font_v}}") format("woff2"), + url("font-files/Inter-ExtraLight.woff?v={{font_v}}") format("woff"); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 200; - src: url("font-files/Inter-ExtraLightItalic.woff2?v=3.3") format("woff2"), - url("font-files/Inter-ExtraLightItalic.woff?v=3.3") format("woff"); + src: url("font-files/Inter-ExtraLightItalic.woff2?v={{font_v}}") format("woff2"), + url("font-files/Inter-ExtraLightItalic.woff?v={{font_v}}") format("woff"); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; - src: url("font-files/Inter-Light.woff2?v=3.3") format("woff2"), - url("font-files/Inter-Light.woff?v=3.3") format("woff"); + src: url("font-files/Inter-Light.woff2?v={{font_v}}") format("woff2"), + url("font-files/Inter-Light.woff?v={{font_v}}") format("woff"); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 300; - src: url("font-files/Inter-LightItalic.woff2?v=3.3") format("woff2"), - url("font-files/Inter-LightItalic.woff?v=3.3") format("woff"); + src: url("font-files/Inter-LightItalic.woff2?v={{font_v}}") format("woff2"), + url("font-files/Inter-LightItalic.woff?v={{font_v}}") format("woff"); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; - src: url("font-files/Inter-Regular.woff2?v=3.3") format("woff2"), - url("font-files/Inter-Regular.woff?v=3.3") format("woff"); + src: url("font-files/Inter-Regular.woff2?v={{font_v}}") format("woff2"), + url("font-files/Inter-Regular.woff?v={{font_v}}") format("woff"); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; - src: url("font-files/Inter-Italic.woff2?v=3.3") format("woff2"), - url("font-files/Inter-Italic.woff?v=3.3") format("woff"); + src: url("font-files/Inter-Italic.woff2?v={{font_v}}") format("woff2"), + url("font-files/Inter-Italic.woff?v={{font_v}}") format("woff"); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; - src: url("font-files/Inter-Medium.woff2?v=3.3") format("woff2"), - url("font-files/Inter-Medium.woff?v=3.3") format("woff"); + src: url("font-files/Inter-Medium.woff2?v={{font_v}}") format("woff2"), + url("font-files/Inter-Medium.woff?v={{font_v}}") format("woff"); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 500; - src: url("font-files/Inter-MediumItalic.woff2?v=3.3") format("woff2"), - url("font-files/Inter-MediumItalic.woff?v=3.3") format("woff"); + src: url("font-files/Inter-MediumItalic.woff2?v={{font_v}}") format("woff2"), + url("font-files/Inter-MediumItalic.woff?v={{font_v}}") format("woff"); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; - src: url("font-files/Inter-SemiBold.woff2?v=3.3") format("woff2"), - url("font-files/Inter-SemiBold.woff?v=3.3") format("woff"); + src: url("font-files/Inter-SemiBold.woff2?v={{font_v}}") format("woff2"), + url("font-files/Inter-SemiBold.woff?v={{font_v}}") format("woff"); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 600; - src: url("font-files/Inter-SemiBoldItalic.woff2?v=3.3") format("woff2"), - url("font-files/Inter-SemiBoldItalic.woff?v=3.3") format("woff"); + src: url("font-files/Inter-SemiBoldItalic.woff2?v={{font_v}}") format("woff2"), + url("font-files/Inter-SemiBoldItalic.woff?v={{font_v}}") format("woff"); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; - src: url("font-files/Inter-Bold.woff2?v=3.3") format("woff2"), - url("font-files/Inter-Bold.woff?v=3.3") format("woff"); + src: url("font-files/Inter-Bold.woff2?v={{font_v}}") format("woff2"), + url("font-files/Inter-Bold.woff?v={{font_v}}") format("woff"); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 700; - src: url("font-files/Inter-BoldItalic.woff2?v=3.3") format("woff2"), - url("font-files/Inter-BoldItalic.woff?v=3.3") format("woff"); + src: url("font-files/Inter-BoldItalic.woff2?v={{font_v}}") format("woff2"), + url("font-files/Inter-BoldItalic.woff?v={{font_v}}") format("woff"); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; - src: url("font-files/Inter-ExtraBold.woff2?v=3.3") format("woff2"), - url("font-files/Inter-ExtraBold.woff?v=3.3") format("woff"); + src: url("font-files/Inter-ExtraBold.woff2?v={{font_v}}") format("woff2"), + url("font-files/Inter-ExtraBold.woff?v={{font_v}}") format("woff"); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 800; - src: url("font-files/Inter-ExtraBoldItalic.woff2?v=3.3") format("woff2"), - url("font-files/Inter-ExtraBoldItalic.woff?v=3.3") format("woff"); + src: url("font-files/Inter-ExtraBoldItalic.woff2?v={{font_v}}") format("woff2"), + url("font-files/Inter-ExtraBoldItalic.woff?v={{font_v}}") format("woff"); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; - src: url("font-files/Inter-Black.woff2?v=3.3") format("woff2"), - url("font-files/Inter-Black.woff?v=3.3") format("woff"); + src: url("font-files/Inter-Black.woff2?v={{font_v}}") format("woff2"), + url("font-files/Inter-Black.woff?v={{font_v}}") format("woff"); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 900; - src: url("font-files/Inter-BlackItalic.woff2?v=3.3") format("woff2"), - url("font-files/Inter-BlackItalic.woff?v=3.3") format("woff"); + src: url("font-files/Inter-BlackItalic.woff2?v={{font_v}}") format("woff2"), + url("font-files/Inter-BlackItalic.woff?v={{font_v}}") format("woff"); } /* ------------------------------------------------------- @@ -147,18 +160,18 @@ Usage: font-weight: 100 900; font-style: normal; font-named-instance: 'Regular'; - src: url("font-files/Inter-upright.var.woff2?v=3.3") format("woff2 supports variations(gvar)"), - url("font-files/Inter-upright.var.woff2?v=3.3") format("woff2-variations"), - url("font-files/Inter-upright.var.woff2?v=3.3") format("woff2"); + src: url("font-files/Inter-upright.var.woff2?v={{font_v}}") format("woff2 supports variations(gvar)"), + url("font-files/Inter-upright.var.woff2?v={{font_v}}") format("woff2-variations"), + url("font-files/Inter-upright.var.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'Inter var'; font-weight: 100 900; font-style: italic; font-named-instance: 'Italic'; - src: url("font-files/Inter-italic.var.woff2?v=3.3") format("woff2 supports variations(gvar)"), - url("font-files/Inter-italic.var.woff2?v=3.3") format("woff2-variations"), - url("font-files/Inter-italic.var.woff2?v=3.3") format("woff2"); + src: url("font-files/Inter-italic.var.woff2?v={{font_v}}") format("woff2 supports variations(gvar)"), + url("font-files/Inter-italic.var.woff2?v={{font_v}}") format("woff2-variations"), + url("font-files/Inter-italic.var.woff2?v={{font_v}}") format("woff2"); } /* Legacy naming compatibility */ @@ -167,18 +180,18 @@ Usage: font-weight: 100 900; font-style: normal; font-named-instance: 'Regular'; - src: url("font-files/Inter-upright.var.woff2?v=3.3") format("woff2 supports variations(gvar)"), - url("font-files/Inter-upright.var.woff2?v=3.3") format("woff2-variations"), - url("font-files/Inter-upright.var.woff2?v=3.3") format("woff2"); + src: url("font-files/Inter-upright.var.woff2?v={{font_v}}") format("woff2 supports variations(gvar)"), + url("font-files/Inter-upright.var.woff2?v={{font_v}}") format("woff2-variations"), + url("font-files/Inter-upright.var.woff2?v={{font_v}}") format("woff2"); } @font-face { font-family: 'Inter var alt'; font-weight: 100 900; font-style: italic; font-named-instance: 'Italic'; - src: url("font-files/Inter-italic.var.woff2?v=3.3") format("woff2 supports variations(gvar)"), - url("font-files/Inter-italic.var.woff2?v=3.3") format("woff2-variations"), - url("font-files/Inter-italic.var.woff2?v=3.3") format("woff2"); + src: url("font-files/Inter-italic.var.woff2?v={{font_v}}") format("woff2 supports variations(gvar)"), + url("font-files/Inter-italic.var.woff2?v={{font_v}}") format("woff2-variations"), + url("font-files/Inter-italic.var.woff2?v={{font_v}}") format("woff2"); } @@ -199,6 +212,6 @@ explicitly, e.g. font-family: 'Inter var experimental'; font-weight: 100 900; font-style: oblique 0deg 10deg; - src: url("font-files/Inter.var.woff2?v=3.3") format("woff2-variations"), - url("font-files/Inter.var.woff2?v=3.3") format("woff2"); + src: url("font-files/Inter.var.woff2?v={{font_v}}") format("woff2-variations"), + url("font-files/Inter.var.woff2?v={{font_v}}") format("woff2"); } diff --git a/docs/res/base.css b/docs/res/base.css index d40cfd8ba..bee1d0dd6 100644 --- a/docs/res/base.css +++ b/docs/res/base.css @@ -14,15 +14,21 @@ body { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; + -webkit-overflow-scrolling: touch; scroll-behavior: smooth; font-kerning: normal; - -moz-font-feature-settings: "calt" 1, "kern" 1, "liga" 1; - -ms-font-feature-settings: "calt" 1, "kern" 1, "liga" 1; - -o-font-feature-settings: "calt" 1, "kern" 1, "liga" 1; - -webkit-font-feature-settings: "calt" 1, "kern" 1, "liga" 1; - font-feature-settings: "calt" 1, "kern" 1, "liga" 1; + -webkit-font-kerning: normal; + -ms-font-kerning: normal; + -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 style classifiers used by samples and dynmetrics */ @@ -521,3 +527,39 @@ box h3 { }*/ } +/* +Feature helpers. + +Note: font-variant-alternates:character-variant is not yet supported by +most browsers, which is why we use the "low leve" font-feature-settings +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-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; } diff --git a/docs/samples/index.css b/docs/samples/index.css index a1234d8cc..3f4de344c 100644 --- a/docs/samples/index.css +++ b/docs/samples/index.css @@ -20,7 +20,7 @@ livesample { color: #111; outline: none; margin-top: 1rem; - margin-bottom: 1rem; + margin-bottom: 3rem; } /*livesample { @@ -50,6 +50,7 @@ livesample.s1 { livesample.s2 { /*max-width: 400px;*/ font-size: 1em; + margin-bottom: 1.5rem; } livesample.s3 { font-size: 13px; diff --git a/docs/samples/index.html b/docs/samples/index.html index 3784fcccb..1437a14db 100644 --- a/docs/samples/index.html +++ b/docs/samples/index.html @@ -28,29 +28,57 @@ endfor <div class="row"><div> <div class="live"> - <livesample data-ctxedit="sample-x1" - style="font-size:80px;line-height:1.0" contenteditable> - Interfacing mechanisms + + <livesample data-ctxedit="sample-800-1" spellcheck="false" + style="font-weight:800;font-size:60px;line-height:0.72;letter-spacing:-0.04em" contenteditable> + Martian™<br>Language Systems Inc. + </livesample> + + <livesample data-ctxedit="sample-400-1" spellcheck="false" + style="font-weight:400;font-size:18px;line-height:1.0" contenteditable> + Interfacing mechanisms are periodically sequencing state + </livesample> + + <livesample data-ctxedit="sample-100-1" spellcheck="false" + style="font-weight:100;font-size:120px;line-height:1.0;letter-spacing:-0.05em" contenteditable> + XP–45 SERVICE + </livesample> + + <livesample data-ctxedit="sample-500-1" spellcheck="false" + style="font-weight:500;font-size:50px;line-height:1.0;letter-spacing:-0.03em" contenteditable> + Default forms G r l ß 1234567890 + </livesample> + + <livesample data-ctxedit="sample-500-2" spellcheck="false" + class="ff-cv07-salt-zero" + style="font-weight:500;font-size:50px;line-height:1.0;letter-spacing:-0.03em" contenteditable> + Alternate forms G r l ß 1234567890 + </livesample> + + <livesample data-ctxedit="sample-900-1" spellcheck="false" + style="font-weight:900;font-size:170px;line-height:1.0;letter-spacing:-0.05em" contenteditable> + Melvetica </livesample> - <livesample data-ctxedit="sample-x2" - style="font-weight:100;font-size:80px;line-height:1.2" contenteditable> - XP–45 / vessel + <livesample data-ctxedit="sample-600-1" spellcheck="false" + style="font-weight:600;font-size:50px;line-height:1.1;letter-spacing:-0.03em" contenteditable> + Production filaments are awaiting 340-type transportation in docking bay + <span class="ff-cv02">4</span> </livesample> <hr> - <livesample contenteditable class="s1" data-ctxedit="sample1"> + <livesample contenteditable class="s1" data-ctxedit="sample1" spellcheck="false"> Fabulous typography encountering spring </livesample> - <livesample contenteditable class="s2" data-ctxedit="sample2"> + <livesample contenteditable class="s2" data-ctxedit="sample2" spellcheck="false"> The user interface (UI), in the industrial design field of<br> human-computer interaction, is the space where<br> interactions between humans and machines occur. </livesample> - <livesample contenteditable class="s3 col3" data-ctxedit="sample3"> + <livesample contenteditable class="s3 col3" data-ctxedit="sample3" spellcheck="false"> <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. |