Skip to content

Commit e3d9883

Browse files
hannahhearthhannahhearth
committed
fixing styles on sponsor and weirdos sections
1 parent 82a1084 commit e3d9883

File tree

3 files changed

+138
-130
lines changed

3 files changed

+138
-130
lines changed

‎assets/_sass/_index.scss‎

Lines changed: 102 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,50 @@
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;
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+
}
554+
}
555+
556+
.sponsors, .weirdos {
557+
padding: 15vh $x-large-spacing;
503558
overflow: hidden;
504559
flex-direction: column;
505560
position: relative;
@@ -512,7 +567,6 @@
512567
h2 {
513568
position: relative;
514569
display: block;
515-
color: $teal;
516570
z-index: 5;
517571
line-height: 0.9;
518572
font-size: 64px;
@@ -532,6 +586,11 @@
532586
margin-top: -2rem;
533587
z-index: 0;
534588

589+
@media (max-width: 500px) {
590+
width: 210px;
591+
margin-top: 0rem;
592+
}
593+
535594
@media (min-width: 500px) {
536595
@include size(668px, 80px);
537596
}
@@ -545,7 +604,6 @@
545604
}
546605

547606
&::after {
548-
background-color: $dark-purple;
549607
bottom: -140px;
550608
content: "";
551609
display: block;
@@ -556,6 +614,10 @@
556614
width: 100%;
557615
z-index: 0;
558616
}
617+
618+
@media (max-width: 500px) {
619+
padding: 4.5rem 3rem;
620+
}
559621
}
560622

561623
.cfp {
@@ -625,25 +687,12 @@
625687
}
626688

627689
.sponsor {
628-
position: relative;
629-
padding-top: $x-large-spacing;
630690
z-index: 1;
691+
position: relative;
631692
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-
}
693+
margin-top: 15vh;
646694

