paul.atlan/ia-qua-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(logo): lockup navbar avec baseline

Browse Source
This commit is contained in:
Paul Atlan 2026-05-30 22:10:49 +02:00
parent cd6a641d72
commit fdf0756810
6 changed files with 60 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/favicon.svg
View File

@ -1,8 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<defs>
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#06B6D4"/>
<stop offset="100%" stop-color="#3B82F6"/>
<stop offset="0%" stop-color="#34D399"/>
<stop offset="100%" stop-color="#2563EB"/>
</linearGradient>
</defs>
<rect width="32" height="32" rx="7" fill="url(#g)"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 460 B

After

Width:  |  Height:  |  Size: 460 B

23
public/logo.svg
View File

@ -1,14 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 196 48" role="img" aria-label="IA qu'à">
<svg viewBox="0 0 500 220" role="img" aria-label="IA qu'à — L'IA pour les PME" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="iaGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#06B6D4"/>
<stop offset="100%" stop-color="#3B82F6"/>
<linearGradient id="logoAccentGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#34D399"/>
<stop offset="100%" stop-color="#2563EB"/>
</linearGradient>
</defs>
<text x="0" y="37" font-family="Inter, system-ui, -apple-system, sans-serif" font-size="38" letter-spacing="-0.5">
<tspan fill="url(#iaGrad)" font-weight="800">IA</tspan>
<tspan fill="#334155" font-weight="700" dx="6">qu</tspan>
<tspan fill="url(#iaGrad)" font-weight="600">&#8217;</tspan>
<tspan fill="#334155" font-weight="700">à</tspan>
</text>
<g transform="translate(250, 110)">
<text x="-5" y="16" font-family="'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif" font-weight="700" font-size="68" text-anchor="end" letter-spacing="0.01em">
<tspan fill="url(#logoAccentGradient)">IA</tspan>
</text>
<text x="5" y="16" font-family="'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif" font-weight="300" font-size="66" text-anchor="start" fill="#334155" letter-spacing="-0.01em">
<tspan>qu</tspan><tspan fill="url(#logoAccentGradient)" dx="1">&#8217;</tspan><tspan dx="1">à</tspan>
</text>
<text x="127" y="56" font-family="'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif" font-weight="600" font-size="18" text-anchor="end" fill="url(#logoAccentGradient)" letter-spacing="3px" opacity="0.9">L'IA POUR LES PME</text>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 669 B

After

Width:  |  Height:  |  Size: 1.2 KiB

52
src/components/BrandLogo.astro
View File

@ -1,44 +1,56 @@
---
/**
* BrandLogo — wordmark "IA qu'à" (color package §1, palette Classic Electric Teal).
* "IA" + apostrophe en dégradé cyan→bleu, "qu'à" en slate adaptatif (clair/sombre).
* Double sens assumé : "IA qu'à" ↔ "Y'a qu'à". Rendu en Inter (police du site).
* BrandLogo — lockup "IA qu'à" + baseline "L'IA POUR LES PME"
* (palette Mint & Ocean Blue, color package §1 ; preset "Pure Swiss Typography" de Paul).
* Space Grotesk : "IA" 700 + "qu'à" 300. "IA"/apostrophe/baseline en dégradé mint→ocean,
* "qu'à" en slate adaptatif clair/sombre. Double sens assumé : "IA qu'à" ↔ "Y'a qu'à".
*/
interface Props {
class?: string;
}
const { class: className = "h-7 w-auto" } = Astro.props;
// id unique pour éviter les collisions de gradient si plusieurs instances
const { class: className = "h-10 w-auto" } = Astro.props;
const gid = "iaGrad-" + Math.random().toString(36).slice(2, 8);
---
<svg
viewBox="0 0 196 48"
viewBox="0 0 188 62"
role="img"
aria-label="IA qu'à"
aria-label="IA qu'à — L'IA pour les PME"
class={className}
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<linearGradient id={gid} x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#06B6D4"></stop>
<stop offset="100%" stop-color="#3B82F6"></stop>
<stop offset="0%" stop-color="#34D399"></stop>
<stop offset="100%" stop-color="#2563EB"></stop>
</linearGradient>
</defs>
<!-- Wordmark -->
<text
x="0"
y="37"
font-family="Inter, system-ui, -apple-system, sans-serif"
x="2"
y="38"
font-family="'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif"
font-size="38"
letter-spacing="-0.5"
letter-spacing="-0.01em"
>
<tspan fill={`url(#${gid})`} font-weight="800">IA</tspan>
<tspan
class="fill-slate-700 dark:fill-slate-100"
font-weight="700"
dx="6">qu</tspan
<tspan fill={`url(#${gid})`} font-weight="700">IA</tspan>
<tspan class="fill-slate-700 dark:fill-slate-100" font-weight="300" dx="6"
>qu</tspan
>
<tspan fill={`url(#${gid})`} font-weight="600">&#8217;</tspan>
<tspan class="fill-slate-700 dark:fill-slate-100" font-weight="700">à</tspan>
<tspan fill={`url(#${gid})`} font-weight="300">&#8217;</tspan>
<tspan class="fill-slate-700 dark:fill-slate-100" font-weight="300">à</tspan>
</text>
<!-- Baseline -->
<text
x="3"
y="55"
font-family="'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif"
font-size="9.2"
font-weight="600"
letter-spacing="1.6"
fill={`url(#${gid})`}
opacity="0.9">L'IA POUR LES PME</text
>
</svg>

