From b3e502a076524b0ea50fb37bdbfdac95996050d8 Mon Sep 17 00:00:00 2001
From: ines <ines@ines.io>
Date: Mon, 13 Nov 2017 08:29:57 +0100
Subject: [PATCH] Add videos section to resources

---
 website/_harp.json                     |  2 +-
 website/_includes/_mixins.jade         |  8 ++++++++
 website/assets/css/_base/_objects.sass | 16 ++++++++++++++++
 website/usage/_data.json               |  1 +
 website/usage/resources.jade           |  5 +++++
 5 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/website/_harp.json b/website/_harp.json
index 7edad1b0c..7da11afa4 100644
--- a/website/_harp.json
+++ b/website/_harp.json
@@ -82,7 +82,7 @@
             }
         ],
 
-        "V_CSS": "2.0.0",
+        "V_CSS": "2.0.1",
         "V_JS": "2.0.1",
         "DEFAULT_SYNTAX": "python",
         "ANALYTICS": "UA-58931649-1",
diff --git a/website/_includes/_mixins.jade b/website/_includes/_mixins.jade
index c6f605cbc..158668de5 100644
--- a/website/_includes/_mixins.jade
+++ b/website/_includes/_mixins.jade
@@ -312,6 +312,14 @@ mixin github(repo, file, height, alt_file, language)
                 +button(gh(repo, alt_file || file), false, "primary", "small") View on GitHub
 
 
+//- Youtube video embed
+    id    - [string] ID of YouTube video.
+    ratio - [string] Video ratio, "16x9" or "4x3".
+
+mixin youtube(id, ratio)
+    figure.o-video.o-block(class="o-video--" + (ratio || "16x9"))
+        iframe.o-video__iframe(src="https://www.youtube.com/embed/#{id}" frameborder="0" height="500" allowfullscreen)
+
 
 //- Images / figures
     url     - [string] url or path to image
diff --git a/website/assets/css/_base/_objects.sass b/website/assets/css/_base/_objects.sass
index de5b4a322..b8a20f5dd 100644
--- a/website/assets/css/_base/_objects.sass
+++ b/website/assets/css/_base/_objects.sass
@@ -177,6 +177,22 @@
     border-radius: $border-radius
 
 
+//- Responsive Video embeds
+
+.o-video
+    position: relative
+    height: 0
+
+    @each $ratio1, $ratio2 in (16, 9), (4, 3)
+        &.o-video--#{$ratio1}x#{$ratio2}
+            padding-bottom: (100% * $ratio2 / $ratio1)
+
+.o-video__iframe
+    @include position(absolute, top, left, 0, 0)
+    @include size(100%)
+    border-radius: var(--border-radius)
+
+
 //- Form fields
 
 .o-field
diff --git a/website/usage/_data.json b/website/usage/_data.json
index a736af02f..6dd2a66a8 100644
--- a/website/usage/_data.json
+++ b/website/usage/_data.json
@@ -166,6 +166,7 @@
             "Demos & Visualizations": "demos",
             "Books & Courses": "books",
             "Jupyter Notebooks": "notebooks",
+            "Videos": "videos",
             "Research": "research"
         }
     },
diff --git a/website/usage/resources.jade b/website/usage/resources.jade
index 0e53c900a..d6afcd82f 100644
--- a/website/usage/resources.jade
+++ b/website/usage/resources.jade
@@ -114,6 +114,11 @@ include ../_includes/_mixins
     .u-text-right
         +button(gh("spacy-notebooks"), false, "primary", "small") See more notebooks on GitHub
 
++section("videos")
+    +h(2, "videos") Videos
+
+    +youtube("sqDHBH9IjRU")
+
 +section("research")
     +h(2, "research") Research systems