Merge pull request #5 from keeprubyweird/sponsors

Cleaning up sponsors and speakers code

Author: hannahhearth

assets/_sass/_index.scss

@@ -157,6 +157,7 @@
   text-align: center;
 
   @media (max-width: 500px) {
+    margin-right: 0;
   }
 
   @media (min-width: 910px) {
@@ -389,22 +390,6 @@
   position: relative;
   z-index: 1;
 
-  a {
-    text-align: center;
-  }
-
-  .author {
-    text-align: center;
-    -webkit-font-smoothing: antialiased;
-    color: #fff;
-    font-family: $heading-font-family;
-    font-size: 48px;
-    line-height: 0.9;
-    position: relative;
-    text-align: center;
-    margin-top: -3rem;
-  }
-
   h4 {
     color: $dark-gray;
     line-height: 1;
@@ -413,28 +398,56 @@
     text-transform: uppercase;
   }
 
-  a {
-    display: inline-block;
-    flex-shrink: 0;
-  }
-
   img {
     @include size(360px);
     border-radius: 50%;
-    display: block;
     mix-blend-mode: screen;
-  }
+    -webkit-filter: grayscale(100%);
+    filter: grayscale(100%);
+    transition: transform 1s;
 
-  &:nth-child(2n + 1) img {
-    @include size(290px);
+    &:hover {
+      mix-blend-mode: inherit;
+      transform: rotate(30deg);
+      transition: transform 1s;
+      pointer: cursor;
+    }
   }
 
-  a:hover img {
-    mix-blend-mode: inherit;
-    transform: rotate(30deg);
+  @media (max-width: 500px) {
+    margin: 3em 0;
+
+    h4 {
+      font-size: 26px;
+    }
+
+    p {
+      font-size: 16px;
+    }
+
+    a {
+      display: flex;
+    }
+
+    img {
+      @include size(200px);
+      margin: 0 auto;
+    }
   }
 }
 
+.speaker .author, .sponsor .author {
+  text-align: center;
+  -webkit-font-smoothing: antialiased;
+  color: #fff;
+  font-family: $heading-font-family;
+  font-size: 48px;
+  line-height: 0.9;
+  position: relative;
+  text-align: center;
+  margin-top: -3rem;
+}
+
 .commentary {
   word-wrap: break-word;
   font-family: $heading-font-family;
@@ -498,8 +511,51 @@
 }
 
 .weirdos {
-  padding: $x-large-spacing $large-spacing;
   background-color: $purple;
+
+  &::after {
+    background-color: $dark-purple;
+  }
+
+  h2 {
+    color: $teal;
+  }
+}
+
+.sponsors {
+  background-color: $mustard;
+
+  &::after {
+    background-color: $flesh;
+  }
+
+  h2 {
+    color: $dark-purple;
+  }
+}
+
+.sponsors__list {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 3rem;
+  margin-top: 15vh;
+
+  @media (max-width: 500px) {
+    grid-template-columns: 1fr;
+
+    svg, img {
+      max-width: 280px;
+    }
+  }
+
+  &-item {
+    z-index: 1;
+    align-self: center;
+  }
+}
+
+.sponsors, .weirdos {
+  padding: 15vh $x-large-spacing;
   overflow: hidden;
   flex-direction: column;
   position: relative;
@@ -512,7 +568,6 @@
   h2 {
     position: relative;
     display: block;
-    color: $teal;
     z-index: 5;
     line-height: 0.9;
     font-size: 64px;
@@ -532,6 +587,11 @@
       margin-top: -2rem;
       z-index: 0;
 
+      @media (max-width: 500px) {
+        width: 210px;
+        margin-top: 0rem;
+      }
+
       @media (min-width: 500px) {
         @include size(668px, 80px);
       }
@@ -545,7 +605,6 @@
   }
 
   &::after {
-    background-color: $dark-purple;
     bottom: -140px;
     content: "";
     display: block;
@@ -556,6 +615,10 @@
     width: 100%;
     z-index: 0;
   }
+
+  @media (max-width: 500px) {
+    padding: 4.5rem 3rem;
+  }
 }
 
 .cfp {
@@ -625,25 +688,12 @@
 }
 
 .sponsor {
-  position: relative;
-  padding-top: $x-large-spacing;
   z-index: 1;
+  position: relative;
   clear: both;
-  max-width: 1000px;
-  pointer-events: none;
-
-  @media (min-width: 890px) {
-    margin-left: 27%;
-  }
-
-  h2 {
-    margin-bottom: $large-spacing;
-    font-size: 42px;
-
-    @media screen and (min-width: 500px) {
-      font-size: 64px;
-    }
+  margin-top: 15vh;
 
+  h3 {
     &:before {
       display: block;
       position: absolute;
@@ -668,9 +718,6 @@
   }
 
   .button {
-    display: block;
-    background-color: $pink;
-
     &:after {
       position: absolute;
       right: -90px;
@@ -684,7 +731,12 @@
 
     @media (min-width: 1000px) {
       width: 45%;
-      float: left;
+    }
+  }
+
+  @media (max-width: 500px) {
+    a {
+      width: 100%;
     }
   }
 }

assets/images/manifold.png

@@ -115,24 +115,35 @@ <h1>What you should expect @ keep ruby weird:</h1>
     <h2>Meet the weirdos</h2>
 
     <ul class="speakers">
+
       <li class="speaker keynote">
         <a href="https://twitter.com/wycats">
           <img alt="Yehuda with Dave's face" src="/assets/images/yehuda.png" />
         </a>
         <h3 class="author">Yehuda Katz</h3>
+        <h4>Keynote</h4>
+        <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>
+      </li>
+
+      <li class="speaker keynote">
+        <a href="https://twitter.com/wycats">
         <a href="https://twitter.com/littlecalculist">
           <img alt="Dave with Yehuda's face" src="/assets/images/dave.png" />
         </a>
         <h3 class="author">Dave Herman</h3>
         <h4>Keynote</h4>
+        <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>
       </li>
+
       <li class="speaker keynote">
         <a href="https://twitter.com/aemeredith">
           <img src="/assets/images/elle.jpg" alt="Elle Meredith" />
         </a>
         <h3 class="author">Elle Meredith</h3>
         <h4>Keynote</h4>
+        <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>
       </li>
+
       {% for speaker in site.data.speakers limit: 8%}
         <li class="speaker">
           <a href="https://twitter.com/{{ speaker.twitter }}">
@@ -144,8 +155,39 @@ <h4>{{ speaker.talk }}</h3>
         </li>
       {% endfor %}
     </ul>
-    <div class="center-button">
-      <a href="/conduct" class="button">Read Our Code of Conduct.</a>
+  </div>
+  <div class="center-button">
+    <a href="/conduct" class="button">Code of Conduct</a>
+  </div>
+</section>
+<section class="sponsors">
+    <h2>Meet the sponsors</h2>
+
+    <ul class="sponsors__list">
+      <li class="sponsors__list-item">
+        <a href="https://www.bigcommerce.com/careers/">
+          <img alt="BigCommerce logo" src="https://s3.amazonaws.com/www1.bigcommerce.com/assets/mediakit/downloads/BigCommerce-logo-dark.png">
+        </a>
+      </li>
+
+      <li class="sponsors__list-item">
+        <a href="https://story.manifold.co/">
+          <img alt="Manifold logo" src="/assets/images/manifold.png">
+        </a>
+      </li>
+
+      <li class="sponsors__list-item">
+        <a href="https://omc.io/">
+          <img alt="One More Cloud logo" src="/assets/images/one-more-cloud.png">
+        </a>
+      </li>
+    </ul>
+
+    <div class="sponsor">
+      <h3 class="headline">PLEASE support our weirdness with the gererosity of Your
+        Friendship</h3>
+      <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>
+      <a href="mailto:[email protected]" class="button">Sponsor Us</a>
     </div>
   </div>
 </section>