From 4a9a221f5164aaa109995199d9c24653e8b3874e Mon Sep 17 00:00:00 2001
From: Duncan Phillips <duncan@takealot.com>
Date: Wed, 14 Dec 2016 20:56:00 +0200
Subject: [PATCH 1/2] new speaker layout\

---
 _layouts/speakers-by-year.html | 116 ++++++++++++++++++++-------------
 1 file changed, 72 insertions(+), 44 deletions(-)

diff --git a/_layouts/speakers-by-year.html b/_layouts/speakers-by-year.html
index b8b32e9b..a8cacba5 100644
--- a/_layouts/speakers-by-year.html
+++ b/_layouts/speakers-by-year.html
@@ -50,61 +50,89 @@ <h1>Speakers</h1>
 </div>
 {% endif %}
 
-{% for speaker in page_speakers %}
+<style type='text/css'>
+  .speaker-info.hidden { display:none }
+  .speaker-selector.selected { background: #eee }
+</style>
+
+<script type='text/javascript'>
+  function selectSpeaker(name) {
+    var speakers = document.getElementsByClassName('speaker-info');
+    for (var i = 0; i < speakers.length; i++) { speakers[i].classList.add('hidden') }
+    var speaker_selectors = document.getElementsByClassName('speaker-selector');
+    for (var i = 0; i < speaker_selectors.length; i++) { speaker_selectors[i].classList.remove('selected') }
+    document.getElementById(name).classList.remove('hidden')
+    document.getElementById('selector-' + name).classList.add('selected')
+  }
+</script>
 
 <div class="row">
-  <div class="col-md-offset-3 col-md-6 section">
-    <div class="row text-center">
-      <h2>{{ speaker.name }}</h2>
+
+  <div class="col-md-offset-2 col-md-2">
+    <div style='padding:40px 0'>
+    {% for speaker in page_speakers %}
+      <div class='speaker-selector' style='display:block; padding:5px; border-bottom:dashed 1px #eee;' id='selector-{{ speaker.name}}' onClick='selectSpeaker("{{ speaker.name }}")'>
+        <b>{{ speaker.name }}</b><br/>
+        {{ speaker.company}}
+      </div>
+    {% endfor %}
     </div>
-    <div class="row">
-      <div class="col-md-offset-3 col-md-6">
-        <div class="row nested-row">
-          <div class="col-md-4">
-            <img src='/img/speakers/{{speaker.name | slugify | replace: '-', '_'}}.large.jpg' style='display:inline-block; vertical-align:top; margin-right:10px; border-radius:40px; height:80px;'/>
-          </div>
-          <div class="col-md-8">
-            <p>
-              {{ speaker.role }} <br/>
-              {{ speaker.company }} <br/>
-              {% if speaker.twitter %}
-              <p>
-                <a href="https://twitter.com/{{ speaker.twitter }}" class="twitter-follow-button" data-show-count="false">Follow @{{ speaker.twitter }}</a>
-              </p>
-              {% endif %}
-              {% if speaker.github %}
-              <!-- Place this tag where you want the button to render. -->
+  </div>
+
+  <div class="col-md-7">
+    <!-- actual speaker info shown when speaker selected -->
+    {% for speaker in page_speakers %}
+    <div class='speaker-info hidden' id='{{ speaker.name }}'>
+      <div class="row text-center">
+        <h2>{{ speaker.name }}</h2>
+      </div>
+      <div class="row">
+        <div class="col-md-offset-1 col-md-11">
+          <div class="row nested-row">
+            <div class="col-md-4">
+              <img src='/img/speakers/{{speaker.name | slugify | replace: '-', '_'}}.large.jpg' style='display:inline-block; vertical-align:top; margin-right:10px; border-radius:40px; height:80px;'/>
+            </div>
+            <div class="col-md-8">
               <p>
-                <a class="github-button" href="https://github.com/{{ speaker.github }}" aria-label="Follow @{{ speaker.github}} on GitHub">Follow @{{ speaker.github }}</a>
+                {{ speaker.role }} <br/>
+                {{ speaker.company }} <br/>
+                {% if speaker.twitter %}
+                <p>
+                  <a href="https://twitter.com/{{ speaker.twitter }}" class="twitter-follow-button" data-show-count="false">Follow @{{ speaker.twitter }}</a>
+                </p>
+                {% endif %}
+                {% if speaker.github %}
+                <p>
+                  <a class="github-button" href="https://github.com/{{ speaker.github }}" aria-label="Follow @{{ speaker.github}} on GitHub">Follow @{{ speaker.github }}</a>
+                </p>
+                {% endif %}
               </p>
-              {% endif %}
-            </p>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="row nested-row">
-      <div class="col-md-offset-2 col-md-8">
-        <p> {{ speaker.bio }} </p>
+      <div class="row nested-row">
+        <div class="col-md-offset-1 col-md-11">
+          <p> {{ speaker.bio }} </p>
+        </div>
       </div>
-    </div>
-    <div class="row nested-row">
-      <div class="col-md-offset-2 col-md-8">
-        <p>The title of the talk is <i>"{{ speaker.title }}"</i>.</p>
+      <div class="row nested-row">
+        <div class="col-md-offset-1 col-md-11">
+          <p>The title of the talk is <i>"{{ speaker.title }}"</i>.</p>
+        </div>
       </div>
-    </div>
-    <div class="row nested-row">
-      <div class="col-md-offset-2 col-md-8" style="background:#eee; padding:15px;">
-        <p>{{ speaker.abstract}}</p>
+      <div class="row nested-row">
+        <div class="col-md-offset-1 col-md-11" style="background:#eee; padding:15px;">
+          <p>{{ speaker.abstract}}</p>
+        </div>
       </div>
-    </div>
-    {% if speaker.video %}
-    <div class="row nested-row">
-      <div class="col-md-offset-2 col-md-8">
-        <p>The video for this talk is <a target="_blank" href="http://youtube.com/watch?v={{speaker.video}}">available on youtube</a></p>
+      {% if speaker.video %}
+      <div class="row nested-row">
+        <div class="col-md-offset-1 col-md-11">
+          <p>The video for this talk is <a target="_blank" href="http://youtube.com/watch?v={{speaker.video}}">available on youtube</a></p>
+        </div>
       </div>
+      {% endif %}
     </div>
-    {% endif %}
-  </div>
+    {% endfor %}
 </div>
-{% endfor %}

From 63868e9d07967b82e5a8fb6b0174bba96afb4fd5 Mon Sep 17 00:00:00 2001
From: Duncan Phillips <duncan@takealot.com>
Date: Wed, 11 Jan 2017 22:01:33 +0200
Subject: [PATCH 2/2] update to be a bit more responsive

---
 _layouts/speakers-by-year.html | 52 +++++++++++++---------------------
 index.html                     | 18 ++++++------
 2 files changed, 30 insertions(+), 40 deletions(-)

diff --git a/_layouts/speakers-by-year.html b/_layouts/speakers-by-year.html
index a8cacba5..cf2d4ceb 100644
--- a/_layouts/speakers-by-year.html
+++ b/_layouts/speakers-by-year.html
@@ -5,7 +5,7 @@
 <!-- Speakers -->
 
 <div class="row">
-  <div class="col-md-offset-3 col-md-6 text-center section">
+  <div class="col-lg-offset-3 col-lg-6 col-md-12 text-center section">
     <h1>Speakers</h1>
     <p class="big">
       We would like to give a huge thank you to our speakers, they're the reason
@@ -18,7 +18,7 @@ <h1>Speakers</h1>
 <!-- Year Options -->
 
 <div class="row">
-  <div class="col-md-offset-3 col-md-6 text-center section" style="padding-top:40px">
+  <div class="col-lg-offset-3 col-lg-6 col-md-12 text-center section" style="padding-top:40px">
     {% for year in site.data.config.years %}
     {% if year == page.year %}
     <a href="/speakers/{{ year }}" style="margin: 0 10px 0 10px"><b>{{ year }}</b></a>
@@ -35,7 +35,7 @@ <h1>Speakers</h1>
 
 {% if page_speakers.size == 0 %}
 <div class="row">
-  <div class="col-md-offset-4 col-md-4 text-center section">
+  <div class="col-lg-offset-4 col-lg-4 col-md-12 text-center section">
     <p class="big">
       We're still selecting speakers for this year, please check back later to
       see the lineup. If you would like to speak
@@ -50,52 +50,41 @@ <h1>Speakers</h1>
 </div>
 {% endif %}
 
-<style type='text/css'>
-  .speaker-info.hidden { display:none }
-  .speaker-selector.selected { background: #eee }
-</style>
-
-<script type='text/javascript'>
-  function selectSpeaker(name) {
-    var speakers = document.getElementsByClassName('speaker-info');
-    for (var i = 0; i < speakers.length; i++) { speakers[i].classList.add('hidden') }
-    var speaker_selectors = document.getElementsByClassName('speaker-selector');
-    for (var i = 0; i < speaker_selectors.length; i++) { speaker_selectors[i].classList.remove('selected') }
-    document.getElementById(name).classList.remove('hidden')
-    document.getElementById('selector-' + name).classList.add('selected')
-  }
-</script>
-
 <div class="row">
 
-  <div class="col-md-offset-2 col-md-2">
-    <div style='padding:40px 0'>
+  <div class="col-lg-offset-3 col-lg-1 col-md-3">
+    <div style='padding:40px 0' id="side-navigation">
     {% for speaker in page_speakers %}
-      <div class='speaker-selector' style='display:block; padding:5px; border-bottom:dashed 1px #eee;' id='selector-{{ speaker.name}}' onClick='selectSpeaker("{{ speaker.name }}")'>
-        <b>{{ speaker.name }}</b><br/>
-        {{ speaker.company}}
-      </div>
+      <a href="#{{speaker.name | slugify }}">
+        <div class='speaker-selector' style='display:block; padding:5px; border-bottom:dashed 1px #eee;'>
+          <b>{{ speaker.name }}</b><br/>
+          {{ speaker.company}}
+        </div>
+      </a>
     {% endfor %}
     </div>
   </div>
 
-  <div class="col-md-7">
+  <div class="col-lg-5 col-md-9">
     <!-- actual speaker info shown when speaker selected -->
     {% for speaker in page_speakers %}
-    <div class='speaker-info hidden' id='{{ speaker.name }}'>
+    <div id='{{ speaker.name | slugify }}'>
       <div class="row text-center">
         <h2>{{ speaker.name }}</h2>
       </div>
       <div class="row">
         <div class="col-md-offset-1 col-md-11">
-          <div class="row nested-row">
-            <div class="col-md-4">
+          <div class="row nested-row" style="border-bottom: solid 1px #ddd; padding: 10px 0 20px 0; ">
+            <div class="col-md-2">
               <img src='/img/speakers/{{speaker.name | slugify | replace: '-', '_'}}.large.jpg' style='display:inline-block; vertical-align:top; margin-right:10px; border-radius:40px; height:80px;'/>
             </div>
-            <div class="col-md-8">
-              <p>
+            <div class="col-md-6">
+              <p style="padding: 0 10px">
                 {{ speaker.role }} <br/>
                 {{ speaker.company }} <br/>
+              </p>
+            </div>
+            <div class="col-md-4">
                 {% if speaker.twitter %}
                 <p>
                   <a href="https://twitter.com/{{ speaker.twitter }}" class="twitter-follow-button" data-show-count="false">Follow @{{ speaker.twitter }}</a>
@@ -106,7 +95,6 @@ <h2>{{ speaker.name }}</h2>
                   <a class="github-button" href="https://github.com/{{ speaker.github }}" aria-label="Follow @{{ speaker.github}} on GitHub">Follow @{{ speaker.github }}</a>
                 </p>
                 {% endif %}
-              </p>
             </div>
           </div>
         </div>
diff --git a/index.html b/index.html
index 5f84b803..a2b15328 100644
--- a/index.html
+++ b/index.html
@@ -88,15 +88,17 @@ <h2>Previous Speakers</h2>
     </div>
     <div class="row" style='margin-top:20px;'>
       {% for speaker in landing_page_speakers %}
-      <div class="col-md-4" style="height:110px; overflow-y:hidden">
-        <img src='/img/speakers/{{speaker.name | slugify | replace: '-', '_'}}.small.jpg' style='display:inline-block; vertical-align:top; margin-right:10px; border-radius:25px; height:50px;'/>
-        <div style='display:inline-block; width:60%; padding-bottom:10px;'>
-          <p>
-            <b>{{ speaker.name }}</b><br/>
-            {{ speaker.company}}
-          </p>
+      <a href="/speakers/{{ speaker.year }}#{{ speaker.name | slugify }}">
+        <div class="col-md-4" style="height:110px; overflow-y:hidden">
+          <img src='/img/speakers/{{speaker.name | slugify | replace: '-', '_'}}.small.jpg' style='display:inline-block; vertical-align:top; margin-right:10px; border-radius:25px; height:50px;'/>
+          <div style='display:inline-block; width:60%; padding-bottom:10px;'>
+            <p>
+              <b>{{ speaker.name }}</b><br/>
+              {{ speaker.company}}
+            </p>
+          </div>
         </div>
-      </div>
+      </a>
       {% endfor %}
     </div>
     <div class="row text-center">