website: dynamic metrics update

2 files changed, 27 insertions, 5 deletions

diff --git a/docs/samples/index.css b/docs/samples/index.css
index 6114ae255..a1234d8cc 100644
--- a/docs/samples/index.css
+++ b/docs/samples/index.css
@@ -8,22 +8,33 @@ body {
   text-align:center;
 }
 
+.live > hr {
+  margin: 3rem 0 4rem 0;
+  background: black;
+  height: 2px;
+  border: none;
+}
+
 livesample {
   display: block;
   color: #111;
   outline: none;
-  /*padding-left: 20px;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+/*livesample {
+  padding-left: 20px;
   border-left: 2px solid transparent;
-  margin-left:-22px;*/
-  margin-top: 1em;
-  margin-bottom: 1.6em;
+  margin-left:-22px;
 }
 livesample:hover {
   border-left-color: rgb(3, 102, 214);
 }
-/*livesample:focus {
+livesample:focus {
   border-left-color: #eee;
 }*/
+
 livesample > p {
   margin-top: 0;
 }
diff --git a/docs/samples/index.html b/docs/samples/index.html
index 88f389c88..3784fcccb 100644
--- a/docs/samples/index.html
+++ b/docs/samples/index.html
@@ -28,6 +28,17 @@ 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>
+
+    <livesample data-ctxedit="sample-x2"
+      style="font-weight:100;font-size:80px;line-height:1.2" contenteditable>
+      XP–45 / vessel
+    </livesample>
+
+    <hr>
 
     <livesample contenteditable class="s1" data-ctxedit="sample1">
       Fabulous typography encountering spring