mirror of
https://github.com/shuaiplus/nodewarden.git
synced 2026-06-20 21:00:41 +00:00
feat: replace PNG logos with SVG for better scalability and update styles for improved responsiveness
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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));
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user