Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/(app)/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export default async function AppLayout({ children }: { children: React.ReactNod
</Suspense>
)}
<div className="app-shell mx-auto flex w-full max-w-[1384px] justify-center gap-7 px-4 pb-20 sm:px-6 lg:pb-0">
<aside className="hidden w-60 shrink-0 pt-6 lg:block lg:pt-8">
<aside className="shell-aside-enter hidden w-60 shrink-0 pt-6 lg:block lg:pt-8">
<div className="sticky top-[72px]">
{/* Nav badges are decoration — stream them so a slow unread RPC never
blocks the nav from rendering. Fallback is the nav with no badges. */}
Expand Down
4 changes: 2 additions & 2 deletions app/(app)/profile/[username]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -400,7 +400,7 @@ async function PublicProfileView({ username }: { username: string }) {
</div>
<p className="mt-0.5 text-[15px] text-[var(--ink-muted)]">@{profile.username}</p>
{metaLine && <p className="mt-2 text-sm text-[var(--ink-muted)]">{metaLine}</p>}
<div className="mt-4 flex flex-wrap gap-x-6 gap-y-1">
<div className="profile-stat-enter mt-4 flex flex-wrap gap-x-6 gap-y-1">
<Stat value={Number(counts.posts)} label="posts" accent={Boolean(accentColor)} />
<Stat value={Number(counts.followers)} label="followers" accent={Boolean(accentColor)} href={`/profile/${profile.username}/followers`} />
<Stat value={Number(counts.following)} label="following" accent={Boolean(accentColor)} href={`/profile/${profile.username}/following`} />
Expand Down Expand Up @@ -690,7 +690,7 @@ export default async function ProfilePage({
</div>
<p className="mt-0.5 text-[15px] text-[var(--ink-muted)]">@{profile.username}</p>
{metaLine && <p className="mt-2 text-sm text-[var(--ink-muted)]">{metaLine}</p>}
<div className="mt-4 flex flex-wrap gap-x-6 gap-y-1">
<div className="profile-stat-enter mt-4 flex flex-wrap gap-x-6 gap-y-1">
<Stat value={Number(counts.posts)} label="posts" accent={!!theme} />
<Stat value={Number(counts.followers)} label="followers" accent={!!theme} href={`/profile/${profile.username}/followers`} />
<Stat value={Number(counts.following)} label="following" accent={!!theme} href={`/profile/${profile.username}/following`} />
Expand Down
29 changes: 29 additions & 0 deletions app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -584,6 +584,13 @@ summary {
background: var(--surface-raised);
box-shadow: var(--elev-raised);
}
.card-hover,
.card-hover-raise {
transition:
transform var(--dur-short) var(--ease-out),
border-color var(--dur-short) var(--ease-out),
box-shadow var(--dur-short) var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
.card-raised.card-hover:hover,
.card-hover-raise:hover {
Expand Down Expand Up @@ -649,6 +656,16 @@ summary {

} /* @layer components */

.shell-mobile-mark {
position: absolute;
top: 0;
left: calc(50% - 1rem);
width: 2rem;
height: 2px;
border-radius: 999px;
background: var(--blue);
}

.auth-shell {
min-height: 100dvh;
background: var(--canvas);
Expand Down Expand Up @@ -974,6 +991,18 @@ summary {
animation-delay: calc(var(--stagger-i, 0) * var(--stagger));
}

.empty-enter {
animation: page-enter var(--dur-med) var(--ease-out) both;
}

.shell-aside-enter {
animation: page-enter var(--dur-med) var(--ease-out) both;
}

.profile-stat-enter {
animation: page-enter var(--dur-med) var(--ease-out) 640ms both;
}

.label-glyph-draw[data-label="stuck"] .label-glyph-stroke,
.label-glyph-draw[data-label="building"] .label-glyph-stroke,
.label-glyph-draw[data-label="looking_for_team"] .label-glyph-stroke,
Expand Down
Loading
Loading