2
src/components/Navbar.astro
View File

@ -18,7 +18,7 @@ const links = [
>
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<a href="/" class="no-underline shrink-0" aria-label="Accueil — IA qu'à">
<BrandLogo class="h-7 w-auto" />
<BrandLogo class="h-10 w-auto" />
</a>
<div class="flex items-center gap-6">

4
src/layouts/BaseLayout.astro
View File

@ -37,7 +37,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
})();
</script>
<meta name="theme-color" content="#06B6D4" />
<meta name="theme-color" content="#2563EB" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="sitemap" href="/sitemap-index.xml" />
@ -64,7 +64,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,800;1,9..144,400&family=Inter:wght@400;500;600&display=swap"
href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,800;1,9..144,400&family=Inter:wght@400;500;600&family=Space+Grotesk:wght@300;500;700&display=swap"
rel="stylesheet"
/>
</head>

19
tailwind.config.mjs
View File

@ -5,12 +5,13 @@ export default {
theme: {
extend: {
colors: {
// ─── Brand "Electric Teal" ───
// ─── Brand "Mint & Ocean Blue" (color package §1) ───
// NB : noms de tokens conservés ; valeurs = palette Mint & Ocean.
brand: {
cyan: "#06B6D4", // accent primary
blue: "#3B82F6", // accent secondary
teal: "#22D3EE", // deep marine highlight
deep: "#0891B2", // deep teal (hover / prestige)
cyan: "#34D399", // mint — accent primary (accents, bordures, points, dark-text)
blue: "#2563EB", // ocean blue — accent secondary (fin de dégradé)
teal: "#6EE7B7", // mint clair — code inline sur fond sombre
deep: "#2563EB", // ocean blue — accent texte en mode clair (lisible sur blanc)
indigo: "#4F46E5",
},
// ─── Canvas (Slate) ───
@ -35,13 +36,13 @@ export default {
body: ["Inter", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
},
backgroundImage: {
// 135° brand gradient (logo ligatures, CTAs, highlights)
"brand-gradient": "linear-gradient(135deg, #06B6D4 0%, #3B82F6 100%)",
// 135° brand gradient — Mint → Ocean Blue (logo, CTAs, highlights)
"brand-gradient": "linear-gradient(135deg, #34D399 0%, #2563EB 100%)",
"brand-gradient-soft":
"linear-gradient(135deg, rgba(6,182,212,0.12) 0%, rgba(59,130,246,0.12) 100%)",
"linear-gradient(135deg, rgba(52,211,153,0.12) 0%, rgba(37,99,235,0.12) 100%)",
},
boxShadow: {
glow: "0 8px 30px -8px rgba(6,182,212,0.35)",
glow: "0 8px 30px -8px rgba(52,211,153,0.35)",
},
},
},