Halit Aksoy
8511e0b3f2
A How to play page with every rule and a before/after board computed by the engine, a help button in the header, and the rules in a side panel over the game page so a game can go on while a rule is looked up.
20 lines
1.4 KiB
CSS
20 lines
1.4 KiB
CSS
/* Mini board: the top player's store on the left, the bottom player's on the right */
|
|
|
|
.mini { display: grid; grid-template-columns: 1.15fr repeat(6, minmax(0, 1fr)) 1.15fr; gap: 5px; padding: 8px; border-radius: 16px; background: var(--miniBg); }
|
|
.mini .mp { aspect-ratio: 1; border-radius: 50%; background: var(--miniPit); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--ink); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35); }
|
|
.mini .ms { grid-row: 1 / 3; border-radius: 999px; background: var(--miniPit); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; font-size: 13px; font-weight: 800; color: var(--ink); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35); }
|
|
.mini .ms.l { grid-column: 1; }
|
|
.mini .ms.r { grid-column: 8; color: var(--accent); }
|
|
.mini.lg { gap: 9px; padding: 16px; border-radius: 26px; }
|
|
.mini.lg .mp { font-size: 16px; }
|
|
.mini.lg .ms { font-size: 20px; padding-bottom: 14px; }
|
|
/* A move shown on the board: the pit played and where its last stone landed */
|
|
.mini .played { box-shadow: inset 0 0 0 2px var(--accent); }
|
|
.mini .land, .mini .ms.r.land { background: var(--accent); color: var(--onAccent); }
|
|
|
|
@media (max-width: 640px) {
|
|
.mini.lg { gap: 6px; padding: 10px; border-radius: 20px; }
|
|
.mini.lg .mp { font-size: 13px; }
|
|
.mini.lg .ms { font-size: 15px; padding-bottom: 10px; }
|
|
}
|