diff options
author | Guru Sabarish <gurusabarisha@gmail.com> | 2022-09-25 19:56:12 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-09-25 19:56:12 +0300 |
commit | fb91257cfb248ccb3a3d68ef5208bae3d139fdc7 (patch) | |
tree | 4c946017af17421de11325f97a2fa7fbe79ca258 | |
parent | a0b3ff5ff657482e411822a2658030e445d78038 (diff) | |
parent | 9d51f4113e5a78a4ca2570770286d7da7f768adf (diff) |
Merge pull request #74 from NishantTharani/animation-toggle
Added animation toggle option by @NishantTharani
-rw-r--r-- | exampleSite/config.yaml | 3 | ||||
-rw-r--r-- | layouts/partials/sections/header.html | 2 | ||||
-rw-r--r-- | layouts/partials/sections/hero/index.html | 4 | ||||
-rw-r--r-- | layouts/partials/sections/hero/social.html | 2 | ||||
-rw-r--r-- | 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;
|