Enhance app title with Orbitron font, gradient shimmer, and text stroke

Load Orbitron from Google Fonts for the h1 title and version badge.
Add animated gradient shimmer sweep and accent-colored text outline.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-12 11:51:09 +03:00
parent e97ef3afa6
commit b62f8b8eaa
2 changed files with 31 additions and 4 deletions

View File

@@ -17,8 +17,31 @@ header {
} }
h1 { h1 {
font-size: 1.25rem; font-family: 'Orbitron', sans-serif;
color: var(--primary-text-color); font-size: 1.15rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
-webkit-text-stroke: 0.5px var(--primary-color);
paint-order: stroke fill;
background: linear-gradient(
120deg,
var(--primary-color) 0%,
var(--primary-text-color) 35%,
var(--primary-color) 50%,
var(--primary-text-color) 65%,
var(--primary-color) 100%
);
background-size: 250% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: titleShimmer 6s ease-in-out infinite;
}
@keyframes titleShimmer {
0%, 100% { background-position: 100% 50%; }
50% { background-position: 0% 50%; }
} }
h2 { h2 {
@@ -78,8 +101,9 @@ h2 {
} }
#server-version { #server-version {
font-size: 0.75rem; font-family: 'Orbitron', sans-serif;
font-weight: 400; font-size: 0.65rem;
font-weight: 700;
color: var(--text-secondary); color: var(--text-secondary);
background: var(--border-color); background: var(--border-color);
padding: 2px 8px; padding: 2px 8px;

View File

@@ -5,6 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LED Grab</title> <title>LED Grab</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='90'>💡</text></svg>"> <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='90'>💡</text></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap" rel="stylesheet">
<!-- PWA --> <!-- PWA -->
<meta name="theme-color" content="#1a1a1a"> <meta name="theme-color" content="#1a1a1a">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">