moving example to deal with CORS

rachelandrew · rachelandrew · commit b1f750907a04 · 2020-12-18T08:43:15.000Z
diff --git a/font-features/SourceSansPro-Regular.otf b/font-features/SourceSansPro-Regular.otf
diff --git a/font-features/font-variant-numeric-example.html b/font-features/font-variant-numeric-example.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>font-variant-numeric</title>
+    <link rel="stylesheet" href="styles.css" />
+
+    <style class="editable">
+
+        @font-face {
+          font-family: 'Source Sans Pro';
+          src: url("SourceSansPro-Regular.otf") format("opentype");
+          font-weight: 400;
+          font-style: normal;
+        }
+
+        .ordinal {
+            font-variant-numeric: ordinal;
+            font-family: "Source Sans Pro";
+        }
+    </style>
+  </head>
+
+  <body>
+    <section class="preview">
+      <div class="grid">
+        <div class="item">
+          <div class="subitem"></div>
+        </div>
+      </div>
+    </section>
+
+    <textarea class="playable playable-css" style="height: 200px;">
+@font-face {
+  font-family: 'Source Sans Pro';
+  src: url("SourceSansPro-Regular.otf") format("opentype");
+  font-weight: 400;
+  font-style: normal;
+}
+.ordinal {
+  font-variant-numeric: ordinal;
+  font-family: "Source Sans Pro";
+}
+    </textarea>
+
+    <textarea class="playable playable-html" style="height: 60px;">
+<p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p>
+    </textarea>
+
+    <p style="font-size: 80%;"><em>This example uses the Source Sans Pro OpenType font, developed by Adobe
+        and used here under the terms of the SIL Open Font License, Version 1.1:
+        <a href="http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web">http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web</a></em></p>
+
+    <div class="playable-buttons">
+      <input id="reset" type="button" value="Reset" />
+    </div>
+  </body>
+  <script src="playable.js"></script>
+</html>
diff --git a/font-features/playable.js b/font-features/playable.js
@@ -0,0 +1,22 @@
+var section = document.querySelector('section');
+var editable = document.querySelector('.editable');
+var textareaHTML = document.querySelector('.playable-html');
+var textareaCSS = document.querySelector('.playable-css');
+var reset = document.getElementById('reset');
+var htmlCode = textareaHTML.value;
+var cssCode = textareaCSS.value;
+
+function fillCode() {
+    editable.innerHTML = textareaCSS.value;
+    section.innerHTML = textareaHTML.value;
+}
+
+reset.addEventListener('click', function () {
+    textareaHTML.value = htmlCode;
+    textareaCSS.value = cssCode;
+    fillCode();
+});
+
+textareaHTML.addEventListener('input', fillCode);
+textareaCSS.addEventListener('input', fillCode);
+window.addEventListener('load', fillCode);
diff --git a/font-features/styles.css b/font-features/styles.css
@@ -0,0 +1,61 @@
+/* Some default styling for cookbook examples */
+/* 
+rgb(53,43,34)
+rgb(75,70,74)
+rgb(95,97,110)
+rgb(137,151,188)
+rgb(160,178,226)
+*/
+body { 
+    background-color: #fff;
+    color: #333;
+    font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
+    padding: 0;
+    margin: 0;
+}
+
+/* styles for the editor */
+
+.playable {
+    font-family: monospace;
+    display: block;
+    margin-bottom: 10px;
+    background-color: #F4F7F8;
+    border: none;
+    border-left: 6px solid #558ABB;
+    color: #4D4E53;
+    width: 90%;
+    max-width: 700px;
+    padding: 10px 10px 0px;
+    font-size: 90%;
+  }
+
+  .playable-css {
+    height: 80px;
+  }
+
+  .playable-html {
+    height: 160px;
+  }
+
+  .playable-buttons {
+    text-align: right;
+    width: 90%;
+    max-width: 700px;
+    padding: 5px 10px 5px 26px;
+    font-size: 100%;
+  }
+
+  .preview {
+    width: 90%;
+    max-width: 700px;
+    border: 1px solid #4D4E53;
+    border-radius: 2px;
+    padding: 10px 14px 10px 10px;
+    margin-bottom: 10px;
+  }
+
+  .preview input {
+    display: block;
+    margin: 5px;
+  }
