From cc9419af1b1caa9d45330e5fd6570cf3de85148f Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Tue, 11 Feb 2025 15:03:28 -0600
Subject: [PATCH] Remove bubble animation, tighten up boosts bubble

---
 app/assets/stylesheets/animation.css |  8 --------
 app/assets/stylesheets/bubbles.css   | 13 +++++--------
 2 files changed, 5 insertions(+), 16 deletions(-)

diff --git a/app/assets/stylesheets/animation.css b/app/assets/stylesheets/animation.css
index 3f2af511c..2200ce864 100644
--- a/app/assets/stylesheets/animation.css
+++ b/app/assets/stylesheets/animation.css
@@ -4,14 +4,6 @@
 }
 
 /* Keyframes */
-@keyframes bubble-up {
-  0% { transform: translate(0, 0); }
-  25% { transform: translate(0.5em, -2em); }
-  50% { transform: translate(0, -4em); opacity: 0.66; }
-  75% { transform: translate(0.5em, -6em); opacity: 0.33; }
-  100% { transform: translate(0, -8em); opacity: 0; }
-}
-
 @keyframes float-up-left {
   0% { transform: translate(10px, 20px); }
   100% { transform: translate(0, 0); }
diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css
index 8b56f5ccb..f5e7affa9 100644
--- a/app/assets/stylesheets/bubbles.css
+++ b/app/assets/stylesheets/bubbles.css
@@ -77,12 +77,12 @@
   &.bubble__boosts {
     --rotation: 45deg;
 
-    aspect-ratio: 6/9;
+    aspect-ratio: 5/7;
     border-radius: var(--bubble-shape);
     display: flex;
-    font-size: 6cqi;
+    font-size: 5cqi;
     inline-size: min-content;
-    inset: 70cqi 7cqi auto auto;
+    inset: 70cqi 5cqi auto auto;
     min-inline-size: 4.5ch;
     padding: 0;
     place-items: center;
@@ -98,13 +98,14 @@
       --btn-border-radius: 50%;
       --btn-color: var(--color-ink-reversed);
       --btn-size: 0.5em;
-      --btn-padding: 0.3em 0.5em;
+      --btn-padding: 0.3em 0.5em 0.4em;
 
       font-weight: 800;
     }
 
     .boost__input {
       color: var(--bubble-color);
+      font-size: inherit;
       font-weight: 800;
       padding: 0;
       text-align: center;
@@ -114,10 +115,6 @@
       }
     }
 
-    &.boosting {
-      animation: bubble-up 500ms normal forwards ease-out;
-    }
-
     @media (hover: hover) {
       .windshield .bubble:hover & {
         transform: rotate(calc(var(--rotation) + var(--bubble-shift) * 1)) translate(0rem, 1rem);