Share songs with friends on atproto
atjams.pdewey.com
elixir
atproto
music
polish listening room styling details
Patrick Dewey
(May 23, 2026, 10:44 PM EDT)
a2092efd
355da3fe
+7
-10
+4
-4
assets/css/app.css
+4
-4
assets/css/app.css
···
145
145
repeating-radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--atj-lamp) 20%, transparent) 0 1px, transparent 1px 6px),
146
146
radial-gradient(circle at 36% 28%, color-mix(in oklch, var(--atj-lamp) 50%, transparent), transparent 30%),
147
147
linear-gradient(135deg, var(--atj-espresso), var(--atj-walnut));
148
-
box-shadow: inset 0 0 22px color-mix(in oklch, black 38%, transparent), 0 0 24px color-mix(in oklch, var(--atj-amber) 15%, transparent);
148
+
box-shadow: inset 0 0 22px color-mix(in oklch, var(--atj-wall-deep) 72%, transparent), 0 0 24px color-mix(in oklch, var(--atj-amber) 15%, transparent);
149
149
}
150
150
151
151
.atj-disc-mark::after {
···
187
187
background:
188
188
linear-gradient(180deg, color-mix(in oklch, var(--atj-panel-raised) 82%, transparent), color-mix(in oklch, var(--atj-panel) 94%, transparent)),
189
189
repeating-linear-gradient(135deg, color-mix(in oklch, var(--atj-bone) 2.5%, transparent) 0 1px, transparent 1px 9px);
190
-
box-shadow: inset 0 1px 0 color-mix(in oklch, var(--atj-bone) 5%, transparent), 0 18px 50px color-mix(in oklch, black 26%, transparent);
190
+
box-shadow: inset 0 1px 0 color-mix(in oklch, var(--atj-bone) 5%, transparent), 0 18px 50px color-mix(in oklch, var(--atj-wall-deep) 54%, transparent);
191
191
}
192
192
193
193
.atj-sleeve {
···
366
366
border: 1px solid color-mix(in oklch, var(--atj-line) 88%, transparent);
367
367
border-radius: 1rem;
368
368
background: var(--atj-panel-raised);
369
-
box-shadow: 0 18px 40px color-mix(in oklch, black 42%, transparent);
369
+
box-shadow: 0 18px 40px color-mix(in oklch, var(--atj-wall-deep) 70%, transparent);
370
370
padding: 0.35rem;
371
371
}
372
372
···
452
452
background: var(--atj-panel-raised);
453
453
color: var(--atj-bone);
454
454
padding: 0.9rem;
455
-
box-shadow: 0 18px 44px color-mix(in oklch, black 34%, transparent);
455
+
box-shadow: 0 18px 44px color-mix(in oklch, var(--atj-wall-deep) 62%, transparent);
456
456
}
457
457
458
458
.atj-flash-error {
+2
-5
lib/atjams_web/components/feed_components.ex
+2
-5
lib/atjams_web/components/feed_components.ex
···
184
184
href={UrlSafety.safe_href(pill.url)}
185
185
target="_blank"
186
186
rel="noopener noreferrer"
187
-
class={[
188
-
"inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium border transition-colors",
189
-
pill.classes
190
-
]}
187
+
class={pill.classes}
191
188
title={"Open in #{pill.label}"}
192
189
>
193
190
{pill.label}
···
275
272
class="atj-track group block rounded-2xl p-3 transition-colors"
276
273
>
277
274
<div class="flex items-start gap-3">
278
-
<div class="atj-disc-mark atj-spin-slow inline-flex size-11 flex-shrink-0 items-center justify-center rounded-full transition-colors">
275
+
<div class="atj-disc-mark inline-flex size-11 flex-shrink-0 items-center justify-center rounded-full transition-colors">
279
276
<.icon name="hero-musical-note" class="size-4 text-primary" />
280
277
</div>
281
278
<div class="flex-1 min-w-0">
+1
-1
lib/atjams_web/components/layouts.ex
+1
-1
lib/atjams_web/components/layouts.ex
···
35
35
<div class="mx-auto flex min-h-16 max-w-5xl items-center gap-4">
36
36
<div class="flex-1">
37
37
<.link navigate={~p"/"} class="flex w-fit items-center gap-3">
38
-
<div class="atj-brand-mark atj-spin-slow grid size-10 place-items-center rounded-full">
38
+
<div class="atj-brand-mark grid size-10 place-items-center rounded-full">
39
39
<span class="sr-only">atjams</span>
40
40
</div>
41
41
<div class="leading-none">