feat(demo): add the FAQ link to the demo site (#122)

Author: DenverCoder1

src/demo/css/style.css

@@ -74,7 +74,6 @@ body {
 }
 
 @media only screen and (max-width: 1024px) {
-
   .properties,
   .output {
     width: 100%;
@@ -263,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;
@@ -310,3 +315,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%;
+  }
+}

src/demo/index.php

@@ -106,37 +106,50 @@ 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>
+            <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>