Chess on the ATmosphere
checkmate.blue
chess
Add branding, OG tags, and accessibility color fix
- #checkmate wordmark with blue # logo, converted to SVG paths
- Favicon as path-based SVG (no font dependency)
- PWA icons (192px, 512px PNG) and updated manifest
- OG meta tags with composite image (board + wordmark)
- Move branding to nav header with slogan, simplify homepage
- Background color to #0B0F14, text-secondary to #8b9098 (WCAG AA)
- Font family standardized to Helvetica Neue
authored by
Scott Hadfield
and committed by
tangled.org
fea45444
0a5175f1
+110
-26
+11
src/app.html
+11
src/app.html
···
5
5
<meta name="viewport" content="width=device-width, initial-scale=1" />
6
6
<meta name="theme-color" content="#1d9bf0" />
7
7
<link rel="manifest" href="/manifest.json" />
8
+
<link rel="apple-touch-icon" href="/icon-192.png" />
8
9
<title>checkmate.blue</title>
10
+
<meta name="description" content="Chess on the Atmosphere" />
11
+
<meta property="og:type" content="website" />
12
+
<meta property="og:title" content="checkmate.blue" />
13
+
<meta property="og:description" content="Chess on the Atmosphere" />
14
+
<meta property="og:image" content="https://checkmate.blue/og-image.png" />
15
+
<meta property="og:url" content="https://checkmate.blue" />
16
+
<meta name="twitter:card" content="summary_large_image" />
17
+
<meta name="twitter:title" content="checkmate.blue" />
18
+
<meta name="twitter:description" content="Chess on the Atmosphere" />
19
+
<meta name="twitter:image" content="https://checkmate.blue/og-image.png" />
9
20
%sveltekit.head%
10
21
</head>
11
22
<body data-sveltekit-preload-data="hover">
+24
-2
src/routes/+layout.svelte
+24
-2
src/routes/+layout.svelte
···
22
22
<p class="text-text-secondary">Loading...</p>
23
23
</div>
24
24
{:else}
25
-
<nav class="border-b border-border px-4 py-3">
25
+
<nav class="border-b border-border px-4 py-4">
26
26
<div class="mx-auto flex max-w-3xl items-center justify-between">
27
-
<a href="/" class="text-lg font-bold text-accent-blue">checkmate.blue</a>
27
+
<div>
28
+
<a href="/" class="logo text-2xl">
29
+
<span class="logo-hash">#</span>checkmate
30
+
</a>
31
+
<p class="text-xs text-text-secondary">Chess on the Atmosphere</p>
32
+
</div>
28
33
<div class="flex items-center gap-4">
29
34
{#if auth.isLoggedIn}
30
35
<a href="/play" class="text-sm text-text-secondary hover:text-text-primary">New Game</a>
···
36
41
{@render children()}
37
42
{/if}
38
43
</div>
44
+
45
+
<style>
46
+
.logo {
47
+
font-family: 'Helvetica Neue', sans-serif;
48
+
font-weight: 500;
49
+
color: #E6EDF3;
50
+
text-decoration: none;
51
+
letter-spacing: -0.03em;
52
+
}
53
+
.logo-hash {
54
+
color: #1DA1F2;
55
+
font-weight: 600;
56
+
position: relative;
57
+
top: 1px;
58
+
margin-right: -0.04em;
59
+
}
60
+
</style>
+15
-18
src/routes/+page.svelte
+15
-18
src/routes/+page.svelte
···
115
115
</script>
116
116
117
117
<div class="mx-auto max-w-2xl px-4 py-8">
118
-
<div class="mb-8 text-center">
119
-
<h1 class="text-4xl font-bold text-accent-blue">checkmate.blue</h1>
120
-
<p class="mt-2 text-text-secondary">Chess on the Atmosphere</p>
118
+
<div class="mb-8 flex justify-center gap-3">
121
119
{#if auth.isLoggedIn}
122
-
<div class="mt-4 flex justify-center gap-3">
123
-
<a
124
-
href="/play"
125
-
class="rounded-lg bg-accent-blue px-6 py-2 font-semibold text-white transition-colors hover:bg-accent-blue-hover"
126
-
>
127
-
New Game
128
-
</a>
129
-
<button
130
-
onclick={() => auth.signOut()}
131
-
class="rounded-lg border border-border px-6 py-2 text-text-secondary transition-colors hover:text-text-primary"
132
-
>
133
-
Sign out
134
-
</button>
135
-
</div>
120
+
<a
121
+
href="/play"
122
+
class="rounded-lg bg-accent-blue px-6 py-2 font-semibold text-white transition-colors hover:bg-accent-blue-hover"
123
+
>
124
+
New Game
125
+
</a>
126
+
<button
127
+
onclick={() => auth.signOut()}
128
+
class="rounded-lg border border-border px-6 py-2 text-text-secondary transition-colors hover:text-text-primary"
129
+
>
130
+
Sign out
131
+
</button>
136
132
{:else}
137
-
<div class="mx-auto mt-4 w-full max-w-sm">
133
+
<div class="w-full max-w-sm">
138
134
<LoginButton />
139
135
</div>
140
136
{/if}
···
199
195
{/if}
200
196
</section>
201
197
</div>
198
+
+2
-2
src/routes/layout.css
+2
-2
src/routes/layout.css
···
4
4
@import '@lichess-org/chessground/assets/chessground.cburnett.css';
5
5
6
6
@theme {
7
-
--color-bg-primary: #0f1419;
7
+
--color-bg-primary: #0B0F14;
8
8
--color-bg-secondary: #1a2332;
9
9
--color-bg-board: #2a3a4a;
10
10
--color-accent-blue: #1d9bf0;
11
11
--color-accent-blue-hover: #1a8cd8;
12
12
--color-text-primary: #e7e9ea;
13
-
--color-text-secondary: #71767b;
13
+
--color-text-secondary: #8b9098;
14
14
--color-success: #00ba7c;
15
15
--color-danger: #f4212e;
16
16
--color-warning: #ffd400;
+22
-3
static/favicon.svg
+22
-3
static/favicon.svg
···
1
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
2
-
<rect width="32" height="32" rx="4" fill="#1d9bf0"/>
3
-
<text x="16" y="24" font-size="22" text-anchor="middle" fill="white">♘</text>
1
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2
+
<svg
3
+
width="64"
4
+
height="64"
5
+
viewBox="0 0 64 64"
6
+
version="1.1"
7
+
id="svg1"
8
+
xmlns="http://www.w3.org/2000/svg"
9
+
xmlns:svg="http://www.w3.org/2000/svg">
10
+
<defs
11
+
id="defs1" />
12
+
<rect
13
+
width="64"
14
+
height="64"
15
+
rx="12"
16
+
fill="#0B0F14"
17
+
id="rect1" />
18
+
<path
19
+
d="m 30.320006,25.911999 h 4.608 l -0.816,5.952 h -4.656 z m -6.096,10.272 -1.344,9.504 h 4.656 l 1.344,-9.504 h 4.608 l -1.296,9.504 h 4.656 l 1.296,-9.504 h 4.176 v -4.32 h -3.552 l 0.816,-5.952 h 4.176 v -4.32 h -3.552 l 1.296,-9.504 h -4.656 l -1.296,9.504 h -4.656 l 1.344,-9.504 h -4.656 l -1.344,9.504 h -4.56 v 4.32 h 3.984 l -0.864,5.952 h -4.56 v 4.32 z"
20
+
id="text1"
21
+
style="font-weight:600;font-size:48px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;dominant-baseline:middle;text-anchor:middle;fill:#1da1f2"
22
+
aria-label="#" />
4
23
</svg>
static/icon-192.png
static/icon-192.png
This is a binary file and will not be displayed.
static/icon-512.png
static/icon-512.png
This is a binary file and will not be displayed.
+11
-1
static/manifest.json
+11
-1
static/manifest.json
···
3
3
"short_name": "checkmate",
4
4
"start_url": "/",
5
5
"display": "standalone",
6
-
"background_color": "#0f1419",
6
+
"background_color": "#0B0F14",
7
7
"theme_color": "#1d9bf0",
8
8
"icons": [
9
9
{
10
10
"src": "/favicon.svg",
11
11
"sizes": "any",
12
12
"type": "image/svg+xml"
13
+
},
14
+
{
15
+
"src": "/icon-192.png",
16
+
"sizes": "192x192",
17
+
"type": "image/png"
18
+
},
19
+
{
20
+
"src": "/icon-512.png",
21
+
"sizes": "512x512",
22
+
"type": "image/png"
13
23
}
14
24
]
15
25
}
static/og-image.png
static/og-image.png
This is a binary file and will not be displayed.
+25
static/wordmark-paths.svg
+25
static/wordmark-paths.svg
···
1
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2
+
<svg
3
+
width="195"
4
+
height="48"
5
+
viewBox="0 0 195 48"
6
+
version="1.1"
7
+
id="svg2"
8
+
xmlns="http://www.w3.org/2000/svg"
9
+
xmlns:svg="http://www.w3.org/2000/svg">
10
+
<defs
11
+
id="defs2" />
12
+
<g
13
+
id="text2"
14
+
style="font-size:36px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;letter-spacing:-0.03em"
15
+
aria-label="#checkmate">
16
+
<path
17
+
style="font-weight:600;fill:#1da1f2"
18
+
d="m 8.748,22.168 h 3.456 l -0.612,4.464 H 8.1 Z M 4.176,29.872 3.168,37 H 6.66 l 1.008,-7.128 h 3.456 L 10.152,37 h 3.492 l 0.972,-7.128 h 3.132 v -3.24 h -2.664 l 0.612,-4.464 h 3.132 v -3.24 H 16.164 L 17.136,11.8 h -3.492 l -0.972,7.128 H 9.18 L 10.188,11.8 H 6.696 l -1.008,7.128 h -3.42 v 3.24 h 2.988 l -0.648,4.464 h -3.42 v 3.24 z"
19
+
id="path2" />
20
+
<path
21
+
style="font-weight:500;fill:#e6edf3"
22
+
d="m 32.219991,24.616 q -0.252,-1.728 -1.404,-2.592 -1.116,-0.9 -2.844,-0.9 -0.792,0 -1.692,0.288 -0.9,0.252 -1.656,1.008 -0.756,0.72 -1.26,2.052 -0.504,1.296 -0.504,3.42 0,1.152 0.252,2.304 0.288,1.152 0.864,2.052 0.612,0.9 1.548,1.476 0.936,0.54 2.268,0.54 1.8,0 2.952,-1.116 1.188,-1.116 1.476,-3.132 h 4.104 q -0.576,3.636 -2.772,5.58 -2.16,1.908 -5.76,1.908 -2.196,0 -3.888,-0.72 -1.656,-0.756 -2.808,-2.016 -1.152,-1.296 -1.764,-3.06 -0.576,-1.764 -0.576,-3.816 0,-2.088 0.576,-3.924 0.576,-1.836 1.728,-3.168 1.152,-1.368 2.844,-2.124 1.728,-0.792 4.032,-0.792 1.62,0 3.06,0.432 1.476,0.396 2.592,1.224 1.152,0.828 1.872,2.088 0.72,1.26 0.864,2.988 z m 6.371993,-13.32 h 4.104 v 9.54 h 0.072 q 0.756,-1.26 2.232,-2.088 1.512,-0.864 3.348,-0.864 3.06,0 4.824,1.584 1.764,1.584 1.764,4.752 V 37 h -4.104 V 25.3 q -0.072,-2.196 -0.936,-3.168 -0.864,-1.008 -2.7,-1.008 -1.044,0 -1.872,0.396 -0.828,0.36 -1.404,1.044 -0.576,0.648 -0.9,1.548 -0.324,0.9 -0.324,1.908 V 37 h -4.104 z m 32.363977,14.76 q -0.072,-0.972 -0.432,-1.872 -0.324,-0.9 -0.936,-1.548 -0.576,-0.684 -1.44,-1.08 -0.828,-0.432 -1.872,-0.432 -1.08,0 -1.98,0.396 -0.864,0.36 -1.512,1.044 -0.612,0.648 -1.008,1.548 -0.36,0.9 -0.396,1.944 z m -9.576,2.7 q 0,1.08 0.288,2.088 0.324,1.008 0.936,1.764 0.612,0.756 1.548,1.224 0.936,0.432 2.232,0.432 1.8,0 2.88,-0.756 1.116,-0.792 1.656,-2.34 h 3.888 q -0.324,1.512 -1.116,2.7 -0.792,1.188 -1.908,2.016 -1.116,0.792 -2.52,1.188 -1.368,0.432 -2.88,0.432 -2.196,0 -3.888,-0.72 -1.692,-0.72 -2.88,-2.016 -1.152,-1.296 -1.764,-3.096 -0.576,-1.8 -0.576,-3.96 0,-1.98 0.612,-3.744 0.648,-1.8 1.8,-3.132 1.188,-1.368 2.844,-2.16 1.656,-0.792 3.744,-0.792 2.196,0 3.924,0.936 1.764,0.9 2.916,2.412 1.152,1.512 1.656,3.492 0.54,1.944 0.288,4.032 z m 28.295989,-4.14 q -0.252,-1.728 -1.404,-2.592 -1.116,-0.9 -2.844,-0.9 -0.792,0 -1.692,0.288 -0.9,0.252 -1.656,1.008 -0.756,0.72 -1.26,2.052 -0.504,1.296 -0.504,3.42 0,1.152 0.252,2.304 0.288,1.152 0.864,2.052 0.612,0.9 1.548,1.476 0.936,0.54 2.268,0.54 1.8,0 2.952,-1.116 1.188,-1.116 1.476,-3.132 h 4.104 q -0.576,3.636 -2.772,5.58 -2.16,1.908 -5.76,1.908 -2.196,0 -3.888,-0.72 -1.656,-0.756 -2.808,-2.016 -1.152,-1.296 -1.764,-3.06 -0.576,-1.764 -0.576,-3.816 0,-2.088 0.576,-3.924 0.576,-1.836 1.728,-3.168 1.152,-1.368 2.844,-2.124 1.728,-0.792 4.032,-0.792 1.62,0 3.06,0.432 1.476,0.396 2.592,1.224 1.152,0.828 1.872,2.088 0.72,1.26 0.864,2.988 z m 6.479997,-13.32 h 4.104003 v 14.616 l 7.416,-7.524 h 5.04 l -7.128,6.84 7.812,11.772 h -5.004 l -5.688,-9.036 -2.448,2.376 V 37 h -4.104003 z m 18.144023,7.092 h 3.888 v 2.592 h 0.108 q 0.468,-0.684 1.008,-1.26 0.54,-0.576 1.188,-0.972 0.684,-0.396 1.548,-0.612 0.864,-0.252 1.98,-0.252 1.692,0 3.132,0.756 1.476,0.756 2.088,2.34 1.044,-1.44 2.412,-2.268 1.368,-0.828 3.42,-0.828 2.952,0 4.572,1.44 1.656,1.44 1.656,4.824 V 37 h -4.104 V 26.128 q 0,-1.116 -0.072,-2.016 -0.072,-0.936 -0.432,-1.584 -0.324,-0.684 -1.008,-1.044 -0.684,-0.36 -1.872,-0.36 -2.088,0 -3.024,1.296 -0.936,1.296 -0.936,3.672 V 37 h -4.104 V 25.048 q 0,-1.944 -0.72,-2.916 -0.684,-1.008 -2.556,-1.008 -0.792,0 -1.548,0.324 -0.72,0.324 -1.296,0.936 -0.54,0.612 -0.9,1.512 -0.324,0.9 -0.324,2.052 V 37 h -4.104 z M 160.128,32.86 q 0,0.756 0.18,1.08 0.216,0.324 0.792,0.324 0.18,0 0.432,0 0.252,0 0.576,-0.072 v 2.844 q -0.216,0.072 -0.576,0.144 -0.324,0.108 -0.684,0.18 -0.36,0.072 -0.72,0.108 -0.36,0.036 -0.612,0.036 -1.26,0 -2.088,-0.504 -0.828,-0.504 -1.08,-1.764 -1.224,1.188 -3.024,1.728 -1.764,0.54 -3.42,0.54 -1.26,0 -2.412,-0.36 -1.152,-0.324 -2.052,-0.972 -0.864,-0.684 -1.404,-1.692 -0.504,-1.044 -0.504,-2.412 0,-1.728 0.612,-2.808 0.648,-1.08 1.656,-1.692 1.044,-0.612 2.304,-0.864 1.296,-0.288 2.592,-0.432 1.116,-0.216 2.124,-0.288 1.008,-0.108 1.764,-0.324 0.792,-0.216 1.224,-0.648 0.468,-0.468 0.468,-1.368 0,-0.792 -0.396,-1.296 -0.36,-0.504 -0.936,-0.756 -0.54,-0.288 -1.224,-0.36 -0.684,-0.108 -1.296,-0.108 -1.728,0 -2.844,0.72 -1.116,0.72 -1.26,2.232 h -4.104 q 0.108,-1.8 0.864,-2.988 0.756,-1.188 1.908,-1.908 1.188,-0.72 2.664,-1.008 1.476,-0.288 3.024,-0.288 1.368,0 2.7,0.288 1.332,0.288 2.376,0.936 1.08,0.648 1.728,1.692 0.648,1.008 0.648,2.484 z m -4.104,-5.184 q -0.936,0.612 -2.304,0.756 -1.368,0.108 -2.736,0.36 -0.648,0.108 -1.26,0.324 -0.612,0.18 -1.08,0.54 -0.468,0.324 -0.756,0.9 -0.252,0.54 -0.252,1.332 0,0.684 0.396,1.152 0.396,0.468 0.936,0.756 0.576,0.252 1.224,0.36 0.684,0.108 1.224,0.108 0.684,0 1.476,-0.18 0.792,-0.18 1.476,-0.612 0.72,-0.432 1.188,-1.08 0.468,-0.684 0.468,-1.656 z m 5.57999,-9.288 h 3.096 v -5.58 h 4.104 v 5.58 h 3.708 v 3.06 h -3.708 v 9.936 q 0,0.648 0.036,1.116 0.072,0.468 0.252,0.792 0.216,0.324 0.612,0.504 0.396,0.144 1.08,0.144 0.432,0 0.864,0 0.432,-0.036 0.864,-0.144 v 3.168 q -0.684,0.072 -1.332,0.144 -0.648,0.072 -1.332,0.072 -1.62,0 -2.628,-0.288 -0.972,-0.324 -1.548,-0.9 -0.54,-0.612 -0.756,-1.512 -0.18,-0.9 -0.216,-2.052 v -10.98 h -3.096 z m 25.56001,7.668 q -0.072,-0.972 -0.432,-1.872 -0.324,-0.9 -0.936,-1.548 -0.576,-0.684 -1.44,-1.08 -0.828,-0.432 -1.872,-0.432 -1.08,0 -1.98,0.396 -0.864,0.36 -1.512,1.044 -0.612,0.648 -1.008,1.548 -0.36,0.9 -0.396,1.944 z m -9.576,2.7 q 0,1.08 0.288,2.088 0.324,1.008 0.936,1.764 0.612,0.756 1.548,1.224 0.936,0.432 2.232,0.432 1.8,0 2.88,-0.756 1.116,-0.792 1.656,-2.34 h 3.888 q -0.324,1.512 -1.116,2.7 -0.792,1.188 -1.908,2.016 -1.116,0.792 -2.52,1.188 -1.368,0.432 -2.88,0.432 -2.196,0 -3.888,-0.72 -1.692,-0.72 -2.88,-2.016 -1.152,-1.296 -1.764,-3.096 -0.576,-1.8 -0.576,-3.96 0,-1.98 0.612,-3.744 0.648,-1.8 1.8,-3.132 1.188,-1.368 2.844,-2.16 1.656,-0.792 3.744,-0.792 2.196,0 3.924,0.936 1.764,0.9 2.916,2.412 1.152,1.512 1.656,3.492 0.54,1.944 0.288,4.032 z"
23
+
id="path3" />
24
+
</g>
25
+
</svg>
