Map.md
... ...
@@ -0,0 +1,80 @@
1
+<div class="hexmap">
2
+
3
+ <!-- ============ World ============ -->
4
+ <section id="world" class="board is-default" aria-label="World">
5
+ <div class="crumbs">You are here: <strong>World</strong></div>
6
+ <div class="hexgrid">
7
+ <!-- Center -->
8
+ <div class="hex pos-c"><a href="#baleful">
9
+ <span class="label">BALEFUL<br>SEA</span></a></div>
10
+
11
+ <!-- Ring -->
12
+ <div class="hex pos-nw"><a href="#rioja">
13
+ <span class="label">RIOJA</span></a></div>
14
+
15
+ <div class="hex pos-sw"><a href="#rioja">
16
+ <span class="label">RIOJA</span></a></div>
17
+
18
+ <div class="hex pos-ne"><a href="#vasloria">
19
+ <span class="label">VASLORIA</span></a></div>
20
+
21
+ <div class="hex pos-se"><a href="#vasloria">
22
+ <span class="label">VASLORIA</span></a></div>
23
+
24
+ <div class="hex pos-n"><a href="#baleful">
25
+ <span class="label">BALEFUL<br>SEA</span></a></div>
26
+
27
+ <div class="hex pos-s"><a href="#blackbottom">
28
+ <span class="label">BLACKBOTTOM<br>BAY</span></a></div>
29
+ </div>
30
+ </section>
31
+
32
+ <!-- ============ Vasloria (provinces) ============ -->
33
+ <section id="vasloria" class="board" aria-label="Vasloria">
34
+ <div class="crumbs"><a href="#world">World</a> ▸ <strong>Vasloria</strong></div>
35
+ <h2>Provinces</h2>
36
+ <div class="hexgrid">
37
+ <div class="hex pos-c"><a href="#bedegar"><span class="label">BEDEGAR</span></a></div>
38
+ <div class="hex pos-nw"><a href="#dalrath"><span class="label">DALRATH</span></a></div>
39
+ <div class="hex pos-ne"><a href="#elgenwode"><span class="label">ELGENWODE</span></a></div>
40
+ <div class="hex pos-sw"><a href="#blackbottom"><span class="label">BLACKBOTTOM<br>BAY</span></a></div>
41
+ <div class="hex pos-se"><a href="#plainfear"><span class="label">PLAIN<br>OF FEAR</span></a></div>
42
+ <div class="hex pos-n"><a href="#greatwoods"><span class="label">GREAT<br>WOODS</span></a></div>
43
+ <div class="hex pos-s"><a href="#tor"><span class="label">TOR</span></a></div>
44
+ </div>
45
+ </section>
46
+
47
+ <!-- ============ Dalrath (region) ============ -->
48
+ <section id="dalrath" class="board" aria-label="Dalrath">
49
+ <div class="crumbs"><a href="#world">World</a> ▸ <a href="#vasloria">Vasloria</a> ▸ <strong>Dalrath</strong></div>
50
+ <h2>Dalrath Region</h2>
51
+ <div class="hexgrid">
52
+ <div class="hex pos-c"><a href="#broadhurst"><span class="label">BROADHURST</span></a></div>
53
+ <div class="hex pos-nw"><a href="#temple"><span class="label">TEMPLE<br>CLOISTER</span></a></div>
54
+ <div class="hex pos-sw"><a href="#sealton"><span class="label">SEALTON<br>HEATH</span></a></div>
55
+ <div class="hex pos-ne"><a href="#dwarven"><span class="label">DWARVEN<br>HILLS</span></a></div>
56
+ <div class="hex pos-se"><a href="#wilds"><span class="label">THE<br>WILDS</span></a></div>
57
+ <div class="hex pos-n"><a href="#silverwood"><span class="label">SILVER<br>WOOD</span></a></div>
58
+ <div class="hex pos-s"><a href="#blackforest"><span class="label">BLACK<br>FOREST</span></a></div>
59
+ </div>
60
+ </section>
61
+
62
+ <!-- ============ Broadhurst (town) ============ -->
63
+ <section id="broadhurst" class="board" aria-label="Broadhurst">
64
+ <div class="crumbs"><a href="#world">World</a> ▸ <a href="#vasloria">Vasloria</a> ▸ <a href="#dalrath">Dalrath</a> ▸ <strong>Broadhurst</strong></div>
65
+ <h2>Broadhurst</h2>
66
+ <div class="hexgrid">
67
+ <!-- Leaf hexes can go to wiki pages instead of boards -->
68
+ <div class="hex pos-c"><a href="/Feather_Bed_Inn"><span class="label">FEATHER<br>BED INN</span></a></div>
69
+ <div class="hex pos-nw"><a href="/Ashleigh_Smithy"><span class="label">ASHLEIGH’S<br>SMITHY</span></a></div>
70
+ <div class="hex pos-ne"><a href="/Town_Hall"><span class="label">TOWN<br>HALL</span></a></div>
71
+ <div class="hex pos-sw"><a href="/Market"><span class="label">MARKET</span></a></div>
72
+ <div class="hex pos-se"><a href="/Shrine"><span class="label">SHRINE</span></a></div>
73
+ <div class="hex pos-n"><a href="/Mill"><span class="label">MILL</span></a></div>
74
+ <div class="hex pos-s"><a href="/Docks"><span class="label">DOCKS</span></a></div>
75
+ </div>
76
+ </section>
77
+
78
+ <!-- Add more boards as needed: #bedegar, #blackbottom, etc. -->
79
+
80
+</div>
custom.css
... ...
@@ -278,3 +278,103 @@ img.badge.icon { filter: none; } /* ensure no accidental filters */
278 278
h1.header-title {
279 279
display: none !important;
280 280
}
281
+
282
+/* ==== HEX MAP (pure CSS drilldown) ===================================== */
283
+.hexmap {
284
+ --hex-size: 120px; /* overall scale */
285
+ --gap: 10px;
286
+ --bg: var(--bg, #111);
287
+ --fg: var(--fg, #e0e0e0);
288
+ --accent: #9bb6ff;
289
+ --hex-bg: #1b1b1b;
290
+ --hex-bg-hover: #232323;
291
+
292
+ font: inherit;
293
+ color: var(--fg);
294
+ margin: 1rem 0 2rem;
295
+}
296
+
297
+/* Boards (layers). Use :target to show one at a time */
298
+.hexmap .board {
299
+ display: none;
300
+ margin: 0 auto 1.5rem;
301
+ max-width: calc(var(--hex-size) * 5 + var(--gap) * 6);
302
+}
303
+.hexmap .board:target { display: block; }
304
+.hexmap .board.is-default { display: block; } /* shown when no hash */
305
+
306
+/* Grid for 7 hexes: 5x5 grid with strategic placements */
307
+.hexgrid {
308
+ display: grid;
309
+ grid-template-columns: repeat(5, 1fr);
310
+ gap: var(--gap);
311
+ place-items: center;
312
+}
313
+
314
+/* Positions (center + six around) */
315
+.hex.pos-c { grid-column: 3; grid-row: 3; }
316
+.hex.pos-n { grid-column: 3; grid-row: 1; }
317
+.hex.pos-s { grid-column: 3; grid-row: 5; }
318
+.hex.pos-ne { grid-column: 4; grid-row: 2; }
319
+.hex.pos-se { grid-column: 4; grid-row: 4; }
320
+.hex.pos-nw { grid-column: 2; grid-row: 2; }
321
+.hex.pos-sw { grid-column: 2; grid-row: 4; }
322
+
323
+/* Hex core: use clip-path for the polygon */
324
+.hex a {
325
+ display: flex;
326
+ align-items: center;
327
+ justify-content: center;
328
+ width: var(--hex-size);
329
+ height: calc(var(--hex-size) * 0.866); /* height for regular hex */
330
+ text-align: center;
331
+ padding: 0.6rem;
332
+ color: inherit;
333
+ text-decoration: none;
334
+ background: var(--hex-bg);
335
+ clip-path: polygon(25% 0%, 75% 0%, 100% 50%,
336
+ 75% 100%, 25% 100%, 0% 50%);
337
+ transition: background .15s ease, transform .06s ease;
338
+ border: 1px solid #333;
339
+}
340
+.hex a:hover, .hex a:focus {
341
+ background: var(--hex-bg-hover);
342
+ outline: none;
343
+ transform: translateY(-1px);
344
+}
345
+
346
+/* Labels */
347
+.hex .label {
348
+ display: block;
349
+ font-weight: 700;
350
+ line-height: 1.2;
351
+}
352
+
353
+/* Optional subtle caption under each board title */
354
+.hexmap .board h2 {
355
+ margin: 0 0 .6rem;
356
+ font-size: 1rem;
357
+ color: var(--muted, #9a9a9a);
358
+}
359
+
360
+/* Breadcrumb (simple) */
361
+.hexmap .crumbs {
362
+ display: flex;
363
+ gap: .5rem;
364
+ flex-wrap: wrap;
365
+ margin-bottom: .5rem;
366
+ font-size: .95rem;
367
+}
368
+.hexmap .crumbs a {
369
+ color: var(--accent);
370
+ text-decoration: underline;
371
+ text-underline-offset: 2px;
372
+}
373
+
374
+/* Responsive scale */
375
+@media (max-width: 640px) {
376
+ .hexmap { --hex-size: 92px; }
377
+}
378
+@media (max-width: 420px) {
379
+ .hexmap { --hex-size: 78px; }
380
+}