Header : bascule mobile à 880 px (fin du débordement 761–1080) + icônes et balises OG/Twitter
- styles.css : le nav desktop ne tenait pas entre 761 et ~886 px (bouton KA ID coupé, +98 px à 768 px) et le badge Groupe KA recréait un débordement de 901 à ~1080 px — menu mobile jusqu à 880 px, badge masqué jusqu à 1100 px - index.html : favicon.svg + apple-touch-icon + og:image/twitter:image absolus (https://www.food-ka.com/og.png, 1200×630) - ka-assets/ déplacé vers frontend/public/ (servi à la racine du site) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
5 changed files +20 −5
modified
frontend/index.html
+11 −1
@@ -18,7 +18,17 @@ | ||
| 18 | 18 | <link rel="preconnect" href="https://fonts.googleapis.com" /> |
| 19 | 19 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
| 20 | 20 | <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" /> |
| 21 | − <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%23157a40'/%3E%3Ctext x='32' y='45' font-family='Arial Black,sans-serif' font-size='32' font-weight='900' fill='%23ffffff' text-anchor='middle'%3EFK%3C/text%3E%3C/svg%3E" /> | |
| 21 | + <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> | |
| 22 | + <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> | |
| 23 | + <meta property="og:title" content="Food-Ka — Un service Groupe KA" /> | |
| 24 | + <meta property="og:description" content="Prix, soldes et circulaires des grandes bannières d'épicerie du Québec, toujours à jour." /> | |
| 25 | + <meta property="og:type" content="website" /> | |
| 26 | + <meta property="og:url" content="https://www.food-ka.com/" /> | |
| 27 | + <meta property="og:image" content="https://www.food-ka.com/og.png" /> | |
| 28 | + <meta property="og:image:width" content="1200" /> | |
| 29 | + <meta property="og:image:height" content="630" /> | |
| 30 | + <meta name="twitter:card" content="summary_large_image" /> | |
| 31 | + <meta name="twitter:image" content="https://www.food-ka.com/og.png" /> | |
| 22 | 32 | </head> |
| 23 | 33 | <body> |
| 24 | 34 | <div id="root"></div> |
added
frontend/public/apple-touch-icon.png
+0 −0
Binary file not shown.
added
frontend/public/favicon.svg
+5 −0
@@ -0,0 +1,5 @@ | ||
| 1 | +<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"> | |
| 2 | +<rect width="64" height="64" rx="14" fill="#141814"/> | |
| 3 | +<rect x="4.5" y="4.5" width="55" height="55" rx="11" fill="none" stroke="#1f9d55" stroke-opacity="0.35" stroke-width="2"/> | |
| 4 | +<text x="32" y="43" text-anchor="middle" font-family="'Space Grotesk','Arial Black',sans-serif" font-size="30" font-weight="700" letter-spacing="-1" fill="#1f9d55" transform="rotate(-4 32 32)">Ka</text> | |
| 5 | +</svg> | |
| \ No newline at end of file | ||
added
frontend/public/og.png
+0 −0
Binary file not shown.
modified
frontend/src/styles.css
+4 −4
@@ -65,7 +65,7 @@ button { font-family: inherit; } | ||
| 65 | 65 | font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); |
| 66 | 66 | letter-spacing: 0.08em; text-transform: uppercase; margin-left: 12px; |
| 67 | 67 | } |
| 68 | −@media (max-width: 760px) { .brand-tag { display: none; } } | |
| 68 | +@media (max-width: 880px) { .brand-tag { display: none; } } | |
| 69 | 69 | .nav { margin-left: auto; display: flex; gap: 4px; } |
| 70 | 70 | .nav a { |
| 71 | 71 | padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; |
@@ -754,7 +754,7 @@ button { font-family: inherit; } | ||
| 754 | 754 | position: fixed; inset: 0; z-index: 40; |
| 755 | 755 | background: rgba(20, 24, 20, 0.35); backdrop-filter: blur(2px); |
| 756 | 756 | } |
| 757 | −@media (max-width: 760px) { | |
| 757 | +@media (max-width: 880px) { | |
| 758 | 758 | .menu-btn { display: flex; } |
| 759 | 759 | .nav { display: none; } |
| 760 | 760 | .mobile-menu { display: block; } |
@@ -1007,7 +1007,7 @@ html { scroll-padding-top: 76px; } /* header sticky au-dessus des ancres */ | ||
| 1007 | 1007 | .account-menu button:hover { background: var(--lime-soft); color: var(--ink); } |
| 1008 | 1008 | @media (max-width: 640px) { .login-btn { padding: 8px 12px; font-size: 12.5px; } } |
| 1009 | 1009 | /* mobile : le nav est masqué — le compte se cale à droite, avant le menu */ |
| 1010 | −@media (max-width: 760px) { | |
| 1010 | +@media (max-width: 880px) { | |
| 1011 | 1011 | .login-btn, .account { margin-left: auto; } |
| 1012 | 1012 | .login-btn + .menu-btn, .account + .menu-btn { margin-left: 10px; } |
| 1013 | 1013 | } |
@@ -1095,7 +1095,7 @@ html { scroll-padding-top: 76px; } /* header sticky au-dessus des ancres */ | ||
| 1095 | 1095 | |
| 1096 | 1096 | /* ================= Badge « Un service Groupe KA » (header) ================= */ |
| 1097 | 1097 | .header .gk-badge { margin-left: 4px; flex: none; } |
| 1098 | −@media (max-width: 900px) { .header-inner > .gk-badge { display: none; } } | |
| 1098 | +@media (max-width: 1100px) { .header-inner > .gk-badge { display: none; } } | |
| 1099 | 1099 | .mm-badge { padding: 14px 10px 4px; } |
| 1100 | 1100 | |
| 1101 | 1101 | /* ================= Page /contact (écosystème Groupe KA) ================= */ |
| 1102 | 1102 | |