52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
|
import { Main, jitter, n_of, render_and_copy } from "./common.tsx";
|
||
|
|
|
||
|
|
const Square = ({ row }: { row: number }) => (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
outline: "0.05rem solid black",
|
||
|
|
borderRadius: "0.05rem",
|
||
|
|
transform: `translateX(${jitter(row * 2)}px) translateY(${jitter(
|
||
|
|
row * 2
|
||
|
|
)}px) rotate(${jitter(row * 0.05)}rad)`,
|
||
|
|
}}
|
||
|
|
></div>
|
||
|
|
);
|
||
|
|
|
||
|
|
render_and_copy(
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
backgroundColor: "#E1DED9",
|
||
|
|
padding: "18%",
|
||
|
|
border: "1.5rem solid #0C0C0C",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Main
|
||
|
|
style={{
|
||
|
|
display: "grid",
|
||
|
|
gridTemplateColumns: "repeat(12, 1fr)",
|
||
|
|
width: "100%",
|
||
|
|
aspectRatio: "12 / 22",
|
||
|
|
gap: "-1px",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{n_of(22, undefined).map((_, row) =>
|
||
|
|
n_of(12, <Square row={row} />)
|
||
|
|
)}
|
||
|
|
</Main>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
textAlign: "right",
|
||
|
|
marginTop: "1.5rem",
|
||
|
|
fontSize: "0.5rem",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<a
|
||
|
|
href="https://collections.vam.ac.uk/item/O221321/schotter-print-nees-georg/"
|
||
|
|
style={{ textDecoration: "none" }}
|
||
|
|
>
|
||
|
|
COMPUTERGRAFIK MIT SIEMENS-SYSTEM 4004
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|