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 · Yajilin player

YAJILIN_PLAY_STYLEconstant

Scoped native Yajilin board and player CSS.

Import it

import { YAJILIN_PLAY_STYLE } from "@johnmorrisdotca/kazu/yajilin/play";

Definition

const YAJILIN_PLAY_STYLE: "\n.kazu-yajilin { color:var(--kz-ink,#1f2320); font:16px/1.4 system-ui,sans-serif; }\n.kazu-yajilin .ky-board { position:relative; max-width:440px; margin:auto; }\n.kazu-yajilin svg { border:1px solid var(--kz-frame,#a98954); border-radius:4px; }\n.kazu-yajilin .ky-cells { position:absolute; inset:6%; display:grid; }\n.kazu-yajilin .ky-cell { border:0; background:transparent; color:transparent; cursor:pointer; }\n.kazu-yajilin .ky-cell:focus-visible { outline:3px solid var(--kz-focus,#c57d2d); outline-offset:-5px; }\n.kazu-yajilin .ky-tools { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:.8rem 0; }\n.kazu-yajilin button { font:inherit; padding:.45rem .8rem; }\n.kazu-yajilin .ky-status { min-height:1.5em; text-align:center; }\n.kazu-yajilin .ky-modes [aria-pressed=\"true\"] { outline:2px solid var(--kz-frame,#a98954); }\n" = `
.kazu-yajilin { color:var(--kz-ink,#1f2320); font:16px/1.4 system-ui,sans-serif; }
.kazu-yajilin .ky-board { position:relative; max-width:440px; margin:auto; }
.kazu-yajilin svg { border:1px solid var(--kz-frame,#a98954); border-radius:4px; }
.kazu-yajilin .ky-cells { position:absolute; inset:6%; display:grid; }
.kazu-yajilin .ky-cell { border:0; background:transparent; color:transparent; cursor:pointer; }
.kazu-yajilin .ky-cell:focus-visible { outline:3px solid var(--kz-focus,#c57d2d); outline-offset:-5px; }
.kazu-yajilin .ky-tools { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:.8rem 0; }
.kazu-yajilin button { font:inherit; padding:.45rem .8rem; }
.kazu-yajilin .ky-status { min-height:1.5em; text-align:center; }
.kazu-yajilin .ky-modes [aria-pressed="true"] { outline:2px solid var(--kz-frame,#a98954); }
`

Examples

import { YAJILIN_PLAY_STYLE } from "@johnmorrisdotca/kazu/yajilin/play";

console.log(YAJILIN_PLAY_STYLE.length);
845

What it prints (run when this page was built)

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