added fadeIn, fadeOut, util class, added fadeZoomIn, fixed search become abs problem

2 files changed, 74 insertions, 43 deletions

diff --git a/public/css/style.css b/public/css/style.css
index 647d4fea..a2eb8e24 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1 +1 @@
-html{--topBarHeight:10%}@font-face{font-family:hacked;src:url(/fonts/Hacked-KerX.ttf)}@font-face{font-family:smooth;src:url(/fonts/SmoothElegantRegular-ZLv3.ttf)}@font-face{font-family:liga;src:url(/fonts/LigaJetBrainsMonoNerdFont-Regular.ttf)}@font-face{font-family:big;src:url(/fonts/Big500-8MLOM.ttf)}@font-face{font-family:monoton;src:url(/fonts/Monoton.ttf)}@font-face{font-family:rocksalt;src:url(/fonts/RockSalt-Regular.ttf)}@font-face{font-family:audiowide;src:url(/fonts/audiowide.ttf)}*{box-sizing:border-box;font-family:liga;margin:0;padding:0;text-shadow:0 0 1px #000;-webkit-font-smoothing:antialiased;font-smooth:antialiased}@media (pointer:coarse),(pointer:none){*{transition:all .3s}}body{left:0;top:0;transition:background 1s ease-in-out}body::-webkit-scrollbar{display:none}@keyframes slideInTop{0%{transform:translateY(-300px)}to{transform:translateY(0)}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(30px)}80%{transform:translateY(-15px)}}@keyframes zoomIn{0%{transform:scale(.01)}85%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes zoomOut{0%{transform:scale(1)}to{transform:scale(.01)}}@keyframes reveal{0%{-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);-webkit-filter:blur(32px);-moz-filter:blur(32px);-o-filter:blur(32px);-ms-filter:blur(32px);filter:blur(32px);transform:scale(2)}}@keyframes shake{0%{transform:rotate(0deg)}25%{transform:rotate(.5deg)}50%{transform:rotate(0eg)}75%{transform:rotate(-.5deg)}to{transform:rotate(0deg)}}@keyframes background-pan{0%{background-position:0}to{background-position:-200%}}@keyframes fadeIn{0%{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;scale:.8}to{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";opacity:1;scale:1}}@keyframes fadeOut{to{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;scale:.8}}@keyframes scroll{0%{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";opacity:.8;scale:.75}to{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";opacity:1;scale:1}}.animate{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animate.animate--infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animate.animation--delay-1s{-webkit-animation-delay:1s;animation-delay:1s}.animate.animation--delay-p5s{animation-delay:.5s;-webkit-animation-duration:.5s;animation-duration:.5s}.animate.animation--delay-p3s{animation-delay:.3s}.animate.animation--delay-p3s,.animate.animation--fast{-webkit-animation-duration:.3s;animation-duration:.3s}.animate.animation--slow{-webkit-animation-duration:1s;animation-duration:1s}.animate.slideInTop{animation-name:slideInTop;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}.animate.bounce{-webkit-animation-name:bounce;animation-name:bounce}.animate.zoomIn{-webkit-animation-name:reveal;animation-name:zoomIn}.animate.zoomIn,.animate.zoomOut{-webkit-transition-timing-function:linear;transition-timing-function:linear}.animate.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}.animate.reveal{animation-duration:50ms;-webkit-animation-name:reveal;animation-name:reveal;-webkit-transition-timing-function:linear;transition-timing-function:linear}.animate.shake{-webkit-animation-name:shake;animation-name:shake}.js-tilt-glare{border-radius:18px;overflow:hidden}header{align-items:center;background:#000;background:rgba(0,0,0,.2);height:3em;justify-content:space-between;left:0;position:fixed;top:0;transition:all .3s;width:100%;z-index:1000}.navBar a{border-radius:8px;color:#f4e8c1;font-size:5mm;height:100%;margin-left:5mm;margin-right:5mm;padding-bottom:3mm;padding-top:3mm;position:relative;text-align:center;text-decoration:none;text-transform:capitalize}.navBar .hleft a{float:left}.navBar .hright a{float:right}.navBar a:after{background:grey;background:hsla(0,0%,50%,.2);border-radius:1mm;bottom:0;content:"";height:1mm;left:0;position:absolute;transform:scaleX(0);-webkit-transition:all .3s;transition:all .3s;width:100%}.navBar a:hover:after{transform:scaleX(1.1)}.navBar a:hover{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-transition:all 1s;transition:all 1s}.navBar a.active:after{background:grey;background:hsla(0,0%,50%,.9);border-radius:1mm;bottom:0;content:"";height:1mm;left:0;position:absolute;transform:scaleX(1);width:100%}#navBarHeader:active,#navBarHeader:hover,.navBar:active,.navBar:hover,header:active,header:hover{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:scale(1.005);transition:all .5s}#navBarHeader,.navBar,header{-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);transition:all .5s}.contents{height:100%;margin:0;padding:0;width:100%}section{position:relative}.wrapper{height:100vh;overflow-x:hidden;overflow-y:auto;perspective:10px}a:hover{cursor:pointer;font-size:5mm;font-weight:700;height:100%;margin-left:5mm;margin-right:5mm;padding-bottom:3mm;padding-top:3mm;position:relative;text-align:center;text-decoration:underline;-webkit-text-decoration-line:underline;text-decoration-line:underline;text-decoration-thickness:3px;text-transform:capitalize;text-underline-offset:1px;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-transition:all .5s;transition:all .5s}.blob{animation-fill-mode:forwards;background-color:#fff;background:-webkit-gradient(linear,left top,right top,from(#0ff),to(#9370db));background:linear-gradient(90deg,#0ff,#9370db);border-radius:50%;filter:blur(7vmax);-webkit-filter:blur(7vmax);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";height:15vmax;left:50%;min-height:75%;min-width:75%;opacity:.8;position:absolute;top:50%;translate:-50% -50%;width:20vmax;z-index:0}@keyframes rotate{0%{rotate:0deg}50%{scale:1 1.25}to{rotate:1turn}}.sep{height:5vh;width:5vh}.sblob{animation:rotate 20s infinite;aspect-ratio:1;background-color:#fff;background:linear-gradient(90deg,#0ff,#9370db);border-radius:50%;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter:blur(7vmax);-webkit-filter:blur(7vmax);height:15vmax;left:50%;opacity:.8;position:absolute;top:50%;translate:-50% -50%;width:20vmax;z-index:-1}
\ No newline at end of file
+html{--topBarHeight:10%}@font-face{font-family:hacked;src:url(/fonts/Hacked-KerX.ttf)}@font-face{font-family:smooth;src:url(/fonts/SmoothElegantRegular-ZLv3.ttf)}@font-face{font-family:liga;src:url(/fonts/LigaJetBrainsMonoNerdFont-Regular.ttf)}@font-face{font-family:big;src:url(/fonts/Big500-8MLOM.ttf)}@font-face{font-family:monoton;src:url(/fonts/Monoton.ttf)}@font-face{font-family:rocksalt;src:url(/fonts/RockSalt-Regular.ttf)}@font-face{font-family:audiowide;src:url(/fonts/audiowide.ttf)}*{box-sizing:border-box;font-family:liga;margin:0;padding:0;text-shadow:0 0 1px #000;-webkit-font-smoothing:antialiased;font-smooth:antialiased}@media (pointer:coarse),(pointer:none){*{transition:all .3s}}body{left:0;top:0;transition:background 1s ease-in-out}body::-webkit-scrollbar{display:none}@keyframes slideInTop{0%{transform:translateY(-300px)}to{transform:translateY(0)}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(30px)}80%{transform:translateY(-15px)}}@keyframes zoomIn{0%{scale:.01}65%{scale:1.05}to{position:relative;scale:1}}@keyframes zoomOut{0%{transform:scale(1)}to{transform:scale(.01)}}@keyframes fadeZoomIn{0%{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";opacity:.35;scale:1.15}to{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";opacity:1;scale:1}}@keyframes reveal{0%{-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);-webkit-filter:blur(32px);-moz-filter:blur(32px);-o-filter:blur(32px);-ms-filter:blur(32px);filter:blur(32px);transform:scale(2)}}@keyframes shake{0%{transform:rotate(0deg)}25%{transform:rotate(.5deg)}50%{transform:rotate(0eg)}75%{transform:rotate(-.5deg)}to{transform:rotate(0deg)}}@keyframes background-pan{0%{background-position:0}to{background-position:-200%}}@keyframes fadeIn{0%{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;scale:.8}to{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";opacity:1;scale:1}}@keyframes fadeOut{to{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;scale:.8}}@keyframes scroll{0%{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";opacity:.8;scale:.75}to{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";opacity:1;scale:1}}.animate{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animate.animate--infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animate.animation--delay-1s{-webkit-animation-delay:1s;animation-delay:1s}.animate.animation--delay-p5s{animation-delay:.5s;-webkit-animation-duration:.5s;animation-duration:.5s}.animate.animation--delay-p3s{animation-delay:.3s}.animate.animation--delay-p3s,.animate.animation--fast{-webkit-animation-duration:.3s;animation-duration:.3s}.animate.animation--slow{-webkit-animation-duration:1s;animation-duration:1s}.animate.slideInTop{animation-name:slideInTop;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}.animate.bounce{-webkit-animation-name:bounce;animation-name:bounce}.animate.zoomIn{-webkit-animation-name:reveal;animation-name:zoomIn}.animate.zoomIn,.animate.zoomOut{-webkit-transition-timing-function:linear;transition-timing-function:linear}.animate.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}.animate.reveal{animation-duration:.5s;-webkit-animation-name:reveal;animation-name:reveal;-webkit-transition-timing-function:linear;transition-timing-function:linear}.animate.shake{-webkit-animation-name:shake;animation-name:shake}.animate.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}.animate.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}.animate.fadeZoomIn{-webkit-animation-name:fadeZoomIn;animation-name:fadeZoomIn}.aniamte.persist{animation-fill-mode:forwards}.js-tilt-glare{border-radius:18px;overflow:hidden}header{align-items:center;background:#000;background:rgba(0,0,0,.2);height:3em;justify-content:space-between;left:0;position:fixed;top:0;transition:all .3s;width:100%;z-index:1000}.navBar a{border-radius:8px;color:#f4e8c1;font-size:5mm;height:100%;margin-left:5mm;margin-right:5mm;padding-bottom:3mm;padding-top:3mm;position:relative;text-align:center;text-decoration:none;text-transform:capitalize}.navBar .hleft a{float:left}.navBar .hright a{float:right}.navBar a:after{background:grey;background:hsla(0,0%,50%,.2);border-radius:1mm;bottom:0;content:"";height:1mm;left:0;position:absolute;transform:scaleX(0);-webkit-transition:all .3s;transition:all .3s;width:100%}.navBar a:hover:after{transform:scaleX(1.1)}.navBar a:hover{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-transition:all 1s;transition:all 1s}.navBar a.active:after{background:grey;background:hsla(0,0%,50%,.9);border-radius:1mm;bottom:0;content:"";height:1mm;left:0;position:absolute;transform:scaleX(1);width:100%}#navBarHeader:active,#navBarHeader:hover,.navBar:active,.navBar:hover,header:active,header:hover{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:scale(1.005);transition:all .5s}#navBarHeader,.navBar,header{-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);transition:all .5s}.contents{height:100%;margin:0;padding:0;width:100%}section{position:relative}.wrapper{height:100vh;overflow-x:hidden;overflow-y:auto;perspective:10px}a:hover{cursor:pointer;font-size:5mm;font-weight:700;height:100%;margin-left:5mm;margin-right:5mm;padding-bottom:3mm;padding-top:3mm;position:relative;text-align:center;text-decoration:underline;-webkit-text-decoration-line:underline;text-decoration-line:underline;text-decoration-thickness:3px;text-transform:capitalize;text-underline-offset:1px;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-transition:all .5s;transition:all .5s}.blob{animation-fill-mode:forwards;background-color:#fff;background:-webkit-gradient(linear,left top,right top,from(#0ff),to(#9370db));background:linear-gradient(90deg,#0ff,#9370db);border-radius:50%;filter:blur(7vmax);-webkit-filter:blur(7vmax);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";height:15vmax;left:50%;min-height:75%;min-width:75%;opacity:.8;position:absolute;top:50%;translate:-50% -50%;width:20vmax;z-index:0}@keyframes rotate{0%{rotate:0deg}50%{scale:1 1.25}to{rotate:1turn}}.sep{height:5vh;width:5vh}.sblob{animation:rotate 20s infinite;aspect-ratio:1;background-color:#fff;background:linear-gradient(90deg,#0ff,#9370db);border-radius:50%;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter:blur(7vmax);-webkit-filter:blur(7vmax);height:15vmax;left:50%;opacity:.8;position:absolute;top:50%;translate:-50% -50%;width:20vmax;z-index:-1}
\ No newline at end of file
diff --git a/src/css/style.css b/src/css/style.css
index 2a05f9f2..388e7848 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -65,59 +65,70 @@ body::-webkit-scrollbar {
 /* animation ============================================== */
 
 @keyframes slideInTop {
-from {
-    transform: translateY(-300px);
-}
-to {
-    transform: translateY(0);
-}
+    from {
+        transform: translateY(-300px);
+    }
+    to {
+        transform: translateY(0);
+    }
 }
 
 @keyframes bounce {
-0%, 20%, 50%, 80%, 100% {
-    transform: translateY(0px);
-}
-40% {
-    transform: translateY(30px);
-}
-80% {
-    transform: translateY(-15px);
-}
+    0%, 20%, 50%, 80%, 100% {
+        transform: translateY(0px);
+    }
+    40% {
+        transform: translateY(30px);
+    }
+    80% {
+        transform: translateY(-15px);
+    }
 }
 
 @keyframes zoomIn {
-0% {
-    transform: scale(0.01);
-}
-85% {
-    transform: scale(1.1);
-}
-100% {
-    transform: scale(1);
-}
+    0% {
+        scale: 0.01;
+    }
+    65% {
+        scale: 1.05;
+    }
+    100% {
+        scale: 1;
+        position: relative;
+    }
 }
 
 @keyframes zoomOut {
-0% {
-    transform: scale(1);
-}
-100% {
-    transform: scale(0.01);
-}
+    from {
+        transform: scale(1);
+    }
+    to {
+        transform: scale(0.01);
+    }
 }
 
-@keyframes reveal {
-0% {
-    -webkit-filter: blur(32px);
-    -moz-filter: blur(32px);
-    -o-filter: blur(32px);
-    -ms-filter: blur(32px);
-    filter: blur(32px);
-    -webkit-backdrop-filter: blur(32px);
-    backdrop-filter: blur(32px);
-    transform: scale(2);
+@keyframes fadeZoomIn {
+    from {
+        opacity: 0.35;
+        scale: 1.15;
+    }
+    to {
+        opacity: 1;
+        scale: 1;
+    }
 }
 
+@keyframes reveal {
+    from {
+        -webkit-filter: blur(32px);
+        -moz-filter: blur(32px);
+        -o-filter: blur(32px);
+        -ms-filter: blur(32px);
+        filter: blur(32px);
+        -webkit-backdrop-filter: blur(32px);
+        backdrop-filter: blur(32px);
+        transform: scale(2);
+    }
 }
 
 @keyframes shake {
@@ -169,6 +180,8 @@ to {
     }
 }
 
+
+
 /* animation: name duration timing-function delay iteration-count direction fill-mode; */
 
 
@@ -231,7 +244,6 @@ to {
     transition-timing-function: linear;
     -webkit-animation-name: reveal;
     animation-name: zoomIn;
-    animation-name: zoomIn;
 }
 
 .animate.zoomOut {
@@ -242,7 +254,7 @@ to {
 }
 
 .animate.reveal {
-    animation-duration: 50ms;
+    animation-duration: 500ms;
     -webkit-transition-timing-function: linear;
     transition-timing-function: linear;
     -webkit-animation-name: reveal;
@@ -254,6 +266,25 @@ to {
     animation-name: shake;
 }
 
+.animate.fadeIn {
+    -webkit-animation-name: fadeIn;
+    animation-name: fadeIn;
+}
+
+.animate.fadeOut {
+    -webkit-animation-name: fadeOut;
+    animation-name: fadeOut;
+}
+
+.animate.fadeZoomIn {
+    -webkit-animation-name: fadeZoomIn;
+    animation-name: fadeZoomIn;
+}
+
+.aniamte.persist {
+    animation-fill-mode: forwards;
+}
+
 /* transition */
 /* * {
     -webkit-transition: all 0.3s;