Skip to content

Commit 00e9cc4

Browse files
authored
Merge pull request #5 from keeprubyweird/sponsors
Cleaning up sponsors and speakers code
2 parents 20f6e8e + 58d29c5 commit 00e9cc4

File tree

4 files changed

+147
-53
lines changed

4 files changed

+147
-53
lines changed

assets/_sass/_index.scss

Lines changed: 103 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,7 @@
157157
text-align: center;
158158

159159
@media (max-width: 500px) {
160+
margin-right: 0;
160161
}
161162

162163
@media (min-width: 910px) {
@@ -389,22 +390,6 @@
389390
position: relative;
390391
z-index: 1;
391392

392-
a {
393-
text-align: center;
394-
}
395-
396-
.author {
397-
text-align: center;
398-
-webkit-font-smoothing: antialiased;
399-
color: #fff;
400-
font-family: $heading-font-family;
401-
font-size: 48px;
402-
line-height: 0.9;
403-
position: relative;
404-
text-align: center;
405-
margin-top: -3rem;
406-
}
407-
408393
h4 {
409394
color: $dark-gray;
410395
line-height: 1;
@@ -413,28 +398,56 @@
413398
text-transform: uppercase;
414399
}
415400

416-
a {
417-
display: inline-block;
418-
flex-shrink: 0;
419-
}
420-
421401
img {
422402
@include size(360px);
423403
border-radius: 50%;
424-
display: block;
425404
mix-blend-mode: screen;
426-
}
405+
-webkit-filter: grayscale(100%);
406+
filter: grayscale(100%);
407+
transition: transform 1s;
427408

428-
&:nth-child(2n + 1) img {
429-
@include size(290px);
409+
&:hover {
410+
mix-blend-mode: inherit;
411+
transform: rotate(30deg);
412+
transition: transform 1s;
413+
pointer: cursor;
414+
}
430415
}
431416

432-
a:hover img {
433-
mix-blend-mode: inherit;
434-
transform: rotate(30deg);
417+
@media (max-width: 500px) {
418+
margin: 3em 0;
419+
420+
h4 {
421+
font-size: 26px;
422+
}
423+
424+
p {
425+
font-size: 16px;
426+
}
427+
428+
a {
429+
display: flex;
430+
}
431+
432+
img {
433+
@include size(200px);
434+
margin: 0 auto;
435+
}
435436
}
436437
}
437438

439+
.speaker .author, .sponsor .author {
440+
text-align: center;
441+
-webkit-font-smoothing: antialiased;
442+
color: #fff;
443+
font-family: $heading-font-family;
444+
font-size: 48px;
445+
line-height: 0.9;
446+
position: relative;
447+
text-align: center;
448+
margin-top: -3rem;
449+
}
450+
438451
.commentary {
439452
word-wrap: break-word;
440453
font-family: $heading-font-family;
@@ -498,8 +511,51 @@
498511
}
499512

500513
.weirdos {
501-
padding: $x-large-spacing $large-spacing;
502514
background-color: $purple;
515+
516+
&::after {
517+
background-color: $dark-purple;
518+
}
519+
520+
h2 {
521+
color: $teal;
522+
}
523+
}
524+
525+
.sponsors {
526+
background-color: $mustard;
527+
528+
&::after {
529+
background-color: $flesh;
530+
}
531+
532+
h2 {
533+
color: $dark-purple;
534+
}
535+
}
536+
537+
.sponsors__list {
538+
display: grid;
539+
grid-template-columns: 1fr 1fr 1fr;
540+
grid-gap: 3rem;
541+
margin-top: 15vh;
542+
543+
@media (max-width: 500px) {
544+
grid-template-columns: 1fr;
545+
546+
svg, img {
547+
max-width: 280px;
548+
}
549+
}
550+
551+
&-item {
552+
z-index: 1;
553+
align-self: center;
554+
}
555+
}
556+
557+
.sponsors, .weirdos {
558+
padding: 15vh $x-large-spacing;
503559
overflow: hidden;
504560
flex-direction: column;
505561
position: relative;
@@ -512,7 +568,6 @@
512568
h2 {
513569
position: relative;
514570
display: block;
515-
color: $teal;
516571
z-index: 5;
517572
line-height: 0.9;
518573
font-size: 64px;
@@ -532,6 +587,11 @@
532587
margin-top: -2rem;
533588
z-index: 0;
534589

590+
@media (max-width: 500px) {
591+
width: 210px;
592+
margin-top: 0rem;
593+
}
594+
535595
@media (min-width: 500px) {
536596
@include size(668px, 80px);
537597
}
@@ -545,7 +605,6 @@
545605
}
546606

547607
&::after {
548-
background-color: $dark-purple;
549608
bottom: -140px;
550609
content: "";
551610
display: block;
@@ -556,6 +615,10 @@
556615
width: 100%;
557616
z-index: 0;
558617
}
618+
619+
@media (max-width: 500px) {
620+
padding: 4.5rem 3rem;
621+
}
559622
}
560623

561624
.cfp {
@@ -625,25 +688,12 @@
625688
}
626689

627690
.sponsor {
628-
position: relative;
629-
padding-top: $x-large-spacing;
630691
z-index: 1;
692+
position: relative;
631693
clear: both;
632-
max-width: 1000px;
633-
pointer-events: none;
634-
635-
@media (min-width: 890px) {
636-
margin-left: 27%;
637-
}
638-
639-
h2 {
640-
margin-bottom: $large-spacing;
641-
font-size: 42px;
642-
643-
@media screen and (min-width: 500px) {
644-
font-size: 64px;
645-
}
694+
margin-top: 15vh;
646695

696+
h3 {
647697
&:before {
648698
display: block;
649699
position: absolute;
@@ -668,9 +718,6 @@
668718
}
669719

670720
.button {
671-
display: block;
672-
background-color: $pink;
673-
674721
&:after {
675722
position: absolute;
676723
right: -90px;
@@ -684,7 +731,12 @@
684731

685732
@media (min-width: 1000px) {
686733
width: 45%;
687-
float: left;
734+
}
735+
}
736+
737+
@media (max-width: 500px) {
738+
a {
739+
width: 100%;
688740
}
689741
}
690742
}

assets/images/manifold.png

24 KB
Loading

assets/images/one-more-cloud.png

19.8 KB
Loading

index.html

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,24 +115,35 @@ <h1>What you should expect @ keep ruby weird:</h1>
115115
<h2>Meet the weirdos</h2>
116116

117117
<ul class="speakers">
118+
118119
<li class="speaker keynote">
119120
<a href="https://twitter.com/wycats">
120121
<img alt="Yehuda with Dave's face" src="/assets/images/yehuda.png" />
121122
</a>
122123
<h3 class="author">Yehuda Katz</h3>
124+
<h4>Keynote</h4>
125+
<p>Yehuda Katz is one of the creators of Ember.js, a member of the Rust Core Team, and a retired Ruby on Rails and jQuery Core Team member. During the day he's CTO at Tilde, where he works on Skylight, the smart profiler for Rails, and does Ember.js consulting. He's best known for his open source work, which also includes having created projects like Thor, Handlebars and Bundler. He travels the world doing open source evangelism and web standards work, and has written several successful technology books.</p>
126+
</li>
127+
128+
<li class="speaker keynote">
129+
<a href="https://twitter.com/wycats">
123130
<a href="https://twitter.com/littlecalculist">
124131
<img alt="Dave with Yehuda's face" src="/assets/images/dave.png" />
125132
</a>
126133
<h3 class="author">Dave Herman</h3>
127134
<h4>Keynote</h4>
135+
<p>Dave Herman has served on TC39, the standards committee responsible for evolving JavaScript, since 2006, and founded Mozilla Research in 2011. At Mozilla, Dave advised and contributed to the development of Rust, the parallel browser engine Servo, asm.js, and WebAssembly. Dave has recently joined LinkedIn's build tools team, where he is looking at finding new ways to help developers dare to be ambitious.</p>
128136
</li>
137+
129138
<li class="speaker keynote">
130139
<a href="https://twitter.com/aemeredith">
131140
<img src="/assets/images/elle.jpg" alt="Elle Meredith" />
132141
</a>
133142
<h3 class="author">Elle Meredith</h3>
134143
<h4>Keynote</h4>
144+
<p>Elle works as a consultant for Blackmill. Before Blackmill, she was a Development Director in the New York City office of thoughtbot. She believes in writing clean code, driven by automatic tests, with agile practices, an even work/life balance, and a respectful and inclusive team culture. She constantly works to improve her understanding of technologies, techniques, anti-patterns, and what is considered best practice. Her aim is to deliver clean, functional and user–friendly websites in an appropriate timeframe without wasting money or energy. Elle appreciates the value of strong communities. When she is not immersed in the Ruby community, she is probably immersed in water, or lately, in bread flour.</p>
135145
</li>
146+
136147
{% for speaker in site.data.speakers limit: 8%}
137148
<li class="speaker">
138149
<a href="https://twitter.com/{{ speaker.twitter }}">
@@ -144,8 +155,39 @@ <h4>{{ speaker.talk }}</h3>
144155
</li>
145156
{% endfor %}
146157
</ul>
147-
<div class="center-button">
148-
<a href="/conduct" class="button">Read Our Code of Conduct.</a>
158+
</div>
159+
<div class="center-button">
160+
<a href="/conduct" class="button">Code of Conduct</a>
161+
</div>
162+
</section>
163+
<section class="sponsors">
164+
<h2>Meet the sponsors</h2>
165+
166+
<ul class="sponsors__list">
167+
<li class="sponsors__list-item">
168+
<a href="https://www.bigcommerce.com/careers/">
169+
<img alt="BigCommerce logo" src="https://s3.amazonaws.com/www1.bigcommerce.com/assets/mediakit/downloads/BigCommerce-logo-dark.png">
170+
</a>
171+
</li>
172+
173+
<li class="sponsors__list-item">
174+
<a href="https://story.manifold.co/">
175+
<img alt="Manifold logo" src="/assets/images/manifold.png">
176+
</a>
177+
</li>
178+
179+
<li class="sponsors__list-item">
180+
<a href="https://omc.io/">
181+
<img alt="One More Cloud logo" src="/assets/images/one-more-cloud.png">
182+
</a>
183+
</li>
184+
</ul>
185+
186+
<div class="sponsor">
187+
<h3 class="headline">PLEASE support our weirdness with the gererosity of Your
188+
Friendship</h3>
189+
<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>
190+
<a href="mailto:[email protected]" class="button">Sponsor Us</a>
149191
</div>
150192
</div>
151193
</section>

0 commit comments

Comments
 (0)