diff --git a/app/assets/images/burst.svg b/app/assets/images/burst.svg
new file mode 100644
index 000000000..dbc4481c4
--- /dev/null
+++ b/app/assets/images/burst.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css
index 1237e135f..bfc33fd2a 100644
--- a/app/assets/stylesheets/bubbles.css
+++ b/app/assets/stylesheets/bubbles.css
@@ -9,7 +9,7 @@
}
.windshield {
- --column-gap: 1cqi;
+ --column-gap: 2cqi;
--row-gap: 1cqi;
margin-block: clamp(var(--block-space), 3%, calc(var(--block-space) * 2));
@@ -351,14 +351,14 @@
}
.bubble__title {
- -webkit-line-clamp: var(--lines, 5);
+ -webkit-line-clamp: var(--lines, 4);
-webkit-box-orient: vertical;
display: -webkit-box;
font-size: 9cqi;
line-height: 1.2;
margin: auto;
- max-block-size: 75cqi;
- max-inline-size: 75cqi;
+ max-block-size: 60cqi;
+ max-inline-size: 60cqi;
overflow: hidden;
text-overflow: clip;
white-space: normal;
@@ -544,6 +544,27 @@
}
}
+.bubble__burst {
+ --bubble-border-width: 0.6rem;
+
+ block-size: 55cqi;
+ inline-size: 55cqi;
+ position: absolute;
+ inset: auto -2cqi -6cqi auto;
+ transition: transform 200ms ease-out;
+ z-index: 0;
+
+ .bubble__perma & {
+ --bubble-border-width: 0.3rem;
+ }
+
+ @media (hover: hover) {
+ .windshield .bubble:hover & {
+ transform: translate(-1rem, 1rem) rotate(20deg);
+ }
+ }
+}
+
.bubble__actions-container {
background-color: color(from var(--bubble-color) srgb r g b / 0.15);
margin-block-start: -0.7em;
diff --git a/app/views/bubbles/_bubble.html.erb b/app/views/bubbles/_bubble.html.erb
index 0f322488b..b647bbd51 100644
--- a/app/views/bubbles/_bubble.html.erb
+++ b/app/views/bubbles/_bubble.html.erb
@@ -32,6 +32,7 @@
<%= render "bubbles/assignments", bubble: bubble %>
<%= render "bubbles/boosts", bubble: bubble %>
+ <%= render "bubbles/burst", bubble: bubble %>
<%= render "bubbles/comments", bubble: bubble %>
<%= render "bubbles/date", bubble: bubble %>
<%= render "bubbles/image", bubble: bubble %>
diff --git a/app/views/bubbles/_burst.html.erb b/app/views/bubbles/_burst.html.erb
new file mode 100644
index 000000000..b41fe028d
--- /dev/null
+++ b/app/views/bubbles/_burst.html.erb
@@ -0,0 +1,27 @@
+<% if bubble.popped? %>
+
+
+