Skip to content

Commit 856ffb8

Browse files
creutercreuter
committed
Speaker grid wip
1 parent 82bca05 commit 856ffb8

File tree

3 files changed

+85
-72
lines changed

3 files changed

+85
-72
lines changed

‎.ruby-version‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
2.4.2

‎assets/_sass/_index.scss‎

Lines changed: 71 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -372,25 +372,46 @@
372372
}
373373

374374
.speakers {
375-
@extend .tweets;
376-
overflow: inherit;
377-
float: left;
375+
display: grid;
376+
flex: 1;
377+
grid-gap: $large-spacing;
378+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
378379

379-
.author img {
380-
max-height: 200px;
381-
border-radius: 50%;
380+
blockquote {
381+
margin: 0;
382382
}
383+
}
383384

384-
li {
385-
color: $dark-gray;
386-
background-color: $mint;
385+
.speaker {
386+
text-align: center;
387+
position: relative;
388+
z-index: 1;
387389

388-
&:nth-of-type(1)::before {
389-
background-color: $flesh;
390-
}
391-
&:nth-of-type(3)::before {
392-
background-color: $hot-pink;
393-
}
390+
.author {
391+
-webkit-font-smoothing: antialiased;
392+
color: #fff;
393+
font-family: $heading-font-family;
394+
font-size: 48px;
395+
line-height: 0.9;
396+
position: relative;
397+
text-align: center;
398+
}
399+
400+
a {
401+
display: inline-block;
402+
flex-shrink: 0;
403+
}
404+
405+
img {
406+
@include size(200px);
407+
border-radius: 50%;
408+
display: block;
409+
mix-blend-mode: screen;
410+
}
411+
412+
a:hover img {
413+
mix-blend-mode: inherit;
414+
transform: rotate(30deg);
394415
}
395416
}
396417

@@ -457,36 +478,53 @@
457478
}
458479

459480
.weirdos {
460-
background-color: $dark-purple;
481+
padding: $x-large-spacing $large-spacing;
482+
background-color: $purple;
461483
position: relative;
462-
color: #fff;
463484
overflow: hidden;
464-
-webkit-font-smoothing: antialiased;
465485

466-
&:after {
467-
background-color: $pink;
486+
@media screen and (min-width: 950px) {
487+
display: flex;
488+
padding: $xxx-large-spacing $x-large-spacing;
489+
}
490+
491+
&::before {
492+
background-color: $dark-purple;
468493
bottom: -140px;
469494
content: "";
470495
display: block;
471496
position: absolute;
472-
left: -70%;
497+
right: 40%;
473498
top: 0;
474-
transform: skewX(-32deg);
499+
transform: skewX(-24deg);
475500
width: 100%;
476501
z-index: 0;
477502
}
503+
}
478504

479-
&:before {
480-
background-color: $dark-gray;
481-
bottom: -10rem;
482-
content: "";
483-
display: block;
484-
position: absolute;
485-
left: 0%;
486-
top: 48%;
487-
transform: skewY(3deg);
488-
width: 100%;
489-
z-index: 0;
505+
.weirdos__content {
506+
float: left;
507+
z-index: 1;
508+
509+
@media screen and (max-width: 949px) {
510+
text-align: center;
511+
}
512+
513+
h2 {
514+
font-size: 64px;
515+
color: $mustard;
516+
}
517+
518+
p {
519+
max-width: 450px;
520+
521+
@media screen and (max-width: 949px) {
522+
margin: 0 auto;
523+
}
524+
}
525+
526+
a {
527+
margin-bottom: $base-spacing;
490528
}
491529
}
492530

‎index.html‎

Lines changed: 13 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -110,53 +110,27 @@ <h1>What you should expect @ keep ruby weird:</h1>
110110
</div>
111111
</section>
112112

113-
<section class="weirdos">
114-
<div class="cfp hero__container">
115-
<h1>Meet the weirdos</h1>
116-
<div class="cfp__content">
113+
<section class="weirdos hero__container">
114+
<ul class="speakers">
115+
<li class="weirdos__content">
116+
<h2>Meet the weirdos</h2>
117117
<a href="https://www.papercall.io/krw-2017" class="button">Speak at KRW!</a>
118118
<p>We’re as always looking for a mix of soft (conceptual, community, career, other C-words), technical (discussing code on screen), and non-Ruby (space, emoji, art). Also you should read <a href="/conduct">Our Code of Conduct.</a></p>
119-
</div>
120-
<ul class="speakers">
121-
{% for speaker in site.data.speakers limit: 3%}
122-
<li>
123-
<blockquote>
124-
<details> <summary><strong>{{ speaker.talk }}</strong></summary>
125-
<p>{{ speaker.abstract }}</p>
126-
</details>
127-
</blockquote>
128-
<div class="author">
129-
<a href="https://twitter.com/{{ speaker.twitter }}">
130-
<img src="https://twitter.com/{{ speaker.twitter }}/profile_image?size=original" alt="{{ speaker.name }}">
131-
</a>
132-
<p class="commentary">{{ speaker.name }}</p>
133-
</div>
134-
</li>
135-
{% endfor %}
136-
</ul>
137-
<ul class="speakers">
138-
{% for speaker in site.data.speakers limit: 3 offset: 3%}
139-
<li>
119+
</li>
120+
{% for speaker in site.data.speakers limit: 8%}
121+
<li class="speaker">
122+
<a href="https://twitter.com/{{ speaker.twitter }}">
123+
<img src="https://twitter.com/{{ speaker.twitter }}/profile_image?size=original" alt="{{ speaker.name }}">
124+
</a>
125+
<p class="author">{{ speaker.name }}</p>
140126
<blockquote>
141127
<details> <summary><strong>{{ speaker.talk }}</strong></summary>
142128
<p>{{ speaker.abstract }}</p>
143129
</details>
144130
</blockquote>
145-
<div class="author">
146-
<a href="https://twitter.com/{{ speaker.twitter }}">
147-
<img src="https://twitter.com/{{ speaker.twitter }}/profile_image?size=original" alt="{{ speaker.name }}">
148-
</a>
149-
<p class="commentary">{{ speaker.name }}</p>
150-
</div>
151131
</li>
152-
{% endfor %}
153-
</ul>
154-
</div>
155-
<div class="sponsor">
156-
<h2>PLEASE support our weirdness with the gererosity of Your Friendship</h2>
157-
<p>Keep Ruby Weird can't happen without help from sponsors. We have a few different sponsorship levels, and of course we're open to other arrangements.</p>
158-
<a href="mailto:[email protected]" class="button">Sponsor Us</a>
159-
</div>
132+
{% endfor %}
133+
</ul>
160134
</section>
161135

162136
<section class="alamo">

0 commit comments

Comments
 (0)