Skip to content

Commit b3d0e49

Browse files
trueskawkatrueskawka
committed
Add a new zine on list comprehensions in Haskell.
1 parent b58aed8 commit b3d0e49

File tree

11 files changed

+363
-2
lines changed

11 files changed

+363
-2
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ Commands:
3838
- [x] use CSS partials
3939
- [ ] add variables to HTML partials
4040
- [ ] improve regexp for putting CSS in the `<style>` tag
41+
- [ ] make it easier to apply global styles to all existing zines
4142
- [ ] add a `build-all` command for zines in a directory
4243

4344
## resources

‎haskell/integer_division/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>Haskell: integer division</title>
5+
<title>Haskell zine: integer division</title>
66
<style>@font-face{font-family:'threemedium';src:url('https://alicja.dev/assets/fonts/three.eot');src:url('https://alicja.dev/assets/fonts/three.eot?#iefix') format('embedded-opentype'),url('https://alicja.dev/assets/fonts/three.woff2') format('woff2'),url('https://alicja.dev/assets/fonts/three.woff') format('woff'),url('https://alicja.dev/assets/fonts/three.ttf') format('truetype'),url('https://alicja.dev/assets/fonts/three.svg#threemedium') format('svg');font-weight:normal;font-style:normal}body{font:18px "Trebuchet MS", Helvetica, sans-serif;font:32px "threemedium";margin-top:20px;text-align:right}input[type="checkbox"], input[type="radio"]{position:absolute;visibility:hidden}#trebuchet + label,#three + label{margin-right:30px;cursor:pointer;color:#000}#trebuchet + label{font:18px "Trebuchet MS", Helvetica, sans-serif}#three + label{font:32px "threemedium"}#three:checked + .three-label{color:#b2b3b8;display:none}#trebuchet:checked + .trebuchet-label{color:#b2b3b8;display:none}#three:checked ~ .zine{font:32px "threemedium"}#trebuchet:checked ~ .zine{font:18px "Trebuchet MS", Helvetica, sans-serif}.zine{margin:0 auto;max-width:840px;text-align:left}@media print{@page{ size:auto portrait; margin:0cm; }.zine{ margin:1cm; -webkit-print-color-adjust:exact; }#trebuchet + label, #three + label{ display:none; }}.zine{max-width:540px}.quotrem{color:#ff6700}.divmod{color:#23ce6b}.example{max-width:640px}ul{margin-top:0}.equation{margin:20px 0}.equation-line{font-size:1.5em;display:inline-block;width:260px}.eq{display:block;float:left;margin-right:10px;// min-width:40px}.results{display:inline-block;margin-left:40px}.result{float:left;width:40px}.section-title{margin:10px 0}</style>
77
</head>
88
<body>

‎haskell/integer_division/partials/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>Haskell: integer division</title>
5+
<title>Haskell zine: integer division</title>
66
<style></style>
77
</head>
88
<body>

