diff --git a/app/assets/stylesheets/animation.css b/app/assets/stylesheets/animation.css index db7f9a493..5025176fa 100644 --- a/app/assets/stylesheets/animation.css +++ b/app/assets/stylesheets/animation.css @@ -18,3 +18,13 @@ 80% { transform: scale(90%); opacity: 1; } 100% { transform: scale(100%); } } + +@keyframes float-up-left { + 0% { transform: translate(10px, 40px); opacity: 0.1; } + 100% { transform: translate(0, 0); opacity: 1; } +} + +@keyframes float-up-right { + 0% { transform: translate(-10px, 50px); opacity: 0.1; } + 100% { transform: translate(0, 0); opacity: 1; } +} diff --git a/app/assets/stylesheets/splats.css b/app/assets/stylesheets/splats.css index f8031f55a..0dd687956 100644 --- a/app/assets/stylesheets/splats.css +++ b/app/assets/stylesheets/splats.css @@ -3,7 +3,7 @@ } .windshield { - background-color: var(--color-subtle); + background-color: var(--color-selected); border-radius: 2em; display: flex; flex-wrap: wrap; @@ -30,14 +30,16 @@ position: relative; .windshield & { - animation: splat 200ms normal forwards ease-in-out; + animation: float-up-left 400ms normal forwards ease-in-out; + color: var(--splat-color); &:nth-of-type(2n) { animation-delay: 50ms; + animation: float-up-right 400ms normal forwards ease-in-out; } &:nth-of-type(4n) { - animation-delay: 100ms; + animation-delay: 150ms; } [data-turbo-preview] & { animation: none; } @@ -52,42 +54,8 @@ } } -.splat__category { - aspect-ratio: 1; - background-color: var(--color-bg); - border: 0.5em solid var(--splat-color); - border-radius: 50%; - color: var(--splat-color); - display: flex; - font-size: 5cqi; - font-weight: 800; - inset: auto auto 3cqi 3cqi; - padding: 0.5em 1em; - place-items: center; - position: absolute; - - + & { - inset: auto auto 0 24cqi; - } -} - -.splat__date { - aspect-ratio: 1; - background-color: var(--color-bg); - border: 0.5em solid var(--splat-color); - border-radius: 50%; - color: var(--splat-color); - display: flex; - font-size: 5cqi; - font-weight: 800; - inset: 10cqi 5cqi auto auto; - padding: 0.5em 1em; - place-items: center; - position: absolute; -} - .splat__link { - color: var(--color-ink-reversed); + color: var(--splat-color); } .splat__svg { @@ -98,6 +66,47 @@ z-index: -1; } +.splat__bubble { + aspect-ratio: 1 / 0.96; + background-color: var(--color-bg); + background-image: radial-gradient(90% 90% at 50% 50%, #FFFFFF80 0%, #ffffff90 45%, var(--splat-color) 70%); + background-position: 0; + background-size: 100%; + block-size: 95%; + border: 1px solid var(--splat-color); + border-radius: 50%; + position: absolute; + transform: rotate(var(--splat-rotate)); + z-index: -1; + + &.splat__category { + inset: auto auto 3cqi 3cqi; + + + & { + inset: auto auto 0 24cqi; + } + } + + &.splat__date { + inset: 10cqi 5cqi auto auto; + } + + &.splat__meta { + color: var(--splat-color); + background-color: transparent; + block-size: auto; + display: flex; + font-size: 5cqi; + font-weight: 800; + line-height: 1; + padding: 1em; + place-items: center; + position: absolute; + scale: 1; + transform: none; + } +} + .splat__title { font-size: 10cqi; line-height: 1.2; diff --git a/app/views/splats/_splat.html.erb b/app/views/splats/_splat.html.erb index d754754a0..ecc93d427 100644 --- a/app/views/splats/_splat.html.erb +++ b/app/views/splats/_splat.html.erb @@ -1,11 +1,12 @@
- + + <%= link_to splat, class: "splat__link" do %>

<%= splat.title %>

<% end %> - + <% splat.categories.each do | category | %> - <%= link_to category.title, splats_path(category_id: category.id), class: "splat__category" %> + <%= link_to category.title, splats_path(category_id: category.id), class: "splat__bubble splat__meta splat__category" %> <% end %>
diff --git a/app/views/splats/index.html.erb b/app/views/splats/index.html.erb index 3b9beef92..7ff69108b 100644 --- a/app/views/splats/index.html.erb +++ b/app/views/splats/index.html.erb @@ -74,7 +74,8 @@
  • <%= link_to splat, class: "flex align-center gap flex-item-grow" do %>
    - + +
    <%= splat.title %> <% end %>