From a03114db7de9d4c32b5a626ac797c118fe6e2df7 Mon Sep 17 00:00:00 2001
From: Jonah Lawrence <jonah@freshidea.com>
Date: Mon, 8 Aug 2022 20:52:15 -0600
Subject: [PATCH 1/2] feat(demo): add faq link

---
 src/demo/css/style.css | 29 ++++++++++++++++++++++++++++-
 src/demo/index.php     |  7 +++++++
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/demo/css/style.css b/src/demo/css/style.css
index fa633e18..8c90aeab 100644
--- a/src/demo/css/style.css
+++ b/src/demo/css/style.css
@@ -74,7 +74,6 @@ body {
 }
 
 @media only screen and (max-width: 1024px) {
-
   .properties,
   .output {
     width: 100%;
@@ -310,3 +309,31 @@ a.icon {
 .tooltip:disabled:before {
   content: "You must first input valid text.";
 }
+
+/* link underline effect */
+a.underline-hover {
+  position: relative;
+  text-decoration: none;
+  color: var(--text);
+  margin-top: 2em;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25em;
+}
+.underline-hover::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 0;
+  height: 1px;
+  background-color: var(--blue-light);
+  transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
+}
+@media (hover: hover) and (pointer: fine) {
+  .underline-hover:hover::before {
+    left: 0;
+    right: auto;
+    width: 100%;
+  }
+}
diff --git a/src/demo/index.php b/src/demo/index.php
index 1ad7a7d7..4afd7159 100644
--- a/src/demo/index.php
+++ b/src/demo/index.php
@@ -138,6 +138,13 @@ function gtag() {
                     Copy To Clipboard
                 </button>
             </div>
+
+            <a href="https://github.com/DenverCoder1/readme-typing-svg/blob/main/docs/faq.md" target="_blank" class="underline-hover faq">
+                <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 708c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40zm62.9-219.5a48.3 48.3 0 0 0-30.9 44.8V620c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8v-21.5c0-23.1 6.7-45.9 19.9-64.9 12.9-18.6 30.9-32.8 52.1-40.9 34-13.1 56-41.6 56-72.7 0-44.1-43.1-80-96-80s-96 35.9-96 80v7.6c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V420c0-39.3 17.2-76 48.4-103.3C430.4 290.4 470 276 512 276s81.6 14.5 111.6 40.7C654.8 344 672 380.7 672 420c0 57.8-38.1 109.8-97.1 132.5z"></path>
+                </svg>
+                Frequently Asked Questions
+            </a>
         </div>
     </div>
 

From 13d1ad23bdfa7348d09939c7a687b7ee5e79e549 Mon Sep 17 00:00:00 2001
From: Jonah Lawrence <jonah@freshidea.com>
Date: Mon, 8 Aug 2022 22:21:00 -0600
Subject: [PATCH 2/2] move link to bottom, change icon

---
 src/demo/css/style.css |  6 ++++
 src/demo/index.php     | 74 +++++++++++++++++++++++-------------------
 2 files changed, 46 insertions(+), 34 deletions(-)

diff --git a/src/demo/css/style.css b/src/demo/css/style.css
index 8c90aeab..bde0a621 100644
--- a/src/demo/css/style.css
+++ b/src/demo/css/style.css
@@ -262,6 +262,12 @@ a.icon {
   color: var(--blue-light);
 }
 
+.top-bottom-split {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
 /* tooltips */
 .tooltip {
   display: inline-flex;
diff --git a/src/demo/index.php b/src/demo/index.php
index 4afd7159..1f339ac6 100644
--- a/src/demo/index.php
+++ b/src/demo/index.php
@@ -106,45 +106,51 @@ function gtag() {
             </form>
         </div>
 
-        <div class="output">
-            <h2>Preview</h2>
-
-            <img alt="Readme Typing SVG" src="/?lines=The+five+boxing+wizards+jump+quickly" onload="this.classList.remove('loading')" onerror="this.classList.remove('loading')" />
-            <div class="loader">Loading...</div>
-
-            <label class="show-border">
-                <input type="checkbox">
-                Show border
-            </label>
-
-            <div>
-                <h2>Markdown</h2>
-                <div class="code-container md">
-                    <code></code>
+        <div class="output top-bottom-split">
+            <div class="top">
+                <h2>Preview</h2>
+
+                <img alt="Readme Typing SVG" src="/?lines=The+five+boxing+wizards+jump+quickly" onload="this.classList.remove('loading')" onerror="this.classList.remove('loading')" />
+                <div class="loader">Loading...</div>
+
+                <label class="show-border">
+                    <input type="checkbox">
+                    Show border
+                </label>
+
+                <div>
+                    <h2>Markdown</h2>
+                    <div class="code-container md">
+                        <code></code>
+                    </div>
+
+                    <button class="copy-button btn tooltip" onclick="clipboard.copy(this);" onmouseout="tooltip.reset(this);" disabled>
+                        Copy To Clipboard
+                    </button>
                 </div>
 
-                <button class="copy-button btn tooltip" onclick="clipboard.copy(this);" onmouseout="tooltip.reset(this);" disabled>
-                    Copy To Clipboard
-                </button>
-            </div>
+                <div>
+                    <h2>HTML</h2>
+                    <div class="code-container html">
+                        <code></code>
+                    </div>
 
-            <div>
-                <h2>HTML</h2>
-                <div class="code-container html">
-                    <code></code>
+                    <button class="copy-button btn tooltip" onclick="clipboard.copy(this);" onmouseout="tooltip.reset(this);" disabled>
+                        Copy To Clipboard
+                    </button>
                 </div>
-
-                <button class="copy-button btn tooltip" onclick="clipboard.copy(this);" onmouseout="tooltip.reset(this);" disabled>
-                    Copy To Clipboard
-                </button>
             </div>
-
-            <a href="https://github.com/DenverCoder1/readme-typing-svg/blob/main/docs/faq.md" target="_blank" class="underline-hover faq">
-                <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 708c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40zm62.9-219.5a48.3 48.3 0 0 0-30.9 44.8V620c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8v-21.5c0-23.1 6.7-45.9 19.9-64.9 12.9-18.6 30.9-32.8 52.1-40.9 34-13.1 56-41.6 56-72.7 0-44.1-43.1-80-96-80s-96 35.9-96 80v7.6c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V420c0-39.3 17.2-76 48.4-103.3C430.4 290.4 470 276 512 276s81.6 14.5 111.6 40.7C654.8 344 672 380.7 672 420c0 57.8-38.1 109.8-97.1 132.5z"></path>
-                </svg>
-                Frequently Asked Questions
-            </a>
+            <div class="bottom">
+                <a href="https://github.com/DenverCoder1/readme-typing-svg/blob/main/docs/faq.md" target="_blank" class="underline-hover faq">
+                    Frequently Asked Questions
+                    <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
+                        <g>
+                            <path fill="none" d="M0 0h24v24H0z"></path>
+                            <path d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v9l-3.794-3.793-5.999 6-1.414-1.414 5.999-6L12 3h9z"></path>
+                        </g>
+                    </svg>
+                </a>
+            </div>
         </div>
     </div>