Moves oblique demo

jsnkuhn · Aug 16, 2021 · 02a3238 · 02a3238
1 parent 1892a18
commit 02a3238
Show file tree

Hide file tree

Showing 4 changed files with 160 additions and 0 deletions.
diff --git a/assets/playable.js b/assets/playable.js
@@ -0,0 +1,27 @@
+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;
+
+let editorHeading = document.createElement("h4");
+editorHeading.innerHTML = "Interactive editor";
+document.querySelector('body').insertBefore(editorHeading,textareaCSS);
+
+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/assets/styles.css b/assets/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;
+  }
diff --git a/variable-fonts/fonts/AmstelvarAlpha-VF.ttf b/variable-fonts/fonts/AmstelvarAlpha-VF.ttf
diff --git a/variable-fonts/oblique.html b/variable-fonts/oblique.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Variable fonts: oblique</title>
+    <link rel="stylesheet" href="../assets/styles.css" />
+    <style>
+
+
+
+    </style>
+
+    <style class="editable">
+
+    @font-face {
+    src: url('fonts/AmstelvarAlpha-VF.ttf');
+    font-family:'AmstelvarAlpha';
+    font-style: normal;
+    }
+
+    label {
+    font: 1rem monospace;
+    }
+
+
+    .sample {
+    font: 2rem 'AmstelvarAlpha', sans-serif;
+    font-variation-settings: 'slnt' 14;
+    font-style: oblique 23deg;
+    }
+    </style>
+  </head>
+
+  <body>
+    <section class="preview">
+
+          <div class="container">
+            <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>
+          </div>
+
+    </section>
+
+    <textarea class="playable playable-css" style="height: 280px;">
+@font-face {
+  src: url('fonts/AmstelvarAlpha-VF.ttf');
+  font-family:'AmstelvarAlpha';
+  font-style: normal;
+}
+
+label {
+  font: 1rem monospace;
+}
+
+.sample {
+  font: 2rem 'AmstelvarAlpha', sans-serif;
+  font-style: oblique 23deg;
+}
+    </textarea>
+
+    <textarea class="playable playable-html" style="height: 130px;">
+<div class="container">
+  <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>
+</div>
+    </textarea>
+
+    <div class="playable-buttons">
+      <input id="reset" type="button" value="Reset" />
+    </div>
+  </body>
+
+  <script src="../assets/playable.js"></script>
+</html>