Merge pull request #4 from keeprubyweird/speakers

ugh, it's not great.

Author: calebhearth

.ruby-version

@@ -0,0 +1 @@
+2.4.2

Gemfile

@@ -1,5 +1,5 @@
 source "https://rubygems.org"
-ruby "2.4.1"
+ruby "2.4.2"
 
 gem "jekyll"
 gem "rake"

Gemfile.lock

@@ -50,7 +50,7 @@ DEPENDENCIES
   rake
 
 RUBY VERSION
-   ruby 2.4.1p111
+   ruby 2.4.2p198
 
 BUNDLED WITH
-   1.15.1
+   1.15.4

_data/speakers.json

@@ -0,0 +1,38 @@
+[
+  {
+    "name": "David Bock",
+    "twitter": "bokmann",
+    "talk": "Ruby Investigation of Orthogonal Latin Squares of Order Ten",
+    "abstract": "While teaching high school, I became fascinated with the ideas around Orthogonal Latin Squares, and a program written in 1963 for a 'UNIVAC 2106 Military Computer' that found them for order 10, proving a ~250 year old conjecture by Euler wrong. I found the paper, and rewrote it in Ruby. Lets play."
+  },
+  {
+    "name": "Rolen Le",
+    "twitter": "rolentle",
+    "talk": "Dungeons & Collaboration: A Player’s Handbook on How To Work With a Distributed Team",
+    "abstract": "What can playing tabletop role playing games such as Dungeons and Dragon teach us about collaborating online? From general online etiquette to building meaning full relationships, I will discuss tips and tricks of roleplaying that have made me a better coworker.\n\n"
+  },
+  {
+    "name": "Ben Scofield",
+    "twitter": "bscofield",
+    "talk": "Learning to see",
+    "abstract": "The hardest part of learning to draw is figuring out that you have to draw what you actually see, not what you think you see. Draw a \"face\" and you end up with an emoji; draw shadows and shapes instead and you end up with a portrait. This talk takes that lesson and applies it to... well, everything."
+  },
+  {
+    "name": "Cecy Correa",
+    "twitter": "cecycorrea",
+    "talk": "The Psychology of Fake News (and What Tech Can Do About It)",
+    "abstract": "Fake news is not a tech problem, it's a human problem. To build the tools necessary to combat fake news, technologists must think differently. We must understand the psychology behind fake news to arrive at a solution that is human-centric and attainable."
+  },
+  {
+    "name": "Bradley Grzesiak",
+    "twitter": "listrophy",
+    "talk": "kerbal_space_program.rb",
+    "abstract": "So there's this game, Kerbal Space Program. You basically create your own space program from scratch. Well, you can control it via TCP, and—using Ruby—we're gonna launch, orbit, and crash our brave Kerbins. You might even learn a thing or two about orbital mechanics and control theory along the way."
+  },
+  {
+    "name": "Chris Arcand",
+    "twitter": "chrisarcand",
+    "talk": "An Atypical 'Performance' Talk",
+    "abstract": "A mixture of a talk on programming and a live classical music recital. Listen to a former-orchestral-clarinetist-turned-developer talk about parallelisms between music performance and programming - such as complexity, imposter syndrome, and true concentration - with live performances throughout!"
+  }
+]

assets/_sass/_index.scss

@@ -9,11 +9,12 @@
   overflow: hidden;
   position: relative;
   @media (max-height: 775px) {
-  min-height: 98vh;
+    min-height: 98vh;
   }
 
   @media (min-width: 450px) {
-    padding: $xxx-large-spacing $x-large-spacing $xx-large-spacing $xxx-large-spacing;
+    padding: $xxx-large-spacing $x-large-spacing $xx-large-spacing
+      $xxx-large-spacing;
   }
 
   &:before {
@@ -97,7 +98,7 @@
     display: block;
     position: absolute;
     background-image: url(/assets/images/date-underline.svg);
-    top:22px;
+    top: 22px;
     left: 1rem;
   }
 }
@@ -371,6 +372,69 @@
   }
 }
 
