diff options
| author |  Leon Sandøy <[email protected]> | 2019-04-12 08:58:32 +0200 |
|---|---|---|
| committer | Leon Sandøy <[email protected]> | 2019-04-12 08:58:32 +0200 |
| commit | 4c47d99f707d9d74c85fa6df204b26b600ec140f (patch) | |
| tree | 51befe582de877358022be3d89ca7d30b901eda5 /pydis_site | |
| parent | Fixing the footer. Django logo no longer clips, and matches the rest of the f... (diff) | |
responsive video container
Diffstat (limited to 'pydis_site')
| -rw-r--r-- | pydis_site/static/css/base/base.css | 25 | ||||
| -rw-r--r-- | pydis_site/static/css/home/index.css | 18 | ||||
| -rw-r--r-- | pydis_site/templates/home/index.html | 2 |
3 files changed, 33 insertions, 12 deletions
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> |