diff options
author | 2020-10-23 22:00:27 +1000 | |
---|---|---|
committer | 2020-10-23 22:00:27 +1000 | |
commit | f1ee1f154494728f305381df19d9f293b8667805 (patch) | |
tree | 8368755dbf29ada00cef5cd395282ef09ed4081d | |
parent | Use sections, remove unused CSS, improve repo cards. (diff) |
Fix video aspect in timeline, quote img src urls.
After updating the frontpage and creating an fixed-aspect-ratio style pair, I found I could just reuse them in the timeline to fix the inconsistent responsive aspect ratio that was occurring there.
Some img src values also were not quoted; while this can work fine, it can break if the url has spaces or certain characters and is inconsistent with the rest of the project.
-rw-r--r-- | pydis_site/static/css/home/timeline.css | 14 | ||||
-rw-r--r-- | pydis_site/templates/home/timeline.html | 24 |
2 files changed, 12 insertions, 26 deletions
diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index 07e17e15..89de0887 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -61,20 +61,6 @@ button, input, textarea, select { background-color: #576297 !important; } -.video-container { - position: relative; - width: 100%; - height: 0; - padding-bottom: 75%; -} -.video { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - .pydis-logo-banner { background-color: #7289DA !important; border-radius: 10px; diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html index 54cbdc1b..f3c58fc2 100644 --- a/pydis_site/templates/home/timeline.html +++ b/pydis_site/templates/home/timeline.html @@ -14,7 +14,7 @@ <div class="container max-width-lg cd-timeline__container"> <div class="cd-timeline__block"> <div class="cd-timeline__img cd-timeline__img--picture"> - <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture"> + <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture"> </div> <div class="cd-timeline__content text-component"> @@ -231,8 +231,8 @@ <div class="cd-timeline__content text-component"> <h2>PyDis hits 15,000 members; the “hot ones special” video is released</h2> - <div class="video-container"> - <iframe class="video" src="https://www.youtube.com/embed/DIBXg8Qh7bA" frameborder="0" + <div class="force-aspect-container"> + <iframe class="force-aspect-content" src="https://www.youtube.com/embed/DIBXg8Qh7bA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> @@ -319,8 +319,8 @@ developers join us to judge the event and help out our members during the event. One of them, @tshirtman, even joins our staff!</p> - <div class="video-container"> - <iframe class="video" src="https://www.youtube.com/embed/8fbZsGrqBzo" frameborder="0" + <div class="force-aspect-container"> + <iframe class="force-aspect-content" src="https://www.youtube.com/embed/8fbZsGrqBzo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> @@ -377,8 +377,8 @@ Several of the Code Jam participants also end up getting involved contributing to the Arcade repository.</p> - <div class="video-container"> - <iframe class="video" src="https://www.youtube.com/embed/KkLXMvKfEgs" frameborder="0" + <div class="force-aspect-container"> + <iframe class="force-aspect-content" src="https://www.youtube.com/embed/KkLXMvKfEgs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> @@ -450,8 +450,8 @@ Code Jam for 2020 attracts hundreds of participants, and sees the creation of some fantastic projects. Check them out in our judge stream below:</p> - <div class="video-container"> - <iframe class="video" src="https://www.youtube.com/embed/OFtm8f2iu6c" frameborder="0" + <div class="force-aspect-container"> + <iframe class="force-aspect-content" src="https://www.youtube.com/embed/OFtm8f2iu6c" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> @@ -481,13 +481,13 @@ <div class="cd-timeline__block"> <div class="cd-timeline__img cd-timeline__img--picture"> - <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture"> + <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture"> </div> <div class="cd-timeline__content text-component"> <h2>Python Discord hosts the 2020 CPython Core Developer Q&A</h2> - <div class="video-container"> - <iframe class="video" src="https://www.youtube.com/embed/gXMdfBTcOfQ" frameborder="0" + <div class="force-aspect-container"> + <iframe class="force-aspect-content" src="https://www.youtube.com/embed/gXMdfBTcOfQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> |