Skip to content

Commit b10e792

Browse files
EltonChang1EltonChang1
committed
banner size change
1 parent ce17a87 commit b10e792

11 files changed

Lines changed: 39 additions & 13 deletions

File tree

‎react-app/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
<head>
44
<meta charset="UTF-8" />
55
<!-- White-backed PNGs from scripts/generate-favicon.mjs (visible on dark browser chrome) -->
6-
<link rel="icon" type="image/png" href="/favicon.png?v=5" />
7-
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png?v=5" />
8-
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192.png?v=5" />
9-
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=5" />
6+
<link rel="icon" type="image/png" href="/favicon.png?v=6" />
7+
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png?v=6" />
8+
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192.png?v=6" />
9+
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=6" />
1010
<meta name="theme-color" content="#6366f1" />
1111
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
1212
<meta

‎react-app/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,9 @@
55
"type": "module",
66
"scripts": {
77
"dev": "vite",
8+
"trim-brand-logo": "node scripts/trim-brand-logo.mjs",
89
"generate-favicon": "node scripts/generate-favicon.mjs",
9-
"prebuild": "npm run generate-favicon",
10+
"prebuild": "npm run trim-brand-logo && npm run generate-favicon",
1011
"build": "tsc -b && vite build",
1112
"lint": "eslint .",
1213
"preview": "vite preview"

‎react-app/public/apple-touch-icon.png‎

4.91 KB
Loading

‎react-app/public/favicon-192.png‎

5.43 KB
Loading

‎react-app/public/favicon-32.png‎

436 Bytes
Loading

‎react-app/public/favicon.png‎

1.01 KB
Loading

‎react-app/public/images/elegant-elton-chang-logo-tight.png‎

293 KB
Loading

‎react-app/scripts/generate-favicon.mjs‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
/**
22
* Builds favicon PNGs with a solid white backing so the logo reads on dark browser tabs.
3-
* Source: public/images/elegant-elton-chang-logo.png (no query string)
3+
* Source: tight-trimmed logo from trim-brand-logo.mjs (falls back to full asset if missing).
44
*/
55
import { mkdir } from "node:fs/promises";
6+
import { existsSync } from "node:fs";
67
import path from "node:path";
78
import { fileURLToPath } from "node:url";
89
import sharp from "sharp";
910

1011
const __dirname = path.dirname(fileURLToPath(import.meta.url));
1112
const root = path.join(__dirname, "..");
12-
const input = path.join(root, "public/images/elegant-elton-chang-logo.png");
13+
const tight = path.join(root, "public/images/elegant-elton-chang-logo-tight.png");
14+
const full = path.join(root, "public/images/elegant-elton-chang-logo.png");
15+
const input = existsSync(tight) ? tight : full;
1316
const outDir = path.join(root, "public");
1417

1518
async function squareFavicon(size, padRatio = 0.1) {

‎react-app/scripts/trim-brand-logo.mjs‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/**
2+
* Writes a tight-cropped PNG from the full logo (less transparent / uniform padding).
3+
* Source: public/images/elegant-elton-chang-logo.png
4+
* Output: public/images/elegant-elton-chang-logo-tight.png
5+
*/
6+
import path from "node:path";
7+
import { fileURLToPath } from "node:url";
8+
import sharp from "sharp";
9+
10+
const __dirname = path.dirname(fileURLToPath(import.meta.url));
11+
const root = path.join(__dirname, "..");
12+
const source = path.join(root, "public/images/elegant-elton-chang-logo.png");
13+
const dest = path.join(root, "public/images/elegant-elton-chang-logo-tight.png");
14+
15+
await sharp(source).trim({ threshold: 32 }).png().toFile(dest);
16+
17+
const before = await sharp(source).metadata();
18+
const after = await sharp(dest).metadata();
19+
console.log(
20+
`Brand logo trim: ${before.width}×${before.height} → ${after.width}×${after.height} → ${path.relative(root, dest)}`,
21+
);

‎react-app/src/components/ui/hero-section-1.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -161,19 +161,20 @@ function HeroHeader() {
161161
<header>
162162
<nav
163163
data-state={menuState ? "active" : undefined}
164-
className="group fixed z-20 w-full px-2"
164+
className="group fixed inset-x-0 top-0 z-20 w-full px-2 pt-[max(0.25rem,env(safe-area-inset-top,0px))]"
165165
>
166166
<div
167167
className={cn(
168-
"mx-auto mt-2 max-w-6xl px-6 transition-all duration-300 lg:px-12",
168+
"mx-auto max-w-6xl px-6 transition-all duration-300 lg:px-12",
169+
isScrolled ? "mt-1.5" : "mt-0",
169170
isScrolled &&
170171
"max-w-4xl rounded-2xl border border-border/80 bg-background/50 backdrop-blur-lg lg:px-5"
171172
)}
172173
>
173174
<div
174175
className={cn(
175-
"relative flex flex-wrap items-center justify-between gap-6 py-3 lg:gap-0 lg:py-4",
176-
isScrolled && "gap-3 py-2 lg:gap-0 lg:py-2.5",
176+
"relative flex flex-wrap items-center justify-between gap-6 py-2 lg:gap-0 lg:py-3",
177+
isScrolled && "gap-3 py-1.5 lg:gap-0 lg:py-2",
177178
)}
178179
>
179180
<div className="flex w-full justify-between lg:w-auto">

0 commit comments

Comments
 (0)