Animations 👀

css/master.css

@@ -194,6 +194,7 @@ body {
   -=-=-= IMAGE FULLSCREEN =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
 */
 .image-container {
+  padding: 0.5rem;
   width: calc(100vw - var(--space-medium));
   max-height: 69vh; height: auto;
 
@@ -345,10 +346,11 @@ body {
 
   outline: 0.5rem solid var(--bg);
 
-  transition: transform 0.15s cubic-bezier(.19,1,.22,1);
+  transition: transform 1s cubic-bezier(.19,1,.22,1), opacity 0.2s cubic-bezier(.19,1,.22,1);
 }
 .alert:hover {
   transform: scale(1.05);
+  cursor: pointer;
 }
 
 .alert-high {
@@ -399,6 +401,22 @@ a.btn {
   text-align: center;
 }
 
+.btn:where(input[type="file"])::file-selector-button {
+  margin: -0.5rem 0.5rem -0.5rem -0.5rem;
+  padding: 0.5rem;
+
+  display: inline-block;
+
+  font-size: 16px;
+
+  text-decoration: none;
+
+  background-color: var(--white);
+
+  border: none;
+  border-radius: var(--rad);
+}
+
 /*
   -=-=-= FLYOUT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
 */
@@ -440,6 +458,8 @@ a.btn {
 
   background: #15151588;
   backdrop-filter: blur(5px);
+
+  transition: opacity 2s cubic-bezier(.19,1,.22,1);
 }
 
 /*

scripts/alert.js

@@ -1,5 +1,10 @@
 let alertClose = document.querySelectorAll(".alert");
 
-function closeAlert(aaaa) {
+function closeAlert(gone) {
-  aaaa.closest(".alert").style.display="none";
+  gone.closest(".alert").style.transform="translateY(-10rem) scale(0.8)";
+  gone.closest(".alert").style.opacity="0";
+
+  setTimeout(function(){
+    gone.closest(".alert").style.display="none";
+  }, 200);
 };

scripts/flyout.js

@@ -14,6 +14,11 @@ $(document).ready(function() {
   hide.addEventListener("click", function(){
     document.querySelector(".flyout").style.transform= "translateX(-50%) scale(0.8)";
     document.querySelector(".flyout").style.bottom= "-20rem";
+
+    document.querySelector(".flyout-dim").style.opacity= "0";
+
+    setTimeout(function(){
       document.querySelector(".flyout-dim").style.display= "none";
+    }, 600);
   });
 });