custom.css
... ...
@@ -279,103 +279,71 @@ h1.header-title {
279 279
display: none !important;
280 280
}
281 281
282
-/* ==== HEX MAP (pure CSS drilldown) ===================================== */
282
+/* === PERFECT HEX PACKING (flat-top) === */
283
+/* Geometry:
284
+ - Hex width = 2 * side
285
+ - Hex height = √3 * side ≈ 0.866 * width
286
+ - Horizontal center spacing = 0.75 * width
287
+ - Vertical center spacing = 0.50 * height
288
+*/
283 289
.hexmap {
284
- --hex-size: 120px; /* overall scale */
285
- --bg: var(--bg, #111);
286
- --fg: var(--fg, #e0e0e0);
287
- --accent: #9bb6ff;
288
- --hex-bg: #1b1b1b;
289
- --hex-bg-hover: #232323;
290
-
291
- font: inherit;
292
- color: var(--fg);
293
- margin: 1rem 0 2rem;
294
-}
295
-
296
-/* Boards (layers). Use :target to show one at a time */
297
-.hexmap .board {
298
- display: none;
299
- margin: 0 auto 1.5rem;
300
- max-width: calc(var(--hex-size) * 5);
290
+ --side: 64px; /* scale here */
291
+ --hex-w: calc(var(--side) * 2);
292
+ --hex-h: calc(var(--side) * 1.732); /* ≈ √3 * side */
301 293
}
302
-.hexmap .board:target { display: block; }
303
-.hexmap .board.is-default { display: block; } /* shown when no hash */
304 294
305
-/* Grid for 7 hexes: 5x5 grid with strategic placements */
295
+/* 5×5 positioning grid whose cell size equals the center-to-center spacing */
306 296
.hexgrid {
307 297
display: grid;
308
- grid-template-columns: repeat(5, 1fr);
309
- gap: 0;
310
- place-items: center;
298
+ grid-template-columns: repeat(5, calc(var(--hex-w) * 0.75));
299
+ grid-template-rows: repeat(5, calc(var(--hex-h) * 0.50));
300
+ justify-content: center;
301
+ align-content: center;
302
+ gap: 0; /* no gaps at all */
311 303
}
312 304
313
-/* Positions (center + six around) */
314
-.hex.pos-c { grid-column: 3; grid-row: 3; }
315
-.hex.pos-n { grid-column: 3; grid-row: 1; }
316
-.hex.pos-s { grid-column: 3; grid-row: 5; }
317
-.hex.pos-ne { grid-column: 4; grid-row: 2; }
318
-.hex.pos-se { grid-column: 4; grid-row: 4; }
319
-.hex.pos-nw { grid-column: 2; grid-row: 2; }
320
-.hex.pos-sw { grid-column: 2; grid-row: 4; }
321
-
322
-/* Hex core: use clip-path for the polygon */
305
+/* Hex itself fills real hex size; it will overflow its cell appropriately */
323 306
.hex a {
307
+ width: var(--hex-w);
308
+ height: var(--hex-h);
324 309
display: flex;
325 310
align-items: center;
326 311
justify-content: center;
327
- width: var(--hex-size);
328
- height: calc(var(--hex-size) * 0.866); /* height for regular hex */
312
+ padding: 0.6rem;
329 313
text-align: center;
330
- padding: 0.1rem;
331 314
color: inherit;
332 315
text-decoration: none;
333
- background: var(--hex-bg);
316
+
317
+ /* flat-top hex */
334 318
clip-path: polygon(25% 0%, 75% 0%, 100% 50%,
335 319
75% 100%, 25% 100%, 0% 50%);
320
+
321
+ background: #1b1b1b;
322
+ border: 1px solid #333;
336 323
transition: background .15s ease, transform .06s ease;
337
- margin: -0.5px;
338
- height: calc(var(--hex-size) * 0.88);
339 324
}
325
+
326
+/* Optional: reduce subpixel seams on some zoom levels */
327
+.hex a { margin: -0.25px; }
328
+
340 329
.hex a:hover, .hex a:focus {
341
- background: var(--hex-bg-hover);
342
- outline: none;
330
+ background: #232323;
343 331
transform: translateY(-1px);
332
+ outline: none;
344 333
}
345 334
346 335
/* Labels */
347
-.hex .label {
348
- display: block;
349
- font-weight: 700;
350
- line-height: 1.2;
351
- border: none;
352
-}
353
-
354
-/* Optional subtle caption under each board title */
355
-.hexmap .board h2 {
356
- margin: 0 0 .6rem;
357
- font-size: 1rem;
358
- color: var(--muted, #9a9a9a);
359
-}
336
+.hex .label{ font-weight:700; line-height:1.2; }
360 337
361
-/* Breadcrumb (simple) */
362
-.hexmap .crumbs {
363
- display: flex;
364
- gap: .5rem;
365
- flex-wrap: wrap;
366
- margin-bottom: .5rem;
367
- font-size: .95rem;
368
-}
369
-.hexmap .crumbs a {
370
- color: var(--accent);
371
- text-decoration: underline;
372
- text-underline-offset: 2px;
373
-}
338
+/* Positions stay the same: */
339
+.hex.pos-c { grid-column: 3; grid-row: 3; }
340
+.hex.pos-n { grid-column: 3; grid-row: 1; }
341
+.hex.pos-s { grid-column: 3; grid-row: 5; }
342
+.hex.pos-ne { grid-column: 4; grid-row: 2; }
343
+.hex.pos-se { grid-column: 4; grid-row: 4; }
344
+.hex.pos-nw { grid-column: 2; grid-row: 2; }
345
+.hex.pos-sw { grid-column: 2; grid-row: 4; }
374 346
375
-/* Responsive scale */
376
-@media (max-width: 640px) {
377
- .hexmap { --hex-size: 92px; }
378
-}
379
-@media (max-width: 420px) {
380
- .hexmap { --hex-size: 78px; }
381
-}
347
+/* Responsive scaling (optional) */
348
+@media (max-width: 640px) { .hexmap { --side: 48px; } }
349
+@media (max-width: 420px) { .hexmap { --side: 40px; } }