mirror of
https://github.com/IliesAllali/parenthese.git
synced 2026-11-12 08:16:09 +00:00
Les parenthèses s'ouvrent, le rond se pose, le nom suit (700 ms). Le logo de l'en-tête passe en SVG en ligne (tracés du logo validé, nom arrondi au dixième). La décision « première page de la session » est prise dans le <head> avant le premier affichage : pas de clignotement, HTML prérendu inchangé. Rien si « réduire les animations » est activé. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
29 lines
1.0 KiB
React
29 lines
1.0 KiB
React
import { PAREN_LEFT, PAREN_RIGHT } from './pzMarkPaths.js'
|
|
import { LOGO_NOM } from './logoNomPaths.js'
|
|
|
|
// Logo de l'en-tête en SVG en ligne, pour animer son arrivée : les parenthèses s'ouvrent,
|
|
// le rond se pose, le nom suit. Une fois par visite, décidé dans index.html (classe
|
|
// logo-intro sur <html>), animation dans index.css. Même dessin que /logo.svg, rapport 7,541.
|
|
export default function LogoLockup({ height = 22 }) {
|
|
return (
|
|
<svg
|
|
className="lg lk"
|
|
viewBox="-951.9 -1596.5 12857.7 1704.9"
|
|
width={Math.round(height * 7.541)}
|
|
height={height}
|
|
style={{ height }}
|
|
role="img"
|
|
aria-label="Parenthèse"
|
|
>
|
|
<g className="lk-pl"><path transform="scale(1,-1)" d={PAREN_LEFT} /></g>
|
|
<g className="lk-pr"><path transform="scale(1,-1)" d={PAREN_RIGHT} /></g>
|
|
<circle className="lk-dot" cx="0" cy="-744" r="424.3" />
|
|
<g className="lk-nom">
|
|
<g transform="scale(1,-1)">
|
|
{LOGO_NOM.map((d, i) => <path key={i} d={d} />)}
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
)
|
|
}
|