website: misc updates with added samples

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>
+for file in site.static_files %}{%
-    <link rel="preload" href="{{url_root}}font-files/Inter-italic.var.woff2?v=3.3" as="font" type="font/woff2" crossorigin>
+  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>

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>

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"),
+  src: url("font-files/Inter-Thin.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-Thin.woff?v=3.3") format("woff");
+       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"),
+  src: url("font-files/Inter-ThinItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-ThinItalic.woff?v=3.3") format("woff");
+       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"),
+  src: url("font-files/Inter-ExtraLight.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-ExtraLight.woff?v=3.3") format("woff");
+       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"),
+  src: url("font-files/Inter-ExtraLightItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-ExtraLightItalic.woff?v=3.3") format("woff");
+       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"),
+  src: url("font-files/Inter-Light.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-Light.woff?v=3.3") format("woff");
+       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"),
+  src: url("font-files/Inter-LightItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-LightItalic.woff?v=3.3") format("woff");
+       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"),
+  src: url("font-files/Inter-Regular.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-Regular.woff?v=3.3") format("woff");
+       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"),
+  src: url("font-files/Inter-Italic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-Italic.woff?v=3.3") format("woff");
+       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"),
+  src: url("font-files/Inter-Medium.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-Medium.woff?v=3.3") format("woff");
+       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"),
+  src: url("font-files/Inter-MediumItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-MediumItalic.woff?v=3.3") format("woff");
+       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"),
+  src: url("font-files/Inter-SemiBold.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-SemiBold.woff?v=3.3") format("woff");
+       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"),
+  src: url("font-files/Inter-SemiBoldItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-SemiBoldItalic.woff?v=3.3") format("woff");
+       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"),
+  src: url("font-files/Inter-Bold.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-Bold.woff?v=3.3") format("woff");
+       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"),
+  src: url("font-files/Inter-BoldItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-BoldItalic.woff?v=3.3") format("woff");
+       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"),
+  src: url("font-files/Inter-ExtraBold.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-ExtraBold.woff?v=3.3") format("woff");
+       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"),
+  src: url("font-files/Inter-ExtraBoldItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-ExtraBoldItalic.woff?v=3.3") format("woff");
+       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"),
+  src: url("font-files/Inter-Black.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-Black.woff?v=3.3") format("woff");
+       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"),
+  src: url("font-files/Inter-BlackItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-BlackItalic.woff?v=3.3") format("woff");
+       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)"),
+  src: url("font-files/Inter-upright.var.woff2?v={{font_v}}") 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={{font_v}}") format("woff2-variations"),
-       url("font-files/Inter-upright.var.woff2?v=3.3") format("woff2");
+       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)"),
+  src: url("font-files/Inter-italic.var.woff2?v={{font_v}}") 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={{font_v}}") format("woff2-variations"),
-       url("font-files/Inter-italic.var.woff2?v=3.3") format("woff2");
+       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)"),
+  src: url("font-files/Inter-upright.var.woff2?v={{font_v}}") 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={{font_v}}") format("woff2-variations"),
-       url("font-files/Inter-upright.var.woff2?v=3.3") format("woff2");
+       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)"),
+  src: url("font-files/Inter-italic.var.woff2?v={{font_v}}") 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={{font_v}}") format("woff2-variations"),
-       url("font-files/Inter-italic.var.woff2?v=3.3") format("woff2");
+       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"),
+  src: url("font-files/Inter.var.woff2?v={{font_v}}") format("woff2-variations"),
-       url("font-files/Inter.var.woff2?v=3.3") format("woff2");
+       url("font-files/Inter.var.woff2?v={{font_v}}") format("woff2");
 }

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;
+    -webkit-font-kerning: normal;
-  -ms-font-feature-settings:     "calt" 1, "kern" 1, "liga" 1;
+    -ms-font-kerning: normal;
-  -o-font-feature-settings:      "calt" 1, "kern" 1, "liga" 1;
+    -moz-font-kerning: normal;
-  -webkit-font-feature-settings: "calt" 1, "kern" 1, "liga" 1;
+    -o-font-kerning: normal;
-  font-feature-settings:         "calt" 1, "kern" 1, "liga" 1;
+
+  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; }

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;

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>
+    <livesample data-ctxedit="sample-800-1" spellcheck="false"
-      Interfacing mechanisms
+      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-x2"
+    <livesample data-ctxedit="sample-400-1" spellcheck="false"
-      style="font-weight:100;font-size:80px;line-height:1.2" contenteditable>
+      style="font-weight:400;font-size:18px;line-height:1.0" contenteditable>
-      XP–45 / vessel
+      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-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.