nl-blogs/.trae/documents/Fix UI Layout and Theme Consistency Across All Pages.md

Fix UI Layout Issues on Non-Home Pages

I will fix the layout issues on all pages except Home, focusing on spacing (clearing the fixed header), container widths, and theme consistency.

1. Login Page (client/src/pages/Login.vue)

Issue: Currently uses a light theme that clashes with the global dark mode. Fix:

• Apply the global dark theme (#050505).
• Use glassmorphism for the login card.
• Style inputs and buttons to match the new design system.

2. Page Spacing & Layout Standardization

All standard pages need top padding to prevent content from being hidden behind the fixed header (h-20). I will apply pt-32 (approx 128px) to ensure ample breathing room.

• About.vue:
  • Add pt-32.
  • Increase container width to max-w-6xl for better 2-column layout.
• Blog.vue:
  • Add pt-32.
  • Keep max-w-4xl for optimal reading width.
• BlogDetail.vue:
  • Add pt-32.
  • Ensure the "Back" button has proper spacing.
• Snippets.vue:
  • Add pt-32.
  • Wrap content in max-w-7xl mx-auto px-6 for consistent grid alignment.
• Works.vue:
  • Add pt-32.
  • Wrap content in max-w-7xl mx-auto px-6.

3. Work Detail Page (client/src/pages/WorkDetail.vue)

• This page uses a fullscreen overlay layout (z-100). I will verify it retains the correct dark theme colors and that the close button (z-60) remains clickable above the header.

I will proceed with applying these changes file by file.