‎haskell/list_comprehensions/index.html

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Haskell zine: list comprehensions</title>
6+
<style>@font-face{font-family:'threemedium';src:url('https://alicja.dev/assets/fonts/three.eot');src:url('https://alicja.dev/assets/fonts/three.eot?#iefix') format('embedded-opentype'),url('https://alicja.dev/assets/fonts/three.woff2') format('woff2'),url('https://alicja.dev/assets/fonts/three.woff') format('woff'),url('https://alicja.dev/assets/fonts/three.ttf') format('truetype'),url('https://alicja.dev/assets/fonts/three.svg#threemedium') format('svg');font-weight:normal;font-style:normal}body{font:18px "Trebuchet MS", Helvetica, sans-serif;font:32px "threemedium";margin-top:20px;text-align:right}input[type="checkbox"], input[type="radio"]{position:absolute;visibility:hidden}#trebuchet + label,#three + label{margin-right:30px;cursor:pointer;color:#000}#trebuchet + label{font:18px "Trebuchet MS", Helvetica, sans-serif}#three + label{font:32px "threemedium"}#three:checked + .three-label{color:#b2b3b8;display:none}#trebuchet:checked + .trebuchet-label{color:#b2b3b8;display:none}#three:checked ~ .zine{font:32px "threemedium"}#trebuchet:checked ~ .zine{font:18px "Trebuchet MS", Helvetica, sans-serif}.zine{margin:0 auto;max-width:840px;text-align:left}@media print{@page{ size:auto portrait; margin:0cm; }.zine{ margin:1cm; -webkit-print-color-adjust:exact; }#trebuchet + label, #three + label{ display:none; }}.output{color:#8f4898}.input{color:#ee4266}.predicative{color:#009fb7}.comprehension-example{font-size:1.3em;margin-bottom:10px}.comprehension,.element,.operator,.comment,.aside{display:inline-block}.element,.comment{width:150px;text-align:center}.comment{vertical-align:top;font-size:0.8em;margin-left:5px}.operator{width:5px}.aside{margin:20px 0 0 210px}</style>
7+
</head>
8+
<body>
9+
<input id="trebuchet" type="radio" name="font">
10+
<label for="trebuchet" class="font-button trebuchet-label">Trebuchet</label>
11+
12+
<input id="three" type="radio" name="font" checked>
13+
<label for="three" class="font-button three-label">Three</label>
14+
15+
<div class="zine">
16+
<h2 class="comprehension-title">Haskell list comprehensions - let's make some lists!</h2>
17+
18+
<div class="comprehension-line">
19+
<div class="comprehension">
20+
<div class="comprehension-example">
21+
<span class="operator">[</span>
22+
<span class="element output">output function</span>
23+
<span class="operator">|</span>
24+
<span class="element input">input set*</span>
25+
<span class="operator">,</span>
26+
<span class="element predicative">predicative*</span>
27+
<span class="operator">]</span>
28+
</div>
29+
<div class="comprehension-comments">
30+
<span class="operator"></span>
31+
<span class="comment">applied to members of the resulting list</span>
32+
<span class="operator"></span>
33+
<span class="comment">what we're generating the list from</span>
34+
<span class="operator"></span>
35+
<span class="comment">conditions that apply to input set values</span>
36+
<span class="operator"></span>
37+
</div>
38+
</div>
39+
</div>
40+
41+
<span class="aside">
42+
*can use multiple
43+
<span class="input">input sets</span> and
44+
<span class="predicative">predicatives</span>
45+
</span>
46+
<h3>A list of squares from 1 to 10: [1,4,9,16,25,36,49,64,81,100]</h3>
47+
48+
<div class="comprehension-line">
49+
<div class="comprehension">
50+
<div class="comprehension-example">
51+
<span class="operator">[</span>
52+
<span class="element output">x ^ 2</span>
53+
<span class="operator">|</span>
54+
<span class="element input">x <- [1..10]</span>
55+
<span class="operator">]</span>
56+
</div>
57+
<div class="comprehension-comments">
58+
<span class="operator"></span>
59+
<span class="comment">2. add a square of each</span>
60+
<span class="operator"></span>
61+
<span class="comment">1. take numbers 1-10</span>
62+
<span class="operator"></span>
63+
<span class="comment"></span>
64+
</div>
65+
</div>
66+
</div>
67+
<h3>A list of squares of even numbers between 1 and 10: : [4,16,36,64,100]</h3>
68+
69+
<div class="comprehension-line">
70+
<div class="comprehension">
71+
<div class="comprehension-example">
72+
<span class="operator">[</span>
73+
<span class="element output">x ^ 2</span>
74+
<span class="operator">|</span>
75+
<span class="element input">x <- [1..10]</span>
76+
<span class="operator">,</span>
77+
<span class="element predicative">rem x 2 == 0</span>
78+
<span class="operator">]</span>
79+
</div>
80+
<div class="comprehension-comments">
81+
<span class="operator"></span>
82+
<span class="comment">3. if it's even - add a square of it</span>
83+
<span class="operator"></span>
84+
<span class="comment">1. take numbers 1-10</span>
85+
<span class="operator"></span>
86+
<span class="comment">2. for each check if it's even</span>
87+
<span class="operator"></span>
88+
</div>
89+
</div>
90+
</div>
91+
<h3>A list of squares and cubes of even numbers between 1 and 5: [4,8,16,64]</h3>
92+
93+
<div class="comprehension-line">
94+
<div class="comprehension">
95+
<div class="comprehension-example">
96+
<span class="operator">[</span>
97+
<span class="element output">x ^ y</span>
98+
<span class="operator">|</span>
99+
<span class="element input">x <- [1..5]</span>
100+
<span class="operator">,</span>
101+
<span class="element input">y <- [2, 3]</span>
102+
<span class="operator">,</span>
103+
<span class="element predicative">rem x 2 == 0</span>
104+
<span class="operator">]</span>
105+
</div>
106+
<div class="comprehension-comments">
107+
<span class="operator"></span>
108+
<span class="comment">3. if it is - add first a square and then a cube of it</span>
109+
<span class="operator"></span>
110+
<span class="comment">1. take numbers 1-5</span>
111+
<span class="operator"></span>
112+
<span class="comment"></span>
113+
<span class="operator"></span>
114+
<span class="comment">2. for each check if it's even</span>
115+
<span class="operator"></span>
116+
</div>
117+
</div>
118+
</div>
119+
</div>
120+
</body>
121+
</html>

‎haskell/list_comprehensions/partials/comprehensions.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<h2 class="comprehension-title">Haskell list comprehensions - let's make some lists!</h2>
2+
3+
<div class="comprehension-line">
4+
<div class="comprehension">
5+
<div class="comprehension-example">
6+
<span class="operator">[</span>
7+
<span class="element output">output function</span>
8+
<span class="operator">|</span>
9+
<span class="element input">input set*</span>
10+
<span class="operator">,</span>
11+
<span class="element predicative">predicative*</span>
12+
<span class="operator">]</span>
13+
</div>
14+
<div class="comprehension-comments">
15+
<span class="operator"></span>
16+
<span class="comment">applied to members of the resulting list</span>
17+
<span class="operator"></span>
18+
<span class="comment">what we're generating the list from</span>
19+
<span class="operator"></span>
20+
<span class="comment">conditions that apply to input set values</span>
21+
<span class="operator"></span>
22+
</div>
23+
</div>
24+
</div>
25+
26+
<span class="aside">
27+
*can use multiple
28+
<span class="input">input sets</span> and
29+
<span class="predicative">predicatives</span>
30+
</span>

