Adding a schedule

Author: hannahhearth

assets/_sass/_index.scss

@@ -554,17 +554,79 @@
   }
 }
 
-.sponsors, .weirdos {
+.schedule {
+  background-color: $orange;
+
+  h2 {
+    margin-bottom: $large-spacing;
+    color: $mint;
+  }
+
+  h3 {
+    font-size: 48px;
+  }
+
+  h4 {
+    font-size: 34px;
+    color: $hot-pink;
+    letter-spacing: 3px;
+  }
+
+  &__subtitle {
+    color: $dark-purple;
+  }
+
+  &__item {
+    display: grid;
+    grid-template-columns: 15% 1fr;
+    grid-gap: $large-spacing;
+    margin-bottom: $base-spacing;
+
+    &-time {
+      text-align: right;
+    }
+  }
+
+  @media (max-width: 500px) {
+    &__item {
+      grid-template-columns: 10% 1fr;
+    }
+
+    h3 {
+      font-size: 38px;
+    }
+
+    h4 {
+      font-size: 24px;
+    }
+  }
+}
+
+.weirdos .weirdos__container {
+  max-width: 1600px;
+  margin: 0 auto;
+}
+
+.weirdos, .sponsors {
+  &::after {
+    bottom: -140px;
+    content: "";
+    display: block;
+    position: absolute;
+    right: 40%;
+    top: 0;
+    transform: skewX(-24deg);
+    width: 100%;
+    z-index: 0;
+  }
+}
+
+.schedule, .sponsors, .weirdos {
   padding: 15vh $x-large-spacing;
   overflow: hidden;
   flex-direction: column;
   position: relative;
 
-  .weirdos__container {
-    max-width: 1600px;
-    margin: 0 auto;
-  }
-
   h2 {
     position: relative;
     display: block;
@@ -604,18 +666,6 @@
     text-align: center;
   }
 
-  &::after {
-    bottom: -140px;
-    content: "";
-    display: block;
-    position: absolute;
-    right: 40%;
-    top: 0;
-    transform: skewX(-24deg);
-    width: 100%;
-    z-index: 0;
-  }
-
   @media (max-width: 500px) {
     padding: 4.5rem 3rem;
   }

index.html

@@ -160,6 +160,126 @@ <h4>{{ speaker.talk }}</h3>
     <a href="/conduct" class="button">Code of Conduct</a>
   </div>
 </section>
+
+<section class="schedule">
+  <h2>Schedule</h2>
+  <div class="schedule__item">
+    <h3 class="schedule__item-time">9:00</h3>
+    <div class="schedule_item-titles">
+      <h3>Second Breakfast</h3>
+      <h4>registration, coffee, tacos</h4>
+    </div>
+  </div>
+  <div class="schedule__item">
+    <h3 class="schedule__item-time">10:00</h3>
+    <div class="schedule_item-titles">
+      <h3>Opening Remarks</h3>
+      <h4>Absoluely dignified</h4>
+    </div>
+  </div>
+  <div class="schedule__item">
+    <h3 class="schedule__item-time">10:14</h3>
+    <div class="schedule_item-titles">
+      <h3>Keynote: Elle Meredith</h3>
+      <h4>Algorithms to live by and why should we care</h4>
+    </div>
+  </div>
+  <div class="schedule__item">
+    <h3 class="schedule__item-time">11:00</h3>
+    <div class="schedule_item-titles">
+      <h3>Break</h3>
+      <h4>Yeah, it's an awkwardly long break</h4>
+    </div>
+  </div>
+  <div class="schedule__item">
+    <h3 class="schedule__item-time">11:29</h3>
+    <div class="schedule_item-titles">
+      <h3>David Bock</h3>
+      <h4>Ruby Investigation of Orthogonal Latin Squares of Order Ten</h4>
+    </div>
+  </div>
+  <div class="schedule__item">
+    <h3 class="schedule__item-time">12:00</h3>
+    <div class="schedule_item-titles">
+      <h3>Rolen Le</h3>
+      <h4>Dungeons & Collaboration: A Player’s Handbook on How To Work With a
+        Distributed Team</h4>
+    </div>
+  </div>
+  <div class="schedule__item">
+    <h3 class="schedule__item-time">12:30</h3>
+    <div class="schedule_item-titles">
+      <h3>Lunch</h3>
+      <h4>It's Halloween so your food might be extra "organic"</h4>
+    </div>
+  </div>
+  <div class="schedule__item">
+    <h3 class="schedule__item-time">2:00</h3>
+    <div class="schedule_item-titles">
+      <h3>Ben Scofield</h3>
+      <h4>Learning to see</h4>
+    </div>
+  </div>
+  <div class="schedule__item">
+    <h3 class="schedule__item-time">2:30</h3>
+    <div class="schedule_item-titles">
+      <h3>Bradley Grzesiak</h3>
+      <h4>kerbal_space_program.rb</h4>
+    </div>
+  </div>
+  <div class="schedule__item">
+    <h3 class="schedule__item-time">3:02</h3>
+    <div class="schedule_item-titles">
+      <h3>Break</h3>
+      <h4>Time is a flat circle</h4>
+    </div>
+  </div>
+  <div class="schedule__item">
+    <h3 class="schedule__item-time">3:30</h3>
+    <div class="schedule_item-titles">
+      <h3>Cecy Correa</h3>
+      <h4>The Psychology of Fake News (and What Tech Can Do About It)</h4>
+    </div>
+  </div>
+  <div class="schedule__item">
+    <h3 class="schedule__item-time">4:00</h3>
+    <div class="schedule_item-titles">
+      <h3>Chris Arcand</h3>
+      <h4>An Atypical 'Performance' Talk</h4>
+    </div>
+  </div>
+  <div class="schedule__item">
+    <h3 class="schedule__item-time">4:30</h3>
+    <div class="schedule_item-titles">
+      <h3>Hug Break</h3>
+      <h4>We promised and we deliver!</h4>
+    </div>
+  </div>
+  <div class="schedule__item">
+    <h3 class="schedule__item-time">5:00</h3>
+    <div class="schedule_item-titles">
+      <h3>Dave Herman & Yehuda Katz</h3>
+      <h4>We have no idea what they're gonna talk about but we hope it's like
+        synchronized swimmming</h4>
+    </div>
+  </div>
+  <div class="schedule__item">
+    <h3 class="schedule__item-time">5:45</h3>
+    <div class="schedule_item-titles">
+      <h3>Closing Remarks</h3>
+      <h4>We'll play "Closing Time" by Semisonic and shepherd you out like the
+        last wedding you went to</h4>
+    </div>
+  </div>
+  <div class="schedule__item">
+    <h3 class="schedule__item-time">8:00</h3>
+    <div class="schedule_item-titles">
+      <h3>PARTY</h3>
+      <h4>Why you come to conferences</h4>
+    </div>
+  </div>
+</section>
+
 <section class="sponsors">
     <h2>Meet the sponsors</h2>