From 9d51f4113e5a78a4ca2570770286d7da7f768adf Mon Sep 17 00:00:00 2001
From: Nishant Tharani <nishant.tharani@gmail.com>
Date: Sat, 17 Sep 2022 14:19:25 -0700
Subject: Added animation toggle option

---
 exampleSite/config.yaml                    | 3 +++
 layouts/partials/sections/header.html      | 2 +-
 layouts/partials/sections/hero/index.html  | 4 ++--
 layouts/partials/sections/hero/social.html | 2 +-
 static/css/index.css                       | 7 ++++---
 5 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index 261d12f..e441818 100644
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@@ -55,6 +55,9 @@ params:
   # Note the lack of "" in true, it should be of boolean type.
   useBootstrapCDN: false
 
+  # Whether the fade animations on the home page will be enabled
+  animate: true
+
   theme:
     disableThemeToggle: false
     # defaultTheme: "light" # dark
diff --git a/layouts/partials/sections/header.html b/layouts/partials/sections/header.html
index 6286bd6..4049717 100644
--- a/layouts/partials/sections/header.html
+++ b/layouts/partials/sections/header.html
@@ -24,7 +24,7 @@
 
 <!-- Navbar -->
 <header>
-    <nav class="pt-3 navbar navbar-expand-lg">
+    <nav class="pt-3 navbar navbar-expand-lg {{ if .Site.Params.animate }}animate{{ end }}">
         <div class="container-fluid mx-xs-2 mx-sm-5 mx-md-5 mx-lg-5">
             <!-- navbar brand -->
             <a class="navbar-brand primary-font text-wrap" href="{{ .Site.BaseURL | relURL }}">
diff --git a/layouts/partials/sections/hero/index.html b/layouts/partials/sections/hero/index.html
index c915674..2f3d35b 100644
--- a/layouts/partials/sections/hero/index.html
+++ b/layouts/partials/sections/hero/index.html
@@ -2,7 +2,7 @@
 <section id="hero" class="py-5 align-middle">
     <div class="container px-3 px-sm-5 px-md-5 px-lg-5 pt-lg-3">
         <div class="row">
-            <div class="col-sm-12 col-md-12 col-lg-8 content" id="primary-font">
+            <div class="col-sm-12 col-md-12 col-lg-8 content {{ if .Site.Params.animate }}animate{{ end }}" id="primary-font">
                 <span class="subtitle">
                     {{ .Site.Params.hero.intro }}
                 </span>
@@ -30,7 +30,7 @@
             </div>
             <div class="col-sm-12 col-md-12 col-lg-4">
                 <div class="row justify-content-center">
-                    <div class="col-sm-12 col-md-9 pt-5 image px-5 px-md-5 px-lg-0 text-center">
+                    <div class="col-sm-12 col-md-9 pt-5 image {{ if .Site.Params.animate }}animate{{ end }} px-5 px-md-5 px-lg-0 text-center">
                         <img src="{{ .Site.Params.hero.image }}" 
                             class="img-thumbnail mx-auto" 
                             alt=""
diff --git a/layouts/partials/sections/hero/social.html b/layouts/partials/sections/hero/social.html
index ab5e8ef..0297e59 100644
--- a/layouts/partials/sections/hero/social.html
+++ b/layouts/partials/sections/hero/social.html
@@ -1,4 +1,4 @@
-<span id="loading-icons" style="display: none;">
+<span id="loading-icons" style="display: {{ if .Site.Params.animate }}none{{else}}block{{ end }};">
     {{ range .Site.Params.hero.socialLinks.fontAwesomeIcons }}
     <span class="px-1">
         <a href="{{ .url }}" target="_blank" class="btn social-icon">
diff --git a/static/css/index.css b/static/css/index.css
index 611c3c9..85a062e 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -51,10 +51,11 @@
   }
 }
 
-header .navbar {
+header .navbar.animate {
     animation: fade-up 0.5s ease-in;
 }
 
+
 /* ToolTip */
 
 .tooltip {
@@ -75,7 +76,7 @@ header .navbar {
     line-height: 2rem;
     max-width: 100%;
 }
-#hero .content {
+#hero .content.animate {
     animation: fade-left 1s ease-out;
 }
 
@@ -108,7 +109,7 @@ header .navbar {
     opacity: 0.8;
 }
 
-#hero .image img {
+#hero .image.animate img {
     animation: fade-in 1s ease-out;
     box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
     transition: box-shadow 0.3s;
-- 
cgit v1.2.3