‎haskell/list_comprehensions/partials/example0.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<h3>A list of squares from 1 to 10: [1,4,9,16,25,36,49,64,81,100]</h3>
2+
3+
<div class="comprehension-line">
4+
<div class="comprehension">
5+
<div class="comprehension-example">
6+
<span class="operator">[</span>
7+
<span class="element output">x ^ 2</span>
8+
<span class="operator">|</span>
9+
<span class="element input">x <- [1..10]</span>
10+
<span class="operator">]</span>
11+
</div>
12+
<div class="comprehension-comments">
13+
<span class="operator"></span>
14+
<span class="comment">2. add a square of each</span>
15+
<span class="operator"></span>
16+
<span class="comment">1. take numbers 1-10</span>
17+
<span class="operator"></span>
18+
<span class="comment"></span>
19+
</div>
20+
</div>
21+
</div>

‎haskell/list_comprehensions/partials/example1.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<h3>A list of squares of even numbers between 1 and 10: : [4,16,36,64,100]</h3>
2+
3+
<div class="comprehension-line">
4+
<div class="comprehension">
5+
<div class="comprehension-example">
6+
<span class="operator">[</span>
7+
<span class="element output">x ^ 2</span>
8+
<span class="operator">|</span>
9+
<span class="element input">x <- [1..10]</span>
10+
<span class="operator">,</span>
11+
<span class="element predicative">rem x 2 == 0</span>
12+
<span class="operator">]</span>
13+
</div>
14+
<div class="comprehension-comments">
15+
<span class="operator"></span>
16+
<span class="comment">3. if it's even - add a square of it</span>
17+
<span class="operator"></span>
18+
<span class="comment">1. take numbers 1-10</span>
19+
<span class="operator"></span>
20+
<span class="comment">2. for each check if it's even</span>
21+
<span class="operator"></span>
22+
</div>
23+
</div>
24+
</div>

‎haskell/list_comprehensions/partials/example2.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<h3>A list of squares and cubes of even numbers between 1 and 5: [4,8,16,64]</h3>
2+
3+
<div class="comprehension-line">
4+
<div class="comprehension">
5+
<div class="comprehension-example">
6+
<span class="operator">[</span>
7+
<span class="element output">x ^ y</span>
8+
<span class="operator">|</span>
9+
<span class="element input">x <- [1..5]</span>
10+
<span class="operator">,</span>
11+
<span class="element input">y <- [2, 3]</span>
12+
<span class="operator">,</span>
13+
<span class="element predicative">rem x 2 == 0</span>
14+
<span class="operator">]</span>
15+
</div>
16+
<div class="comprehension-comments">
17+
<span class="operator"></span>
18+
<span class="comment">3. if it is - add first a square and then a cube of it</span>
19+
<span class="operator"></span>
20+
<span class="comment">1. take numbers 1-5</span>
21+
<span class="operator"></span>
22+
<span class="comment"></span>
23+
<span class="operator"></span>
24+
<span class="comment">2. for each check if it's even</span>
25+
<span class="operator"></span>
26+
</div>
27+
</div>
28+
</div>

‎haskell/list_comprehensions/partials/index.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Haskell zine: list comprehensions</title>
6+
<style></style>
7+
</head>
8+
<body>
9+
<input id="trebuchet" type="radio" name="font">
10+
<label for="trebuchet" class="font-button trebuchet-label">Trebuchet</label>
11+
12+
<input id="three" type="radio" name="font" checked>
13+
<label for="three" class="font-button three-label">Three</label>
14+
15+
<div class="zine">
16+
{{ comprehensions }}
17+
{{ example0 }}
18+
{{ example1 }}
19+
{{ example2 }}
20+
</div>
21+
</body>
22+
</html>

‎haskell/list_comprehensions/styles/comprehensions.scss

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
.output {
2+
color: $purple0;
3+
}
4+
5+
.input {
6+
color: $pink0;
7+
}
8+
9+
.predicative {
10+
color: $blue;
11+
}
12+
13+
.comprehension-example {
14+
font-size: 1.3em;
15+
margin-bottom: 10px;
16+
}
17+
18+
.comprehension,
19+
.element,
20+
.operator,
21+
.comment,
22+
.aside {
23+
display: inline-block;
24+
}
25+
26+
.element,
27+
.comment {
28+
width: 150px;
29+
text-align: center;
30+
}
31+
32+
.comment {
33+
vertical-align: top;
34+
font-size: 0.8em;
35+
margin-left: 5px;
36+
}
37+
38+
.operator {
39+
width: 5px;
40+
}
41+
42+
.aside {
43+
margin: 20px 0 0 210px;
44+
}

0 commit comments

Comments
 (0)