-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
145 lines (142 loc) · 5.72 KB
/
index.html
File metadata and controls
145 lines (142 loc) · 5.72 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Board Gaming & Simulations</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #0c1016; color: #d8d0c0; font-family: Georgia, "Times New Roman", serif; }
#wrap { max-width: 1200px; margin: 0 auto; padding: 40px 24px 80px 24px; }
header { text-align: center; margin-bottom: 40px; }
header h1 { font-size: 2.2em; letter-spacing: 8px; color: #f0d89c; margin: 0; }
header .tag { color: #8098a8; letter-spacing: 3px; font-size: 0.85em; margin-top: 10px; }
section { margin-top: 46px; }
section h2 { font-size: 1.0em; letter-spacing: 6px; color: #f0d89c; text-transform: uppercase; border-bottom: 1px solid #2a3540; padding-bottom: 8px; margin-bottom: 20px; }
section .blurb { color: #8098a8; font-size: 0.92em; margin-bottom: 22px; line-height: 1.6; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.gcard { display: block; background: #141c28; border: 1px solid #2a3540; border-radius: 4px; padding: 16px 18px; text-decoration: none; transition: background 0.12s, border-color 0.12s, transform 0.12s; }
.gcard:hover { background: #1e2838; border-color: #3a5060; transform: translateY(-2px); }
.gcard .gname { color: #f0d89c; font-size: 1.08em; letter-spacing: 2px; font-weight: bold; margin-bottom: 4px; }
.gcard .gsub { color: #a8b0c0; font-size: 0.85em; line-height: 1.4; }
footer { margin-top: 60px; text-align: center; color: #5a6874; font-size: 0.8em; letter-spacing: 2px; }
footer a { color: #8098a8; text-decoration: none; }
footer a:hover { color: #d8d0c0; }
</style>
</head>
<body>
<div id="wrap">
<header>
<h1>BOARD GAMING</h1>
<div class="tag">Classics, original strategy games, and simulations — all in a single HTML file each.</div>
</header>
<section>
<h2>Board Games</h2>
<div class="blurb">Turn-based strategy: ancient games, classic perfects, and original designs.</div>
<div class="grid">
<a class="gcard" href="Agora.html">
<div class="gname">Agora</div>
<div class="gsub">The Mediterranean Trade</div>
</a>
<a class="gcard" href="Aresia.html">
<div class="gname">Aresia</div>
<div class="gsub">Colonize the Red Frontier</div>
</a>
<a class="gcard" href="Backgammon.html">
<div class="gname">Backgammon</div>
<div class="gsub">Classic dice & race</div>
</a>
<a class="gcard" href="Bisque.html">
<div class="gname">Bisque</div>
<div class="gsub">Battle for the Bay</div>
</a>
<a class="gcard" href="Chess.html">
<div class="gname">Chess</div>
<div class="gsub">The royal game</div>
</a>
<a class="gcard" href="Convergence.html">
<div class="gname">Convergence</div>
<div class="gsub">Rival Civilizations, Shared Economy</div>
</a>
<a class="gcard" href="Go.html">
<div class="gname">Go</div>
<div class="gsub">Territory & influence, 19x19</div>
</a>
<a class="gcard" href="Mancala.html">
<div class="gname">Mancala</div>
<div class="gsub">Ancient count-and-capture</div>
</a>
<a class="gcard" href="Odyssey.html">
<div class="gname">Odyssey</div>
<div class="gsub">Upon the Wine-Dark Sea</div>
</a>
<a class="gcard" href="Othello.html">
<div class="gname">Othello</div>
<div class="gsub">Flip to claim the board</div>
</a>
<a class="gcard" href="PenteGrammai.html">
<div class="gname">Pente Grammai</div>
<div class="gsub">The Ancient Greek Game of Five Lines</div>
</a>
<a class="gcard" href="Senet.html">
<div class="gname">Senet</div>
<div class="gsub">The ancient Egyptian racing game</div>
</a>
<a class="gcard" href="Tidelands.html">
<div class="gname">Tidelands</div>
<div class="gsub">Bronze-age maritime trade</div>
</a>
<a class="gcard" href="Ur.html">
<div class="gname">Ur</div>
<div class="gsub">The Royal Game of Ur</div>
</a>
</div>
</section>
<section>
<h2>Simulations</h2>
<div class="blurb">Real-time physics, engineering, and management sims.</div>
<div class="grid">
<a class="gcard" href="Apoapsis.html">
<div class="gname">Apoapsis</div>
<div class="gsub">3D rocket flight sim</div>
</a>
<a class="gcard" href="BiosphereBlue.html">
<div class="gname">Biosphere Blue</div>
<div class="gsub">Planet-scale geosim</div>
</a>
<a class="gcard" href="BonnevilleSpillwayOperator.html">
<div class="gname">Bonneville Spillway</div>
<div class="gsub">Columbia River dam operator</div>
</a>
<a class="gcard" href="Cliffwalkers.html">
<div class="gname">Cliffwalkers</div>
<div class="gsub">Save the wee folk</div>
</a>
<a class="gcard" href="Doctrine.html">
<div class="gname">Doctrine</div>
<div class="gsub">Geopolitical sim, 1990–2050</div>
</a>
<a class="gcard" href="EclipsePredictor.html">
<div class="gname">Eclipse Predictor</div>
<div class="gsub">Step through 21st-c solar eclipse paths</div>
</a>
<a class="gcard" href="Floodline.html">
<div class="gname">Floodline</div>
<div class="gsub">California flood defense</div>
</a>
<a class="gcard" href="Metropolis2K.html">
<div class="gname">Metropolis 2K</div>
<div class="gsub">Build an isometric city</div>
</a>
<a class="gcard" href="Tower.html">
<div class="gname">Tower</div>
<div class="gsub">High-rise operations</div>
</a>
</div>
</section>
<footer>
<a href="https://github.com/mf4633/board-gaming">github.com/mf4633/board-gaming</a>
</footer>
</div>
</body>
</html>