Skip to content

Commit 25a20a1

Browse files
mtrythallmtrythall
committed
Updates with stat blocks
1 parent 0fde0c8 commit 25a20a1

File tree

4 files changed

+310
-58
lines changed

4 files changed

+310
-58
lines changed

‎_pages/recap.html‎

Lines changed: 183 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -162,43 +162,196 @@ <h3 class="event-title">{{ post.title }}</h3>
162162
SPEAKERS
163163
{% endcomment %}
164164
<div class="section-pad presenter-list-block theme-brand-color5">
165+
<h2 class="recap-heading">All Sessions Performed by Amazing People</h2>
166+
<section class="presenter-list">
167+
{% for post in site.schedule %}
168+
{% if post.presenters %}
169+
{% for presenter in post.presenters %}
170+
{% if presenter.name %}
171+
<a
172+
href="{{ post.permalink }}"
173+
class="presenter-byline">
174+
{% if presenter.photo_url != blank %}
175+
<img
176+
class="avatar"
177+
src="{{ presenter.photo_url }}"
178+
alt="Photo of {{ presenter.name }}" />
179+
{% endif %}
180+
{{ presenter.name }}
181+
{% if presenter.pronouns != blank %}
182+
({{ presenter.pronouns }})
183+
{% endif %}
184+
</a>
185+
{% endif %}
186+
{% endfor %}
187+
{% endif %}
188+
{% endfor %}
189+
</section>
190+
</div>
191+
192+
{% include sponsor-footer.html %}
193+
194+
<div class="section-pad theme-light-gray">
165195
<div class="row">
166-
<div class="column small-12">
167-
<h2>All Sessions Performed by Amazing People</h2>
196+
<div class="column small-12 medium-5">
197+
<h2>Stat Block</h2>
198+
<p class="lead">It is very likely that we will want to feature some sort of table or data element. Perhaps this is survey results, or a pie chart of swag selection, etc.</p>
199+
</div>
200+
201+
<div class="column hide-for-mobile medium-6">
202+
<div class="table-scroll">
203+
<table class="unstriped stacked">
204+
<thead>
205+
<tr>
206+
<th>T-Shirts Eaten</th>
207+
<th>OMG What?</th>
208+
</tr>
209+
</thead>
210+
<tbody>
211+
<tr>
212+
<td>Small</td>
213+
<td>Seriously</td>
214+
</tr>
215+
<tr>
216+
<td>Medium</td>
217+
<td>People</td>
218+
</tr>
219+
<tr>
220+
<td>Large</td>
221+
<td>Ate...</td>
222+
</tr>
223+
<tr>
224+
<td>X-Large</td>
225+
<td>The shirts?</td>
226+
</tr>
227+
</tbody>
228+
</table>
229+
<p>You could also put an image here, no problem!</p>
230+
</div>
168231
</div>
169232
</div>
170233

171-
<section class="presenter-list">
172-
<div class="row">
173-
{% for post in site.schedule %}
174-
{% if post.presenters %}
175-
{% for presenter in post.presenters %}
176-
{% if presenter.name %}
177-
<a
178-
href="{{ post.permalink }}"
179-
class="presenter-byline">
180-
{% if presenter.photo_url != blank %}
181-
<img
182-
class="avatar"
183-
src="{{ presenter.photo_url }}"
184-
alt="Photo of {{ presenter.name }}" />
185-
{% endif %}
186-
{{ presenter.name }}
187-
{% if presenter.pronouns != blank %}
188-
({{ presenter.pronouns }})
189-
{% endif %}
190-
</a>
191-
{% endif %}
192-
{% endfor %}
193-
{% endif %}
194-
{% endfor %}
234+
<div class="row">
235+
<div class="column small-12 medium-6">
236+
<h3>And remember...</h3>
237+
<p>Under the hood it's all just a grid system. So you can just add a new row if you want to associate more text with this block. Easy peasy, lemon squeezy.</p>
195238
</div>
196-
</section>
239+
</div>
197240
</div>
198241

