diff --git a/README.md b/README.md index 1bb8d5d..8f6f210 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Atjams -Share songs with friends over the [AT Protocol](https://atproto.com). +Quickly find and share songs on the [AT Protocol](https://atproto.com). Built with Elixir, Phoenix LiveView, [ATEx](https://hex.pm/packages/atex), and [Drinkup](https://hex.pm/packages/drinkup). diff --git a/assets/css/app.css b/assets/css/app.css index 1e20a35..20de330 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -200,6 +200,9 @@ } .atj-brand-mark { + --atj-wave-left: 52%; + --atj-wave-width: 38%; + --atj-wave-glow: 4px; border-radius: 0.85rem; border-color: color-mix(in oklch, var(--atj-signal) 38%, var(--atj-line)); box-shadow: inset 0 1px 0 color-mix(in oklch, var(--atj-bone) 7%, transparent), 0 0 24px color-mix(in oklch, var(--atj-signal) 11%, transparent); @@ -214,7 +217,33 @@ box-shadow: 0 0 0 5px color-mix(in oklch, var(--atj-signal) 12%, transparent); } + .atj-brand-mark::after, + .atj-room-mark::after, + .atj-disc-mark::after { + content: ""; + position: absolute; + z-index: 1; + left: var(--atj-wave-left, 50%); + top: var(--atj-wave-top, 46%); + width: var(--atj-wave-width, 42%); + height: var(--atj-wave-height, 26%); + transform: translate(-50%, -50%); + border-radius: 999px; + background: var(--atj-bone); + clip-path: polygon( + 0 56%, 10% 56%, 15% 34%, 22% 78%, 30% 78%, 36% 14%, + 44% 92%, 52% 92%, 58% 38%, 65% 68%, 73% 68%, 78% 48%, + 100% 48%, 100% 62%, 84% 62%, 79% 82%, 69% 82%, 63% 52%, + 57% 100%, 39% 100%, 33% 34%, 27% 92%, 17% 92%, 11% 66%, 0 66% + ); + opacity: 0.95; + filter: drop-shadow(0 0 var(--atj-wave-glow, 5px) color-mix(in oklch, var(--atj-bone) 22%, transparent)); + } + .atj-room-mark { + --atj-wave-width: 40%; + --atj-wave-height: 22%; + --atj-wave-glow: 8px; border-radius: 1.15rem; box-shadow: inset 0 1px 0 color-mix(in oklch, var(--atj-bone) 6%, transparent); } @@ -234,6 +263,12 @@ flex-shrink: 0; } + .atj-disc-mark { + --atj-wave-width: 42%; + --atj-wave-height: 24%; + --atj-wave-glow: 4px; + } + .atj-disc-mark::before { content: ""; position: absolute; diff --git a/lib/atjams_web/components/layouts.ex b/lib/atjams_web/components/layouts.ex index dc98097..49aa8d1 100644 --- a/lib/atjams_web/components/layouts.ex +++ b/lib/atjams_web/components/layouts.ex @@ -41,7 +41,7 @@ defmodule AtjamsWeb.Layouts do
atjams
@@ -49,9 +49,6 @@ defmodule AtjamsWeb.Layouts do