695+
h3 {
647696
&:before {
648697
display: block;
649698
position: absolute;
@@ -668,9 +717,6 @@
668717
}
669718

670719
.button {
671-
display: block;
672-
background-color: $pink;
673-
674720
&:after {
675721
position: absolute;
676722
right: -90px;
@@ -684,7 +730,12 @@
684730

685731
@media (min-width: 1000px) {
686732
width: 45%;
687-
float: left;
733+
}
734+
}
735+
736+
@media (max-width: 500px) {
737+
a {
738+
width: 100%;
688739
}
689740
}
690741
}

‎assets/images/manifold.png‎

24 KB
Loading

‎index.html‎

Lines changed: 36 additions & 79 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,86 +155,32 @@ <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>
149-
</div>
150158
</div>
151-
<div class="sponsor">
152-
<h2>PLEASE support our weirdness with the gererosity of Your Friendship</h2>
153-
<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>
154-
<a href="mailto:[email protected]" class="button">Sponsor Us</a>
155-
<h1>Meet the sponsors</h1>
156-
<ul class="cfp hero__container">
157-
<h1>Meet the sponsors</h1><li style="
158-
filter: invert(100%);
159-
"><a href="https://www.bigcommerce.com/careers/"><img alt="BigCommerce" src="https://s3.amazonaws.com/www1.bigcommerce.com/assets/mediakit/downloads/BigCommerce-logo-dark.png"></a></li>
160-
<li><a href="https://story.manifold.co/">
161-
<svg xmlns="http://www.w3.org/2000/svg" width="144px" height="144px" viewBox="0 0 242 242">
162-
<defs>
163-
<linearGradient id="a___-2059670167" x1="2.998%" x2="98.277%" y1="34.929%" y2="65.48%">
164-
<stop stop-color="#FF0264" offset="0%"></stop>
165-
<stop stop-color="#FE624E" offset="40.83%"></stop>
166-
<stop stop-color="#FDBC39" offset="81.65%"></stop>
167-
<stop stop-color="#FDDF31" offset="100%"></stop>
168-
</linearGradient>
169-
<linearGradient id="b___-2059670167" x1=".042%" x2="100.019%" y1="49.985%" y2="49.985%">
170-
<stop stop-color="#140A3B" offset="0%"></stop>
171-
<stop stop-color="#064E91" offset="68.04%"></stop>
172-
<stop stop-color="#006AB4" offset="100%"></stop>
173-
</linearGradient>
174-
<linearGradient id="c___-2059670167" x1=".465%" x2="173.382%" y1="50.005%" y2="50.005%">
175-
<stop stop-color="#349FD3" offset="0%"></stop>
176-
<stop stop-color="#218ABE" offset="35.17%"></stop>
177-
<stop stop-color="#00679B" offset="100%"></stop>
178-
</linearGradient>
179-
<linearGradient id="d___-2059670167" x1="1.305%" x2="102.045%" y1="40.19%" y2="40.19%">
180-
<stop stop-color="#A34CB4" offset="0%"></stop>
181-
<stop stop-color="#954DB2" offset="9.192%"></stop>
182-
<stop stop-color="#3C52A1" offset="71.69%"></stop>
183-
<stop stop-color="#19549B" offset="100%"></stop>
184-
</linearGradient>
185-
<linearGradient id="e___-2059670167" x1="-.029%" x2="99.865%" y1="49.982%" y2="49.982%">
186-
<stop stop-color="#A34CB4" offset="0%"></stop>
187-
<stop stop-color="#954DB2" offset="9.192%"></stop>
188-
<stop stop-color="#3C52A1" offset="71.69%"></stop>
189-
<stop stop-color="#19549B" offset="100%"></stop>
190-
</linearGradient>
191-
</defs>
192-
<g fill="none" fill-rule="evenodd">
193-
<circle cx="121.237" cy="120.933" r="120.3" fill="url(#a___-2059670167)" fill-rule="nonzero" transform="matrix(1 0 0 -1 0 241.867)"></circle>
194-
<circle cx="121.237" cy="120.933" r="120.3" transform="matrix(1 0 0 -1 0 241.867)"></circle>
195-
<path fill="url(#b___-2059670167)" fill-rule="nonzero" d="M239.7374,168.002889 C216.9374,176.902889 125.7374,212.402889 122.1374,213.602889 C119.7374,214.402889 107.1374,220.202889 95.2374,215.602889 C67.7374,204.902889 68.6374,147.602889 59.4374,139.402889 L40.6374,122.902889 L119.7374,52.5028889 C119.7374,52.5028889 194.2374,29.6028889 241.2374,155.702889 C240.9374,159.902889 240.5374,164.002889 239.7374,168.002889 Z" transform="matrix(1 0 0 -1 0 268.236)"></path>
196-
<path fill="url(#c___-2059670167)" fill-rule="nonzero" d="M239.8374,237.810517 C219.0374,246.710517 209.9374,235.810517 207.7374,232.610517 C207.4374,232.210517 207.2374,231.910517 207.2374,231.910517 C202.5374,224.410517 198.7374,213.510517 196.4374,199.310517 L195.6374,194.210517 C194.0374,184.610517 191.8374,176.410517 189.0374,169.910517 C185.2374,160.710517 180.4374,154.710517 175.1374,151.910517 C172.8374,150.710517 170.2374,150.110517 167.7374,150.210517 C160.4374,150.410517 152.6374,156.110517 145.1374,167.910517 C140.2374,175.510517 135.8374,181.110517 130.8374,183.810517 C112.4374,193.610517 94.7374,171.110517 94.7374,137.310517 C94.7374,124.910517 97.2374,111.010517 100.4374,98.7105166 C107.2374,97.5105166 114.1374,96.9105166 121.2374,96.9105166 C187.7374,96.9105166 241.5374,150.810517 241.5374,217.210517 C241.5374,224.210517 240.9374,231.110517 239.8374,237.810517 Z" transform="matrix(1 0 0 -1 0 338.144)"></path>
197-
<path fill="url(#d___-2059670167)" fill-rule="nonzero" d="M127.3374,153.4333 L129.5374,152.5333 C128.8374,152.8333 128.1374,153.1333 127.3374,153.4333 Z" transform="matrix(1 0 0 -1 0 306.067)"></path>
198-
<path fill="url(#e___-2059670167)" fill-rule="nonzero" d="M0.9374,220.7333 C0.9374,160.5333 45.1374,110.6333 102.9374,101.8333 C99.7374,113.4333 97.0374,126.7333 97.0374,138.5333 C97.0374,167.8333 110.8374,194.5333 127.5374,189.0333 L2.5374,239.8333 C1.4374,233.6333 0.9374,227.2333 0.9374,220.7333 Z" transform="matrix(1 0 0 -1 0 341.667)"></path>
199-
</g>
200-
</svg>
201-
<svg style="position: relative;margin-bottom: 32px;margin-left: 48px;" width="360px" height="80px" viewBox="0 0 90 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
202-
<!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
203-
<title>Page 1</title>
204-
<desc>Created with Sketch.</desc>
205-
<defs></defs>
206-
<g id="Index___1776937664" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
207-
<g id="marketplace-index___1776937664" transform="translate(-132.000000, -78.000000)" fill="#FFFFFF">
208-
<g id="header___1776937664" transform="translate(77.000000, 69.000000)">
209-
<g id="wordmark-logo___1776937664">
210-
<g id="Page-1___1776937664" transform="translate(55.000000, 9.000000)">
211-
<path d="M0,18.8091989 L0,7.17358807 L2.54511628,7.17358807 L2.54511628,7.86384375 C2.54511628,8.13499432 2.520299,8.45536364 2.47096346,8.75127273 C3.23700997,7.59239489 4.42315615,6.9024375 5.80694352,6.9024375 C7.46252492,6.9024375 8.57451827,7.66667045 9.16744186,8.94844602 C9.93348837,7.69142898 11.2431229,6.9024375 12.873887,6.9024375 C15.1472093,6.9024375 16.7534551,8.38138636 16.7534551,11.2659034 L16.7534551,18.8091989 L14.2083389,18.8091989 L14.2083389,11.3890994 C14.2083389,9.98382955 13.3681395,9.04688352 12.058505,9.04688352 C10.7488704,9.04688352 9.63687708,10.1070256 9.63687708,11.9311023 L9.63687708,18.8091989 L7.0917608,18.8091989 L7.0917608,11.3395824 C7.0917608,9.95907102 6.25156146,9.09640057 4.99126246,9.09640057 C3.70644518,9.09640057 2.59445183,10.0825653 2.54511628,11.8079062 L2.54511628,18.8091989 L0,18.8091989 Z" id="Fill-1___1776937664"></path>
212-
<path d="M27.2044884,13.8788821 C26.6360831,13.7556861 25.6230598,13.582973 24.6841894,13.582973 C22.855485,13.582973 21.6693389,14.3716662 21.6693389,15.481027 C21.6693389,16.294777 22.2870797,16.9602741 23.572196,16.9602741 C25.6972126,16.9602741 26.9326944,15.407348 27.2044884,13.8788821 L27.2044884,13.8788821 Z M30.0955515,18.8091094 C28.612794,18.8091094 27.8470465,17.9711974 27.5010997,16.7631009 C26.7595714,17.8972202 25.3264485,19.0555014 23.0037907,19.0555014 C20.3597043,19.0555014 19.0255515,17.3793793 19.0255515,15.6289815 C19.0255515,13.5337543 20.7304684,11.7836548 24.2640897,11.7836548 C25.5240897,11.7836548 26.6115648,12.0300469 27.2293056,12.1532429 L27.2293056,11.5614247 C27.2293056,10.1069361 26.1914651,9.1210696 24.5852193,9.1210696 C23.5473787,9.1210696 22.5343555,9.63861222 21.9411329,10.501581 L20.0879103,9.09660938 C20.0879103,9.09660938 21.4471794,6.80361222 24.6841894,6.80361222 C27.8222292,6.80361222 29.7496047,8.70226278 29.7496047,11.4874474 L29.7496047,15.7521776 C29.7496047,16.171581 30.0213987,16.4427315 30.4663156,16.4427315 L30.8122625,16.4427315 L30.8122625,18.8091094 L30.0955515,18.8091094 Z" id="Fill-3___1776937664"></path>
213-
<path d="M43.8582857,18.8091989 L41.2883522,18.8091989 L41.2883522,12.1780909 C41.2883522,10.1070256 40.102206,9.04688352 38.5949302,9.04688352 C36.9641661,9.04688352 35.6793488,10.3041989 35.6297143,12.0790568 L35.6297143,18.8091989 L33.084598,18.8091989 L33.084598,7.17358807 L35.6297143,7.17358807 L35.6297143,7.96257955 C35.6297143,8.23373011 35.604897,8.57855966 35.5555615,8.9236875 C36.3709435,7.76540625 37.6805781,6.9024375 39.3361595,6.9024375 C42.0050631,6.9024375 43.8582857,8.75127273 43.8582857,12.0790568 L43.8582857,18.8091989 Z" id="Fill-5___1776937664"></path>
214-
<path d="M46.7234551,18.8092585 L49.3427243,18.8092585 L49.3427243,7.17364773 L46.7234551,7.17364773 L46.7234551,18.8092585 Z M48.057907,2.04624716 C49.0709302,2.04624716 49.9111296,2.88415909 49.9111296,3.87032386 C49.9111296,4.88094886 49.0709302,5.71915909 48.057907,5.71915909 C47.069402,5.71915909 46.2292027,4.88094886 46.2292027,3.87032386 C46.2292027,2.88415909 47.069402,2.04624716 48.057907,2.04624716 L48.057907,2.04624716 Z" id="Fill-7___1776937664"></path>
215-
<path d="M56.1127575,9.44143892 L56.1127575,18.8091094 L53.4934884,18.8091094 L53.4934884,9.44143892 L51.6896013,9.44143892 L51.6896013,7.17349858 L53.4934884,7.17349858 L53.4934884,4.33879688 C53.4934884,1.67621165 55.2477409,8.94886364e-05 57.5458804,8.94886364e-05 C58.682691,8.94886364e-05 59.5474086,0.34521733 60.1899668,0.961197443 L59.0038206,2.90906676 C58.682691,2.51442188 58.2129568,2.34170881 57.7438206,2.34170881 C56.7550166,2.34170881 56.1127575,3.05672301 56.1127575,4.43723438 L56.1127575,7.17349858 L58.7816611,7.17349858 L58.7816611,9.44143892 L56.1127575,9.44143892 Z" id="Fill-9___1776937664"></path>
216-
<path d="M69.3816279,12.9668139 C69.3816279,10.7728509 67.9975415,9.17010938 65.9221595,9.17010938 C63.8216611,9.17010938 62.4378738,10.7976094 62.4378738,12.9668139 C62.4378738,15.1852372 63.895814,16.7879787 65.9221595,16.7879787 C67.9975415,16.7879787 69.3816279,15.1852372 69.3816279,12.9668139 M59.9175748,12.9668139 C59.9175748,9.56475426 62.5613621,6.90246733 65.9221595,6.90246733 C69.2578405,6.90246733 71.9267442,9.56475426 71.9267442,12.9668139 C71.9267442,16.3933338 69.2578405,19.0556207 65.9221595,19.0556207 C62.5613621,19.0556207 59.9175748,16.3933338 59.9175748,12.9668139" id="Fill-10___1776937664"></path>
217-
<polygon id="Fill-11___1776937664" points="74.0015282 18.8089602 76.6207973 18.8089602 76.6207973 0.320309659 74.0015282 0.320309659"></polygon>
218-
<path d="M87.4678007,12.9912741 C87.4678007,10.7233338 86.3064718,9.1948679 84.4036146,9.1948679 C82.550691,9.1948679 81.2407575,10.747794 81.2407575,12.9668139 C81.2407575,15.1852372 82.5752093,16.8124389 84.4036146,16.8124389 C86.3064718,16.8124389 87.4678007,15.1604787 87.4678007,12.9912741 L87.4678007,12.9912741 Z M87.5171362,18.8092287 C87.5171362,18.0202372 87.5419535,17.4779361 87.5664718,17.108348 C86.6769369,18.3409048 85.3676013,19.0556207 83.8603256,19.0556207 C80.746505,19.0556207 78.6956412,16.417794 78.6956412,12.9420554 C78.6956412,9.49107528 80.7961395,6.92722585 83.8848439,6.92722585 C85.3182658,6.92722585 86.6027841,7.49398722 87.4926179,8.62810653 C87.4678007,8.48015199 87.4429834,8.33219744 87.4429834,8.1842429 L87.4429834,0.32027983 L89.9883987,0.32027983 L89.9883987,18.8092287 L87.5171362,18.8092287 Z" id="Fill-12___1776937664"></path>
219-
</g>
220-
</g>
221-
</g>
222-
</g>
223-
</g>
224-
</svg>
225-
</a></li>
226-
</ul>
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+
<ul class="sponsors__list">
166+
<li class="sponsors__list-item">
167+
<a href="https://www.bigcommerce.com/careers/">
168+
<img alt="BigCommerce logo" src="https://s3.amazonaws.com/www1.bigcommerce.com/assets/mediakit/downloads/BigCommerce-logo-dark.png">
169+
</a>
170+
</li>
171+
<li class="sponsors__list-item">
172+
<a href="https://story.manifold.co/">
173+
<img alt="Manifold logo" src="/assets/images/manifold.png">
174+
</a>
175+
</li>
176+
</ul>
177+
178+
<div class="sponsor">
179+
<h3 class="headline">PLEASE support our weirdness with the gererosity of Your
180+
Friendship</h3>
181+
<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>
182+
<a href="mailto:[email protected]" class="button">Sponsor Us</a>
183+
</div>
227184
</div>
228185
</section>
229186

0 commit comments

Comments
 (0)