Skip to content

Commit 9c6f22b

Browse files
elordinelordin
committed
Update design
1 parent bc905ea commit 9c6f22b

File tree

9 files changed

+589
-292
lines changed

9 files changed

+589
-292
lines changed

‎arrows/index.html

+43-36
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,50 @@
1-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2-
<html xmlns="http://www.w3.org/1999/xhtml">
1+
<!DOCTYPE html>
2+
<html>
33
<head>
4+
<meta charset="utf-8">
5+
<meta name=viewport content="width=device-width, initial-scale=1">
46
<title>The Arrow Calculus</title>
5-
<link rel="stylesheet" type="text/css" href="http://homepages.inf.ed.ac.uk/wadler/style.css"/>
6-
<link rel="stylesheet" type="text/css" href="../links.css"/>
7+
<link rel="stylesheet" type="text/css" href="../css/style.css" />
8+
<link rel="stylesheet" type="text/css" href="../links.css" />
79
</head>
8-
910
<body>
10-
<h1>The Arrow Calculus</h1>
11+
<header>
12+
<img src="../img/logo.svg" class="logo">
13+
<h1>The Arrow Calculus</h1>
14+
</header>
15+
<main>
16+
<section>
17+
<h2>Abstract</h2>
18+
<p>
19+
We introduce the arrow calculus, a metalanguage for manipulating Hughes's arrows with close relations both to Moggi's metalanguage
20+
for monads and to Paterson's arrow notation.
21+
</p>
22+
</section>
1123

12-
<div class="content">
13-
<h3>Abstract</h3>
14-
We introduce the arrow calculus, a metalanguage for manipulating
15-
Hughes's arrows with close relations both to Moggi's metalanguage
16-
for monads and to Paterson's arrow notation.
24+
<section>
25+
<h2>Paper</h2>
26+
<p>
27+
<a href="/papers/arrow-calculus-jfp.pdf">The Arrow Calculus</a>. Sam Lindley, Philip Wadler, and Jeremy Yallop. Journal
28+
of Functional Programming, January 2010.
29+
</p>
30+
</section>
1731

18-
<p>
19-
<h3>Paper</h3>
20-
<a href="/papers/arrow-calculus-jfp.pdf">The Arrow Calculus</a>.
21-
Sam Lindley, Philip Wadler, and Jeremy Yallop.
22-
Journal of Functional Programming, January 2010.
23-
</p>
32+
<section>
33+
<h2>Tech report</h2>
34+
<p>
35+
<a href="/papers/arrow-calculus-tr2008.pdf">The Arrow Calculus</a>, Sam Lindley, Philip Wadler, and Jeremy Yallop.
36+
Tech report, 2008.
37+
</p>
38+
</section>
2439

25-
<p>
26-
<h3>Tech report</h3>
27-
<a href="/papers/arrow-calculus-tr2008.pdf">The Arrow Calculus</a>,
28-
Sam Lindley, Philip Wadler, and Jeremy Yallop.
29-
Tech report, 2008.
30-
</p>
31-
32-
<p>
33-
<h3>Related</h3>:
34-
<a href="http://homepages.inf.ed.ac.uk/slindley/papers/idioms-arrows-monads.pdf">
35-
Idioms are oblivious, arrows are meticulous, monads are promiscuous.</a>
36-
Sam Lindley, Philip Wadler, and Jeremy Yallop.
37-
In the proceedings of MSFP 2008. ENTCS.
38-
39-
40-
</div>
41-
<hr/>
42-
</body>
43-
</html>
40+
<section>
41+
<h2>Related</h2>
42+
<p>
43+
<a href="http://homepages.inf.ed.ac.uk/slindley/papers/idioms-arrows-monads.pdf">
44+
Idioms are oblivious, arrows are meticulous, monads are promiscuous.</a> Sam Lindley, Philip Wadler, and Jeremy
45+
Yallop. In the proceedings of MSFP 2008. ENTCS.
46+
</p>
47+
</section>
48+
</main>
49+
</body>
50+
</html>

‎css/style.css

