feat: Added inline SVG logo mark (cyan arc + dot from favicon) to heade…
- "frontend/src/App.tsx" - "frontend/src/App.css" GSD-Task: S03/T02
This commit is contained in:
jlightner
parent
094e832032
commit
46983ae43b
5 changed files with 163 additions and 1 deletions
|
|
@ -56,7 +56,7 @@ grep -q 'name="description"' dist/index.html && echo 'description OK'
|
|||
- Estimate: 45m
|
||||
- Files: frontend/public/favicon.svg, frontend/public/favicon-32.png, frontend/public/apple-touch-icon.png, frontend/public/og-image.png, frontend/index.html
|
||||
- Verify: cd frontend && npm run build && test -f dist/favicon.svg && test -f dist/favicon-32.png && test -f dist/apple-touch-icon.png && test -f dist/og-image.png && grep -q 'og:title' dist/index.html && grep -q 'rel="icon"' dist/index.html
|
||||
- [ ] **T02: Add logo mark to header brand area** — Add an inline SVG logo mark to the header, positioned to the left of the "Chrysopedia" text. The logo should use the same geometric mark as the favicon for brand consistency.
|
||||
- [x] **T02: Added inline SVG logo mark (cyan arc + dot from favicon) to header brand area with flex alignment** — Add an inline SVG logo mark to the header, positioned to the left of the "Chrysopedia" text. The logo should use the same geometric mark as the favicon for brand consistency.
|
||||
|
||||
## Steps
|
||||
|
||||
|
|
|
|||
60
.gsd/milestones/M016/slices/S03/tasks/T01-VERIFY.json
Normal file
60
.gsd/milestones/M016/slices/S03/tasks/T01-VERIFY.json
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
{
|
||||
"schemaVersion": 1,
|
||||
"taskId": "T01",
|
||||
"unitId": "M016/S03/T01",
|
||||
"timestamp": 1775195151828,
|
||||
"passed": false,
|
||||
"discoverySource": "task-plan",
|
||||
"checks": [
|
||||
{
|
||||
"command": "cd frontend",
|
||||
"exitCode": 0,
|
||||
"durationMs": 7,
|
||||
"verdict": "pass"
|
||||
},
|
||||
{
|
||||
"command": "npm run build",
|
||||
"exitCode": 254,
|
||||
"durationMs": 99,
|
||||
"verdict": "fail"
|
||||
},
|
||||
{
|
||||
"command": "test -f dist/favicon.svg",
|
||||
"exitCode": 1,
|
||||
"durationMs": 8,
|
||||
"verdict": "fail"
|
||||
},
|
||||
{
|
||||
"command": "test -f dist/favicon-32.png",
|
||||
"exitCode": 1,
|
||||
"durationMs": 7,
|
||||
"verdict": "fail"
|
||||
},
|
||||
{
|
||||
"command": "test -f dist/apple-touch-icon.png",
|
||||
"exitCode": 1,
|
||||
"durationMs": 9,
|
||||
"verdict": "fail"
|
||||
},
|
||||
{
|
||||
"command": "test -f dist/og-image.png",
|
||||
"exitCode": 1,
|
||||
"durationMs": 10,
|
||||
"verdict": "fail"
|
||||
},
|
||||
{
|
||||
"command": "grep -q 'og:title' dist/index.html",
|
||||
"exitCode": 2,
|
||||
"durationMs": 10,
|
||||
"verdict": "fail"
|
||||
},
|
||||
{
|
||||
"command": "grep -q 'rel=\"icon\"' dist/index.html",
|
||||
"exitCode": 2,
|
||||
"durationMs": 8,
|
||||
"verdict": "fail"
|
||||
}
|
||||
],
|
||||
"retryAttempt": 1,
|
||||
"maxRetries": 2
|
||||
}
|
||||
80
.gsd/milestones/M016/slices/S03/tasks/T02-SUMMARY.md
Normal file
80
.gsd/milestones/M016/slices/S03/tasks/T02-SUMMARY.md
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
---
|
||||
id: T02
|
||||
parent: S03
|
||||
milestone: M016
|
||||
provides: []
|
||||
requires: []
|
||||
affects: []
|
||||
key_files: ["frontend/src/App.tsx", "frontend/src/App.css"]
|
||||
key_decisions: ["Used favicon mark without background rect for inline header logo — decorative with aria-hidden"]
|
||||
patterns_established: []
|
||||
drill_down_paths: []
|
||||
observability_surfaces: []
|
||||
duration: ""
|
||||
verification_result: "npm run build succeeds (0 errors, 57 modules). grep confirms app-header__logo class in both TSX and CSS, inline SVG present, #22d3ee accent color present. All 10 slice-level checks pass (favicon assets in dist/, meta tags in dist/index.html)."
|
||||
completed_at: 2026-04-03T05:47:02.162Z
|
||||
blocker_discovered: false
|
||||
---
|
||||
|
||||
# T02: Added inline SVG logo mark (cyan arc + dot from favicon) to header brand area with flex alignment
|
||||
|
||||
> Added inline SVG logo mark (cyan arc + dot from favicon) to header brand area with flex alignment
|
||||
|
||||
## What Happened
|
||||
---
|
||||
id: T02
|
||||
parent: S03
|
||||
milestone: M016
|
||||
key_files:
|
||||
- frontend/src/App.tsx
|
||||
- frontend/src/App.css
|
||||
key_decisions:
|
||||
- Used favicon mark without background rect for inline header logo — decorative with aria-hidden
|
||||
duration: ""
|
||||
verification_result: passed
|
||||
completed_at: 2026-04-03T05:47:02.162Z
|
||||
blocker_discovered: false
|
||||
---
|
||||
|
||||
# T02: Added inline SVG logo mark (cyan arc + dot from favicon) to header brand area with flex alignment
|
||||
|
||||
**Added inline SVG logo mark (cyan arc + dot from favicon) to header brand area with flex alignment**
|
||||
|
||||
## What Happened
|
||||
|
||||
Read the favicon.svg mark geometry (arc path + circle at #22d3ee). Added the same paths as an inline SVG inside a new .app-header__logo span before the brand text in App.tsx, with aria-hidden for decorative semantics. Updated .app-header__brand to flex layout with gap for logo/text alignment. Added .app-header__logo sizing styles at 24px. Build passes cleanly with zero errors.
|
||||
|
||||
## Verification
|
||||
|
||||
npm run build succeeds (0 errors, 57 modules). grep confirms app-header__logo class in both TSX and CSS, inline SVG present, #22d3ee accent color present. All 10 slice-level checks pass (favicon assets in dist/, meta tags in dist/index.html).
|
||||
|
||||
## Verification Evidence
|
||||
|
||||
| # | Command | Exit Code | Verdict | Duration |
|
||||
|---|---------|-----------|---------|----------|
|
||||
| 1 | `cd frontend && npm run build` | 0 | ✅ pass | 3300ms |
|
||||
| 2 | `grep -q 'app-header__logo' src/App.tsx` | 0 | ✅ pass | 50ms |
|
||||
| 3 | `grep -q 'app-header__logo' src/App.css` | 0 | ✅ pass | 50ms |
|
||||
| 4 | `grep -q '<svg' src/App.tsx` | 0 | ✅ pass | 50ms |
|
||||
| 5 | `slice verification (10 checks: assets + meta tags)` | 0 | ✅ pass | 100ms |
|
||||
|
||||
|
||||
## Deviations
|
||||
|
||||
None.
|
||||
|
||||
## Known Issues
|
||||
|
||||
None.
|
||||
|
||||
## Files Created/Modified
|
||||
|
||||
- `frontend/src/App.tsx`
|
||||
- `frontend/src/App.css`
|
||||
|
||||
|
||||
## Deviations
|
||||
None.
|
||||
|
||||
## Known Issues
|
||||
None.
|
||||
|
|
@ -975,6 +975,22 @@ a.app-footer__repo:hover {
|
|||
.app-header__brand {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.app-header__logo {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.app-header__logo svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.app-nav {
|
||||
|
|
|
|||
|
|
@ -62,6 +62,12 @@ export default function App() {
|
|||
<a href="#main-content" className="skip-link">Skip to content</a>
|
||||
<header className="app-header" ref={headerRef}>
|
||||
<Link to="/" className="app-header__brand">
|
||||
<span className="app-header__logo" aria-hidden="true">
|
||||
<svg viewBox="0 0 32 32" width="24" height="24" fill="none">
|
||||
<path d="M22 10.5a6.5 6.5 0 0 0-6.5-6.5C11.36 4 8 7.36 8 11.5c0 4.14 3.36 7.5 7.5 7.5" stroke="#22d3ee" strokeWidth="3" strokeLinecap="round"/>
|
||||
<circle cx="22" cy="22" r="3" fill="#22d3ee" opacity="0.5"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>Chrysopedia</span>
|
||||
</Link>
|
||||
{showNavSearch && (
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue