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.

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>