Skip to content

Commit 862e2d7

Browse files
appleboyclaude
appleboy
and
claude
authored
feat(templates): integrate brand logo and favicons (#237)
- Add brand icon, light/dark logos, and PNG app icon as embedded static assets - Replace the legacy favicon with the new branded icon - Add favicon, SVG icon, apple-touch-icon, and theme-color tags to the page head - Show the brand mark beside the wordmark in the navbar - Swap the placeholder login glyph for the brand icon with a tinted drop-shadow - Add a hero logo with light/dark switching to the README Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 parent beed71f commit 862e2d7

14 files changed

Lines changed: 145 additions & 29 deletions

‎README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
<p align="center">
2+
<picture>
3+
<source media="(prefers-color-scheme: dark)" srcset="images/authgate-logo-dark.svg">
4+
<img src="images/authgate-logo.svg" alt="AuthGate" width="420">
5+
</picture>
6+
</p>
7+
18
# AuthGate
29

310
> A lightweight OAuth 2.0 Authorization Server supporting Device Authorization Grant ([RFC 8628][rfc8628]), Authorization Code Flow with PKCE ([RFC 6749][rfc6749] + [RFC 7636][rfc7636]), Client Credentials Grant for machine-to-machine authentication, and Resource Indicators ([RFC 8707][rfc8707]) for MCP / multi-audience deployments

‎images/authgate-logo-dark.svg‎

Lines changed: 17 additions & 0 deletions
Loading

‎images/authgate-logo.svg‎

Lines changed: 17 additions & 0 deletions
Loading

‎internal/templates/layout_component.templ‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,11 @@ templ Layout(title string, layoutType LayoutType, navbar *NavbarProps) {
2121
<meta charset="UTF-8"/>
2222
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
2323
<title>{ title } - AuthGate</title>
24+
<!-- Favicons & app icons -->
25+
<link rel="icon" href="/favicon.ico" sizes="any"/>
26+
<link rel="icon" type="image/svg+xml" href="/static/images/authgate-icon.svg"/>
27+
<link rel="apple-touch-icon" href="/static/images/favicon-512x512.png"/>
28+
<meta name="theme-color" content="#0095C4"/>
2429
<!-- Prevent FOUC: apply saved theme before paint -->
2530
<script>
2631
(function(){var t=localStorage.getItem('authgate-theme');if(t==='dark'||t==='light'){document.documentElement.setAttribute('data-theme',t)}else if(window.matchMedia&&window.matchMedia('(prefers-color-scheme:dark)').matches){document.documentElement.setAttribute('data-theme','dark')}else{document.documentElement.setAttribute('data-theme','light')}})();

‎internal/templates/login_page.templ‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,17 @@ templ LoginPage(props LoginPageProps) {
1212
<!-- Login Header -->
1313
<div class="login-header">
1414
<div class="login-brand-icon" aria-hidden="true">
15-
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false">
16-
<path d="M24 4L6 12V22C6 33.1 13.68 43.38 24 46C34.32 43.38 42 33.1 42 22V12L24 4Z" stroke="currentColor" stroke-width="2.5" fill="none"></path>
17-
<rect x="20" y="19" width="8" height="10" rx="1.5" stroke="currentColor" stroke-width="2"></rect>
18-
<path d="M18 19V16C18 12.69 20.69 10 24 10C27.31 10 30 12.69 30 16V19" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
19-
<circle cx="24" cy="24" r="1.5" fill="currentColor"></circle>
20-
<line x1="24" y1="25.5" x2="24" y2="27.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line>
15+
<svg width="56" height="56" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" focusable="false">
16+
<defs>
17+
<linearGradient id="login-ag-bg" x1="0" y1="0" x2="120" y2="120" gradientUnits="userSpaceOnUse">
18+
<stop offset="0" stop-color="#00C8E8"></stop>
19+
<stop offset="1" stop-color="#0077A8"></stop>
20+
</linearGradient>
21+
</defs>
22+
<rect x="4" y="4" width="112" height="112" rx="28" fill="url(#login-ag-bg)"></rect>
23+
<path d="M 34 90 L 34 56 A 26 26 0 0 1 86 56 L 86 90" fill="none" stroke="#ffffff" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"></path>
24+
<circle cx="60" cy="55" r="8.5" fill="#ffffff"></circle>
25+
<path d="M 56 60 L 64 60 L 62 80 L 58 80 Z" fill="#ffffff"></path>
2126
</svg>
2227
</div>
2328
<h1 class="login-title">AuthGate</h1>

‎internal/templates/navbar_component.templ‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,24 @@ templ Navbar(props *NavbarProps) {
77
<div class="navbar-container">
88
<div class="navbar-brand">
99
<a href="/">
10-
AuthGate
11-
<span class="navbar-brand-tagline">OAuth 2.0 Server</span>
10+
<span class="navbar-brand-mark" aria-hidden="true">
11+
<svg width="32" height="32" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" focusable="false">
12+
<defs>
13+
<linearGradient id="navbar-ag-bg" x1="0" y1="0" x2="120" y2="120" gradientUnits="userSpaceOnUse">
14+
<stop offset="0" stop-color="#00C8E8"></stop>
15+
<stop offset="1" stop-color="#0077A8"></stop>
16+
</linearGradient>
17+
</defs>
18+
<rect x="4" y="4" width="112" height="112" rx="28" fill="url(#navbar-ag-bg)"></rect>
19+
<path d="M 34 90 L 34 56 A 26 26 0 0 1 86 56 L 86 90" fill="none" stroke="#ffffff" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"></path>
20+
<circle cx="60" cy="55" r="8.5" fill="#ffffff"></circle>
21+
<path d="M 56 60 L 64 60 L 62 80 L 58 80 Z" fill="#ffffff"></path>
22+
</svg>
23+
</span>
24+
<span class="navbar-brand-text">
25+
AuthGate
26+
<span class="navbar-brand-tagline">OAuth 2.0 Server</span>
27+
</span>
1228
</a>
1329
</div>
1430
<button class="navbar-toggle" onclick="toggleMenu()" aria-label="Toggle navigation menu">

‎internal/templates/static/css/components/dark-mode.css‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -400,19 +400,6 @@
400400
}
401401

402402
/* Login brand icon — use theme primary color token instead of hardcoded rgba() */
403-
[data-theme="dark"] .login-brand-icon {
404-
/* Fallbacks for browsers without color-mix() support */
405-
background: linear-gradient(135deg, var(--color-primary-pale), rgba(88, 166, 255, 0.12));
406-
border-color: rgba(88, 166, 255, 0.2);
407-
/* Enhanced versions using theme token; override fallback when supported */
408-
background: linear-gradient(
409-
135deg,
410-
var(--color-primary-pale),
411-
color-mix(in srgb, var(--color-primary) 12%, transparent)
412-
);
413-
border-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
414-
}
415-
416403
/* Login security label — derive border/bg from theme primary color token */
417404
[data-theme="dark"] .login-security-label {
418405
/* Fallbacks for browsers without color-mix() support */

‎internal/templates/static/css/components/navbar.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,24 @@
3939
color: var(--color-primary);
4040
letter-spacing: -0.01em;
4141
transition: color var(--transition-fast);
42+
display: flex;
43+
flex-direction: row;
44+
align-items: center;
45+
gap: var(--space-2);
46+
}
47+
48+
.navbar-brand-mark {
49+
display: inline-flex;
50+
align-items: center;
51+
flex-shrink: 0;
52+
}
53+
54+
.navbar-brand-mark svg {
55+
display: block;
56+
filter: drop-shadow(0 1px 2px rgba(0, 102, 150, 0.25));
57+
}
58+
59+
.navbar-brand-text {
4260
display: flex;
4361
flex-direction: column;
4462
align-items: flex-start;

‎internal/templates/static/css/pages/login.css‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -99,10 +99,6 @@
9999
width: 72px;
100100
height: 72px;
101101
margin: 0 auto var(--space-5);
102-
border-radius: var(--radius-xl);
103-
background: linear-gradient(135deg, var(--color-primary-pale), #dbeafe);
104-
border: 1px solid rgba(0, 114, 255, 0.15);
105-
color: var(--color-primary);
106102
animation: loginScaleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
107103
}
108104

@@ -118,8 +114,10 @@
118114
}
119115

120116
.login-brand-icon svg {
121-
width: 36px;
122-
height: 36px;
117+
width: 64px;
118+
height: 64px;
119+
/* drop-shadow follows the icon's rounded silhouette (box-shadow would be square) */
120+
filter: drop-shadow(0 8px 18px rgba(0, 119, 168, 0.32));
123121
}
124122

125123
/* Security label below subtitle */
@@ -626,8 +624,8 @@
626624
}
627625

628626
.login-brand-icon svg {
629-
width: 30px;
630-
height: 30px;
627+
width: 54px;
628+
height: 54px;
631629
}
632630

633631
.login-submit-btn {

‎internal/templates/static/images/authgate-icon.svg‎

Lines changed: 12 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)