Map.md
... ...
@@ -5,34 +5,33 @@
5 5
<h2>Orden</h2>
6 6
<div class="hexgrid">
7 7
<!-- Center -->
8
- <div class="hex pos-c"><a href="/Bale%20Sea">
8
+ <div class="hex pos-c"><a href="/Bale%20Sea" data-action="article">
9 9
<span class="label">BALE<br>SEA</span></a></div>
10 10
11 11
<!-- Ring -->
12
- <div class="hex pos-nw"><a href="/Rioja">
12
+ <div class="hex pos-nw"><a href="/Rioja" data-action="article">
13 13
<span class="label">RIOJA</span></a></div>
14 14
15
- <div class="hex pos-sw"><a href="/Rioja">
15
+ <div class="hex pos-sw"><a href="/Rioja" data-action="article">
16 16
<span class="label">RIOJA</span></a></div>
17 17
18
- <div class="hex pos-ne"><a href="#vasloria">
18
+ <div class="hex pos-ne"><a href="#vasloria" data-action="zoom">
19 19
<span class="label">VASLORIA</span></a></div>
20 20
21
- <div class="hex pos-se"><a href="#vasloria">
21
+ <div class="hex pos-se"><a href="#vasloria" data-action="zoom">
22 22
<span class="label">VASLORIA</span></a></div>
23 23
24
- <div class="hex pos-n"><a
25
- href="/Bale%20Sea">
24
+ <div class="hex pos-n"><a href="/Bale%20Sea" data-action="article">
26 25
<span class="label">BALE<br>SEA</span></a></div>
27 26
28
- <div class="hex pos-s"><a href="/Blackbottom%20Bay.md">
27
+ <div class="hex pos-s"><a href="/Blackbottom%20Bay.md" data-action="article">
29 28
<span class="label">BLACKBOTTOM<br>BAY</span></a></div>
30 29
</div>
31 30
</section>
32 31
33 32
<!-- ============ Vasloria (provinces) ============ -->
34 33
<section id="vasloria" class="board" aria-label="Vasloria">
35
- <div class="crumbs"><a href="#orden">Orden</a> ▸ <strong>Vasloria</strong></div>
34
+ <div class="crumbs"><a href="/Map">Orden</a> ▸ <strong>Vasloria</strong></div>
36 35
<h2>Provinces</h2>
37 36
<div class="hexgrid">
38 37
<div class="hex pos-c"><a href="#bedegar"><span class="label">BEDEGAR</span></a></div>
... ...
@@ -47,7 +46,7 @@
47 46
48 47
<!-- ============ Dalrath (region) ============ -->
49 48
<section id="dalrath" class="board" aria-label="Dalrath">
50
- <div class="crumbs"><a href="#orden">Orden</a> ▸ <a href="#vasloria">Vasloria</a> ▸ <strong>Dalrath</strong></div>
49
+ <div class="crumbs"><a href="/Map">Orden</a> ▸ <a href="#vasloria">Vasloria</a> ▸ <strong>Dalrath</strong></div>
51 50
<h2>Barony of Dalrath</h2>
52 51
<div class="hexgrid">
53 52
<div class="hex pos-c"><a href="#broadhurst"><span class="label">BROADHURST</span></a></div>
... ...
@@ -62,7 +61,7 @@
62 61
63 62
<!-- ============ Broadhurst (town) ============ -->
64 63
<section id="broadhurst" class="board" aria-label="Broadhurst">
65
- <div class="crumbs"><a href="#orden">Orden</a> ▸ <a href="#vasloria">Vasloria</a> ▸ <a href="#dalrath">Dalrath</a> ▸ <strong>Broadhurst</strong></div>
64
+ <div class="crumbs"><a href="/Map">Orden</a> ▸ <a href="#vasloria">Vasloria</a> ▸ <a href="#dalrath">Dalrath</a> ▸ <strong>Broadhurst</strong></div>
66 65
<h2>Broadhurst</h2>
67 66
<div class="hexgrid">
68 67
<!-- Leaf hexes can go to wiki pages instead of boards -->
custom.css
... ...
@@ -361,3 +361,61 @@ h1.header-title {
361 361
362 362
/* If any board is targeted, hide the default one */
363 363
.hexmap:has(.board:target) .board.is-default{ display:none !important; }
364
+
365
+/* ZOOM INDICATORS*/
366
+.hex a,
367
+.hex .nolink {
368
+ position: relative;
369
+ cursor: default;
370
+}
371
+
372
+/* Cursors */
373
+.hex a[data-action="zoom"] { cursor: zoom-in; }
374
+.hex a[data-action="article"] { cursor: pointer; }
375
+.hex a[data-action="none"],
376
+.hex .nolink { cursor: not-allowed; }
377
+
378
+/* Hover/focus glows */
379
+.hex a[data-action="zoom"]:hover,
380
+.hex a[data-action="zoom"]:focus-visible {
381
+ box-shadow: 0 0 0 2px #6aa0ff inset, 0 0 0 1px #6aa0ff;
382
+ background: #1f2431;
383
+}
384
+.hex a[data-action="article"]:hover,
385
+.hex a[data-action="article"]:focus-visible {
386
+ box-shadow: 0 0 0 2px #5fc98e inset, 0 0 0 1px #5fc98e;
387
+ background: #1c2b23;
388
+}
389
+.hex a[data-action="none"]:hover,
390
+.hex a[data-action="none"]:focus-visible,
391
+.hex .nolink:hover,
392
+.hex .nolink:focus-visible {
393
+ box-shadow: 0 0 0 2px #666 inset, 0 0 0 1px #666;
394
+ background: #202020;
395
+ opacity: .75;
396
+}
397
+
398
+/* Corner glyphs on hover/focus */
399
+.hex a[data-action]:hover::after,
400
+.hex a[data-action]:focus-visible::after,
401
+.hex .nolink:hover::after,
402
+.hex .nolink:focus-visible::after {
403
+ content: attr(data-glyph);
404
+ position: absolute;
405
+ right: 6px;
406
+ bottom: 4px;
407
+ font-size: 14px;
408
+ opacity: 0.9;
409
+}
410
+
411
+/* Accessible focus ring */
412
+.hex a:focus-visible {
413
+ outline: 2px solid currentColor;
414
+ outline-offset: 2px;
415
+}
416
+
417
+/* Optional: default corner glyphs via attribute selectors */
418
+.hex a[data-action="zoom"]::after { content: "⬣"; } /* zoom metaphor */
419
+.hex a[data-action="article"]::after { content: "🗎"; } /* external/article */
420
+.hex a[data-action="none"]::after,
421
+.hex .nolink::after { content: ""; }