From 3ca644241a87171acd230879da1feac8dd4876db Mon Sep 17 00:00:00 2001
From: Kiritan Flux <flux@kopiloten.com>
Date: Mon, 23 Jan 2017 11:15:49 +0100
Subject: [PATCH] nicer layout with dark buttons and topic highlights

---
 6_video.html                     | 15 +++++++++++++--
 7_video_no_header_or_footer.html | 14 ++++++++++++--
 css/video.css                    | 23 +++++++++++++++++++++--
 3 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/6_video.html b/6_video.html
index 7b32af35..2fe133d8 100644
--- a/6_video.html
+++ b/6_video.html
@@ -25,7 +25,7 @@ permalink: /video/
 
 {% assign allTopicsABC = allTopics | sort %}
 
-<div class="content container-fluid">
+<div class="content">
 
   <div class="row">
 
@@ -38,6 +38,14 @@ permalink: /video/
         {% endfor %}
       </div>
 
+    </div>
+  </div>
+
+  <div class="spacer"></div>
+
+  <div class="row">
+    <div class="dark_bg col-md-10 col-md-offset-1">
+
       <div id="video-roster" class="container-fluid">
 
        {% for post in site.posts %}
@@ -47,7 +55,7 @@ permalink: /video/
              {% if talk.topics %}
                {% assign tags = (talk.topics | split:",") %}
              {% endif %}
-           <div class="videobox {% for tag in tags | uniq %}{{tag | strip | replace: " ", "-" | downcase}} {% endfor %}{{post.location | strip | replace: " ", "-" | downcase}} col-sm-3" vimeo="{{vimeo_id}}">
+           <div class="videobox {% for tag in tags | uniq %}{{tag | strip | replace: " ", "-" | downcase}} {% endfor %}{{post.location | strip | replace: " ", "-" | downcase}} col-sm-3 embed-responsive embed-responsive-16by9" vimeo="{{vimeo_id}}">
              <div class="video-title">{{talk.artist}}</div>
              <div class="playbutton"></div>
              <div class="video-description"><h3>{{talk.title}}</h3><p><span class="video-session">#{{ post.number }}</span>: <span class="video-artist">{{talk.artist}}</span> / {{talk.artist_website}} – {{talk.description}}</p></div>
@@ -134,6 +142,7 @@ permalink: /video/
 
      });
      $('#video-roster').isotope({
+       // options
        itemSelector: '.videobox'
      });
      // init Isotope
@@ -143,6 +152,8 @@ permalink: /video/
       $('.filter-button-group').on( 'click', 'button', function() {
         var filterValue = $(this).attr('data-filter');
         $grid.isotope({ filter: filterValue });
+        $('.filter-button-group').find('button').css('background-color', 'black');
+        $(this).css('background-color', '#5a4b68');
       });
    });
  </script>
diff --git a/7_video_no_header_or_footer.html b/7_video_no_header_or_footer.html
index 9a8f4466..98b0fd1e 100644
--- a/7_video_no_header_or_footer.html
+++ b/7_video_no_header_or_footer.html
@@ -25,7 +25,7 @@ permalink: /video_fullscreen/
 
 {% assign allTopicsABC = allTopics | sort %}
 
-<div class="content container-fluid">
+<div class="content-no-header">
 
   <div class="row">
 
@@ -38,7 +38,15 @@ permalink: /video_fullscreen/
         {% endfor %}
       </div>
 
-      <div id="video-roster container-fluid">
+    </div>
+  </div>
+
+  <div class="spacer"></div>
+
+  <div class="row">
+    <div class="dark_bg col-md-10 col-md-offset-1">
+
+      <div id="video-roster" class="container-fluid">
 
        {% for post in site.posts %}
          {% for talk in post.talks %}
@@ -144,6 +152,8 @@ permalink: /video_fullscreen/
       $('.filter-button-group').on( 'click', 'button', function() {
         var filterValue = $(this).attr('data-filter');
         $grid.isotope({ filter: filterValue });
+        $('.filter-button-group').find('button').css('background-color', 'black');
+        $(this).css('background-color', '#5a4b68');
       });
    });
  </script>
diff --git a/css/video.css b/css/video.css
index e020f8e8..991fe966 100644
--- a/css/video.css
+++ b/css/video.css
@@ -1,3 +1,7 @@
+.content-no-header
+{
+  margin-top:-20px;
+}
 
 #video-roster {
   margin:0;
@@ -117,10 +121,25 @@
 }
 
 .filter-button-group{
-  margin: 10px 0;
+  margin: 10px 10px;
 }
 
 .filter-button-group button{
-  color: #000;
+  color: #fff;
   margin-bottom: 4px;
+  background-color: #000;
+  border-radius: 5px;
+  border-color: #000;
+  border-width: 1px;
+}
+
+.filter-button-group button:hover, .filter-button-group button:first-child
+{
+  background-color: #5a4b68;
+  border-color: #5a4b68;
+}
+
+.spacer
+{
+  margin-top:20px;
 }