1<!DOCTYPE html> 2<html lang="en" class="dark-mode"> 3<head> 4 5 <title>Games</title> 6 <meta charset="utf-8" /> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 8 <meta name="HandheldFriendly" content="True" /> 9 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 10 11 <link rel="preload" as="style" href="/assets/built/screen.css?v=97c80cc018" /> 12 <link rel="preload" as="script" href="/assets/built/casper.js?v=97c80cc018" /> 13 14 <link rel="stylesheet" type="text/css" href="/assets/built/screen.css?v=97c80cc018" /> 15 16 <meta name="description" content="A showcase of some single page html vibe coded games. Whimsy at best"> 17 <link rel="canonical" href="https://voidtalker.com/games/"> 18 <meta name="referrer" content="no-referrer-when-downgrade"> 19 20 <meta property="og:site_name" content="Voidtalker"> 21 <meta property="og:type" content="website"> 22 <meta property="og:title" content="Games"> 23 <meta property="og:description" content="A showcase of some single page html vibe coded games. Whimsy at best"> 24 <meta property="og:url" content="https://voidtalker.com/games/"> 25 <meta property="og:image" content="https://voidtalker.com/content/images/2025/05/void1.png"> 26 <meta property="article:published_time" content="2026-03-27T21:28:16.000Z"> 27 <meta property="article:modified_time" content="2026-03-29T00:27:06.000Z"> 28 <meta property="article:tag" content="personal"> 29 30 <meta name="twitter:card" content="summary_large_image"> 31 <meta name="twitter:title" content="Games"> 32 <meta name="twitter:description" content="A showcase of some single page html vibe coded games. Whimsy at best"> 33 <meta name="twitter:url" content="https://voidtalker.com/games/"> 34 <meta name="twitter:image" content="https://voidtalker.com/content/images/2025/05/void1.png"> 35 <meta name="twitter:label1" content="Written by"> 36 <meta name="twitter:data1" content="Chris Baldwin"> 37 <meta name="twitter:label2" content="Filed under"> 38 <meta name="twitter:data2" content="personal"> 39 <meta name="twitter:site" content="@voidtalker"> 40 <meta name="twitter:creator" content="@chrisbaldwiz"> 41 <meta property="og:image:width" content="1024"> 42 <meta property="og:image:height" content="1024"> 43 44
44<script type="application/ld+json"> 45{ 46 "@context": "https://schema.org", 47 "@type": "Article", 48 "publisher": { 49 "@type": "Organization", 50 "name": "Voidtalker", 51 "url": "https://voidtalker.com/", 52 "logo": { 53 "@type": "ImageObject", 54 "url": "https://voidtalker.com/favicon.ico", 55 "width": 48, 56 "height": 48 57 } 58 }, 59 "author": { 60 "@type": "Person", 61 "name": "Chris Baldwin", 62 "image": { 63 "@type": "ImageObject", 64 "url": "https://www.gravatar.com/avatar/cbdb935fa6c997a74f173aa46d4e3926?s=250&r=x&d=mp", 65 "width": 250, 66 "height": 250 67 }, 68 "url": "https://voidtalker.com/author/chris/", 69 "sameAs": [ 70 "https://voidtalker.com/about/", 71 "https://x.com/chrisbaldwiz", 72 "https://www.youtube.com/@chrisdbaldwin", 73 "https://www.linkedin.com/in/chrisdbaldwin" 74 ] 75 }, 76 "headline": "Games", 77 "url": "https://voidtalker.com/games/", 78 "datePublished": "2026-03-27T21:28:16.000Z", 79 "dateModified": "2026-03-29T00:27:06.000Z", 80 "keywords": "personal", 81 "description": "A showcase of some single page html vibe coded games. Whimsy at best", 82 "mainEntityOfPage": "https://voidtalker.com/games/" 83} 84 </script>
84 85 86 <meta name="generator" content="Ghost 6.42"> 87 <link rel="alternate" type="application/rss+xml" title="Voidtalker" href="https://voidtalker.com/rss/"> 88 89
89<script defer src="https://cdn.jsdelivr.net/ghost/sodo-search@~1.8/umd/sodo-search.min.js" data-key="6e97cdeb9c8a602d88ead0f7ce" data-styles="https://cdn.jsdelivr.net/ghost/sodo-search@~1.8/umd/main.css" data-sodo-search="https://voidtalker.com/" data-locale="en" crossorigin="anonymous"></script>
89 90 91 <link href="https://voidtalker.com/webmentions/receive/" rel="webmention"> 92
92<script defer src="/public/cards.min.js?v=97c80cc018"></script>
92<style>:root {--ghost-accent-color: #c9a555;}</style> 93 <link rel="stylesheet" type="text/css" href="/public/cards.min.css?v=97c80cc018"> 94 <!-- Self-hosted fonts: preload above-the-fold + local @font-face. 95 No third-party hop (fonts.gstatic.com), so the real fonts are 96 ready by first paint -> no fallback flicker. --> 97<link rel="preload" href="/fonts/instrumentserif-italic-latin.woff2" as="font" type="font/woff2" crossorigin> 98<link rel="preload" href="/fonts/librecaslon-normal-latin.woff2" as="font" type="font/woff2" crossorigin> 99<link rel="preload" href="/fonts/fraunces-normal-latin.woff2" as="font" type="font/woff2" crossorigin> 100<link rel="preload" href="/fonts/jetbrainsmono-normal-latin.woff2" as="font" type="font/woff2" crossorigin> 101<style> 102@font-face { 103 font-family: 'Fraunces'; 104 font-style: normal; 105 font-weight: 300 500; 106 font-display: swap; 107 src: url('/fonts/fraunces-normal-latin.woff2') format('woff2'); 108 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 109} 110@font-face { 111 font-family: 'Fraunces'; 112 font-style: normal; 113 font-weight: 300 500; 114 font-display: swap; 115 src: url('/fonts/fraunces-normal-latinext.woff2') format('woff2'); 116 unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; 117} 118@font-face { 119 font-family: 'Fraunces'; 120 font-style: italic; 121 font-weight: 300 400; 122 font-display: swap; 123 src: url('/fonts/fraunces-italic-latin.woff2') format('woff2'); 124 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 125} 126@font-face { 127 font-family: 'Fraunces'; 128 font-style: italic; 129 font-weight: 300 400; 130 font-display: swap; 131 src: url('/fonts/fraunces-italic-latinext.woff2') format('woff2'); 132 unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; 133} 134@font-face { 135 font-family: 'Instrument Serif'; 136 font-style: italic; 137 font-weight: 400; 138 font-display: swap; 139 src: url('/fonts/instrumentserif-italic-latin.woff2') format('woff2'); 140 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 141} 142@font-face { 143 font-family: 'Instrument Serif'; 144 font-style: italic; 145 font-weight: 400; 146 font-display: swap; 147 src: url('/fonts/instrumentserif-italic-latinext.woff2') format('woff2'); 148 unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; 149} 150@font-face { 151 font-family: 'Libre Caslon Display'; 152 font-style: normal; 153 font-weight: 400; 154 font-display: swap; 155 src: url('/fonts/librecaslon-normal-latin.woff2') format('woff2'); 156 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 157} 158@font-face { 159 font-family: 'Libre Caslon Display'; 160 font-style: normal; 161 font-weight: 400; 162 font-display: swap; 163 src: url('/fonts/librecaslon-normal-latinext.woff2') format('woff2'); 164 unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; 165} 166@font-face { 167 font-family: 'JetBrains Mono'; 168 font-style: normal; 169 font-weight: 300 400; 170 font-display: swap; 171 src: url('/fonts/jetbrainsmono-normal-latin.woff2') format('woff2'); 172 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 173} 174@font-face { 175 font-family: 'JetBrains Mono'; 176 font-style: normal; 177 font-weight: 300 400; 178 font-display: swap; 179 src: url('/fonts/jetbrainsmono-normal-latinext.woff2') format('woff2'); 180 unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1D
180BF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; 181} 182</style> 183 184<style> 185/* âââ DESIGN TOKENS âââ */ 186:root { 187 --bg: #0c0c10; 188 --bg-warm: #100f13; 189 --bg-surface: #16151b; 190 --bg-surface-hover: #1c1b22; 191 --border-subtle: rgba(200, 185, 155, 0.06); 192 --border-hover: rgba(200, 185, 155, 0.14); 193 194 --text: #cdc8b8; 195 --text-secondary: #938e80; 196 --text-tertiary: #5e5a50; 197 198 --warm: #c9a555; 199 --warm-soft: #a8904d; 200 --warm-glow: rgba(201, 165, 85, 0.08); 201 --teal: #6aad9e; 202 --teal-soft: rgba(106, 173, 158, 0.12); 203 --slate: #8b8aad; 204 --slate-soft: rgba(139, 138, 173, 0.10); 205 --ember: #c47a5a; 206 207 --font-display: 'Libre Caslon Display', Georgia, serif; 208 --font-accent: 'Instrument Serif', Georgia, serif; 209 --font-body: 'Fraunces', Georgia, serif; 210 --font-mono: 'JetBrains Mono', 'Courier New', monospace; 211 212 --text-sm: clamp(1.28rem, 1.2rem + 0.2vw, 1.4rem); 213 --text-base: clamp(1.52rem, 1.44rem + 0.25vw, 1.7rem); 214 --text-lg: clamp(1.84rem, 1.6rem + 0.5vw, 2.16rem); 215 --text-xl: clamp(2.24rem, 1.76rem + 1.2vw, 3.2rem); 216 --text-2xl: clamp(2.88rem, 2.08rem + 2vw, 4.48rem); 217 218 --space-xs: clamp(0.4rem, 0.32rem + 0.2vw, 0.64rem); 219 --space-sm: clamp(0.8rem, 0.64rem + 0.4vw, 1.2rem); 220 --space-md: clamp(1.6rem, 1.36rem + 0.7vw, 2.24rem); 221 --space-lg: clamp(2.8rem, 2.08rem + 2vw, 4.4rem); 222 --space-xl: clamp(4.8rem, 3.2rem + 4vw, 8rem); 223 224 --ease-out: cubic-bezier(0.16, 1, 0.3, 1); 225 --ease-smooth: cubic-bezier(0.25, 1, 0.5, 1); 226 227 --ghost-accent-color: #c9a555 !important; 228} 229 230 231/* âââ BASE âââ */ 232html { scrollbar-width: thin; scrollbar-color: var(--warm-soft) var(--bg); } 233 234body { 235 background: var(--bg) !important; 236 color: var(--text) !important; 237 font-family: var(--font-body) !important; 238 font-size: var(--text-base) !important; 239 line-height: 1.72; 240 font-weight: 300; 241 font-optical-sizing: auto; 242 -webkit-font-smoothing: antialiased; 243} 244 245body::before { 246 content: ''; 247 position: fixed; 248 inset: 0; 249 background: 250 radial-gradient(ellipse at 15% 50%, rgba(201, 165, 85, 0.025) 0%, transparent 55%), 251 radial-gradient(ellipse at 85% 25%, rgba(106, 173, 158, 0.018) 0%, transparent 50%), 252 radial-gradient(ellipse at 50% 90%, rgba(196, 122, 90, 0.015) 0%, transparent 45%); 253 pointer-events: none; 254 z-index: 0; 255} 256 257body::after { 258 content: ''; 259 position: fixed; 260 inset: 0; 261 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.018'/%3E%3C/svg%3E"); 262 pointer-events: none; 263 z-index: 9999; 264} 265 266.viewport { position: relative; z-index: 1; } 267 268::selection { background: rgba(201, 165, 85, 0.25); color: var(--text); } 269 270 271/* âââ HEADER / NAV âââ */ 272.gh-head { 273 background: transparent !important; 274 border-bottom: 1px solid var(--border-subtle) !important; 275} 276.gh-head-inner { background: transparent !important; } 277 278.gh-head-logo, .gh-head-logo.no-image { 279 font-family: var(--font-display) !important; 280 color: var(--text) !important; 281 font-size: var(--text-lg) !important; 282 font-weight: 400 !important; 283} 284 285.gh-head-menu .nav a { 286 font-family: var(--font-mono) !important; 287 font-size: 14px !important; 288 letter-spacing: 1.5px !important; 289 text-transform: uppercase !important; 290 color: var(--text-secondary) !important; 291 transition: color 0.3s var(--ease-out); 292} 293.gh-head-menu .nav a:hover, 294.gh-head-menu .nav .nav-current a { color: var(--warm) !important; } 295 296.gh-head .gh-icon-btn, .gh-burger { color: var(--text-secondary) !important; } 297.gh-head .gh-icon-btn:hover, .gh-burger:hover { color: var(--warm) !important; } 298 299.gh-dropdown { 300 background: var(--bg-surface) !important; 301 border: 1px solid var(--border-subtle) !important; 302 border-radius: 5px !important; 303} 304.gh-dropdown a { color: var(--text-secondary) !important; } 305.gh-dropdown a:hover { color: var(--warm) !important; background: var(--bg-surface-hover) !important; } 306 307.gh-head-open .gh-head-inner { background: var(--bg) !important; } 308 309 310/* âââ SITE HEADER âââ */ 311.site-header-content { background: var(--bg) !important; } 312.site-header-cover { 313 opacity: 0.25 !important; 314 filter: saturate(0.4) brightness(0.6); 315 mix-blend-mode: luminosity; 316} 317.site-description { 318 font-family: var(--font-accent) !important; 319 font-style: italic; 320 color: var(--warm) !important; 321 font-size: var(--text-2xl) !important; 322 font-weight: 400 !important; 323} 324 325 326/* âââ POST CARDS âââ */ 327.post-card { 328 background: var(--bg-surface) !important; 329 border: 1px solid var(--border-subtle) !important; 330 border-radius: 5px !important; 331 overflow: hidden; 332 transition: border-color 0.4s, transform 0.35s var(--ease-smooth) !important; 333} 334.post-card:hover { 335 border-color: var(--border-hover) !important; 336 transform: translateY(-2px) !important; 337} 338 339.post-card-image { 340 transition: transform 0.5s var(--ease-smooth), filter 0.5s; 341 filter: saturate(0.85) brightness(0.9); 342} 343.post-card:hover .post-card-image { 344 transform: scale(1.03); 345 filter: saturate(1) brightness(1); 346} 347 348.post-card-title { 349 font-family: var(--font-display) !important; 350 font-weight: 400 !important; 351 color: var(--text) !important; 352 line-height: 1.25 !important; 353} 354 355.post-card-excerpt { 356 font-family: var(--font-body) !important; 357 color: var(--text-secondary) !important; 358 font-weight: 300 !important; 359 font-size: var(--text-base) !important; 360 line-height: 1.72 !important; 361} 362 363.post-card-primary-tag { 364 font-family: var(--font-mono) !important; 365 font-size: 12px !important; 366 letter-spacing: 2px !important; 367 text-transform: uppercase !important; 368 color: var(--teal) !important; 369} 370 371.post-card-meta { 372 color: var(--text-tertiary) !important; 373 font-family: var(--font-mono) !important; 374 font-size: 13px !important; 375 padding: 0 var(--space-md) var(--space-md) !important; 376} 377.post-card-large .post-card-meta { 378 padding: 0 var(--space-lg) var(--space-lg) !important; 379} 380.post-card-meta-date, 381.post-card-meta-length { 382 color: var(--text-tertiary) !important; 383 font-family: var(--font-mono) !important; 384 font-size: 13px !important; 385} 386 387.post-card-large { border-color: var(--border-hover) !important; } 388 389/* Post card content padding (fix for text flush against card edges) */ 390.post-card-content-link { 391 padding: 0 var(--space-md) var(--space-sm) !important; 392} 393.post-card-large .post-card-content-link { 394 padding: var(--space-md) var(--space-lg) var(--space-sm) !important; 395} 396 397 398/* âââ LINKS âââ */ 399a { color: var(--warm) !important; text-decoration: none !important; } 400.post-card-content-link, .post-card-content-link:hover { color: inherit !important; opacity: 1 !important; } 401.post-card-title, .post-card-title a { color: var(--text) !important; } 402.gh-head-logo, .gh-head-logo:hover { color: var(--text) !important; opacity: 1 !important; } 403 404 405/* âââ ARTICLE PAGES âââ */ 406.gh-article-title, .article-title { 407 font-family: var(--font-display) !important; 408 font-weight: 400 !important; 409 color: var(--text) !important; 410 line-height: 1.18 !important; 411} 412 413.gh-content, .article-body { 414 font-family: var(--font-body) !important; 415 color: var(--text) !important; 416 font-weight: 300 !important; 417 line-height: 1.72 !important; 418} 419 420.gh-content h1, .gh-content h2, .gh-content h3, .gh-content h4 { 421 font-family: var(--font-display) !important; 422 font-weight: 400 !important; 423 color: var(--text) !important; 424} 425.gh-content h2 { font-size: var(--text-2xl) !important; } 426.gh-content h3 { font-size: var(--text-xl) !important; } 427.gh-content p { color: var(--text) !important; } 428 429.gh-content a { 430 color: var(--warm) !important; 431 background-image: linear-gradient(var(--warm-soft), var(--warm-soft)); 432 background-size: 0% 1px; 433 background-position: left bottom; 434 background-repeat: no-repeat; 435 transition: background-size 0.35s var(--ease-out); 436} 437.gh-content a:hover { background-size: 100% 1px; opacity: 1 !important; } 438 439.gh-content code { 440 font-family: var(--font-mono) !important; 441 background: var(--bg-surface) !important; 442 color: var(--teal) !important; 443 padding: 2px 6px; 444 border-radius: 3px; 445 border: 1px solid var(--border-subtle); 446} 447.gh-content pre { 448 background: var(--bg-surface) !important; 449 border: 1px solid var(--border-subtle) !important; 450 border-radius: 5px !important; 451} 452.gh-content pre code { background: transparent !important; border: none !important; color: var(--text) !important; } 453 454.gh-content blockquote { 455 border-left: 2px solid var(--warm-soft) !important; 456 padding-left: 1.2em !important; 457 color: var(--text-secondary) !important; 458 font-family: var(--font-accent) !important; 459 font-style: italic; 460} 461.gh-content > blockquote:not([class])::before { 462 background: transparent !important; 463} 464 465.gh-content hr { 466 border: none !important; 467 height: 1px !important; 468 background: linear-gradient(to right, transparent, var(--border-hover), transparent) !important; 469} 470 471.gh-content figcaption { 472 font-family: var(--font-mono) !important; 473 font-size: 11px !important; 474 color: var(--text-tertiary) !important; 475} 476 477.gh-article-meta, .article-byline { 478 font-family: var(--font-mono) !important; 479 font-size: 11px !important; 480 color: var(--text-tertiary) !important; 481} 482 483.gh-article-tag, .article-tag a { 484 font-family: var(--font-mono) !important; 485 font-size: 10px !important; 486 letter-spacing: 3px !important; 487 text-transform: uppercase !important; 488 color: var(--teal) !important; 489} 490 491 492/* âââ GHOST CARDS âââ */ 493.kg-callout-card { 494 background: var(--bg-surface) !important; 495 border: 1px solid var(--border-subtle) !important; 496 border-radius: 5px !important; 497 color: var(--text) !important; 498} 499.kg-bookmark-card { 500 border: 1px solid var(--border-subtle) !important; 501 border-radius: 5px !important; 502 background: var(--bg-surface) !important; 503} 504.kg-bookmark-card:hover { border-color: var(--border-hover) !important; } 505.kg-bookmark-title { font-family: var(--font-display) !important; color: var(--text) !important; } 506.kg-bookmark-description { color: var(--text-secondary) !important; } 507.kg-bookmark-metadata { color: var(--text-tertiary) !important; font-family: var(--font-mono) !important; } 508 509 510/* âââ PAGINATION âââ */ 511.pagination { font-family: var(--font-mono) !important; color: var(--text-tertiary) !important; } 512.pagination .page-number { font-size: 11px !important; color: var(--text-tertiary) !important; } 513.pagination a { 514 color: var(--warm) !important; 515 border: 1px solid rgba(201, 165, 85, 0.25) !important; 516 border-radius: 3px !important; 517 font-family: var(--font-mono) !important; 518 font-size: 11px !important; 519} 520.pagination a:hover { background: var(--warm) !important; color: var(--bg) !important; opacity: 1 !important; } 521 522 523/* âââ FOOTER âââ */ 524.site-footer { 525 background: transparent !important; 526 border-top: 1px solid var(--border-subtle) !important; 527 color: var(--text-tertiary) !important; 528 font-family: var(--font-mono) !important; 529 font-size: 11px !important; 530} 531.site-footer a { color: var(--text-tertiary) !important; } 532.site-footer a:hover { color: var(--warm) !important; } 533.gh-powered-by { opacity: 0.4; } 534.copyright a { color: var(--text-secondary) !important; } 535 536 537/* âââ SUBSCRIBE / CTA âââ */ 538.gh-subscribe-input { 539 background: var(--bg) !important; 540 border: 1px solid var(--border-subtle) !important; 541 color: var(--text) !important; 542 font-family: var(--font-mono) !important; 543} 544.gh-subscribe-input:focus { border-color: var(--warm-soft) !important; } 545.gh-subscribe-btn, button[type="submit"] { 546 background: var(--warm) !important; 547 color: var(--bg) !important; 548 font-family: var(--font-mono) !important; 549 font-size: 11px !important; 550 letter-spacing: 1px !important; 551 text-transform: uppercase !important; 552 border-radius: 3px !important; 553} 554 555 556/* âââ FOCUS âââ */ 557a:focus-visible, button:focus-visible { 558 outline: 2px solid var(--warm) !important; 559 outline-offset: 3px; 560} 561 562/* âââ PRINT âââ */ 563@media print { 564 body::before, body::after { display: none !important; } 565 body { background: #fff !important; color: #111 !important; } 566} 567</style> 568 569 570<!-- Google tag (gtag.js) -->
vendor: 64 bytes, lines 570-571
570 571<script async src="https://www.googletagmanager.com/gtag/js?id=
571G-T6XWK2EPS3
vendor: 12 bytes, line 571
571"></script>
572<script> 573
vendor: 134 bytes, lines 573-577
573window.dataLayer = window.dataLayer || []; 574 function gtag(){dataLayer.push(arguments);} 575 gtag('js', new Date()); 576 577 gtag('config', '
577G-T6XWK2EPS3
vendor: 4 bytes, line 577
577');
578</script>
578 579 <link rel="preconnect" href="https://fonts.bunny.net"><link rel="stylesheet" href="https://fonts.bunny.net/css?family=inter:400,500,600|manrope:300,500,700"><style>:root {--gh-font-heading: Inter;--gh-font-body: Manrope;}</style> 580 581</head> 582<body class="page-template page-games tag-personal gh-font-heading-inter gh-font-body-manrope is-head-middle-logo has-cover"> 583<div class="viewport"> 584 585 <header id="gh-head" class="gh-head outer"> 586 <div class="gh-head-inner inner"> 587 <div class="gh-head-brand"> 588 <a class="gh-head-logo no-image" href="https://voidtalker.com"> 589 Voidtalker 590 </a> 591 <button class="gh-search gh-icon-btn" aria-label="Search this site" data-ghost-search><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" width="20" height="20"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></button> 592 <button class="gh-burger" aria-label="Main Menu"></button> 593 </div> 594 595 <nav class="gh-head-menu"> 596 <ul class="nav"> 597 <li class="nav-home"><a href="https://voidtalker.com/">Home</a></li> 598 <li class="nav-about"><a href="https://voidtalker.com/about/">About</a></li> 599 <li class="nav-musings"><a href="https://voidtalker.com/musings/">Musings</a></li> 600 <li class="nav-games nav-current"><a href="https://voidtalker.com/games/">Games</a></li> 601 <li class="nav-oracle"><a href="https://voidtalker.com/oracle/">Oracle</a></li> 602 <li class="nav-urien-lab"><a href="https://github.com/chrisDBaldwin/blueabs-urien-lab">Urien Lab</a></li> 603 <li class="nav-fc-rank"><a href="https://fightcade.voidtalker.com/">FC Rank</a></li> 604 <li class="nav-truthbyte"><a href="https://truthbyte.voidtalker.com">TruthByte</a></li> 605</ul> 606 607 </nav> 608 609 <div class="gh-head-actions"> 610 <button class="gh-search gh-icon-btn" aria-label="Search this site" data-ghost-search><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" width="20" height="20"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></button> 611 </div> 612 </div> 613 </header> 614 615 <div class="site-content"> 616 617 618<style> 619 .games-mount { min-height: 80vh; } 620 /* Hide the Ghost page title/header since index.html has its own */ 621 .article-title, .gh-article-header { display: none; } 622</style> 623 624<main class="games-mount"></main> 625
626<script> 627(function() { 628 var mount = document.querySelector('.games-mount'); 629 fetch('/games/index.html') 630 .then(function(r) { return r.text(); }) 631 .then(function(html) { 632 var doc = new DOMParser().parseFromString(html, 'text/html'); 633 doc.querySelectorAll('style').forEach(function(s) { 634 document.head.appendChild(s.cloneNode(true)); 635 }); 636 doc.querySelectorAll('link[href*="fonts"]').forEach(function(l) { 637 if (!document.querySelector('link[href="' + l.getAttribute('href') + '"]')) { 638 document.head.appendChild(l.cloneNode(true)); 639 } 640 }); 641 var page = doc.querySelector('.page'); 642 if (page) { 643 // Remove the static nav bar since Ghost provides its own 644 var nav = page.querySelector('.site-nav'); 645 if (nav) nav.remove(); 646 mount.appendChild(page); 647 // Rewrite relative links to /games/ prefix 648 page.querySelectorAll('a[href]').forEach(function(a) { 649 var href = a.getAttribute('href'); 650 if (href && !href.startsWith('/') && !href.startsWith('http') && href.endsWith('.html')) { 651 a.setAttribute('href', '/games/' + href); 652 } 653 }); 654 } 655 }) 656 .catch(function() { 657 mount.innerHTML = '<p style="text-align:center;padding:4rem;color:#999;">Unable to load games.</p>'; 658 }); 659})(); 660</script>
660 661 662 </div> 663 664 <footer class="site-footer outer"> 665 <div class="inner"> 666 <section class="copyright"><a href="https://voidtalker.com">Voidtalker</a> © 2026</section> 667 <nav class="site-footer-nav"> 668 669 </nav> 670 <div class="gh-powered-by"><a href="https://ghost.org/" target="_blank" rel="noopener">Powered by Ghost</a></div> 671 </div> 672 </footer> 673 674</div> 675 676 <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> 677 <div class="pswp__bg"></div> 678 679 <div class="pswp__scroll-wrap"> 680 <div class="pswp__container"> 681 <div class="pswp__item"></div> 682 <div class="pswp__item"></div> 683 <div class="pswp__item"></div> 684 </div> 685 686 <div class="pswp__ui pswp__ui--hidden"> 687 <div class="pswp__top-bar"> 688 <div class="pswp__counter"></div> 689 690 <button class="pswp__button pswp__button--close" title="Close (Esc)"></button> 691 <button class="pswp__button pswp__button--share" title="Share"></button> 692 <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> 693 <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> 694 695 <div class="pswp__preloader"> 696 <div class="pswp__preloader__icn"> 697 <div class="pswp__preloader__cut"> 698 <div class="pswp__preloader__donut"></div> 699 </div> 700 </div> 701 </div> 702 </div> 703 704 <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> 705 <div class="pswp__share-tooltip"></div> 706 </div> 707 708 <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button> 709 <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button> 710 711 <div class="pswp__caption"> 712 <div class="pswp__caption__center"></div> 713 </div> 714 </div> 715 </div> 716</div>
717<script 718 src="https://code.jquery.com/jquery-3.5.1.min.js" 719 integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" 720 crossorigin="anonymous"> 721</script>
vendor: 1 bytes, line 721
721
722<script src="/assets/built/casper.js?v=97c80cc018"></script>
vendor: 1 bytes, line 722
722
723<script> 724$(document).ready(function () { 725 // Mobile Menu Trigger 726 $('.gh-burger').click(function () { 727 $('body').toggleClass('gh-head-open'); 728 }); 729 // FitVids - Makes video embeds responsive 730 $(".gh-content").fitVids(); 731}); 732</script>
732 733 734 735
736<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"f6a6c2ac816a4fea961a6f6fc09ac504","r":1,"spa":2}' crossorigin="anonymous"></script>
736 737</body> 738</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.