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" />
<title>Thi.ng rdom</title>
<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 {
background: #eee;
color: #222;
background: var(--background-color);
color: var(--primary-color);
font-family: sans-serif;
padding: 40px;
font-size: 14px;
}
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>
</head>
<body>

21
src/main.ts
View file

@ -18,6 +18,10 @@ const cellSize = reactive(cellSize_).map(num => {
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
const width = 420
const height = 594
@ -52,7 +56,7 @@ const stitches = (seed: number, maxCells: number) =>
const scene = sync({
src: { cellSize, xs, ys, }
}).map(({ cellSize, xs, ys }) => {
console.log({ cellSize, xs, ys })
// console.log({ cellSize, xs, ys })
const minPadding = cellSize
@ -80,7 +84,7 @@ const scene = sync({
const scene = translate(
group(
{ __background: '#eee', stroke: '#222' },
{ __background: primaryColor, stroke: secondaryColor },
[...yLines, ...xLines]
),
[xPadding, yPadding]
@ -90,10 +94,11 @@ const scene = sync({
})
$compile(
["main",
{},
["div.container", {},
["main", {},
["h1", {}, "Hitomezashi Patterns"],
$canvas(scene, size),
$canvas(scene, size)],
["aside", {},
["h2", {}, "Settings"],
["div", {}, ["label", {}, "Grid size: ",
["input", {
@ -115,11 +120,9 @@ $compile(
oninput: $input(ys)
}]]],
["h2", {}, "SVG Export"],
["div", {},
["textarea", {
["div", {}, ["textarea", {
value: scene.map((scene) => asSvg(svgDoc({ viewBox: `0 0 ${size[0]} ${size[1]}` }, scene))),
cols: 80,
rows: 20
}]]
]
}]]]]
).mount(document.body)