35 lines
1.4 KiB
Markdown
35 lines
1.4 KiB
Markdown
|
# 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.
|