Skip to content

Commit 3160072

Browse files
davidchambersdavidchambers
committed
templates and styling for upcoming events and event details
1 parent 12dbe25 commit 3160072

File tree

7 files changed

+270
-41
lines changed

7 files changed

+270
-41
lines changed

‎_layouts/post.html‎

Lines changed: 56 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,64 @@
11
---
22
layout: default
33
---
4-
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
4+
<article class="post">
55

6-
<div class="post-content" itemprop="articleBody">
6+
<div class="post-content">
77
<div class="content-wrapper">
8-
<div class="content">
9-
<header class="post-header">
10-
<h1 class="post-title" itemprop="name headline">{{ page.title }}</h1>
11-
<p> {{page.workshop_dates}}</p>
12-
</header>
13-
{{ content }}
8+
<div class="content content-0">
9+
<div class="content-1">
10+
<div class="content-inner">
11+
<h1 class="post-title">ClojureBridge {{ page.city }}</h1>
12+
<p class="location">{{ page.city }}, {{ page.country }}</p>
13+
<p class="dates"><i class="fa fa-calendar"></i> {{ page.workshop_dates }}</p>
14+
{{ content }}
15+
</div>
16+
</div>
17+
<div class="content-2">
18+
<div class="content-inner">
19+
<img alt="{{ page.city }} map" src="https://maps.googleapis.com/maps/api/staticmap?size=450x300&amp;zoom=16&amp;markers={{ page.latitude }}%2C{{ page.longitude }}&amp;key=AIzaSyBHlZkrV89gVAL1z9Wy95LkBiS27UsAv3g">
20+
<h3>Location</h3>
21+
<p>{{ page.street }}, {{ page.city }}, {{ page.country }}</p>
22+
<div class="organizers">
23+
<h3>Organizer{% if page.organizers.names.size > 1 %}s{% endif %}</h3>
24+
<p>
25+
We are grateful for the involvement of
26+
{{ page.organizers.names | join: ' and ' }},
27+
who will host this workshop, and will answer any
28+
questions you might have before or during the workshop.
29+
</p>
30+
<p class="social-media">
31+
Find {{ page.organizers.names | join: ' and ' }}
32+
on social media:
33+
</p>
34+
<ul>
35+
{% for account in page.accounts %}
36+
{% if account.service == 'github' %}
37+
<li>
38+
<i class="fa fa-github"></i>
39+
<a href="https://github.com/{{ account.username }}">{{ account.username }}</a>
40+
</li>
41+
{% elsif account.service == 'twitter' %}
42+
<li>
43+
<i class="fa fa-twitter"></i>
44+
<a href="https://twitter.com/{{ account.username }}">{{ account.username }}</a>
45+
</li>
46+
{% endif %}
47+
{% endfor %}
48+
</ul>
49+
</div>
50+
<div class="sponsors">
51+
<p>A huge thank you to our sponsors:</p>
52+
<ul>
53+
{% for sponsor in page.sponsors %}
54+
<li>
55+
<a href="{{ sponsor.url }}"><img alt="{{ sponsor.name }}" src="{{ sponsor.image }}"></a>
56+
</li>
57+
{% endfor %}
58+
</ul>
59+
</div>
60+
</div>
61+
</div>
1462
</div>
1563
</div>
1664
</div>

‎_plugins/md5.rb‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
require 'digest/md5'
2+
3+
module MD5
4+
def md5 input
5+
Digest::MD5.hexdigest input
6+
end
7+
end
8+
9+
Liquid::Template.register_filter MD5