+267
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
5+
}
6+
7+
a {
8+
text-decoration: none;
9+
color: #091F3F;
10+
border-bottom: thin dotted #091F3F;
11+
}
12+
13+
a:hover {
14+
color: #DF1E36;
15+
border-color: #DF1E36;
16+
}
17+
18+
ul {
19+
list-style-type: square;
20+
}
21+
22+
body.splash {
23+
background: url(../img/bg2.jpg) no-repeat top center fixed;
24+
/* @TODO replace with image that is guaranteed to be free to use by copyright */
25+
background-size: cover;
26+
}
27+
28+
nav {
29+
display: flex;
30+
max-width: 960px;
31+
margin: 0 auto;
32+
padding: 2rem 1rem;
33+
justify-content: space-between;
34+
align-items: center;
35+
}
36+
37+
nav ul {
38+
display: block;
39+
padding: 0;
40+
margin: 0;
41+
}
42+
43+
nav li {
44+
display: inline-block;
45+
}
46+
47+
nav li a {
48+
display: block;
49+
padding: .5rem;
50+
text-decoration: none;
51+
font-weight: 700;
52+
font-size: 1.25rem;
53+
text-transform: uppercase;
54+
border: none;
55+
}
56+
57+
nav li a .fa {
58+
font-size: 2rem;
59+
}
60+
61+
.logo {
62+
display: flex;
63+
align-items: center;
64+
}
65+
66+
.logo img {
67+
width: 4rem;
68+
}
69+
70+
nav h1 {
71+
display: inline-block;
72+
color: #fff;
73+
font-size: 1.5rem;
74+
margin-left: 1rem;
75+
font-weight: normal;
76+
}
77+
78+
.logo {
79+
width: 4rem;
80+
height: 4rem;
81+
margin-right: 1rem;
82+
}
83+
84+
header {
85+
box-sizing: border-box;
86+
display: flex;
87+
align-items: center;
88+
padding: 0 .5rem;
89+
}
90+
91+
header.poster {
92+
max-width: initial;
93+
flex-direction: column;
94+
min-height: calc(100vh - 14rem);
95+
justify-content: center;
96+
padding: 2rem 0 4rem 0;
97+
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
98+
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
99+
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
100+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
101+
}
102+
103+
header.poster h1 {
104+
font-size: 2rem;
105+
display: block;
106+
padding: 4rem 10vw;
107+
color: #fff;
108+
}
109+
110+
header.poster .links {
111+
width: auto;
112+
display: block;
113+
max-width: 20rem;
114+
margin: 0 auto;
115+
}
116+
117+
118+
header.poster .links a {
119+
display: inline-block;
120+
color: #fff;
121+
text-decoration: none;
122+
padding: .5rem .5rem .5rem 0;
123+
}
124+
125+
header.poster .links a:not(.btn) {
126+
font-style: italic;
127+
border-bottom: thin solid #fff;
128+
padding: .5rem 0 0 0;
129+
margin-bottom: .5rem;
130+
}
131+
132+
header.poster .links a.btn {
133+
display: flex;
134+
background-color: #DF1E36;
135+
font-size: 1.5rem;
136+
padding: .75rem 4rem;
137+
margin-right: 1rem;
138+
font-weight: bold;
139+
text-align: center;
140+
height: 3rem;
141+
flex-direction: column;
142+
align-items: center;
143+
justify-content: center;
144+
}
145+
146+
header.poster a.btn:hover {
147+
background-color: #BC1D31;
148+
}
149+
150+
header.poster a .fa {
151+
float: left;
152+
}
153+
154+
header.poster a small {
155+
display: block;
156+
font-size: .8rem;
157+
}
158+
159+
.quick-install-info {
160+
display: block;
161+
margin-right: 1rem;
162+
color: #fff;
163+
}
164+
165+
header code {
166+
background-color: #333;
167+
color: #DF1E36;
168+
padding: .5rem;
169+
display: block;
170+
border-radius: 2px;
171+
box-shadow:
172+
0 1px 3px rgba(0, 0, 0, .05),
173+
0 2px 6px rgba(0, 0, 0, .1),
174+
0 3px 12px rgba(0, 0, 0, .15);
175+
width: auto;
176+
margin: 0 1.5rem 0 .5;
177+
}
178+
179+
@media (min-width: 32rem) {
180+
header.poster h1 {
181+
font-size: 3rem;
182+
max-width: 60vw;
183+
}
184+
185+
header.poster .links {
186+
max-width: initial;
187+
margin: 0;
188+
width: auto;
189+
align-self: flex-end;
190+
margin-right: 10vw;
191+
display: flex;
192+
}
193+
194+
header.poster .links a.btn {
195+
color: #fff;
196+
text-decoration: none;
197+
padding: .75rem 4rem;
198+
}
199+
200+
}
201+
202+
main {
203+
min-height: 100vh;
204+
background-color: #fff;
205+
padding: 0;
206+
margin-top: 2rem;
207+
}
208+
209+
.poster + main {
210+
margin-top: 0;
211+
}
212+
213+
main section {
214+
max-width: 960px;
215+
margin: 0 auto;
216+
padding: 1rem;
217+
}
218+
219+
figcaption {
220+
font-size: .8rem;
221+
}
222+
223+
.figure-group {
224+
display: flex;
225+
justify-content: center;
226+
flex-direction: row;
227+
width: 100%;
228+
background-color: #eee;
229+
text-align: center;
230+
margin: 1rem auto;
231+
padding: 1rem 0;
232+
}
233+
234+
main figure img {
235+
max-width: 100%;
236+
}
237+
238+
@media (min-width: 32rem) {
239+
main figure {
240+
max-width: 512px;
241+
}
242+
}
243+
244+
main li {
245+
padding: .5rem 0;
246+
}
247+
248+
h2 {
249+
color: #333;
250+
text-align: center;
251+
font-size: 2rem;
252+
margin: 0;
253+
padding: 1rem .5rem .5rem .5rem;
254+
}
255+
256+
h3 {
257+
text-align: center;
258+
}
259+
260+
header {
261+
max-width: calc(960px + 12rem);
262+
margin: 0 auto;
263+
}
264+
265+
a.dead {
266+
text-decoration: line-through;
267+
}

0 commit comments

Comments
 (0)