dr dilettante

%%

    blather =\
there is so much power in being able to control the positioning of words in 
one, two, and three dimensional. sometimes, my literacies in data, html, and css start to feel like
a real drawing session that i've been enjoying on pen and paper since i was young. if
knew what the fuck concrete poetry was i might call it this. alas, always a dilettante, dr fucking dilenttante.

    from nbconvert_a11y.tables import get_table, Config

    DataFrame(
        itertools.product(
            blather.split(), [1]
        ), columns="word dir".split()
    ).pipe(get_table, id="fuck", config=Config(data_visibility=Config.DataVisibility(max_rows=1000)))

index 1	word	dir
0	there	1
1	is	1
2	so	1
3	much	1
4	power	1
5	in	1
6	being	1
7	able	1
8	to	1
9	control	1
10	the	1
11	positioning	1
12	of	1
13	words	1
14	in	1
15	one,	1
16	two,	1
17	and	1
18	three	1
19	dimensional.	1
20	sometimes,	1
21	my	1
22	literacies	1
23	in	1
24	data,	1
25	html,	1
26	and	1
27	css	1
28	start	1
29	to	1
30	feel	1
31	like	1
32	a	1
33	real	1
34	drawing	1
35	session	1
36	that	1
37	i've	1
38	been	1
39	enjoying	1
40	on	1
41	pen	1
42	and	1
43	paper	1
44	since	1
45	i	1
46	was	1
47	young.	1
48	if	1
49	knew	1
50	what	1
51	the	1
52	fuck	1
53	concrete	1
54	poetry	1
55	was	1
56	i	1
57	might	1
58	call	1
59	it	1
60	this.	1
61	alas,	1
62	always	1
63	a	1
64	dilettante,	1
65	dr	1
66	fucking	1
67	dilenttante.	1
index 1	word	dir
min	a	1
max	young.	1

%%

```css
#fuck {
    display: block;
    width: 100%;
    --m: 1rem;
    thead, tfoot {
        display: none;
    }
    tbody {
        display: block;
        flex-flow: row wrap;
        tr {
            display: inline;
            background: unset;
            padding: unset;
            td {
                display: inline-block;
                padding: unset;
                margin-top: var(--m); margin-bottom: var(--m);
                transform: translateY(calc(sin(var(--index-0 ) * 50deg)  * var(--m) / 2));
            }
            td:first-child {
                display: inline;
            }
            th, td:first-of-type ~ * {
                display: none;
            }
        }
    }
}