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:
@@ -17,8 +17,31 @@ header {
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.25rem;
|
||||
color: var(--primary-text-color);
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
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 {
|
||||
@@ -78,8 +101,9 @@ h2 {
|
||||
}
|
||||
|
||||
#server-version {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-secondary);
|
||||
background: var(--border-color);
|
||||
padding: 2px 8px;
|
||||
|
||||
@@ -5,6 +5,9 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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="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 -->
|
||||
<meta name="theme-color" content="#1a1a1a">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
|
||||
Reference in New Issue
Block a user