Only.games.github (2024)

.game-card background: #11161f; border-radius: 1.5rem; padding: 1rem; transition: transform 0.1s ease, box-shadow 0.2s; border: 1px solid #2a2f3f; text-decoration: none; color: inherit;

loadGames(); Create games/snake/index.html :

.game-desc font-size: 0.85rem; color: #9aa9c1; only.games.github

only.games.github Enable GitHub Pages in Settings > Pages > Source = main (root) .

async function loadGames() const res = await fetch('games.json'); const data = await res.json(); const grid = document.getElementById('gameGrid'); grid.innerHTML = data.games.map(game => ` <a href="$game.path" class="game-card" target="_top"> <div class="game-thumb">$game.thumb</div> <div class="game-title">$game.title</div> <div class="game-desc">$game.desc</div> </a> `).join(''); .game-card background: #11161f

body font-family: system-ui, 'Segoe UI', monospace; background: #0a0f1e; color: #eef4ff; padding: 2rem; min-height: 100vh;

.game-title font-size: 1.3rem; font-weight: 600; margin: 0.75rem 0 0.25rem; transition: transform 0.1s ease

.game-card:hover transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.4); border-color: #5b6e8c;