near/computersandblues.hitomezashi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Nicer styling

Browse source
This commit is contained in:
arne 2024-07-19 10:53:04 +02:00
commit 8343f25f0b
2 changed files with 82 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

52
index.html
View file

@ -6,17 +6,61 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Thi.ng rdom</title> <title>Thi.ng rdom</title>
<style> <style>
html, body { padding: 0; margin: 0; min-height: 100vh; } :root {
--background-color: #eee;
--primary-color: #225;
--secondary-color: #99b;
}
html, body {
padding: 0;
margin: 0;
min-height: 100vh;
}
body { body {
background: #eee; background: var(--background-color);
color: #222; color: var(--primary-color);
font-family: sans-serif; font-family: sans-serif;
padding: 40px; padding: 40px;
font-size: 14px;
} }
canvas { canvas {
border: 1px solid #99b; border: 1px solid var(--primary-color);
} }
h1, h2 {
margin: 0.6rem 0;
}
h1:first-child, h2:first-child {
margin-top: 0
}
label {
display: block;
margin: 0.2rem 0;
}
@media screen and (min-width: 1024px) {
div.container {
display: grid;
grid-template: 'canvas settings';
grid-template-columns: auto minmax(0, 1fr);
grid-gap: 40px;
}
main {
grid-area: canvas;
}
aside {
grid-area: settings;
align-self: center;
}
}
</style> </style>
</head> </head>
<body> <body>

65
src/main.ts
View file

@ -18,6 +18,10 @@ const cellSize = reactive(cellSize_).map(num => {
return Number.isNaN(next)|| next < 5 ? 5 : next return Number.isNaN(next)|| next < 5 ? 5 : next
}) })
// const backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color')
const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color')
const secondaryColor = getComputedStyle(document.documentElement).getPropertyValue('--secondary-color')
// available size for a2: 420 * 594 // available size for a2: 420 * 594
const width = 420 const width = 420
const height = 594 const height = 594
@ -52,7 +56,7 @@ const stitches = (seed: number, maxCells: number) =>
const scene = sync({ const scene = sync({
src: { cellSize, xs, ys, } src: { cellSize, xs, ys, }
}).map(({ cellSize, xs, ys }) => { }).map(({ cellSize, xs, ys }) => {
console.log({ cellSize, xs, ys }) // console.log({ cellSize, xs, ys })
const minPadding = cellSize const minPadding = cellSize
@ -80,7 +84,7 @@ const scene = sync({
const scene = translate( const scene = translate(
group( group(
{ __background: '#eee', stroke: '#222' }, { __background: primaryColor, stroke: secondaryColor },
[...yLines, ...xLines] [...yLines, ...xLines]
), ),
[xPadding, yPadding] [xPadding, yPadding]
@ -90,36 +94,35 @@ const scene = sync({
}) })
$compile( $compile(
["main", ["div.container", {},
{}, ["main", {},
["h1", {}, "Hitomezashi Patterns"], ["h1", {}, "Hitomezashi Patterns"],
$canvas(scene, size), $canvas(scene, size)],
["h2", {}, "Settings"], ["aside", {},
["div", {}, ["label", {}, "Grid size: ", ["h2", {}, "Settings"],
["input", { ["div", {}, ["label", {}, "Grid size: ",
type: "number", ["input", {
min: "5", type: "number",
value: cellSize.deref()!, min: "5",
oninput: $input(cellSize) value: cellSize.deref()!,
}]]], oninput: $input(cellSize)
["div", {}, ["label", {}, "X Pattern: ", }]]],
["input", { ["div", {}, ["label", {}, "X Pattern: ",
type: "text", ["input", {
value: xs_, type: "text",
oninput: $input(ys) value: xs_,
}]]], oninput: $input(ys)
["div", {}, ["label", {}, "Y Pattern: ", }]]],
["input", { ["div", {}, ["label", {}, "Y Pattern: ",
type: "text", ["input", {
value: ys_, type: "text",
oninput: $input(ys) value: ys_,
}]]], oninput: $input(ys)
["h2", {}, "SVG Export"], }]]],
["div", {}, ["h2", {}, "SVG Export"],
["textarea", { ["div", {}, ["textarea", {
value: scene.map((scene) => asSvg(svgDoc({ viewBox: `0 0 ${size[0]} ${size[1]}` }, scene))), value: scene.map((scene) => asSvg(svgDoc({ viewBox: `0 0 ${size[0]} ${size[1]}` }, scene))),
cols: 80, cols: 80,
rows: 20 rows: 20
}]] }]]]]
]
).mount(document.body) ).mount(document.body)