Home
/ source / content / articles / turing_complete_css / v2.j2
Download Direct linkSettings
Aa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
Copy 
{%- set w, h = 10, 10 -%}
{%- set v = "var(--v%s-%s)" -%}

<!DOCTYPE html>
<html>

<head>
    <style>
        body, div {
            line-height: 0;
        }

        .layout {
            {%- for wi in range(w) -%}
                --v0-{{wi}}: 0;
            {%- endfor -%}

            {%- for hi in range(1, h) -%}
                {%- for wi in range(w) -%}
                    {%- macro v(shift) -%}
                        var(--v{{hi - 1}}-{{(shift + wi) % w}})
                    {%- endmacro -%}
                    {%- set p, q, r = v(-1), v(0), v(1) -%}

                    --v{{hi}}-{{wi}}: calc(
                        (1 - (1 - {{q}}) * (1 - {{r}})) * (1 - {{p}} * {{q}} * {{r}})
                    );
                {%- endfor -%}
            {%- endfor -%}
        }

        [class^="c"] {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid gray;
        }

        {%- for wi in range(w) -%}
            {%- for hi in range(h) -%}
                .c{{hi}}-{{wi}} {
                    background-color: hsl(0, 0%, calc(100% - 100% * var(--v{{hi}}-{{wi}})));
                }
            {%- endfor -%}

            input#i{{wi}}:checked~.layout {
                --v0-{{wi}}: 1;
            }
        {%- endfor -%}

        label {
            border: 1px solid gray;
            display: inline-block;
            height: 20px;
            width: 20px;
            background-color: white;
        }
          
        input {
            display: none;
        }
          
        input:checked + label {
            background-color: black;
        }
    </style>
</head>

<body>
    <div>
        {%- for wi in range(w) -%}
            <input id="i{{wi}}" type="checkbox"><label for="i{{wi}}"></label>
        {%- endfor -%}

        <div class="layout">
            {%- for hi in range(1, h) -%}
                <div>
                    {%- for wi in range(w) -%}
                        <span class="c{{hi}}-{{wi}}"></span>
                    {%- endfor -%}
                </div>
            {%- endfor -%}
        </div>
    </div>
</body>

</html>