feat: replace PNG logos with SVG for better scalability and update styles for improved responsiveness

This commit is contained in:
shuaiplus
2026-04-27 00:57:45 +08:00
parent f48f3d0c8e
commit d589b15123
19 changed files with 34 additions and 28 deletions
@@ -33,8 +33,8 @@ export default function AppAuthenticatedShell(props: AppAuthenticatedShellProps)
<div className="app-shell">
<header className="topbar">
<div className="brand">
<img src="/logo-64.png" alt="NodeWarden logo" className="brand-logo" />
<img src="/nodewarden-wordmark.svg" alt="NodeWarden" className="brand-wordmark" />
<img src="/nodewarden-logo.svg" alt="NodeWarden logo" className="brand-logo" />
<span className="brand-wordmark">NodeWarden</span>
<span className="mobile-page-title">{props.currentPageTitle}</span>
</div>
<div className="topbar-actions">
@@ -10,9 +10,9 @@ export default function StandalonePageFrame(props: StandalonePageFrameProps) {
return (
<div className="standalone-shell">
<div className="standalone-brand standalone-brand-outside">
<img src="/logo-64.png" alt="NodeWarden logo" className="standalone-brand-logo" />
<img src="/nodewarden-logo.svg" alt="NodeWarden logo" className="standalone-brand-logo" />
<div>
<img src="/nodewarden-wordmark.svg" alt="NodeWarden" className="standalone-brand-wordmark" />
<span className="standalone-brand-wordmark">NodeWarden</span>
</div>
</div>
+2 -4
View File
@@ -46,14 +46,12 @@
}
.standalone-brand-logo {
@apply h-14 w-14 flex-shrink-0 object-contain;
@apply h-14 w-[70px] flex-shrink-0 object-contain;
filter: drop-shadow(0 8px 18px rgba(43, 102, 217, 0.22));
}
.standalone-brand-wordmark {
@apply block h-auto max-w-full;
width: clamp(200px, 30vw, 360px);
filter: drop-shadow(0 10px 22px rgba(43, 102, 217, 0.18));
@apply block max-w-full whitespace-nowrap text-[34px] font-extrabold leading-none tracking-normal text-ink;
}
.standalone-title {
+2 -2
View File
@@ -73,7 +73,7 @@
}
.standalone-brand-logo {
@apply h-11 w-11;
@apply h-11 w-[55px];
}
.auth-card {
@@ -111,7 +111,7 @@
}
.brand-logo {
@apply h-[34px] w-[34px];
@apply h-[34px] w-[43px];
}
.brand-wordmark {
+2 -4
View File
@@ -22,9 +22,7 @@
}
.brand-wordmark {
@apply block h-auto max-w-full;
width: clamp(210px, 20vw, 290px);
filter: drop-shadow(0 12px 24px rgba(43, 102, 217, 0.12));
@apply block max-w-full whitespace-nowrap text-[28px] font-extrabold leading-none tracking-normal text-ink;
}
.mobile-page-title {
@@ -33,7 +31,7 @@
}
.brand-logo {
@apply h-[42px] w-[42px] object-contain;
@apply h-[42px] w-[53px] object-contain;
filter: drop-shadow(0 10px 22px rgba(43, 102, 217, 0.22));
}