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:
parent
48e1bd163d
commit
ee3cbb74f7
2 changed files with 22 additions and 0 deletions
|
|
@ -975,6 +975,22 @@ a.app-footer__repo:hover {
|
||||||
.app-header__brand {
|
.app-header__brand {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: inherit;
|
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 {
|
.app-nav {
|
||||||
|
|
|
||||||
|
|
@ -62,6 +62,12 @@ export default function App() {
|
||||||
<a href="#main-content" className="skip-link">Skip to content</a>
|
<a href="#main-content" className="skip-link">Skip to content</a>
|
||||||
<header className="app-header" ref={headerRef}>
|
<header className="app-header" ref={headerRef}>
|
||||||
<Link to="/" className="app-header__brand">
|
<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>
|
<span>Chrysopedia</span>
|
||||||
</Link>
|
</Link>
|
||||||
{showNavSearch && (
|
{showNavSearch && (
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue