refactor: update skeleton header to pixel-perfect match actual layout
Updates skeleton header to exactly match the actual CV header layout with
photo absolutely positioned on the right side.
**Layout Changes:**
- Photo: 150x200px positioned absolutely (top: 15px, right: 15px)
- Name: 40px height (h1 size)
- Subtitle: 24px height (larger)
- Intro text: 90px height (3-4 lines)
- Header has padding-right: 185px to accommodate photo
- Removed flex layout, using absolute positioning like actual
**Visual Improvements:**
- Photo border: 3px solid #e8e8e8 (matches actual white border)
- No border-radius on photo (matches actual)
- Larger text blocks for better visual match
- Proper spacing between elements
**Tests:**
- test-skeleton-verify.mjs: ✅ All 4 language switches pass
- Skeleton displays correctly on every transition
This commit is contained in:
@@ -22,12 +22,10 @@
|
||||
<!-- Skeleton Content -->
|
||||
<div class="skeleton-content">
|
||||
<div class="skeleton-header">
|
||||
<div class="skeleton-header-text">
|
||||
<div class="skeleton skeleton-name"></div>
|
||||
<div class="skeleton skeleton-experience-years"></div>
|
||||
<div class="skeleton skeleton-intro"></div>
|
||||
</div>
|
||||
<div class="skeleton skeleton-name"></div>
|
||||
<div class="skeleton skeleton-experience-years"></div>
|
||||
<div class="skeleton skeleton-photo"></div>
|
||||
<div class="skeleton skeleton-intro"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user