Buriburizaemon/nodewarden
1
0
Fork 0
mirror of https://github.com/shuaiplus/nodewarden.git synced 2026-06-20 21:00:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: update website branding with new logo and wordmark, enhance styles for better responsiveness

Browse Source
This commit is contained in:
shuaiplus
2026-04-18 21:44:27 +08:00
parent 408874ac05
commit ef47597be5
11 changed files with 39 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/src/components/AppAuthenticatedShell.tsx
+1 -1
View File
@@ -33,7 +33,7 @@ export default function AppAuthenticatedShell(props: AppAuthenticatedShellProps)
<header className="topbar">
<div className="brand">
<img src="/logo-64.png" alt="NodeWarden logo" className="brand-logo" />
<span className="brand-name">NodeWarden</span>
<img src="/nodewarden-wordmark.svg" alt="NodeWarden" className="brand-wordmark" />
<span className="mobile-page-title">{props.currentPageTitle}</span>
</div>
<div className="topbar-actions">
webapp/src/components/StandalonePageFrame.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ export default function StandalonePageFrame(props: StandalonePageFrameProps) {
<div className="standalone-brand standalone-brand-outside">
<img src="/logo-64.png" alt="NodeWarden logo" className="standalone-brand-logo" />
<div>
<div className="standalone-brand-title">NodeWarden</div>
<img src="/nodewarden-wordmark.svg" alt="NodeWarden" className="standalone-brand-wordmark" />
</div>
</div>
webapp/src/styles.css
+22 -4
View File
@@ -176,6 +176,14 @@ body::before {
text-shadow: 0 10px 22px rgba(255, 255, 255, 0.26);
}
.standalone-brand-wordmark {
display: block;
height: auto;
width: clamp(200px, 30vw, 360px);
max-width: 100%;
filter: drop-shadow(0 10px 22px rgba(43, 102, 217, 0.18));
}
.standalone-title {
margin: 0 0 4px 0;
text-align: left;
@@ -643,7 +651,7 @@ input[type='file'].input::file-selector-button:hover {
.brand {
display: inline-flex;
align-items: center;
gap: 12px;
gap: 8px;
font-size: 34px;
font-weight: 800;
color: var(--text);
@@ -655,6 +663,14 @@ input[type='file'].input::file-selector-button:hover {
text-shadow: 0 12px 24px rgba(43, 102, 217, 0.14);
}
.brand-wordmark {
display: block;
height: auto;
width: clamp(210px, 20vw, 290px);
max-width: 100%;
filter: drop-shadow(0 12px 24px rgba(43, 102, 217, 0.12));
}
.mobile-page-title {
display: none;
min-width: 0;
@@ -669,8 +685,8 @@ input[type='file'].input::file-selector-button:hover {
}
.brand-logo {
width: 57px;
height: 57px;
width: 42px;
height: 42px;
object-fit: contain;
filter: drop-shadow(0 10px 22px rgba(43, 102, 217, 0.22));
transition: transform var(--dur-medium) var(--ease-out-soft), filter var(--dur-medium) var(--ease-out-soft);
@@ -4646,7 +4662,9 @@ input[type='file'].input::file-selector-button:hover {
}
:root[data-theme='dark'] .standalone-brand-title,
:root[data-theme='dark'] .brand-name {
:root[data-theme='dark'] .brand-name,
:root[data-theme='dark'] .standalone-brand-wordmark,
:root[data-theme='dark'] .brand-wordmark {
text-shadow: 0 16px 28px rgba(2, 6, 23, 0.32);
}