From 4c47d99f707d9d74c85fa6df204b26b600ec140f Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.sandoy@conmodo.com>
Date: Fri, 12 Apr 2019 08:58:32 +0200
Subject: responsive video container

---
 pydis_site/static/css/base/base.css  | 25 ++++++++++++++-----------
 pydis_site/static/css/home/index.css | 18 ++++++++++++++++++
 pydis_site/templates/home/index.html |  2 +-
 3 files changed, 33 insertions(+), 12 deletions(-)

(limited to 'pydis_site')

diff --git a/pydis_site/static/css/base/base.css b/pydis_site/static/css/base/base.css
index e9b40758..f9c557d5 100644
--- a/pydis_site/static/css/base/base.css
+++ b/pydis_site/static/css/base/base.css
@@ -1,3 +1,17 @@
+html {
+    overflow:auto;
+}
+
+body.site {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+main.site-content {
+  flex: 1;
+}
+
 #django-logo {
   padding-bottom: 2px;
   background: url(https://static.djangoproject.com/img/logos/django-logo-negative.png) no-repeat center;
@@ -18,14 +32,3 @@
 #pydis-text {
     font-weight: bold;
 }
-
-
-body.site {
-  display: flex;
-  min-height: 100vh;
-  flex-direction: column;
-}
-
-main.site-content {
-  flex: 1;
-}
diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css
index 2ead1a12..3516c6a5 100644
--- a/pydis_site/static/css/home/index.css
+++ b/pydis_site/static/css/home/index.css
@@ -46,4 +46,22 @@
     margin-left: 3rem;
 }
 
+.video-container {
+    position: relative;
+    padding-bottom: 56.25%;
+    padding-top: 30px;
+    height: 0;
+    overflow: hidden;
+}
 
+.video-container iframe,
+.video-container object,
+.video-container embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    max-width: 560px;
+    max-height: 315px;
+}
diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html
index 511e05e5..6eb444d2 100644
--- a/pydis_site/templates/home/index.html
+++ b/pydis_site/templates/home/index.html
@@ -29,7 +29,7 @@
             we've got someone who can help you if you get stuck.
           </p>
         </div>
-        <div class="column is-half is-first has-text-centered">
+        <div class="column is-half is-first has-text-centered video-container">
           <iframe width="560" height="315" src="https://www.youtube.com/embed/DIBXg8Qh7bA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
         </div>
       </div>
-- 
cgit v1.2.3