-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.js
204 lines (188 loc) · 5.15 KB
/
index.js
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
var html = require('choo/html')
var css = require('sheetify')
var choo = require('choo')
var speakerData = require('./speakers.json')
var date = {
dayOfWeek: 'Thursday',
time: '7pm',
date: 'May 4th'
}
css('tachyons')
css`
.js-yellow { color: #f7df1e }
.bg-js-yellow { background-color: #f7df1e }
`
var logo = css`
:host {
font-size: 4rem;
text-shadow:
-1px 1px black,
-2px 2px black,
-3px 3px black,
-4px 4px black;
}
@media screen and (min-width: 60em) {
:host {
font-size: 12rem;
text-shadow:
-3px 3px black,
-6px 6px black,
-9px 9px black,
-12px 12px black;
}
}
`
var app = choo()
app.route('/', mainView)
if (module.parent) module.exports = app
else app.mount('body')
function mainView () {
return html`
<body class="sans-serif bg-js-yellow">
${nav()}
<main class="ph4">
${intro()}
${speakers()}
${codeOfConduct()}
${sponsor()}
</main>
${footer()}
</body>
`
}
function nav () {
return html`
<nav class="pa4 flex flex-column">
<h1 class="ttu mv0 pl2">
<span class=${logo}>
berlin.js
</span>
</h1>
<h2>JSConf EU 2017 special</h2>
<h3 class="f2 f1-ns b ttu mt0 pt5">
${date.dayOfWeek} ${date.date}
<br class="dn db-l"/>
${date.time} at
<a href="https://goo.gl/maps/u6k4zWKcw5y" class="black link underline">
co.up
</a>
</h3>
</nav>
`
}
function speakers () {
return html`
<section class="pt4 pt5-ns">
<div class="mw9 center">
<h2 class="f3 f2-ns ttu b ma0 bb bw2">
Featuring amazing speakers
</h2>
<section class="lh-copy">
<div class="cf">
${speakerData.map(speaker)}
</div>
</section>
</div>
</section>
`
function speaker (data) {
return html`
<article class="pv2 fl w-100 w-third-l pr4-l">
<h2 class="f4 f3-ns fw6 mb0">
${data.name}
</h2>
<p class="f5 f4-ns measure lh-copy mt0">
${data.description}
</p>
</article>
`
}
}
function intro () {
return html`
<section class="mt4 mt5-ns">
<div class="mw9 center cf">
<section class="fn fl-l w-100 w-40-l pr4-l">
<h2 class="f3 f1-ns lh-title fw9 mb3 mt0 pt3 bw2">
Wait, what's this?
</h2>
</section>
<section class="lh-copy f5 f4-ns fl mt0-l measure">
Welcome to our <a href="http://2017.jsconf.eu">JSConf EU</a> special, a
special occasion for the Berlin JavaScript community to mix and mingle
with people coming to JSConf EU 2017 from all over the world.
We will have talks and plenty of space to meet new people. See you there!
</section>
</div>
</section>
`
}
function codeOfConduct () {
return html`
<section class="mt4 mt5-ns">
<div class="mw9 center cf">
<section class="fn fl-l w-100 w-40-l pr4-l">
<h2 class="f3 f1-ns lh-title fw9 mb3 mt0 pt3 bt bw2">
We care about human beings
</h2>
</section>
<section class="lh-copy f5 f4-ns fl mt0-l measure">
Our goal is to have an awesome, inclusive and safe community meetup
where people meet, hang out together, chat, listen to talks, exchange
ideas and make new friends.
<strong>
Any harmful or discriminating behaviour
will not be tolerated and results in the offending person being
expelled from the meetup.
</strong>
For details on what kinds of behaviour are not tolerated and
consequences for violating these rules, we refer to the
<a href="http://rubyberlin.github.io/code-of-conduct" class="black link underline">
Berlin Code of Conduct.
</a>
</section>
</div>
</section>
`
}
function sponsor () {
return html`
<section class="mt4 mt5-ns">
<div class="mw9 center">
<h2 class="f3 f1-ns lh-title fw9 mb3 mt0 pv3 bt bb bw2">
Kindly sponsored by
<a href="http://co-up.de/" class="black link underline">
co.up coworking
</a>
</h2>
</div>
</section>
`
}
function footer () {
return html`
<footer class="pa4 pv5-l cf">
<div class="f5 lh-copy fl w-100">
<div class="fl-ns w-100 w-20-l pr3-m pr4-l underline">
<a href="http://twitter.com/berlinjs" class="black link dim b">
We're on Twitter
</a>
</div>
<div class="fl-ns w-100 w-20-l pr3-m pr4-l underline">
<a href="http://www.meetup.com/Berlin-JS/" class="black link dim b">
And on Meetup
</a>
</div>
<div class="fl-ns w-100 w-20-l pr3-m pr4-l underline">
<a href="https://berlinjs-slack.herokuapp.com/" class="black link dim b">
We also have a Slack
</a>
</div>
<div class="fl-ns w-100 w-20-l pr3-m pr4-l underline">
<a href="http://groups.google.com/group/js-berlin" class="black link dim b">
And a mailing list
</a>
</div>
</footer>
`
}