website: misc updates with added samples

2 files changed, 39 insertions, 10 deletions

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.