diff --git a/app/assets/images/blob.svg b/app/assets/images/blob.svg new file mode 100644 index 000000000..04cabc6cd --- /dev/null +++ b/app/assets/images/blob.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/stylesheets/splats.css b/app/assets/stylesheets/splats.css index d189e72b9..86f4747f2 100644 --- a/app/assets/stylesheets/splats.css +++ b/app/assets/stylesheets/splats.css @@ -31,7 +31,6 @@ .windshield & { animation: float-up-left 400ms normal forwards ease-in-out; - color: var(--splat-color); &:nth-of-type(2n) { animation-delay: 50ms; @@ -55,25 +54,24 @@ } .splat__link { - color: var(--splat-color); + color: var(--color-ink-reversed); } .splat__svg { fill: var(--splat-color); position: absolute; - scale: 120%; + scale: 1; transform: rotate(var(--splat-rotate)); z-index: -1; } .splat__bubble { aspect-ratio: 1 / 0.96; - background-color: var(--color-bg); - background-image: radial-gradient(90% 90% at 50% 50%, #FFFFFFFF 0%, #ffffff90 45%, var(--splat-color) 70%); + background-color: var(--splat-color); background-position: 0; background-size: 100%; block-size: 95%; - border: 1px solid var(--splat-color); + border: 4px solid var(--splat-color); border-radius: 50%; position: absolute; transform: rotate(var(--splat-rotate)); @@ -84,7 +82,6 @@ } &.splat__category { - aspect-ratio: unset; inset: auto auto 3cqi 3cqi; + & { @@ -101,9 +98,9 @@ } &.splat__meta { - color: var(--splat-color); - background-color: transparent; + background-color: var(--color-bg); block-size: auto; + color: var(--splat-color); display: flex; font-size: 5cqi; font-weight: 800; diff --git a/app/views/splats/_splat.html.erb b/app/views/splats/_splat.html.erb index 7ff9252c6..a71881729 100644 --- a/app/views/splats/_splat.html.erb +++ b/app/views/splats/_splat.html.erb @@ -1,6 +1,7 @@ -
+
- + + <%= link_to splat, class: "splat__link" do %>

<%= splat.title %>

<% end %>