Skip to the content

Kazu数

Generate checked Sudoku and logic puzzles, read native rules and hints, and draw or embed playable boards.

Kazu is the Japanese word 数 for number. About the name

Contents

Reference · Regions player

REGIONS_PLAY_STYLEconstant

Scoped native Regions board and player CSS.

Import it

import { REGIONS_PLAY_STYLE } from "@johnmorrisdotca/kazu/regions/play";

Definition

const REGIONS_PLAY_STYLE: "\n.regions-play{font:1rem/1.45 system-ui,sans-serif;color:var(--kz-ink,#202521);max-width:58rem;margin:auto}\n.regions-status{min-height:1.5em;text-align:center;font-weight:600}\n.regions-board{width:min(100%,42rem);margin:1rem auto}\n.regions-drawing{position:relative}\n.regions-cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--regions-width),1fr);grid-template-rows:repeat(var(--regions-height),1fr)}\n.regions-cell{min-width:0;min-height:0;border:0;background:transparent;color:transparent;cursor:pointer}\n.regions-cell:focus-visible{outline:3px solid #b5963d;outline-offset:-3px}\n.regions-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem;margin:1rem auto}\n.regions-controls button,.regions-controls select{font:inherit;min-height:2.75rem;padding:.45rem .8rem;border:1px solid var(--kz-grid,#cfc6b2);border-radius:.55rem;background:var(--kz-paper,#fbf8f1);color:inherit}\n.regions-number-label{display:flex;align-items:center;gap:.45rem}\n@media(max-width:700px){.regions-controls{gap:.35rem}.regions-controls button{flex:1 1 28%}}\n" = `
.regions-play{font:1rem/1.45 system-ui,sans-serif;color:var(--kz-ink,#202521);max-width:58rem;margin:auto}
.regions-status{min-height:1.5em;text-align:center;font-weight:600}
.regions-board{width:min(100%,42rem);margin:1rem auto}
.regions-drawing{position:relative}
.regions-cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--regions-width),1fr);grid-template-rows:repeat(var(--regions-height),1fr)}
.regions-cell{min-width:0;min-height:0;border:0;background:transparent;color:transparent;cursor:pointer}
.regions-cell:focus-visible{outline:3px solid #b5963d;outline-offset:-3px}
.regions-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem;margin:1rem auto}
.regions-controls button,.regions-controls select{font:inherit;min-height:2.75rem;padding:.45rem .8rem;border:1px solid var(--kz-grid,#cfc6b2);border-radius:.55rem;background:var(--kz-paper,#fbf8f1);color:inherit}
.regions-number-label{display:flex;align-items:center;gap:.45rem}
@media(max-width:700px){.regions-controls{gap:.35rem}.regions-controls button{flex:1 1 28%}}
`

Examples

import { REGIONS_PLAY_STYLE } from "@johnmorrisdotca/kazu/regions/play";

console.log(REGIONS_PLAY_STYLE.length);
1099

What it prints (run when this page was built)

View sourceEdit on GitHubMade from the source of @johnmorrisdotca/kazu 2.1.0.