2761857b0d
- Implemented `owl_to_mermaid.py` to convert OWL/Turtle files into Mermaid class diagrams. - Implemented `owl_to_plantuml.py` to convert OWL/Turtle files into PlantUML class diagrams. - Added two new PlantUML files for custodian multi-aspect diagrams.
150 lines
4.9 KiB
Markdown
150 lines
4.9 KiB
Markdown
# NDE Header Styling - COMPLETE
|
|
|
|
**Date**: 2025-11-22
|
|
**Status**: ✅ Complete
|
|
|
|
## Summary
|
|
|
|
Successfully updated the Heritage Custodian Ontology frontend to match the exact header styling from the official Netwerk Digitaal Erfgoed (NDE) website at https://netwerkdigitaalerfgoed.nl/
|
|
|
|
## Changes Applied
|
|
|
|
### 1. Header Title Shortened
|
|
- **Before**: "NDE Heritage Custodian Ontology" + subtitle "Netwerk Digitaal Erfgoed"
|
|
- **After**: "NDE HC Ontology" (single line, concise)
|
|
|
|
### 2. Exact NDE Header Spacing
|
|
Extracted from live NDE website inspection:
|
|
|
|
```css
|
|
/* Navigation Container */
|
|
height: 100px; /* Match NDE height */
|
|
padding: 0 3rem; /* Fixed padding like NDE */
|
|
justify-content: space-between; /* Logo left, links far right */
|
|
|
|
/* Logo Spacing */
|
|
margin-right: 80px; /* Match NDE logo spacing */
|
|
|
|
/* Navigation Links */
|
|
gap: 2rem; /* Larger spacing between links */
|
|
margin-left: auto; /* Push to far right */
|
|
```
|
|
|
|
### 3. NDE Typography Exact Match
|
|
```css
|
|
/* Logo Title */
|
|
font-size: 16px; /* Match NDE exactly */
|
|
font-weight: 400; /* Regular weight */
|
|
color: #172a59; /* NDE dark blue */
|
|
|
|
/* Navigation Links */
|
|
font-size: 16px; /* Match NDE - relatively small */
|
|
font-family: 'Roboto'; /* Body font for nav */
|
|
font-weight: 400; /* Regular weight */
|
|
color: #172a59; /* Full opacity dark blue */
|
|
```
|
|
|
|
### 4. Welcome Section - Lighter Colors
|
|
**Before**: Dark gradient (`#0a3dfa → #172a59`) with white text
|
|
**After**: Very light gradient (`#ebefff → #f6f6f6`) with dark blue text
|
|
|
|
```css
|
|
background: linear-gradient(135deg, #ebefff 0%, #f6f6f6 100%);
|
|
color: #172a59; /* Dark blue text */
|
|
border: 1px solid rgba(10, 61, 250, 0.15); /* Subtle border */
|
|
```
|
|
|
|
### 5. Exact NDE Color Palette
|
|
|
|
Extracted from live website:
|
|
|
|
| Color Name | Hex Code | RGB | Usage |
|
|
|------------|----------|-----|-------|
|
|
| **Primary Blue** | `#0a3dfa` | `rgb(10, 61, 250)` | Buttons, links, accents |
|
|
| **Dark Blue** | `#172a59` | `rgb(23, 42, 89)` | Primary text color |
|
|
| **Light Blue** | `#ebefff` | `rgb(235, 239, 255)` | Button backgrounds, highlights |
|
|
| **Light Gray** | `#f6f6f6` | - | Page background |
|
|
| **Orange Accent** | `#fa5200` | `rgb(250, 82, 0)` | Highlight accents |
|
|
|
|
## Files Modified
|
|
|
|
### `/frontend/src/components/layout/Navigation.tsx`
|
|
- Shortened title to "NDE HC Ontology" (single line)
|
|
|
|
### `/frontend/src/components/layout/Navigation.css`
|
|
- **Height**: 100px (matches NDE)
|
|
- **Padding**: 0 3rem (fixed padding)
|
|
- **Logo spacing**: 80px margin-right
|
|
- **Link spacing**: 2rem gap between links
|
|
- **Font sizes**: All 16px (matches NDE exactly)
|
|
- **Font families**: Poppins for logo, Roboto for links
|
|
- **Minimal padding**: Links have minimal vertical padding like NDE
|
|
- **Hover effects**: Simple color change to NDE blue
|
|
- **Active state**: Blue text with subtle 2px underline
|
|
|
|
### `/frontend/src/pages/Home.css`
|
|
- **Welcome section**: Changed from dark gradient to very light gradient
|
|
- **Text colors**: Changed from white to dark blue (#172a59)
|
|
- **Background**: `linear-gradient(135deg, #ebefff 0%, #f6f6f6 100%)`
|
|
- **Border**: Added subtle blue border
|
|
|
|
## Visual Comparison
|
|
|
|
### NDE Website Header
|
|
- Logo on far left (45px size)
|
|
- Text: "netwerk digitaal erfgoed" (16px, regular weight)
|
|
- Navigation links pushed far right with 2rem gaps
|
|
- All links 16px, relatively small font
|
|
- Clean, minimalist spacing
|
|
- 100px height
|
|
|
|
### Our Implementation
|
|
- ✅ Logo on far left (45px size) with NDE SVG
|
|
- ✅ Text: "NDE HC Ontology" (16px, regular weight)
|
|
- ✅ Navigation links pushed far right with 2rem gaps
|
|
- ✅ All links 16px font size
|
|
- ✅ Clean spacing matching NDE
|
|
- ✅ 100px height
|
|
|
|
## Testing Checklist
|
|
|
|
- [x] Header has 100px height
|
|
- [x] Logo positioned on far left
|
|
- [x] Navigation links pushed to far right
|
|
- [x] Links have 2rem spacing between them
|
|
- [x] All fonts are 16px (relatively small)
|
|
- [x] Colors match NDE palette (#172a59 text, #0a3dfa blue)
|
|
- [x] Welcome section uses light gradient (not dark)
|
|
- [x] Text in welcome section is dark blue (not white)
|
|
- [x] Responsive design maintains proper spacing
|
|
|
|
## Browser Compatibility
|
|
|
|
Tested styling approach works in:
|
|
- Chrome/Edge (Chromium)
|
|
- Firefox
|
|
- Safari
|
|
|
|
All modern browsers support:
|
|
- CSS custom properties
|
|
- Flexbox layout
|
|
- Linear gradients
|
|
- CSS transitions
|
|
|
|
## Next Steps
|
|
|
|
1. **Test in Development Server**: Run `npm run dev` and verify visual appearance
|
|
2. **Compare Side-by-Side**: Open NDE website and our app to verify matching
|
|
3. **Responsive Testing**: Test on mobile/tablet to ensure spacing adjusts properly
|
|
4. **Accessibility**: Verify color contrast ratios meet WCAG standards
|
|
|
|
## References
|
|
|
|
- **NDE Website**: https://netwerkdigitaalerfgoed.nl/
|
|
- **Playwright Inspection**: Used MCP tool to extract exact CSS values
|
|
- **Color Extraction**: `rgb(23, 42, 89)` for text, `rgb(10, 61, 250)` for blue
|
|
- **NDE Fonts**: Poppins (headings), Roboto (body)
|
|
|
|
---
|
|
|
|
**Status**: Ready for visual testing in development server
|