199-
{% include sponsor-footer.html %}
242+
<div class="photos-block">
243+
<header class="photos-block-header theme-brand-color4">
244+
<h2>Lots of Photos</h2>
245+
<p>We took a total over 300 photos this year. Here are some of our favorites. What were some of your favorite moments this year?</p>
246+
<a href="#" class="button theme-brand-color3">View all photos</a>
247+
</header>
248+
<div class="photo">
249+
<img
250+
src="https://placeimg.com/840/680/animals" alt="" />
251+
</div>
252+
<div class="photo">
253+
<img
254+
src="https://placeimg.com/840/680/animals" alt="" />
255+
</div>
256+
<div class="photo">
257+
<img
258+
src="https://placeimg.com/840/680/animals" alt="" />
259+
</div>
260+
<div class="photo">
261+
<img
262+
src="https://placeimg.com/840/680/animals" alt="" />
263+
</div>
264+
<div class="photo">
265+
<img
266+
src="https://placeimg.com/840/680/animals" alt="" />
267+
</div>
268+
<div class="photo">
269+
<img
270+
src="https://placeimg.com/840/680/animals" alt="" />
271+
</div>
272+
<div class="photo">
273+
<img
274+
src="https://placeimg.com/840/680/animals" alt="" />
275+
</div>
276+
<div class="photo">
277+
<img
278+
src="https://placeimg.com/840/680/animals" alt="" />
279+
</div>
280+
<div class="photo">
281+
<img
282+
src="https://placeimg.com/840/680/animals" alt="" />
283+
</div>
284+
<div class="photo">
285+
<img
286+
src="https://placeimg.com/840/680/animals" alt="" />
287+
</div>
288+
<div class="photo">
289+
<img
290+
src="https://placeimg.com/840/680/animals" alt="" />
291+
</div>
292+
<div class="photo">
293+
<img
294+
src="https://placeimg.com/840/680/animals" alt="" />
295+
</div>
296+
<div class="photo">
297+
<img
298+
src="https://placeimg.com/840/680/animals" alt="" />
299+
</div>
300+
<div class="photo">
301+
<img
302+
src="https://placeimg.com/840/680/animals" alt="" />
303+
</div>
304+
</div>
305+
306+
<div class="section-pad">
307+
<div class="row">
308+
<div class="column small-12 medium-5">
309+
<h2>Stat Block</h2>
310+
<p class="lead">It is very likely that we will want to feature some sort of table or data element. Perhaps this is survey results, or a pie chart of swag selection, etc.</p>
311+
</div>
312+
313+
<div class="column hide-for-mobile medium-6">
314+
<div class="table-scroll">
315+
<table class="unstriped stacked">
316+
<thead>
317+
<tr>
318+
<th>T-Shirts Eaten</th>
319+
<th>OMG What?</th>
320+
</tr>
321+
</thead>
322+
<tbody>
323+
<tr>
324+
<td>Small</td>
325+
<td>Seriously</td>
326+
</tr>
327+
<tr>
328+
<td>Medium</td>
329+
<td>People</td>
330+
</tr>
331+
<tr>
332+
<td>Large</td>
333+
<td>Ate...</td>
334+
</tr>
335+
<tr>
336+
<td>X-Large</td>
337+
<td>The shirts?</td>
338+
</tr>
339+
</tbody>
340+
</table>
341+
<p>You could also put an image here, no problem!</p>
342+
</div>
343+
</div>
344+
</div>
200345

201-
<section class="section-pad organizer-block theme-brand-color4">
346+
<div class="row">
347+
<div class="column small-12 medium-6">
348+
<h3>And remember...</h3>
349+
<p>Under the hood it's all just a grid system. So you can just add a new row if you want to associate more text with this block. Easy peasy, lemon squeezy.</p>
350+
</div>
351+
</div>
352+
</div>
353+
354+
<div class="section-pad organizer-block theme-brand-color4">
202355
<div class="row">
203356
<header class="organizer-block-header recap-heading">
204357
<h2>DjangoCon 2019 is possible through lots of :heart:</h2>
@@ -252,6 +405,6 @@ <h3 class="profile-name">
252405
{% endunless %}
253406
{% endfor %}
254407
</div>
255-
</section>
408+
</div>
256409

257410
</div> <!-- End .content -->

‎_scss/_settings.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -606,8 +606,8 @@ $switch-paddle-transition: all 0.25s ease-out;
606606
// 32. Table
607607
// ---------
608608

609-
$table-background: darken($light-gray, 5%);
610-
$table-color-scale: 5%;
609+
$table-background: #FFF;
610+
$table-color-scale: 8%;
611611
$table-border: 1px solid smart-scale($table-background, $table-color-scale);
612612
$table-padding: rem-calc(8 10 10);
613613
$table-hover-scale: 2%;

‎_scss/layout/_recap.scss‎

Lines changed: 64 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -79,20 +79,75 @@
7979
}
8080
}
8181

82-
div.presenter-list-block {
83-
.presenter-byline {
84-
display: inline-flex;
85-
margin: 0 1.5rem 2rem;
82+
.presenter-list {
83+
display: flex;
84+
flex-flow: row wrap;
85+
justify-content: center;
86+
// A little more padding than usual
87+
padding-right: 30px;
88+
padding-left: 30px;
89+
}
90+
91+
.presenter-list-block {
92+
// TODO: Hacked padding
93+
padding-right: 0.4807692308rem;
94+
padding-left: 0.4807692308rem;
95+
96+
.presenter-list {
97+
.presenter-byline {
98+
display: inline-flex;
99+
margin: 0 1rem 2rem;
100+
}
101+
102+
.avatar {
103+
max-width: 60px;
104+
}
86105
}
87106

88-
.avatar {
89-
max-width: 80px;
107+
@include breakpoint(medium) {
108+
.presenter-byline {
109+
margin: 0 1.5rem 2rem;
110+
}
111+
112+
.avatar {
113+
max-width: 80px;
114+
}
90115
}
91116
}
92117

93-
94-
.presenter-list {
118+
.photos-block {
95119
display: flex;
96120
flex-flow: row wrap;
97-
justify-content: center;
121+
background: $brand-color6;
122+
123+
&-header {
124+
display: flex;
125+
flex-direction: column;
126+
justify-content: center;
127+
align-items: center;
128+
padding: 1rem 2rem;
129+
width: 100%;
130+
}
131+
132+
.photo {
133+
flex: 1 0 auto;
134+
}
135+
136+
@include breakpoint(medium) {
137+
.photo {
138+
flex: 1 0 33.33%;
139+
}
140+
}
141+
142+
@include breakpoint(large) {
143+
&-header,
144+
&-header + .photo,
145+
&-header + .photo + .photo {
146+
width: 33.33%;
147+
}
148+
149+
.photo {
150+
flex: 1 0 25%;
151+
}
152+
}
98153
}

0 commit comments

Comments
 (0)