‎_posts/2016-08-15-Auckland.md‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎_posts/2016-09-15-Berlin.md‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎_posts/2017-05-05-Stockholm.md‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
---
2+
layout: post
3+
country: Sweden
4+
city: Stockholm
5+
street: Klarna AB Sveavägen 46
6+
latitude: 59.3371711
7+
longitude: 18.0623905
8+
date: 2018-05-05 18:00:00 +0200
9+
workshop_dates: 5–6 May 2018
10+
city_image_url: https://upload.wikimedia.org/wikipedia/commons/8/88/Stockholm_Port.jpg
11+
organizers:
12+
email: ClojureBridgeSE@gmail.com
13+
names: ["Mariana Bocoi", "Josh Glover"]
14+
accounts:
15+
- service: github
16+
username: ClojureBridgeSE
17+
- service: twitter
18+
username: ClojureBridgeSE
19+
- service: unrecognized
20+
username: ClojureBridgeSE
21+
sponsors:
22+
- name: Klarna AB
23+
image: http://s3.amazonaws.com/clojurebridge/thumb/197/klarna-blue-black.png?1488765101
24+
url: https://lifeatklarna.com/
25+
- name: PurelyFunctional.tv
26+
image: http://s3.amazonaws.com/clojurebridge/thumb/198/95571868-0513-11e7-80b1-f62efc8b6793.png?1489095657
27+
url: https://purelyfunctional.tv/
28+
---
29+
30+
### Description
31+
32+
ClojureBridge is a free 1-day workshop aimed at increasing the participation
33+
of women in the Clojure community. It will be held in Stockholm, on Saturday
34+
May 6th, 2017 with an install fest on Friday May 5th, 2017 in the evening.
35+
The workshop is intended both for those new to programming, as well as those
36+
with some programming experience who would like to explore programming using
37+
Clojure, a modern functional programming language. If you have a lot of
38+
programming experience, you may find the pace a bit slow; consider joining
39+
us as a coach! :)
40+
41+
The workshop will introduce you to fundamental programming concepts and
42+
approaches. Participants will fill out a quick survey to help us create groups
43+
based on prior knowledge and understanding. Although participants can install
44+
the required software for the workshop on their own, it is recommended everyone
45+
attend on Friday to set up her programming environment. Saturday will be spent
46+
learning and practising Clojure programming. You will be working in small
47+
groups of around 3 attendees each. Each participant needs to bring a laptop
48+
computer with a fairly recent operating system (Mac, Linux or Windows). If you
49+
have questions about your hardware or you don’t have a laptop, please don’t
50+
hesitate to send an email to the organisers before the event.
51+
52+
The workshop will be held in English, but we will have a few Swedish speakers
53+
on hand, as well.
54+
55+
### Contact us
56+
57+
We're on Twitter at [ClojureBridgeSE](https://twitter.com/ClojureBridgeSE).
58+
59+
### Who can attend?
60+
61+
The workshop is open to all women, trans*, and gender nonconforming people.
62+
63+
### Code of Conduct
64+
65+
The workshop provides a safe and welcoming environment for everyone,
66+
so we will be asking all learners and event volunteers to respect our
67+
[Code of Conduct](http://bridgefoundry.org/code-of-conduct/), which will be
68+
strictly enforced. Our aim is that ClojureBridge Stockholm will introduce
69+
learners to new possibilities in programming and grow the tech community
70+
into a more diverse and interesting group.
71+
72+
### Schedule
73+
74+
#### Friday
75+
76+
- 6:00 PM Installfest
77+
78+
#### Saturday
79+
80+
- 9:00 AM Doors open
81+
- 9:30 AM Welcome and introductions
82+
- 10:00 AM Group workshops
83+
- 12:30 PM Lunch
84+
- 1:30 PM Lightning talk
85+
- 2:00 PM Group workshop
86+
- 5:30 PM Demo
87+
- 6:30 PM After party

‎css/main.css‎

Lines changed: 105 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
body {
22
margin: 0;
33
font: 16px/1.4 "freight-sans-pro", "Helvetica", "Arial", sans-serif;
4+
color: #222;
45
}
56

67
.content h1 {
@@ -109,15 +110,21 @@ body {
109110
#events-list {
110111
padding: 0;
111112
list-style: none;
113+
overflow: hidden;
112114
}
113115

114116
#events-list li {
117+
float: left;
115118
width: 247px;
116119
padding: 0 0 2em;
117120
background: #e9e9e9;
118121
text-align: center;
119122
}
120123

124+
#events-list li + li {
125+
margin-left: 30px;
126+
}
127+
121128
#events-list h3 {
122129
margin-top: 0.2em;
123130
font-weight: normal;
@@ -132,11 +139,9 @@ body {
132139
#events-list .city {
133140
width: 247px;
134141
height: 247px;
135-
background-position: center;
136-
background-size: cover;
137142
}
138143

139-
#events-list img.organizer {
144+
#events-list .organizer {
140145
margin: -40px auto 0;
141146
display: block;
142147
width: 57px;
@@ -162,13 +167,21 @@ a {
162167
}
163168

164169
h1, h2, h3, h4, h5, h6 {
165-
margin: 0;
170+
margin: 0.2em 0 0.5em;
171+
color: #33343e;
166172
}
167173

