From 09dbadc39e49c31215bd1a1a86214409bc7ceab6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rune=20Bj=C3=B8rnera=CC=8As?= <rune@proweb.no>
Date: Thu, 24 Oct 2019 18:09:30 +0200
Subject: [PATCH] Tidy up presentation & add crossfade toggling for ligatures

---
 src/App.vue             | 58 ++++++++++++++++++++++++++++++++++-------
 src/styles/globals.scss | 26 ++++++++++++++++++
 2 files changed, 75 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 984c614..a91af26 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -124,7 +124,10 @@
         </el-col>
       </el-row>
     </div>
-    <div class="content">
+    <div
+      ref="ligatures"
+      class="content"
+    >
       <div
         id="ligatures"
         class="scroll-head"
@@ -132,7 +135,14 @@
       <el-row>
         <el-col>
           <h1 class="centre">
-            <em>Ligatures</em>
+            <em>Ligatures&nbsp;</em>
+            <el-button
+              class="normal"
+              type=""
+              @click="toggleLigatures"
+            >
+              <em>enabled</em>
+            </el-button>
           </h1>
         </el-col>
       </el-row>
@@ -144,13 +154,34 @@
           :xs="22"
           :sm="18"
         >
-          <h2>
-            --&gt; -| -&gt; -&gt;&gt; -&lt; -&lt;&lt; -~ .- .= :: := :&gt; :&lt; ;; != !== ?= ## ### ####
-            /= /== /&gt; /\ \/ __ && |- |-&gt; |= |=&gt; |&gt; $&gt; ++ +++ +&gt; =:= =!= == ===
-            ==&gt; =&gt; =&gt;&gt; =&lt;&lt; =/= &gt;- &gt;-&gt; &gt;: &gt;= &gt;=&gt; &gt;&gt;- &gt;&gt;= &lt;- &lt;-- &lt;-&gt; &lt;-&lt; &lt;!--
-            &lt;| &lt;|&gt; &lt;$ &lt;$&gt; &lt;+ &lt;+&gt; &lt;= &lt;== &lt;=&gt; &lt;=&lt; &lt;&gt; &lt;&lt;- &lt;&lt;= &lt;~ &lt;~&gt; &lt;~~ &lt;/ &lt;/&gt; ~-
-            ~@ ~&gt; ~~ ~~&gt;
-          </h2>
+          <div class="ligature-samples">
+            <h1 class="no-margin centre crossfade visible">
+              &lt;/ &lt;/&gt; /&gt; ~- -~ ~@
+              &lt;~ &lt;~&gt; &lt;~~ ~&gt; ~~ ~~&gt;<br>
+              &gt;= &lt;= &lt;!-- ## ### #### |- -| |-&gt; |= |=&gt;<br>
+              &gt;- &lt;- &lt;-- --&gt; -&gt; -&lt;
+              &gt;-&gt; &gt;&gt;- &lt;&lt;- &lt;-&gt; -&gt;&gt; -&lt;&lt; &lt;-&lt;<br>
+              ==&gt; =&gt; =/= !== != &lt;==
+              &gt;&gt;= =&gt;&gt; &gt;=&gt; &lt;=&gt; &lt;=&lt; &lt;&lt;= =&lt;&lt;<br>
+              .- .= =:= =!= == === :: := :&gt; :&lt; &gt;: ;;
+              &lt;| &lt;|&gt; |&gt; &lt;&gt;<br>
+              &lt;$ &lt;$&gt; $&gt; &lt;+ &lt;+&gt; +&gt;
+              ?= /= /== /\ \/ __ && ++ +++<br>
+            </h1>
+            <h1 class="no-margin centre crossfade hidden no-ligatures">
+              &lt;/ &lt;/&gt; /&gt; ~- -~ ~@
+              &lt;~ &lt;~&gt; &lt;~~ ~&gt; ~~ ~~&gt;<br>
+              &gt;= &lt;= &lt;!-- ## ### #### |- -| |-&gt; |= |=&gt;<br>
+              &gt;- &lt;- &lt;-- --&gt; -&gt; -&lt;
+              &gt;-&gt; &gt;&gt;- &lt;&lt;- &lt;-&gt; -&gt;&gt; -&lt;&lt; &lt;-&lt;<br>
+              ==&gt; =&gt; =/= !== != &lt;==
+              &gt;&gt;= =&gt;&gt; &gt;=&gt; &lt;=&gt; &lt;=&lt; &lt;&lt;= =&lt;&lt;<br>
+              .- .= =:= =!= == === :: := :&gt; :&lt; &gt;: ;;
+              &lt;| &lt;|&gt; |&gt; &lt;&gt;<br>
+              &lt;$ &lt;$&gt; $&gt; &lt;+ &lt;+&gt; +&gt;
+              ?= /= /== /\ \/ __ && ++ +++<br>
+            </h1>
+          </div>
         </el-col>
       </el-row>
     </div>
@@ -631,6 +662,15 @@ export default {
       setTimeout(() => {
         window.addEventListener('focus', this.celebrate(e.target))
       }, 1000)
+    },
+    toggleLigatures (e) {
+      e.target.innerText = e.target.innerText === 'enabled'
+        ? 'disabled'
+        : 'enabled'
+
+      this.$refs.ligatures.querySelectorAll('.crossfade').forEach(sample => {
+        sample.classList.toggle('hidden')
+      })
     }
   }
 }
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index a482ae1..a9d33ac 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -109,6 +109,14 @@ p {
       line-height: 0.6em;
     }
   }
+  &.normal {
+    position: relative;
+    top: -5px;
+    display: inline;
+    padding: 0.5em;
+    font-size: 0.5em;
+    line-height: 0.5em;
+  }
 }
 
 [data-theme=light] {
@@ -133,6 +141,10 @@ p {
   transition: background 1s;
 }
 
+.no-ligatures {
+  font-feature-settings: 'calt' 0;
+}
+
 .full-width {
   width: 100%;
 }
@@ -192,6 +204,20 @@ h1 {
   font-weight: normal;
 }
 
+.ligature-samples {
+  display: grid;
+}
+
+.crossfade {
+  grid-row: 1;
+  grid-column: 1;
+  transition: opacity 0.5s;
+}
+
+.hidden {
+  opacity: 0;
+}
+
 .medal {
   width: 100%;
   max-width: 150px;