Added notification for animations that use hover selector

kapoko · Dec 29, 2020 · 0e21e30 · 0e21e30
1 parent a407b3f
commit 0e21e30
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 2 deletions.
diff --git a/site/assets/js/main.js b/site/assets/js/main.js
@@ -1,15 +1,15 @@
 import domReady from './helpers/domReady';
 import { library, dom } from "@fortawesome/fontawesome-svg-core";
 import { faGithub } from "@fortawesome/free-brands-svg-icons";
-import { faDownload, faCode, faEllipsisH, faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";
+import { faDownload, faCode, faEllipsisH, faAngleLeft, faAngleRight, faInfo, faCircle } from "@fortawesome/free-solid-svg-icons";
 import { render } from 'github-buttons'
 
 import tippy from 'tippy.js';
 
 import '../../node_modules/tippy.js/dist/tippy.css'
 import '../sass/main.scss';
 
-library.add(faDownload, faGithub, faCode, faEllipsisH, faAngleLeft, faAngleRight);
+library.add(faDownload, faGithub, faCode, faEllipsisH, faAngleLeft, faAngleRight, faInfo, faCircle);
 dom.watch();
 
 domReady(() => {

diff --git a/site/content/burger/parallel.md b/site/content/burger/parallel.md
@@ -2,4 +2,5 @@
 title: Parallel
 class: parallel
 weight: 90
+hover: true
 ---
diff --git a/site/content/burger/shelf.md b/site/content/burger/shelf.md
@@ -2,4 +2,5 @@
 title: Shelf
 class: shelf
 weight: 20
+hover: true
 ---
diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html
@@ -25,6 +25,19 @@ <h2 class="is-size-5 is-size-3-desktop">{{ .Title }}</h2>
                     {{ end }}
                 </nav>
             </div>
+            {{ if .Params.hover }}
+                <article class="message is-warning">
+                    <div class="message-header is-justify-content-left">
+                        <span class="fa-stack mr-sm" style="vertical-align: top;">
+                            <i class="fas fa-circle fa-stack-2x has-text-body"></i>
+                            <i class="fas fa-info fa-stack-1x has-text-warning"></i>
+                        </span> Uses :hover
+                    </div>
+                    <div class="message-body">
+                        This animation uses the <strong>:hover selector</strong>, so keep in mind it behaves slightly different on touch devices.
+                    </div>
+                </article>
+            {{ end }}
             <p><strong>1.</strong> Install with npm or Yarn</p>
             {{ highlight "npm install delicious-hamburgers --save" "bash" "" }}
             {{ highlight "yarn add delicious-hamburgers" "bash" ""}}