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
vim -c "colorscheme morning" -c "set nowrap" -c TOhtml -c wqa $0
in=papillon.jpg
rm *-*
convert $in -colorspace CMYK -negate -separate %d-$in
N=0
for couleur in cyan magenta yellow black
do
didder -i $N-$in -o ${in%.*}-$couleur.png --p "$couleur white" -c size --brightness 0% -x 600 "edm" "StevenPigeon"
N=$(($N + 1))
done
cat <<- EOF > ${in%.*}.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="/style.css">
</head>
<body>
<figure>
$(ls -1 ${in%.*}-* | awk '{printf "<img src=\"%s\">\n", $0}')
</figure>
<section>
$(ls -1 ${in%.*}-* | awk '{printf "<img src=\"%s\">\n", $0}')
</section>
<details>
<summary>$(basename $0)</summary>
<article>
<code class="lignes">
<pre>$(seq $(cat $0 | wc -l)| awk '{printf "<span>%s</span>\n", $0'})</pre>
</code>
<code>$(cat $0.html | htmlq "#vimCodeElement, style" --remove-nodes ".LineNr" | grep -vE "^body {" | grep -vE "background-color:.*}$")
</code>
</article>
</details>
</body>
</html>
<style>
figure img:nth-of-type(1){transform:rotate(0deg); opacity:.5}
figure img:nth-of-type(2){transform:rotate(-2deg)}
figure img:nth-of-type(3){transform:rotate(-4deg)}
figure img:nth-of-type(4){transform:rotate(-6deg)}
figure img {
border:1px solid black;
transition:all 5s;
position:absolute;
mix-blend-mode:multiply;
image-rendering:
pixelated;
transform-origin:top right;
height:600px;
}
figure{margin:0;display:block;position:relative;height:600px}
section{margin-top:var(--margin)}
section img {width:calc(100vw / 5)}
figure:hover img{transform:none}
</style>
EOF