From 357497d43362892a073f2a2a1bcaef84ef57967c Mon Sep 17 00:00:00 2001 From: Rasmus Andersson Date: Sun, 3 Feb 2019 19:15:12 -0800 Subject: website: misc updates with added samples --- docs/_includes/preload-font-files.html | 13 +++- docs/index.html | 2 +- docs/inter.css | 113 ++++++++++++++++++--------------- docs/res/base.css | 52 +++++++++++++-- docs/samples/index.css | 3 +- docs/samples/index.html | 46 +++++++++++--- 6 files changed, 160 insertions(+), 69 deletions(-) (limited to 'docs') 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 %}{% -%} - \ 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 + +%} + \ 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; }
-
+
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890 ?!()[]{}&*^%$#@~
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
- - Interfacing mechanisms + + + Martian™
Language Systems Inc. + + + + Interfacing mechanisms are periodically sequencing state + + + + XP–45 SERVICE + + + + Default forms G r l ß 1234567890 + + + + Alternate forms G r l ß 1234567890 + + + + Melvetica - - XP–45 / vessel + + Production filaments are awaiting 340-type transportation in docking bay + 4
- + Fabulous typography encountering spring - + The user interface (UI), in the industrial design field of
human-computer interaction, is the space where
interactions between humans and machines occur. - +

Fire Island Beach 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. -- cgit v1.2.3