Checking alternative animation

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 {