Refine dashboard hero, mobile nav, animations and touch polish
- Stack the /me dashboard hero (avatar + info) on small screens instead of crowding them side by side; center the avatar and info on mobile - Respect prefers-reduced-motion in the Reveal scroll animation - Make the desktop pitch-in (NavDropdown) and mobile menu more consistent; give the mobile menu a max-height with overscroll containment so long navs scroll instead of overflowing on small phones - Add safe-area insets for notched devices on header, nav and footer - Polish whole-link content-cards (community tiles) with hover lift and a visible focus ring - Enforce a comfortable min touch height on all .btn buttons
This commit is contained in:
1 parent
c17ef0e7ab
commit
d4677972cd
4 files changed
+38
-8
No files matched your search
@@ -255,7 +255,7 @@ export default async function MePage({
|
||||
|
||||
<Reveal>
|
||||
<SurfaceCard
|
||||
className="relative p-6 flex items-start gap-6"
|
||||
className="relative p-5 sm:p-6 flex flex-col sm:flex-row sm:items-start gap-5 sm:gap-6"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)), var(--color-surface))`,
|
||||
borderColor:
|
||||
@@ -266,7 +266,7 @@ export default async function MePage({
|
||||
className="absolute -top-10 -right-10 w-40 h-40 rounded-full opacity-10"
|
||||
style={{ background: "var(--color-primary)" }}
|
||||
/>
|
||||
<div className="relative shrink-0 flex flex-col items-center gap-3">
|
||||
<div className="relative shrink-0 flex flex-col items-center gap-3 mx-auto sm:mx-0">
|
||||
<div
|
||||
className="absolute -inset-3 rounded-full opacity-[0.15] blur-[40px]"
|
||||
style={{ background: "var(--color-primary)" }}
|
||||
@@ -302,7 +302,7 @@ export default async function MePage({
|
||||
Enter {hotelName}
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0 pt-1">
|
||||
<div className="flex-1 min-w-0 sm:pt-1 text-center sm:text-left">
|
||||
<div
|
||||
className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[11px] font-bold uppercase tracking-wider mb-3 border"
|
||||
style={{
|
||||
|
||||
Reference in new issue
Block a user