From 1d272eac38ebb310e360891a3a717447a1d0547a Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 26 Oct 2021 17:23:42 +0200
Subject: fix(animation): add fade-in animation to project details on large vw

The animation was not triggered because I forgot to add the class in
the right place.
I also increase a little the animation timing.
---
 htdocs/src/js/app.js                  | 1 +
 htdocs/src/scss/base/_animations.scss | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

(limited to 'htdocs/src')

diff --git a/htdocs/src/js/app.js b/htdocs/src/js/app.js
index afc766b..b605583 100644
--- a/htdocs/src/js/app.js
+++ b/htdocs/src/js/app.js
@@ -185,6 +185,7 @@ function getProjectDetails(project) {
   title.classList.add('project-details__title');
   title.textContent = `About ${project.name}`;
   details.classList.add('project-details');
+  if (!isSmallVw()) details.classList.add('fade-in');
   details.replaceChildren(title, description, ...techList, ...reposList);
 
   return details;
diff --git a/htdocs/src/scss/base/_animations.scss b/htdocs/src/scss/base/_animations.scss
index 6da56b2..a2df8ab 100644
--- a/htdocs/src/scss/base/_animations.scss
+++ b/htdocs/src/scss/base/_animations.scss
@@ -65,11 +65,11 @@
 }
 
 .fade-in {
-  animation: fadeIn 0.8s;
+  animation: fadeIn 1s;
 }
 
 .fade-out {
-  animation: fadeOut 0.8s;
+  animation: fadeOut 1s;
 }
 
 .slide-in--left {
-- 
cgit v1.2.3