From 8e8e51257d4901f5c558531d24438adda654d6ad Mon Sep 17 00:00:00 2001
From: Darshan Baral <darshanbaral@gmail.com>
Date: Fri, 17 Apr 2020 12:10:52 -0700
Subject: Checking alternative animation

---
 layouts/index.html          | 47 +++++++++++++++++++++++++++++++++++++++++----
 layouts/partials/intro.html | 37 ++++++++++++++++++++++++++---------
 static/css/main.css         |  2 +-
 3 files changed, 72 insertions(+), 14 deletions(-)

diff --git a/layouts/index.html b/layouts/index.html
index 9f6c1d0..84625a1 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,13 +1,41 @@
 {{ define "main" }}
 <div
-  style="height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;"
+  style="
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  "
 >
   {{ partial "intro.html" . }}
   <div
-    style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 80vw; height: 80vw; min-width: 250px; min-height: 250px; max-width: 400px; max-height: 400px;"
+    style="
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 80vw;
+      height: 80vw;
+      min-width: 250px;
+      min-height: 250px;
+      max-width: 400px;
+      max-height: 400px;
+    "
   >
     <div
-      style="position: absolute; display: none; opacity: 0; transition: all 0.8s ease-in-out 0s; padding: 5px; max-width: 400px; max-height: 400px; box-sizing: border-box;"
+      style="
+        position: absolute;
+        opacity: 0;
+        padding: 25px;
+        min-width: 250px;
+        min-height: 250px;
+        max-width: 400px;
+        max-height: 400px;
+        box-sizing: border-box;
+        transition: opacity 0.8s;
+        z-index: 10;
+      "
       class="more-info"
     >
       <p style="margin: 0 0 0.25em 0; font-size: 0.9em; text-align: center;">
@@ -15,7 +43,18 @@
       </p>
       {{ partial "social.html" . }}
     </div>
-    <div class="profile-image" style="background-color: inherit; display: block; opacity: 1; visibility: visible; transition: all 0.8s ease-in-out 0s;">
+    <div
+      class="profile-image"
+      style="
+        background-color: inherit;
+        opacity: 1;
+        visibility: visible;
+        transition: opacity 0.8s, width 0.8s, transform 0.8s;
+        cursor: pointer;
+        width: 100%;
+        transform: none;
+      "
+    >
       <img
         src="{{ .Site.Params.image | relURL }}"
         style="width: 100%; height: 100%; border-radius: 100%;"
diff --git a/layouts/partials/intro.html b/layouts/partials/intro.html
index e875e9d..dc4f563 100644
--- a/layouts/partials/intro.html
+++ b/layouts/partials/intro.html
@@ -1,9 +1,26 @@
 <div
-  style="font-size: 2.2em; margin: 0 0 0.5em 0; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; color: var(--primaryColor); text-align: center; line-height: 1.25em;"
+  style="
+    font-size: 2.2em;
+    margin: 0 0 0.5em 0;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    color: var(--primaryColor);
+    text-align: center;
+    line-height: 1.25em;
+  "
 >
   {{.Site.Params.title}}
   <div
-    style="width: 20px; line-height: 0; padding: 1px 7px; margin-left: 0.35em; border-radius: 7px;"
+    style="
+      width: 20px;
+      line-height: 0;
+      padding: 1px 7px;
+      margin-left: 0.35em;
+      border-radius: 7px;
+    "
     class="show-more-info chevron-hz"
     onclick="showInfo()"
   >
@@ -20,18 +37,20 @@
 
     if (showMoreInfo.classList.contains("chevron-hz")) {
       showMoreInfo.classList.remove("chevron-hz");
-      profileImage.style.opacity = "0";
-      profileImage.style.visibility = "hidden";
       chevron.style.transform = "rotate(90deg)";
-      moreInfo.style.display = "block";
+      profileImage.style.opacity = "0";
+      profileImage.style.width = "0";
+      profileImage.style.transform = "rotate(180deg)";
+      moreInfo.style.visibility = "visible";
       moreInfo.style.opacity = "1";
     } else {
       showMoreInfo.classList.add("chevron-hz");
-      profileImage.style.display = "block";
-      profileImage.style.opacity = "1";
+      chevron.style.transform = "none";
       profileImage.style.visibility = "visible";
-      chevron.style.transform = "rotate(0deg)";
-      moreInfo.style.display = "none";
+      profileImage.style.width = "100%";
+      profileImage.style.transform = "none";
+      profileImage.style.opacity = "1";
+      moreInfo.style.visibility = "hidden";
       moreInfo.style.opacity = "0";
     }
   };
diff --git a/static/css/main.css b/static/css/main.css
index a0d46b2..ba43b2f 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -245,7 +245,7 @@ li.page-item:nth-child(6) {
 
 .fa-chevron-right:hover {
   animation: none;
-  transition: all 0.5s;
+  transition: all 0.8s;
 }
 
 .show-more-info {
-- 
cgit v1.2.3