Skip to content

Commit 8195deb

Browse files
kylefiedlerkylefiedler
committed
I don't really know anymore
1 parent 856ffb8 commit 8195deb

File tree

3 files changed

+107
-76
lines changed

3 files changed

+107
-76
lines changed

‎assets/_sass/_index.scss‎

Lines changed: 84 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,12 @@
99
overflow: hidden;
1010
position: relative;
1111
@media (max-height: 775px) {
12-
min-height: 98vh;
12+
min-height: 98vh;
1313
}
1414

1515
@media (min-width: 450px) {
16-
padding: $xxx-large-spacing $x-large-spacing $xx-large-spacing $xxx-large-spacing;
16+
padding: $xxx-large-spacing $x-large-spacing $xx-large-spacing
17+
$xxx-large-spacing;
1718
}
1819

1920
&:before {
@@ -97,7 +98,7 @@
9798
display: block;
9899
position: absolute;
99100
background-image: url(/assets/images/date-underline.svg);
100-
top:22px;
101+
top: 22px;
101102
left: 1rem;
102103
}
103104
}
@@ -372,29 +373,44 @@
372373
}
373374

374375
.speakers {
375-
display: grid;
376-
flex: 1;
377-
grid-gap: $large-spacing;
378-
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
376+
margin-bottom: 3rem;
377+
position: relative;
378+
z-index: 1;
379379

380-
blockquote {
381-
margin: 0;
380+
@media screen and (min-width: 740px) {
381+
display: grid;
382+
flex: 1;
383+
grid-gap: $large-spacing;
384+
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
382385
}
383386
}
384387

385388
.speaker {
386-
text-align: center;
387389
position: relative;
388390
z-index: 1;
389391

392+
a {
393+
text-align: center;
394+
}
395+
390396
.author {
397+
text-align: center;
391398
-webkit-font-smoothing: antialiased;
392399
color: #fff;
393400
font-family: $heading-font-family;
394401
font-size: 48px;
395402
line-height: 0.9;
396403
position: relative;
397404
text-align: center;
405+
margin-top: -3rem;
406+
}
407+
408+
h4 {
409+
color: $dark-gray;
410+
line-height: 1;
411+
font-size: 28px;
412+
font-family: $seconday-heading-font-family;
413+
text-transform: uppercase;
398414
}
399415

400416
a {
@@ -403,12 +419,16 @@
403419
}
404420

405421
img {
406-
@include size(200px);
422+
@include size(360px);
407423
border-radius: 50%;
408424
display: block;
409425
mix-blend-mode: screen;
410426
}
411427

428+
&:nth-child(2n + 1) img {
429+
@include size(290px);
430+
}
431+
412432
a:hover img {
413433
mix-blend-mode: inherit;
414434
transform: rotate(30deg);
@@ -450,18 +470,18 @@
450470
font-size: 48px;
451471
}
452472

453-
&:before {
454-
position: absolute;
455-
content: "";
456-
display: block;
457-
background-image: url(/assets/images/asterisk-2.svg);
458-
bottom: -6rem;
459-
right: 1rem;
460-
@include size(113px, 148px);
461-
background-size: contain;
462-
background-repeat: no-repeat;
463-
z-index: 11;
464-
}
473+
&:before {
474+
position: absolute;
475+
content: "";
476+
display: block;
477+
background-image: url(/assets/images/asterisk-2.svg);
478+
bottom: -6rem;
479+
right: 1rem;
480+
@include size(113px, 148px);
481+
background-size: contain;
482+
background-repeat: no-repeat;
483+
z-index: 11;
484+
}
465485

466486
.ilu__container {
467487
margin: 0 auto;
@@ -480,15 +500,51 @@
480500
.weirdos {
481501
padding: $x-large-spacing $large-spacing;
482502
background-color: $purple;
483-
position: relative;
484503
overflow: hidden;
504+
flex-direction: column;
505+
position: relative;
485506

486-
@media screen and (min-width: 950px) {
487-
display: flex;
488-
padding: $xxx-large-spacing $x-large-spacing;
507+
.weirdos__container {
508+
max-width: 1600px;
509+
margin: 0 auto;
489510
}
490511

491-
&::before {
512+
h2 {
513+
position: relative;
514+
display: block;
515+
color: $teal;
516+
z-index: 5;
517+
line-height: 0.9;
518+
font-size: 64px;
519+
520+
@media (min-width: 500px) {
521+
font-size: 18vh;
522+
}
523+
524+
&:after {
525+
position: absolute;
526+
content: "";
527+
display: block;
528+
background-image: url(/assets/images/weirdos-underline-1.svg);
529+
background-size: contain;
530+
@include size(336px, 195px);
531+
background-repeat: no-repeat;
532+
margin-top: -2rem;
533+
z-index: 0;
534+
535+
@media (min-width: 500px) {
536+
@include size(668px, 80px);
537+
}
538+
}
539+
}
540+
541+
.center-button {
542+
position: relative;
543+
z-index: 5;
544+
text-align: center;
545+
}
546+
547+
&::after {
492548
background-color: $dark-purple;
493549
bottom: -140px;
494550
content: "";
@@ -502,32 +558,6 @@
502558
}
503559
}
504560

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;
528-
}
529-
}
530-
531561
.cfp {
532562
position: relative;
533563
z-index: 1;
@@ -564,7 +594,6 @@
564594
@include size(336px, 195px);
565595
}
566596
}
567-
568597
}
569598

570599
.button {

‎assets/images/weirdos-underline-1.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎index.html‎

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

113-
<section class="weirdos hero__container">
114-
<ul class="speakers">
115-
<li class="weirdos__content">
116-
<h2>Meet the weirdos</h2>
117-
<a href="https://www.papercall.io/krw-2017" class="button">Speak at KRW!</a>
118-
<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-
</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>
126-
<blockquote>
127-
<details> <summary><strong>{{ speaker.talk }}</strong></summary>
128-
<p>{{ speaker.abstract }}</p>
129-
</details>
130-
</blockquote>
131-
</li>
132-
{% endfor %}
133-
</ul>
113+
<section class="weirdos">
114+
<div class="weirdos__container">
115+
<h2>Meet the weirdos</h2>
116+
117+
<ul class="speakers">
118+
{% for speaker in site.data.speakers limit: 8%}
119+
<li class="speaker">
120+
<a href="https://twitter.com/{{ speaker.twitter }}">
121+
<img src="https://twitter.com/{{ speaker.twitter }}/profile_image?size=original" alt="{{ speaker.name }}">
122+
</a>
123+
<h3 class="author">{{ speaker.name }}</p>
124+
<h4>{{ speaker.talk }}</h3>
125+
<p>{{ speaker.abstract }}</p>
126+
</li>
127+
{% endfor %}
128+
</ul>
129+
<div class="center-button">
130+
<a href="/conduct" class="button">Read Our Code of Conduct.</a>
131+
</div>
132+
</div>
134133
</section>
135134

136135
<section class="alamo">

0 commit comments

Comments
 (0)