From 66c8573bd24c3c853644be989b86ed4ad517fcfd Mon Sep 17 00:00:00 2001
From: Gabriel Arazas <foodogsquared@foodogsquared.one>
Date: Mon, 20 Feb 2023 19:04:13 +0800
Subject: [PATCH] Update logo thingy

---
 assets/scss/extend.scss | 42 +++++++++++++++++++++++++++++++++--------
 1 file changed, 34 insertions(+), 8 deletions(-)

diff --git a/assets/scss/extend.scss b/assets/scss/extend.scss
index 90f1b8b..259f24c 100644
--- a/assets/scss/extend.scss
+++ b/assets/scss/extend.scss
@@ -1,3 +1,6 @@
+// This is copied from https://stackoverflow.com/a/19721069.
+$tooltip-size: 5em
+
 :root {
   --accented-border-style: var(--content-color) solid .1vw;
   --content-color: var(--base05);
@@ -65,22 +68,45 @@ article.post {
 
 // Custom layouts
 #logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: $tooltip-size;
+  width: $tooltip-size;
+
   svg {
     --size: 4em;
     height: var(--size);
     width: var(--size);
     fill: var(--base0C);
-
-    &:hover {
-      fill: var(--base08);
-      animation: rainbow 2s ease infinite;
-    }
+    position: relative;
+    animation: rainbow 3s infinite, pulse 2s alternate infinite, bounce 0.6s ease-in-out alternate infinite;
   }
 }
 
+@keyframes bounce {
+  $baseSize: 3em;
+  $baseRotation: 20deg;
+  from {
+    transform: rotate($baseRotation) translateX($baseSize) translateY(-#{$baseSize / 5});
+  }
+  to {
+    transform: rotate(-$baseRotation) translateX(-$baseSize) translateY(-#{$baseSize / 5});
+  }
+}
+
+@keyframes pulse {
+  from { width: #{$tooltip-size / 2}; }
+  to { width: #{$tooltip-size}; }
+}
+
 @keyframes rainbow {
-  @for $i from 0 through 8 {
-    #{$i * 10}% { fill: var(--base#{decToHex($i + 7)}); }
+  $colorOrder: "07" "08" "09" "0A" "0B" "0C" "0D" "0E" "0F";
+  $divide: floor(100 / length($colorOrder));
+  @for $i from 1 to length($colorOrder) {
+    #{$i * $divide}% {
+      fill: var(--base#{nth($colorOrder, $i)});
+    }
   }
 }
 
@@ -93,7 +119,7 @@ article.post {
     font-size: 0.8em;
     padding: 0.5em;
     position: absolute;
-    transform: translateY(var(--translate-y, -50%)) scale(var(--scale));
+    transform: translateY(var(--translate-y, -#{round($tooltip-size / 2)})) scale(var(--scale));
     transform-origin: bottom center;
     width: max-content;
     max-width: 100%;