this repo has no description
Add initial thingus a la dingus
+109
+58
css/isocube.css
+58
css/isocube.css
···
1
+
:root {
2
+
--darken: black 30%;
3
+
--lighten: white 30%;
4
+
}
5
+
6
+
@property --color {
7
+
syntax: "<color>";
8
+
inherits: true;
9
+
initial-value: #c0ffee;
10
+
}
11
+
12
+
@property --size {
13
+
syntax: "<length>";
14
+
inherits: true;
15
+
initial-value: 32px;
16
+
}
17
+
18
+
@property --x {
19
+
syntax: "<integer>";
20
+
inherits: true;
21
+
initial-value: 0;
22
+
}
23
+
24
+
@property --y {
25
+
syntax: "<integer>";
26
+
inherits: true;
27
+
initial-value: 0;
28
+
}
29
+
30
+
.isocube {
31
+
background-color: var(--color);
32
+
position: absolute;
33
+
width: var(--size);
34
+
height: var(--size);
35
+
left: calc(calc(var(--x) - var(--y)) * calc(var(--size) * 0.84));
36
+
top: calc(calc(var(--x) + var(--y)) * calc(var(--size) * 0.5));
37
+
transform: rotate(210deg) skewX(-30deg) scaleY(0.86603);
38
+
}
39
+
40
+
.isocube::before {
41
+
content: '';
42
+
position: absolute;
43
+
background-color: color-mix(in oklab, var(--color), var(--darken));
44
+
width: 100%;
45
+
height: 100%;
46
+
transform-origin: 0 0;
47
+
transform: scaleY(1.13397) skewX(30deg) rotate(-210deg) rotate(-30deg) skewX(-30deg) scaleY(0.86603);
48
+
}
49
+
50
+
.isocube::after {
51
+
content: '';
52
+
position: absolute;
53
+
background-color: color-mix(in oklab, var(--color), var(--lighten));
54
+
width: 100%;
55
+
height: 100%;
56
+
transform-origin: 0 0;
57
+
transform: scaleY(1.13397) skewX(30deg) rotate(-210deg) rotate(90deg) skewX(-30deg) scaleY(0.86603);
58
+
}
+25
hs/init._hs
+25
hs/init._hs
···
1
+
init
2
+
3
+
set width to 10
4
+
set height to 10
5
+
6
+
set y to 0
7
+
repeat height times
8
+
set x to 20
9
+
repeat width times
10
+
make <div.isocube/> called cube
11
+
set cube's @script to 'install isocube'
12
+
call cube.style.setProperty('--x', x)
13
+
call cube.style.setProperty('--y', y)
14
+
put cube at the end of body
15
+
remove @script from cube
16
+
set x to x+1
17
+
end
18
+
set y to y+1
19
+
end
20
+
21
+
-- for item in .isocube
22
+
-- set it's @script to 'install isocube'
23
+
-- call _hyperscript.processNode(it)
24
+
-- end
25
+
end
+6
hs/isocube._hs
+6
hs/isocube._hs
+13
index.css
+13
index.css
+7
index.html
+7
index.html
···
1
+
<!doctype html>
2
+
<title>isocubes</title>
3
+
<script type="text/hyperscript" src="hs/isocube._hs"></script>
4
+
<script type="text/hyperscript" src="hs/init._hs"></script>
5
+
<script src="https://unpkg.com/hyperscript.org@0.9.14"></script>
6
+
<link rel='stylesheet' href='index.css'/>
7
+
<input id='color' type='color' value='#c0ffee'>