Refactor so we can set the values in CSS depending on the context

app/assets/stylesheets/bubbles.css

@@ -1,5 +1,9 @@
 :root {
-  --bubble-size: 30vw;
+  --bubble-size-one: 14cqi;
+  --bubble-size-two: 16cqi;
+  --bubble-size-three: 18cqi;
+  --bubble-size-four: 20cqi;
+  --bubble-size-five: 22cqi;
   --bubble-shift: 10deg;
 }
 

app/assets/stylesheets/projects.css

@@ -10,7 +10,6 @@
 
 .project__windshield {
   --border-radius: 1.5em;
-  --bubble-size: 17cqi;
   --column-gap: 1cqi;
   --row-gap: 1cqi;
 

app/helpers/bubbles_helper.rb

@@ -1,7 +1,5 @@
 module BubblesHelper
   BUBBLE_ROTATION = %w[ 90 80 75 60 45 35 25 5 -45 -40 -75 ]
-  BUBBLE_SIZE = [ 14, 16, 18, 20, 22 ]
-  MIN_THRESHOLD = 7
 
   def bubble_rotation(bubble)
     value = BUBBLE_ROTATION[Zlib.crc32(bubble.to_param) % BUBBLE_ROTATION.size]
@@ -10,9 +8,15 @@ module BubblesHelper
   end
 
   def bubble_size(bubble)
-    total = MIN_THRESHOLD + bubble.boosts.size + bubble.comments.size
-    value = BUBBLE_SIZE.min_by { |size| (size - total).abs }
+    activity = bubble.boosts.size + bubble.comments.size
+    rank = case activity
+            when 0..5   then 'one'
+            when 6..10  then 'two'
+            when 11..25 then 'three'
+            when 26..50 then 'four'
+            else             'five'
+            end
 
-    "--bubble-size: #{value}cqi;"
+    "--bubble-size: var(--bubble-size-#{rank});"
   end
 end

app/views/projects/index.html.erb

@@ -19,7 +19,7 @@
     <li class="project flex flex-column txt-align-center gap-half max-width">
       <div class="project__windshield position-relative flex flex-wrap gap justify-center align-center border-radius border"  style="view-transition-name: windshield_<%= project.id %>">
         <% project.bubbles.left_joins(:comments, :boosts).group(:id).order(Arel.sql("COUNT(comments.id) + COUNT(boosts.id) DESC")).limit(10).each do |bubble| %>
-          <div class="bubble" style="--bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) %>">
+          <div class="bubble" style="--bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) %> <%= bubble_size(bubble) %>">
             <svg class="bubble__svg" style="fill: <%= bubble.color %>; stroke: <%= bubble.color %>;" viewBox="0 0 990 990" xmlns="http://www.w3.org/2000/svg">
               <path d="m0 0h990v990h-990z" fill="none" stroke="none" />
               <path d="m391.65 879.47c-110.52-15.95-212.21-91.86-255.92-191.23-66.78-143.65-41.62-347.61 48.08-481.17 368.33-516.3 1252.97 520.2 451.03 660.78-44.07 8.84-88.98 13.49-133.01 15.68-36.69 2-73.37 1.91-109.99-4.03z"/>