168174
img {
169175
max-width: 100%;
170176
}
171177

178+
.background-image {
179+
background-position: 50%;
180+
-webkit-background-size: cover;
181+
-moz-background-size: cover;
182+
background-size: cover;
183+
}
184+
172185
.fa span {
173186
display: none;
174187
}
@@ -194,6 +207,94 @@ img {
194207
margin-bottom: 1.0em;
195208
}
196209

210+
.content-0:after {
211+
display: block;
212+
clear: both;
213+
content: "";
214+
}
215+
216+
.content-1 {
217+
float: left;
218+
width: 50%;
219+
}
220+
221+
.content-1 .content-inner {
222+
padding: 0 0.9375em 0 0;
223+
}
224+
225+
.content-2 {
226+
float: right;
227+
width: 50%;
228+
}
229+
230+
.content-2 .content-inner {
231+
padding: 0 0 0 0.9375em;
232+
}
233+
234+
.location {
235+
margin: -0.55em 0 0.5em;
236+
font-size: 1.5em;
237+
color: #33343e;
238+
}
239+
240+
.dates {
241+
background: #e9e9e9;
242+
padding: 0.25em 0.5em;
243+
font-size: 90%;
244+
color: #33343e;
245+
}
246+
247+
h3 {
248+
margin-bottom: 0.375em;
249+
border-bottom: 2px solid #999a9f;
250+
padding-bottom: 0.375em;
251+
font-size: 1.125em;
252+
}
253+
254+
.organizers {
255+
background: #e9e9e9;
256+
padding: 0.5em 1em;
257+
}
258+
259+
.organizers .social-media {
260+
margin-bottom: 0;
261+
font-weight: bold;
262+
font-size: 90%;
263+
color: #707178;
264+
text-transform: uppercase;
265+
}
266+
267+
.organizers ul {
268+
margin: 0.5em 0;
269+
padding: 0;
270+
list-style: none;
271+
}
272+
273+
.sponsors p {
274+
margin: 1.5em 0 0.5em;
275+
font-weight: 100;
276+
font-size: 1.5em;
277+
}
278+
279+
.sponsors ul {
280+
margin: 0;
281+
padding: 0;
282+
list-style: none;
283+
}
284+
285+
.sponsors li {
286+
margin-bottom: 4px;
287+
}
288+
289+
.sponsors img {
290+
border: 1px solid #e9e9e9;
291+
padding: 5px;
292+
}
293+
294+
.sponsors a:hover img {
295+
border-color: #33343e;
296+
}
297+
197298
@media screen and (min-width: 640px) {
198299
#paypal-button {
199300
text-align: right;

‎index.html‎

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -20,24 +20,21 @@ <h2>
2020
Upcoming Events
2121
</h2>
2222

23+
{% assign upcoming_events = site.posts | where_exp: 'post', 'post.date >= site.time' %}
24+
{% if upcoming_events.size == 0 %}
25+
<p>There are no upcoming workshops.</p>
26+
{% else %}
2327
<ul id="events-list">
24-
25-
{% assign curDate = site.time | date: '%s' %}
26-
{% for post in site.posts %}
27-
{% assign postStartDate = post.date | date: '%s' %}
28-
{% if postStartDate >= curDate %}
29-
<li>
30-
<div class="city" style="background-image: url(http://www.telegraph.co.uk/content/dam/Travel/leadAssets/24/49/david-bowie_2449256a-large.jpg)"></div>
31-
<img src="https://avatars1.githubusercontent.com/u/5123681?v=3&s=460" class="organizer">
32-
<h3>
33-
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
34-
</h3>
35-
<p>{{ post.workshop_dates }}</li>
36-
</li>
37-
{% endif %}
38-
{% endfor %}
39-
28+
{% for post in upcoming_events reversed %}
29+
<li>
30+
<div class="background-image city" style="background-image: url({{ post.city_image_url }})"></div>
31+
<div class="background-image organizer" style="background-image: url(https://www.gravatar.com/avatar/{{ post.organizers.email | strip | downcase | md5 }}?s=200)"></div>
32+
<h3><a class="post-link" href="{{ post.url }}">{{ post.city }}</a></h3>
33+
<p>{{ post.workshop_dates }}</li>
34+
</li>
35+
{% endfor %}
4036
</ul>
37+
{% endif %}
4138

4239
</div>
4340
</div>

0 commit comments

Comments
 (0)