+.speakers {
+  margin-bottom: 3rem;
+  position: relative;
+  z-index: 1;
+
+  @media screen and (min-width: 740px) {
+    display: grid;
+    flex: 1;
+    grid-gap: $large-spacing;
+    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
+  }
+}
+
+.speaker {
+  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;
+    font-size: 28px;
+    font-family: $seconday-heading-font-family;
+    text-transform: uppercase;
+  }
+
+  a {
+    display: inline-block;
+    flex-shrink: 0;
+  }
+
+  img {
+    @include size(360px);
+    border-radius: 50%;
+    display: block;
+    mix-blend-mode: screen;
+  }
+
+  &:nth-child(2n + 1) img {
+    @include size(290px);
+  }
+
+  a:hover img {
+    mix-blend-mode: inherit;
+    transform: rotate(30deg);
+  }
+}
+
 .commentary {
   word-wrap: break-word;
   font-family: $heading-font-family;
@@ -406,18 +470,18 @@
     font-size: 48px;
   }
 
-    &:before {
-      position: absolute;
-      content: "";
-      display: block;
-      background-image: url(/assets/images/asterisk-2.svg);
-      bottom: -6rem;
-      right: 1rem;
-      @include size(113px, 148px);
-      background-size: contain;
-      background-repeat: no-repeat;
-      z-index: 11;
-    }
+  &:before {
+    position: absolute;
+    content: "";
+    display: block;
+    background-image: url(/assets/images/asterisk-2.svg);
+    bottom: -6rem;
+    right: 1rem;
+    @include size(113px, 148px);
+    background-size: contain;
+    background-repeat: no-repeat;
+    z-index: 11;
+  }
 
   .ilu__container {
     margin: 0 auto;
@@ -434,39 +498,61 @@
 }
 
 .weirdos {
-  background-color: $dark-purple;
-  padding: $base-spacing $large-spacing $large-spacing;
-  position: relative;
-  color: #fff;
+  padding: $x-large-spacing $large-spacing;
+  background-color: $purple;
   overflow: hidden;
-  -webkit-font-smoothing: antialiased;
+  flex-direction: column;
+  position: relative;
 
-  @media (min-width: 1050px) {
-    padding: $base-spacing $xxx-large-spacing $x-large-spacing;
+  .weirdos__container {
+    max-width: 1600px;
+    margin: 0 auto;
   }
 
-  &:after {
-    background-color: $pink;
-    bottom: -140px;
-    content: "";
+  h2 {
+    position: relative;
     display: block;
-    position: absolute;
-    left: -70%;
-    top: 0;
-    transform: skewX(-32deg);
-    width: 100%;
-    z-index: 0;
+    color: $teal;
+    z-index: 5;
+    line-height: 0.9;
+    font-size: 64px;
+
+    @media (min-width: 500px) {
+      font-size: 18vh;
+    }
+
+    &:after {
+      position: absolute;
+      content: "";
+      display: block;
+      background-image: url(/assets/images/weirdos-underline-1.svg);
+      background-size: contain;
+      @include size(336px, 195px);
+      background-repeat: no-repeat;
+      margin-top: -2rem;
+      z-index: 0;
+
+      @media (min-width: 500px) {
+        @include size(668px, 80px);
+      }
+    }
   }
 
-  &:before {
-    background-color: $dark-gray;
-    bottom: -10rem;
+  .center-button {
+    position: relative;
+    z-index: 5;
+    text-align: center;
+  }
+
+  &::after {
+    background-color: $dark-purple;
+    bottom: -140px;
     content: "";
     display: block;
     position: absolute;
-    left: 0%;
-    top: 48%;
-    transform: skewY(3deg);
+    right: 40%;
+    top: 0;
+    transform: skewX(-24deg);
     width: 100%;
     z-index: 0;
   }
@@ -483,13 +569,18 @@
     line-height: 1;
     position: relative;
     font-size: 64px;
+    margin-left: $large-spacing;
     margin-bottom: 6.5rem;
 
     @media (min-width: 500px) {
       font-size: 15vh;
       margin-bottom: 20rem;
     }
 
+    @media (min-width: 1050px) {
+      margin-left: $xxx-large-spacing;
+    }
+
     &:after {
       position: absolute;
       content: "";
@@ -503,7 +594,6 @@
         @include size(336px, 195px);
       }
     }
-
   }
 
   .button {
@@ -520,8 +610,8 @@
       left: 30rem;
     }
     @media (min-width: 1400px) {
-      left: 35rem;
-      top: 14rem;
+      left: 55rem;
+      top: 8rem;
     }
 
     p {

assets/_sass/base/_variables.scss

@@ -33,6 +33,9 @@ $orange: #fd9a59;
 $red: #fd5959;
 $dark-purple: #b657fd;
 $pink: #fa59fd;
+$mint: #b2e76e;
+$flesh: #e7b397;
+$hot-pink: #f43157;
 
 // Font Colors
 $base-font-color: $dark-gray;